[web] Change cursor visuals when no operation is allowed on slider

The default cursor of the browser is now overridden by another icon from Material Design Icons.

web-src/src/components/NavbarItemOutput.vue

@@ -26,7 +26,10 @@
               :class="{ 'is-inactive': !output.selected }"
               max="100"
               type="range"
-              :style="{ '--ratio': volume / 100 }"
+              :style="{
+                '--ratio': volume / 100,
+                '--cursor': $filters.cursor(this.cursor)
+              }"
               @change="change_volume"
             />
           </div>
@@ -37,6 +40,7 @@
 </template>
 
 <script>
+import { mdiCancel } from '@mdi/js'
 import webapi from '@/webapi'
 
 export default {
@@ -46,7 +50,8 @@ export default {
 
   data() {
     return {
-      volume: this.output.selected ? this.output.volume : 0
+      volume: this.output.selected ? this.output.volume : 0,
+      cursor: mdiCancel
     }
   },
 

web-src/src/filter/index.js

@@ -66,5 +66,11 @@ export const filters = {
       return ''
     }
     return t('filter.channels', { value })
+  },
+
+  cursor(path, size = 20) {
+    const viewbox = 24
+    const center = size / 2
+    return `url(\"data:image/svg+xml,%3Csvg width='${size}' height='${size}' viewBox='0 0 ${viewbox} ${viewbox}' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='${path}'/%3E%3C/svg%3E\") ${center} ${center}, auto`
   }
 }

web-src/src/mystyles.scss

@@ -281,7 +281,7 @@ input[type='range'].slider {
     @include track;
   }
   &.is-inactive {
-    cursor: not-allowed;
+    cursor: var(--cursor, not-allowed);
     &::-webkit-slider-thumb {
       box-sizing: border-box;
       background-color: $light;

web-src/src/pages/PageNowPlaying.vue

@@ -15,7 +15,10 @@
           type="range"
           class="slider mt-5"
           :class="{ 'is-inactive': is_live }"
-          :style="{ '--ratio': track_progress_ratio }"
+          :style="{
+            '--ratio': track_progress_ratio,
+            '--cursor': $filters.cursor(this.cursor)
+          }"
           :disabled="is_live"
           @change="seek"
           @mousedown="start_dragging"
@@ -55,8 +58,9 @@
 </template>
 
 <script>
-import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
+import { mdiCancel } from '@mdi/js'
+import ModalDialogQueueItem from '@/components/ModalDialogQueueItem.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
@@ -71,6 +75,7 @@ export default {
 
   data() {
     return {
+      cursor: mdiCancel,
       INTERVAL,
       interval_id: 0,
       is_dragged: false,