109 lines
2.6 KiB
CSS
109 lines
2.6 KiB
CSS
:root {
|
|
/* define some local ones */
|
|
--range-size: calc(var(--gap) * 2);
|
|
--range-corner: var(--gap);
|
|
}
|
|
|
|
/* make everything invisible */
|
|
|
|
input[type="range"] {
|
|
background: transparent;
|
|
}
|
|
input[type="range"]::-moz-range-thumb {
|
|
border: none;
|
|
}
|
|
input[type="range"]::-ms-track {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
color: transparent;
|
|
}
|
|
|
|
/* style the thumb */
|
|
|
|
#volume::-moz-range-thumb {
|
|
height: var(--range-size);
|
|
width: var(--range-size);
|
|
border-radius: var(--range-corner);
|
|
background-color: var(--foreground);
|
|
}
|
|
#volume:hover::-moz-range-thumb,
|
|
#volume:focus::-moz-range-thumb {
|
|
border: var(--gap) solid var(--foreground);
|
|
}
|
|
|
|
#volume::-ms-thumb {
|
|
height: var(--range-size);
|
|
width: var(--range-size);
|
|
border-radius: var(--range-corner);
|
|
background-color: var(--foreground);
|
|
}
|
|
#volume:hover::-ms-thumb,
|
|
#volume:focus::-ms-thumb {
|
|
background-color: var(--highlight);
|
|
border: 1px solid var(--foreground);
|
|
}
|
|
|
|
/* style the track */
|
|
|
|
#volume::-moz-range-track {
|
|
background-color: var(--fade-other);
|
|
border-radius: var(--range-corner);
|
|
height: var(--range-size);
|
|
}
|
|
|
|
#volume::-ms-track {
|
|
background-color: var(--fade-other);
|
|
border-radius: var(--range-corner);
|
|
height: var(--range-size);
|
|
}
|
|
|
|
/* style the filled portion */
|
|
|
|
#volume::-moz-range-progress {
|
|
background-color: var(--foreground);
|
|
height: var(--range-size);
|
|
border-radius: var(--range-corner);
|
|
}
|
|
#volume:hover::-moz-range-progress,
|
|
#volume:focus::-moz-range-progress {
|
|
background-color: var(--highlight);
|
|
}
|
|
|
|
#volume::-ms-fill-lower {
|
|
background-color: var(--foreground);
|
|
height: var(--range-size);
|
|
border-radius: var(--range-corner);
|
|
}
|
|
#volume:hover::-ms-fill-lower,
|
|
#volume:focus::-ms-fill-lower {
|
|
background-color: var(--highlight);
|
|
}
|
|
|
|
/* chrome is an idiot */
|
|
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
|
#volume {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
#volume::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
height: var(--range-size);
|
|
width: var(--range-size);
|
|
border-radius: var(--range-corner);
|
|
background-color: var(--foreground);
|
|
box-shadow: -100vw 0 0 calc(100vw - var(--range-corner)) var(--foreground);
|
|
}
|
|
|
|
#volume:hover::-webkit-slider-thumb,
|
|
#volume:focus::-webkit-slider-thumb {
|
|
border: 1px solid var(--foreground);
|
|
box-shadow: -100vw 0 0 calc(100vw - var(--range-corner)) var(--highlight);
|
|
}
|
|
|
|
#volume::-webkit-slider-runnable-track {
|
|
background-color: var(--fade-other);
|
|
border-radius: var(--range-corner);
|
|
overflow: hidden;
|
|
}
|
|
}
|