[web] Move styles in the components

web-src/src/components/BaseModal.vue

@@ -35,3 +35,20 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
+</style>

web-src/src/components/ControlSlider.vue

@@ -32,3 +32,113 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+@use 'bulma/bulma';
+@use 'bulma/sass/utilities/mixins';
+
+@mixin thumb {
+  -webkit-appearance: none;
+  width: var(--th);
+  height: var(--th);
+  box-sizing: border-box;
+  border-radius: 50%;
+  background: var(--bulma-light);
+  border: 1px solid var(--bulma-grey-lighter);
+  @media (prefers-color-scheme: dark) {
+    background: var(--bulma-grey-lighter);
+    border: 1px solid var(--bulma-grey-dark);
+  }
+}
+
+@mixin thumb-inactive {
+  box-sizing: border-box;
+  background-color: var(--bulma-light);
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--bulma-grey-dark);
+    border: 1px solid var(--bulma-grey-darker);
+  }
+}
+
+@mixin track {
+  height: calc(var(--sh));
+  border-radius: calc(var(--sh) / 2);
+  background: linear-gradient(
+    90deg,
+    var(--bulma-dark) var(--sx),
+    var(--bulma-grey-lighter) var(--sx)
+  );
+  @media (prefers-color-scheme: dark) {
+    background: linear-gradient(
+      90deg,
+      var(--bulma-grey-lighter) var(--sx),
+      var(--bulma-grey-dark) var(--sx)
+    );
+  }
+}
+
+@mixin track-inactive {
+  background: linear-gradient(
+    90deg,
+    var(--bulma-grey-light) var(--sx),
+    var(--bulma-light) var(--sx)
+  );
+  @media (prefers-color-scheme: dark) {
+    background: linear-gradient(
+      90deg,
+      var(--bulma-grey-dark) var(--sx),
+      var(--bulma-black-ter) var(--sx)
+    );
+  }
+}
+
+input[type='range'].slider {
+  --sh: 0.25rem;
+  --th: calc(var(--sh) * 4);
+  background-color: transparent;
+  @include mixins.mobile {
+    --th: calc(var(--sh) * 5);
+  }
+  & {
+    --sx: calc(var(--th) / 2 + (var(--ratio) * (100% - var(--th))));
+    -webkit-appearance: none;
+    min-width: 250px;
+    height: calc(var(--sh) * 5);
+    width: 100% !important;
+    cursor: grab;
+  }
+  &:active {
+    cursor: grabbing;
+  }
+  &::-webkit-slider-thumb {
+    @include thumb;
+    & {
+      margin-top: calc((var(--th) - var(--sh)) / -2);
+    }
+  }
+  &::-moz-range-thumb {
+    @include thumb;
+  }
+  &::-webkit-slider-runnable-track {
+    @include track;
+  }
+  &::-moz-range-track {
+    @include track;
+  }
+  &.is-inactive {
+    cursor: var(--cursor, not-allowed);
+    &::-webkit-slider-thumb {
+      @include thumb-inactive;
+    }
+    &::-webkit-slider-runnable-track {
+      @include track-inactive;
+    }
+    &::-moz-range-thumb {
+      @include thumb-inactive;
+    }
+    &::-moz-range-track {
+      @include track-inactive;
+    }
+  }
+}
+</style>

web-src/src/components/ListItemQueueItem.vue

@@ -5,7 +5,7 @@
   >
     <div v-if="edit_mode" class="media-left">
       <mdicon
-        class="icon has-text-grey fd-is-movable"
+        class="icon has-text-grey is-movable"
         name="drag-horizontal"
         size="18"
       />
@@ -80,3 +80,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.is-movable {
+  cursor: move;
+}
+</style>

web-src/src/components/ListTracksSpotify.vue

@@ -5,7 +5,7 @@
         class="media-content"
         :class="{
           'is-clickable': item.is_playable,
-          'fd-is-not-allowed': !item.is_playable
+          'is-not-allowed': !item.is_playable
         }"
         @click="play(item)"
       >
@@ -82,3 +82,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.is-not-allowed {
+  cursor: not-allowed;
+}
+</style>

