From 9bfa9f3cacfb2b5fb94b6ef71d6c9753c41bf330 Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Sat, 27 Apr 2024 16:54:31 -0400
Subject: [PATCH] update input type range

---
 javascript/black-teal.css | 19 +++++++++++++++++++
 javascript/sdnext.css     |  2 ++
 2 files changed, 21 insertions(+)

diff --git a/javascript/black-teal.css b/javascript/black-teal.css
index ee933a8a6..352058023 100644
--- a/javascript/black-teal.css
+++ b/javascript/black-teal.css
@@ -53,17 +53,36 @@
   --line-sm: 1.2em;
   --line-md: 1.4em;
   --line-lg: 1.5em;
+  --range-shadow:
+     -20em 0 0 0 hsl(180, 54%, 21%), -19em 0 0 0 hsl(180, 54%, 23%), -18em 0 0 0 hsl(180, 54%, 25%), -17em 0 0 0 hsl(180, 54%, 27%),
+     -16em 0 0 0 hsl(180, 54%, 29%), -15em 0 0 0 hsl(180, 54%, 31%), -14em 0 0 0 hsl(180, 54%, 33%), -13em 0 0 0 hsl(180, 54%, 35%),
+     -12em 0 0 0 hsl(180, 54%, 37%), -11em 0 0 0 hsl(180, 54%, 39%), -10em 0 0 0 hsl(180, 54%, 41%),  -9em 0 0 0 hsl(180, 54%, 43%),
+      -8em 0 0 0 hsl(180, 54%, 45%),  -7em 0 0 0 hsl(180, 54%, 47%), -6em 0 0 0 hsl(180, 54%, 49%),  -5em 0 0 0 hsl(180, 54%, 51%),
+      -4em 0 0 0 hsl(180, 54%, 53%),  -3em 0 0 0 hsl(180, 54%, 55%), -2em 0 0 0 hsl(180, 54%, 57%),  -1em 0 0 0 hsl(180, 54%, 59%),
+      1em 0 0 0 var(--neutral-800),  2em 0 0 0 var(--neutral-800), 3em 0 0 0 var(--neutral-800),  4em 0 0 0 var(--neutral-800),
+      5em 0 0 0 var(--neutral-800),  6em 0 0 0 var(--neutral-800), 7em 0 0 0 var(--neutral-800),  8em 0 0 0 var(--neutral-800),
+      9em 0 0 0 var(--neutral-800), 10em 0 0 0 var(--neutral-800), 11em 0 0 0 var(--neutral-800), 12em 0 0 0 var(--neutral-800),
+     13em 0 0 0 var(--neutral-800), 14em 0 0 0 var(--neutral-800), 15em 0 0 0 var(--neutral-800), 16em 0 0 0 var(--neutral-800);
 }
 
 html { font-size: var(--font-size); font-family: var(--font); }
 body, button, input, select, textarea { font-family: var(--font); }
 button { max-width: 400px; white-space: nowrap; }
 img { background-color: var(--background-color); }
+
+/*
 input[type=range] { height: var(--line-xs) !important; appearance: none !important; margin-top: 0 !important; min-width: max(4em, 100%) !important; background-color: var(--background-color) !important; width: 100% !important; background: transparent !important; }
 input[type=range]::-webkit-slider-runnable-track { width: 100% !important; height: 6px !important; cursor: pointer !important; background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid var(--neutral-900) !important; }
 input[type=range]::-moz-range-track              { width: 100% !important; height: 6px !important; cursor: pointer !important; background: var(--input-background-fill) !important; border-radius: var(--radius-lg) !important; border: 0px solid var(--neutral-900) !important; }
 input[type=range]::-webkit-slider-thumb { border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important; border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: -4px !important; }
 input[type=range]::-moz-range-thumb     { border: 0px solid #000000 !important; height: var(--line-xs) !important; width: var(--line-md) !important; border-radius: var(--radius-lg) !important; background: var(--highlight-color) !important; cursor: pointer !important; appearance: none !important; margin-top: -4px !important; }
+*/
+input[type='range'] { display: block; margin: 0; padding: 0; height: 1em; background-color: transparent; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 0 transparent; -webkit-appearance: none; }
+input[type='range']::-webkit-slider-thumb { height: .9em; width: .9em; background-color: hsl(180, 54%, 61%); box-shadow: var(--range-shadow); border-radius: var(--radius-sm); }
+input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; }
+input[type='range']::-moz-range-thumb { height: .9em; width: .9em; background-color: hsl(180, 54%, 61%); box-shadow: var(--range-shadow); }
+input[type='range']::-moz-range-track, input[type='range']::-webkit-slider-runnable-track { border: none; background: none; width: 100%; height: 100%; }
+
 :root { scrollbar-color: var(--highlight-color) #303030; }
 ::-webkit-scrollbar { width: 12px; height: 12px; }
 ::-webkit-scrollbar-track { background: #303030; }
diff --git a/javascript/sdnext.css b/javascript/sdnext.css
index 72b527871..faa445522 100644
--- a/javascript/sdnext.css
+++ b/javascript/sdnext.css
@@ -18,6 +18,8 @@ span { font-size: var(--text-md) !important; }
 button { font-size: var(--text-lg) !important; }
 input[type='color'] { width: 64px; height: 32px; }
 
+
+
 /* gradio elements */
 .block .padded:not(.gradio-accordion) { padding: 0 !important; margin-right: 0; min-width: 90px !important; }
 .compact { gap: 1em 0.2em; background: transparent !important; padding: 0 !important; }