From 7728e937bf2506e49204e432fb07a43f453c8c8a Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Fri, 14 Feb 2025 16:45:40 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/14085

---
 app/src/assets/scss/component/_slider.scss | 28 ++++++++++++++++++----
 app/src/assets/scss/protyle/_protyle.scss  |  6 +++++
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/app/src/assets/scss/component/_slider.scss b/app/src/assets/scss/component/_slider.scss
index 48718154b..1150a39b6 100644
--- a/app/src/assets/scss/component/_slider.scss
+++ b/app/src/assets/scss/component/_slider.scss
@@ -5,15 +5,19 @@
   background-color: transparent;
   padding: 0 4px;
 
-  &::-webkit-slider-runnable-track,
+  &::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
+    height: 2px;
+    background-color: var(--b3-theme-primary-lighter);
+  }
+
   &::-moz-range-track {
     -webkit-appearance: none;
     height: 2px;
     background-color: var(--b3-theme-primary-lighter);
   }
 
-  &::-webkit-slider-thumb,
-  &::-moz-range-thumb {
+  &::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 10px;
     height: 10px;
@@ -25,11 +29,27 @@
     transition: transform 100ms ease-out;
   }
 
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    width: 10px;
+    height: 10px;
+    border-radius: var(--b3-border-radius-b);
+    cursor: pointer;
+    background-color: var(--b3-theme-primary);
+    margin-top: -4px;
+    box-shadow: var(--b3-point-shadow);
+    transition: transform 100ms ease-out;
+    border: 0;
+  }
+
   &:focus,
   &:hover {
     outline: none;
 
-    &::-webkit-slider-thumb,
+    &::-webkit-slider-thumb {
+      transform: scale(1.5);
+    }
+
     &::-moz-range-thumb {
       transform: scale(1.5);
     }
diff --git a/app/src/assets/scss/protyle/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
index c46c49162..f034b3fcb 100644
--- a/app/src/assets/scss/protyle/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -61,6 +61,12 @@
         background-color: var(--b3-border-color);
         box-shadow: none;
       }
+
+      &::-moz-range-track,
+      &::-moz-range-thumb {
+        background-color: var(--b3-border-color);
+        box-shadow: none;
+      }
     }
   }
 }