From 3f8abb892416855e89a496abaff17c1e1a3b8735 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Sat, 2 Dec 2023 20:34:51 +0100
Subject: [PATCH] static: fix rangeinput style for firefox

---
 static/flexbox/index.html     |  2 +-
 static/flexbox/rangeinput.css | 32 +++++++++++++++++++-------------
 static/flexbox/sanic.css      |  2 ++
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 009c080..7d6315f 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -52,7 +52,7 @@
         </div>
         <div id="volume-control">
           <label for="volume"></label>
-          <input id="volume" name="volume" type="range" min="1" max="100">
+          <input id="volume" name="volume" type="range" min="1" max="100" value="50">
         </div>
       </div>
       <div class="track-info">
diff --git a/static/flexbox/rangeinput.css b/static/flexbox/rangeinput.css
index 73a4ffd..2f554d6 100644
--- a/static/flexbox/rangeinput.css
+++ b/static/flexbox/rangeinput.css
@@ -20,7 +20,6 @@ input[type="range"]:focus {
 /* slider track */
 input[type="range"]::-webkit-slider-runnable-track {
   height: 5px;
-  width: 70px;
   border: 1px solid #1a2445;
   border-right-color: #3a506b;
   border-bottom-color: #3a506b;
@@ -45,18 +44,21 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]:focus::-webkit-slider-thumb {
- border: 1px solid #21110f;
- border-right-color: #812b25;
- border-bottom-color: #812b25;
+  border: 1px solid #21110f;
+  border-right-color: #812b25;
+  border-bottom-color: #812b25;
 }
 
 /******** Firefox styles ********/
 
 /* slider track */
 input[type="range"]::-moz-range-track {
-  background-color: #053a5f;
-  border-radius: 0.5rem;
-  height: 0.5rem;
+  height: 5px;
+  border: 1px solid #1a2445;
+  border-right-color: #3a506b;
+  border-bottom-color: #3a506b;
+  background-color: #2e2e27;
+  background-repeat: repeat-x;
 }
 
 /* slider thumb */
@@ -65,13 +67,17 @@ input[type="range"]::-moz-range-thumb {
   border-radius: 0; /*Removes default border-radius that FF applies*/
 
   /* custom styles */
-  background-color: #5cd5eb;
-  height: 2rem;
-  width: 1rem;
+  height: 11px;
+  margin-top: -4px;
+  width: 5px;
+  background: #640000;
+  border: 1px solid #812b25;
+  border-right-color: #21110f;
+  border-bottom-color: #21110f;
 }
 
 input[type="range"]:focus::-moz-range-thumb {
- border: 1px solid #053a5f;
- outline: 3px solid #053a5f;
- outline-offset: 0.125rem;
+  border: 1px solid #053a5f;
+  outline: 3px solid #053a5f;
+  outline-offset: 0.125rem;
 }
diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 7d77655..42341a7 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -120,10 +120,12 @@ td.playing {
 
 #progress {
   margin-left: 10px;
+  width: 90%;
 }
 
 #volume {
   margin-left: 10px;
+  width: 90%;
 }
 
 #queue-volume-controls {