63 lines
1 KiB
Text
63 lines
1 KiB
Text
x-range {
|
|
--thumb-size: 8px;
|
|
--thumb-color: #fff;
|
|
--thumb-shadow: #000;
|
|
--track-size: 4px;
|
|
--track-color: gray;
|
|
--elapsed-color: lightgray;
|
|
--remaining-color: transparent;
|
|
|
|
--radius: calc(var(--track-size)/2);
|
|
|
|
width: 192px;
|
|
height: 16px;
|
|
position: relative;
|
|
|
|
.-track, .-elapsed, .-remaining {
|
|
position: absolute;
|
|
top: calc(50% - var(--track-size)/2);
|
|
height: var(--track-size);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.-track {
|
|
width: 100%;
|
|
left: 0;
|
|
background-color: gray;
|
|
}
|
|
|
|
.-elapsed {
|
|
left: 0;
|
|
background-color: var(--elapsed-color);
|
|
}
|
|
|
|
.-remaining {
|
|
right: 0;
|
|
background-color: var(--remaining-color);
|
|
}
|
|
|
|
.-inner {
|
|
position: absolute;
|
|
left: var(--thumb-size);
|
|
right: var(--thumb-size);
|
|
top: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.-thumb {
|
|
all: unset;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
border-radius: 50%;
|
|
width: calc(2*var(--thumb-size));
|
|
height: calc(2*var(--thumb-size));
|
|
background-color: var(--thumb-color);
|
|
box-shadow: 0 0 2px var(--thumb-shadow);
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
}
|
|
}
|