Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-18 16:54:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

update input type range

Browse Source
This commit is contained in:
Vladimir Mandic
2024-04-27 16:54:31 -04:00
parent 473c47506c
commit 9bfa9f3cac
2 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/black-teal.css
+19
View File
@@ -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; }