Rooba
/
nightTab
mirror of https://github.com/zombieFox/nightTab.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add saturation and contrast slider styles

This commit is contained in:
zombieFox 2021-09-12 23:11:08 +01:00
parent a3bc9ff495
commit f647cdf792
1 changed files with 1 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/component/form/input/range/index.css
View File

@ -22,50 +22,7 @@
}
:root {
--form-range-contrast-low-to-high:
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 0%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 10%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 20%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 30%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 40%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 50%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 60%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 70%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 80%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 90%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 100%);
--form-range-contrast-high-to-low:
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 100%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 90%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 80%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 70%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 60%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 50%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 40%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 30%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 20%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 10%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 0%);
}
.is-theme-style-light {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-high-to-low));
}
.is-theme-style-dark {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-low-to-high));
}
@media (prefers-color-scheme: light) {
.is-theme-style-system {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-high-to-low));
}
}
@media (prefers-color-scheme: dark) {
.is-theme-style-system {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-low-to-high));
}
--form-range-contrast: linear-gradient(to right, hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 0%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 10%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 20%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 30%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 40%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 50%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 60%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 70%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 80%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 90%), hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 100%));
}
input[type="range"] {