From 880e7dfa7d8cee1aa33976a0b82ea6e286c3ee64 Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Thu, 7 Apr 2022 11:56:27 +0100
Subject: style progress/seek bar

---
 resources/index.html | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/resources/index.html b/resources/index.html
index e28bac8..207672b 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -270,10 +270,33 @@
      .bd-yellow { background-color: yellow }
      .bd-blue { background-color: blue; color: white }
 
+     /* Range styling (firefox only) from
+        https://css-tricks.com/sliding-nightmare-understanding-range-input/
+        https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
+        */
      input[type=range] {
+       display: block;
        width: 100%;
+       height: 1em;
        position: relative;
-       transform: scaleY(5);
+       background: transparent;
+     }
+     [type=range]::-moz-range-track {
+       width: 100%;
+       height: 0.2em;
+       background: #ccc;
+     }
+     [type=range]::-moz-range-progress {
+       height: 0.4em;
+       background: #48a;
+     }
+     [type=range]::-moz-range-thumb {
+       border: solid 0.1em #48a;
+       padding: 0;
+       width: 0.4em;
+       height: 0.8em;
+       border-radius: 0.5em;
+       background: #4bf;
      }
 
      .file-list {
-- 
cgit v1.2.3