From 71d75f4fae350b018044fcbf9131ff28d9aa408e Mon Sep 17 00:00:00 2001
From: vapormusic <vietanhfat@gmail.com>
Date: Wed, 8 Dec 2021 22:21:03 +0700
Subject: [PATCH] change appearance of the alt volume slider

---
 resources/cider-ui-tests/style.css      | 14 ++++++++++++++
 resources/cider-ui-tests/views/main.ejs |  2 +-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/resources/cider-ui-tests/style.css b/resources/cider-ui-tests/style.css
index a394fba4..cb1df0bd 100644
--- a/resources/cider-ui-tests/style.css
+++ b/resources/cider-ui-tests/style.css
@@ -713,6 +713,20 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
     display: none !important;
 }
 
+.web-slider.display--small{
+    margin: 10px;
+}
+
+input[type="range"].web-slider.display--small::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 14px;
+    width: 14px;
+    border-radius: 50%;
+    background: rgb(50 50 50);
+    cursor: default;
+    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.4);
+}
+
 /* Window is smaller <= 1023px width */
 @media only screen and (max-width: 1023px) {
     .display--small {
diff --git a/resources/cider-ui-tests/views/main.ejs b/resources/cider-ui-tests/views/main.ejs
index 991db20d..4a1c522e 100644
--- a/resources/cider-ui-tests/views/main.ejs
+++ b/resources/cider-ui-tests/views/main.ejs
@@ -168,7 +168,7 @@
                         </div>
                     </transition>
                     <div class="app-sidebar-footer">
-                        <input type="range" class="display--small" step="0.01" min="0" max="1" v-model="mk.volume"
+                        <input type="range" class="web-slider display--small" step="0.01" min="0" max="1" v-model="mk.volume"
                         v-if="typeof mk.volume != 'undefined'">
                         <button class="app-sidebar-button" style="width:100%"
                             @click="chrome.menuOpened = !chrome.menuOpened">