fix: volume slider style on firefox

kennethnym · Jul 21, 2024 · a39a704 · a39a704
1 parent abcfd50
commit a39a704
Showing 1 changed file with 29 additions and 0 deletions.
diff --git a/web/style.css b/web/style.css
@@ -139,6 +139,7 @@ main {
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   input[type="range"] {
     overflow: hidden;
+    height: var(--range-height);
     -webkit-appearance: none;
     border: 2px solid var(--text);
     background-color: var(--base);
@@ -160,6 +161,34 @@ main {
   }
 }
 
+input[type="range"]::-moz-range-progress {
+  border: none;
+  height: var(--range-height);
+  background-color: var(--range-accent);
+}
+
+input[type="range"]::-moz-range-track {
+  border: none;
+  background-color: var(--base);
+}
+
+input[type="range"]::-moz-range-thumb {
+  appearance: none;
+  border: none;
+  border-radius: 0;
+  width: var(--range-height);
+  height: var(--range-height);
+  background-color: var(--text);
+}
+
+/* IE*/
+input[type="range"]::-ms-fill-lower {
+  background-color: var(--range-accent);
+}
+input[type="range"]::-ms-fill-upper {
+  background-color: var(--base);
+}
+
 .button {
   border: 2px solid var(--text);
   background: var(--base);