web-src/src/mystyles.scss

@@ -3,14 +3,6 @@
 @use 'bulma/bulma';
 @use 'bulma/sass/utilities/mixins';
 
-.fd-is-not-allowed {
-  cursor: not-allowed;
-}
-
-.fd-is-movable {
-  cursor: move;
-}
-
 .fd-tabs-section {
   padding-bottom: 0;
   padding-top: 0;
@@ -93,22 +85,6 @@
   padding-top: 1rem;
 }
 
-/* Transition effect */
-.fade-leave-active {
-  transition: opacity 0.2s ease;
-}
-.fade-enter-active {
-  transition: opacity 0.5s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-.fade-enter-to,
-.fade-leave-from {
-  opacity: 1;
-}
-
 /* Only scroll content if modal contains a card component */
 .modal-content .card-content {
   max-height: calc(100vh - calc(4 * var(--bulma-navbar-height)));
@@ -169,109 +145,3 @@
   max-height: calc(100vh - calc(2 * var(--bulma-navbar-height)));
   overflow: auto;
 }
-
-/* Slider */
-@mixin thumb {
-  -webkit-appearance: none;
-  width: var(--th);
-  height: var(--th);
-  box-sizing: border-box;
-  border-radius: 50%;
-  background: var(--bulma-light);
-  border: 1px solid var(--bulma-grey-lighter);
-  @media (prefers-color-scheme: dark) {
-    background: var(--bulma-grey-lighter);
-    border: 1px solid var(--bulma-grey-dark);
-  }
-}
-
-@mixin thumb-inactive {
-  box-sizing: border-box;
-  background-color: var(--bulma-light);
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--bulma-grey-dark);
-    border: 1px solid var(--bulma-grey-darker);
-  }
-}
-
-@mixin track {
-  height: calc(var(--sh));
-  border-radius: calc(var(--sh) / 2);
-  background: linear-gradient(
-    90deg,
-    var(--bulma-dark) var(--sx),
-    var(--bulma-grey-lighter) var(--sx)
-  );
-  @media (prefers-color-scheme: dark) {
-    background: linear-gradient(
-      90deg,
-      var(--bulma-grey-lighter) var(--sx),
-      var(--bulma-grey-dark) var(--sx)
-    );
-  }
-}
-
-@mixin track-inactive {
-  background: linear-gradient(
-    90deg,
-    var(--bulma-grey-light) var(--sx),
-    var(--bulma-light) var(--sx)
-  );
-  @media (prefers-color-scheme: dark) {
-    background: linear-gradient(
-      90deg,
-      var(--bulma-grey-dark) var(--sx),
-      var(--bulma-black-ter) var(--sx)
-    );
-  }
-}
-
-input[type='range'].slider {
-  --sh: 0.25rem;
-  --th: calc(var(--sh) * 4);
-  background-color: transparent;
-  @include mixins.mobile {
-    --th: calc(var(--sh) * 5);
-  }
-  & {
-    --sx: calc(var(--th) / 2 + (var(--ratio) * (100% - var(--th))));
-    -webkit-appearance: none;
-    min-width: 250px;
-    height: calc(var(--sh) * 5);
-    width: 100% !important;
-    cursor: grab;
-  }
-  &:active {
-    cursor: grabbing;
-  }
-  &::-webkit-slider-thumb {
-    @include thumb;
-    & {
-      margin-top: calc((var(--th) - var(--sh)) / -2);
-    }
-  }
-  &::-moz-range-thumb {
-    @include thumb;
-  }
-  &::-webkit-slider-runnable-track {
-    @include track;
-  }
-  &::-moz-range-track {
-    @include track;
-  }
-  &.is-inactive {
-    cursor: var(--cursor, not-allowed);
-    &::-webkit-slider-thumb {
-      @include thumb-inactive;
-    }
-    &::-webkit-slider-runnable-track {
-      @include track-inactive;
-    }
-    &::-moz-range-thumb {
-      @include thumb-inactive;
-    }
-    &::-moz-range-track {
-      @include track-inactive;
-    }
-  }
-}