a

Elliot-32 · Nov 27, 2024 · 9504fe0 · 9504fe0
1 parent cca96ac
commit 9504fe0
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 43 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/widget/DisplaySettings.svelte b/src/components/widget/DisplaySettings.svelte
@@ -42,50 +42,60 @@ $: if (hue || hue === 0) {
     </div>
 </div>
 
-
 <style lang="stylus">
-  #display-setting
-    input[type="range"]
-      -webkit-appearance: none;
-      height: 1.5rem;
-      background-image: var(--color-selection-bar)
-      transition: background-image 0.15s ease-in-out
+#display-setting {
+  input[type="range"] {
+    -webkit-appearance: none;
+    height: 1.5rem;
+    background-image: var(--color-selection-bar);
+    transition: background-image 0.15s ease-in-out;
+  }
 
-    /* Input Thumb */
-    ::-webkit-slider-thumb
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 0.5rem;
-      border-radius: 0.125rem;
-      background: rgba(255, 255, 255, 0.7);
-      box-shadow: none;
-      &:hover
-        background: rgba(255, 255, 255, 0.8);
-      &:active
-        background: rgba(255, 255, 255, 0.6);
+  /* Input Thumb */
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 1rem;
+    width: 0.5rem;
+    border-radius: 0.125rem;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: none;
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+    &:active {
+      background: rgba(255, 255, 255, 0.6);
+    }
+  }
 
-    ::-moz-range-thumb
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 0.5rem;
-      border-radius: 0.125rem;
-      border-width: 0
-      background: rgba(255, 255, 255, 0.7);
-      box-shadow: none;
-      &:hover
-        background: rgba(255, 255, 255, 0.8);
-      &:active
-        background: rgba(255, 255, 255, 0.6);
+  input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    height: 1rem;
+    width: 0.5rem;
+    border-radius: 0.125rem;
+    border-width: 0;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: none;
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+    &:active {
+      background: rgba(255, 255, 255, 0.6);
+    }
+  }
 
-    &::-ms-thumb
-      -webkit-appearance: none;
-      height: 1rem;
-      width: 0.5rem;
-      border-radius: 0.125rem;
-      background: rgba(255, 255, 255, 0.7);
-      box-shadow: none;
-      &:hover
-        background: rgba(255, 255, 255, 0.8);
-      &:active
-        background: rgba(255, 255, 255, 0.6);
+  input[type="range"]::-ms-thumb {
+    -webkit-appearance: none;
+    height: 1rem;
+    width: 0.5rem;
+    border-radius: 0.125rem;
+    background: rgba(255, 255, 255, 0.7);
+    box-shadow: none;
+    &:hover {
+      background: rgba(255, 255, 255, 0.8);
+    }
+    &:active {
+      background: rgba(255, 255, 255, 0.6);
+    }
+  }
+}
 </style>