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 1/4] 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 {

From 7c1089197faa904ffe1c83743a4f516dd8dd689d Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Sat, 2 Dec 2023 20:35:23 +0100
Subject: [PATCH 2/4] static: fix button style for firefox

---
 static/flexbox/sanic.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 42341a7..61bb936 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -15,6 +15,11 @@ div {
 button {
   background-color: #28374a;
   color: #bbb;
+
+  border-left-color: #545454;
+  border-top-color: #545454;
+  border-right-color: #3a3a3a;
+  border-bottom-color: #3A3A3A;
 }
 
 input {

From f8ab9ae20b779bf904950e6e9ca1eaaf2b134a86 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Sat, 2 Dec 2023 20:36:55 +0100
Subject: [PATCH 3/4] static: fix text input style for firefox

---
 static/flexbox/sanic.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/static/flexbox/sanic.css b/static/flexbox/sanic.css
index 61bb936..15773e7 100644
--- a/static/flexbox/sanic.css
+++ b/static/flexbox/sanic.css
@@ -22,9 +22,16 @@ button {
   border-bottom-color: #3A3A3A;
 }
 
-input {
+input[type=text] {
   background-color: #28374a;
   color: white;
+
+  border: 1px solid black;
+
+  border-left-color: black;
+  border-top-color: black;
+  border-right-color:#545454;
+  border-bottom-color: #545454;
 }
 
 table {

From 5f78ea39c8075d72a534a20064abfa6b671bbea4 Mon Sep 17 00:00:00 2001
From: coon <coon@mailbox.org>
Date: Sat, 2 Dec 2023 20:37:19 +0100
Subject: [PATCH 4/4] static: remove invisible labels

---
 static/flexbox/index.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/static/flexbox/index.html b/static/flexbox/index.html
index 7d6315f..0457ac9 100644
--- a/static/flexbox/index.html
+++ b/static/flexbox/index.html
@@ -23,7 +23,6 @@
           <button>⏭️</button>
         </div>
         <div>
-          <label for="progress"></label>
           <input type="range" id="progress" name="progress" min="0" max="100" value="0">
         </div>
       </div>
@@ -51,7 +50,6 @@
           </div>
         </div>
         <div id="volume-control">
-          <label for="volume"></label>
           <input id="volume" name="volume" type="range" min="1" max="100" value="50">
         </div>
       </div>