stash/ui/v2.5/src/styles/_range.scss
WithoutPants a145576f39
Display mode options dropdown (#5923)
* Separate ZoomSlider into own component
* Turn ListViewOptions into dropdown
Also puts zoom slider in the dropdown
* Move ZoomSlider into separate file
* Add title
* Restyle slider
2025-06-13 11:45:10 +10:00

106 lines
2 KiB
SCSS

input[type="range"] {
-webkit-appearance: none;
background-color: transparent;
border-color: transparent;
height: 22px;
margin: 10px 0;
&:focus {
background-color: transparent;
border: inherit;
border-color: transparent;
box-shadow: none;
outline: none;
}
&::-webkit-slider-runnable-track {
animate: 0.2s;
background: $primary;
border: 0 solid #000101;
border-radius: 25px;
box-shadow: 0 0 0 #000;
cursor: pointer;
height: 6px;
width: 100%;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
background: #394b59;
border: 0 solid #000;
border-radius: 10px;
box-shadow: 0 0 0 #000;
cursor: pointer;
height: 15px;
margin-top: -4px;
width: 15px;
}
&:focus::-webkit-slider-runnable-track {
background: #137cbd;
}
&::-moz-range-track {
animate: 0.2s;
background: $primary;
border: 0 solid #000101;
border-radius: 25px;
box-shadow: 0 0 0 #000;
cursor: pointer;
height: 6px;
width: 100%;
}
&::-moz-range-thumb {
background: #394b59;
border: 0 solid #000;
border-radius: 10px;
box-shadow: 0 0 0 #000;
cursor: pointer;
height: 15px;
width: 15px;
}
&::-ms-track {
animate: 0.2s;
background: transparent;
border-color: transparent;
color: transparent;
cursor: pointer;
height: 6px;
width: 100%;
}
&::-ms-fill-lower {
background: $primary;
border: 0 solid #000101;
border-radius: 50px;
box-shadow: 0 0 0 #000;
}
&::-ms-fill-upper {
background: $primary;
border: 0 solid #000101;
border-radius: 50px;
box-shadow: 0 0 0 #000;
}
&::-ms-thumb {
background: #394b59;
border: 0 solid #000;
border-radius: 10px;
box-shadow: 0 0 0 #000;
cursor: pointer;
height: 16px;
margin-top: 2px;
width: 16px;
}
&:focus::-ms-fill-lower {
background: #137cbd;
}
&:focus::-ms-fill-upper {
background: #137cbd;
}
}