83 lines
2.0 KiB
CSS
83 lines
2.0 KiB
CSS
|
@layer base {
|
||
|
|
.rangeInput {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
background: transparent;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
--thumb-size: 30px;
|
||
|
|
--track-height: 10px;
|
||
|
|
width: 100%;
|
||
|
|
padding: calc(var(--thumb-size) / 2) 0;
|
||
|
|
height: 10px;
|
||
|
|
|
||
|
|
&::-webkit-slider-runnable-track {
|
||
|
|
border-radius: 9px;
|
||
|
|
height: var(--track-height);
|
||
|
|
background: #0000004d;
|
||
|
|
border-top: 1px solid #472715;
|
||
|
|
box-shadow:
|
||
|
|
0px 4px 2px 0px #00000040 inset,
|
||
|
|
0px -1.5px 0px 0px #8a582d inset;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-moz-range-track {
|
||
|
|
border-radius: 9px;
|
||
|
|
height: var(--track-height);
|
||
|
|
background: #0000004d;
|
||
|
|
border-top: 1px solid #472715;
|
||
|
|
box-shadow:
|
||
|
|
0px 4px 2px 0px #00000040 inset,
|
||
|
|
0px -1.5px 0px 0px #8a582d inset;
|
||
|
|
}
|
||
|
|
|
||
|
|
&::-webkit-slider-thumb {
|
||
|
|
-webkit-appearance: none;
|
||
|
|
appearance: none;
|
||
|
|
width: var(--thumb-size);
|
||
|
|
height: var(--thumb-size);
|
||
|
|
margin-top: calc((var(--track-height) / 2) - var(--thumb-size) / 2);
|
||
|
|
background: #895428;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow:
|
||
|
|
-2px 0px 1px 0px #00000040 inset,
|
||
|
|
2px 0px 1px 0px #00000040 inset,
|
||
|
|
0px 2px 1px 0px #be7f4a inset,
|
||
|
|
0px -2px 1px 0px #3a1c09 inset,
|
||
|
|
0px 1px 0px 0px #00000033;
|
||
|
|
transition: transform 0.1s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active::-webkit-slider-thumb {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
::-moz-range-thumb {
|
||
|
|
width: var(--thumb-size);
|
||
|
|
height: var(--thumb-size);
|
||
|
|
margin-top: calc((var(--track-height) / 2) - var(--thumb-size) / 2);
|
||
|
|
background: #895428;
|
||
|
|
border-radius: 50%;
|
||
|
|
box-shadow:
|
||
|
|
-2px 0px 1px 0px #00000040 inset,
|
||
|
|
2px 0px 1px 0px #00000040 inset,
|
||
|
|
0px 2px 1px 0px #be7f4a inset,
|
||
|
|
0px -2px 1px 0px #3a1c09 inset,
|
||
|
|
0px 1px 0px 0px #00000033;
|
||
|
|
transition: transform 0.1s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:active::-moz-range-thumb {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.dragging::-webkit-slider-thumb {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.dragging::-moz-range-thumb {
|
||
|
|
transform: scale(1.1);
|
||
|
|
}
|
||
|
|
}
|