[web] Simplify styling

web-src/src/components/ControlSlider.vue

@@ -6,9 +6,6 @@
     :class="{ 'is-inactive': disabled }"
     :max="max"
     type="range"
-    :style="{
-      '--ratio': ratio
-    }"
     @input="$emit('update:value', $event.target.valueAsNumber)"
   />
 </template>
@@ -33,7 +30,6 @@ export default {
 
 <style lang="scss" scoped>
 @use 'bulma/sass/utilities/mixins';
-
 @mixin thumb {
   -webkit-appearance: none;
   width: var(--th);
@@ -47,7 +43,6 @@ export default {
     border: 1px solid var(--bulma-grey-dark);
   }
 }
-
 @mixin thumb-inactive {
   box-sizing: border-box;
   background-color: var(--bulma-light);
@@ -56,7 +51,6 @@ export default {
     border: 1px solid var(--bulma-grey-darker);
   }
 }
-
 @mixin track {
   height: calc(var(--sh));
   border-radius: calc(var(--sh) / 2);
@@ -73,7 +67,6 @@ export default {
     );
   }
 }
-
 @mixin track-inactive {
   background: linear-gradient(
     90deg,
@@ -88,8 +81,8 @@ export default {
     );
   }
 }
-
 input[type='range'].slider {
+  --ratio: v-bind(ratio);
   --sh: 0.25rem;
   --th: calc(var(--sh) * 4);
   background-color: transparent;

web-src/src/components/ControlSwitch.vue

@@ -32,7 +32,6 @@ export default {
 .toggle {
   cursor: pointer;
   display: inline-block;
-
   &-switch {
     display: inline-block;
     background: var(--bulma-grey-lighter);
@@ -43,7 +42,6 @@ export default {
     vertical-align: middle;
     transition: background 0.25s;
     margin-right: 0.5rem;
-
     &:before {
       content: '';
       display: block;
@@ -57,14 +55,11 @@ export default {
       transition: left 0.25s;
     }
   }
-
   &:hover &-switch:before {
     background: var(--bulma-white);
   }
-
   &-checkbox {
     position: absolute;
-
     &:checked + .toggle-switch {
       background: var(--bulma-dark);
 

web-src/src/templates/ContentWithHeading.vue

@@ -60,9 +60,3 @@ export default {
   }
 }
 </script>
-
-<style scope>
-section:not(.tabs-section) + section {
-  padding-top: 0;
-}
-</style>