From 9504fe0214d299362c5f5efb9b42e75630de1d18 Mon Sep 17 00:00:00 2001
From: Elliot-32 <chengzhe.liu@outlook.com>
Date: Wed, 27 Nov 2024 23:03:08 +0800
Subject: [PATCH] a

---
 pnpm-lock.yaml                               |  2 +-
 src/components/widget/DisplaySettings.svelte | 94 +++++++++++---------
 2 files changed, 53 insertions(+), 43 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b79086e..8692153 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -94,7 +94,7 @@ importers:
         specifier: ^2.13.1
         version: 2.13.1
       sharp:
-        specifier: ^0.33.0
+        specifier: ^0.33.5
         version: 0.33.5
       svelte:
         specifier: ^5.2.9
diff --git a/src/components/widget/DisplaySettings.svelte b/src/components/widget/DisplaySettings.svelte
index 748f647..33f41f8 100644
--- 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>