From 2ce99b969d8883b69a9a5c8be5f6ea53c0368310 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Fri, 12 Aug 2022 10:25:58 +0200
Subject: [PATCH] Fix the look of volume slider on Firefox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
---
 .../VideoTileSettingsModal.module.css         | 65 +++++++++++++------
 1 file changed, 44 insertions(+), 21 deletions(-)

diff --git a/src/video-grid/VideoTileSettingsModal.module.css b/src/video-grid/VideoTileSettingsModal.module.css
index eb6cec8..09a4b07 100644
--- a/src/video-grid/VideoTileSettingsModal.module.css
+++ b/src/video-grid/VideoTileSettingsModal.module.css
@@ -23,6 +23,14 @@
   -webkit-appearance: none;
   appearance: none;
 
+  background-color: transparent;
+  --slider-color: var(--quinary-content);
+  --slider-height: 4px;
+  --thumb-color: var(--accent);
+  --thumb-radious: 100%;
+  --thumb-size: 16px;
+  --thumb-margin-top: -6px;
+
   cursor: pointer;
   width: 100%;
 }
@@ -31,51 +39,66 @@
   -moz-appearance: none;
   appearance: none;
 
-  height: 4px;
+  background-color: var(--slider-color);
+  height: var(--slider-height);
 }
 .localVolumeSlider[type="range"]::-ms-track {
   -ms-appearance: none;
   appearance: none;
 
-  height: 4px;
+  background-color: var(--slider-color);
+  height: var(--slider-height);
 }
 .localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
   -webkit-appearance: none;
   appearance: none;
 
-  height: 4px;
+  background-color: var(--slider-color);
+  height: var(--slider-height);
 }
 
 .localVolumeSlider[type="range"]::-moz-range-thumb {
   -moz-appearance: none;
   appearance: none;
 
-  height: 16px;
-  width: 16px;
-  margin-top: -6px;
-
-  border-radius: 100%;
-  background: var(--accent);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radious);
+  background: var(--thumb-color);
 }
 .localVolumeSlider[type="range"]::-ms-thumb {
   -ms-appearance: none;
   appearance: none;
 
-  height: 16px;
-  width: 16px;
-  margin-top: -6px;
-
-  border-radius: 100%;
-  background: var(--accent);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radious);
+  background: var(--thumb-color);
 }
 .localVolumeSlider[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
 
-  height: 16px;
-  width: 16px;
-  margin-top: -6px;
-
-  border-radius: 100%;
-  background: var(--accent);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radious);
+  background: var(--thumb-color);
+}
+
+.localVolumeSlider[type="range"]::-moz-range-progress {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--slider-height);
+  background: var(--thumb-color);
+}
+.localVolumeSlider[type="range"]::-ms-fill-lower {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--slider-height);
+  background: var(--thumb-color);
 }