mirror of
https://git.roussel.pro/telecom-paris/pact.git
synced 2026-02-09 02:20:17 +01:00
58 lines
1.3 KiB
CSS
58 lines
1.3 KiB
CSS
/* ==== SLIDER ==== */
|
|
.sliderContainer {
|
|
position: relative;
|
|
width: 300px;
|
|
}
|
|
|
|
.sliderContainer > input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
pointer-events: all;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px #C6C6C6;
|
|
cursor: pointer;
|
|
z-index: 99;
|
|
}
|
|
|
|
.sliderContainer > input[type=range]::-moz-range-thumb {
|
|
z-index: 99;
|
|
pointer-events: all;
|
|
width: 24px;
|
|
height: 24px;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 0 1px #C6C6C6;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sliderContainer > input[type=range]::-webkit-slider-thumb:hover {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.sliderContainer >input[type=range]::-webkit-slider-thumb:active {
|
|
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
|
|
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
|
|
}
|
|
.sliderContainer > input[type=range]::-moz-range-thumb:hover {
|
|
background: #f7f7f7;
|
|
}
|
|
|
|
.sliderContainer >input[type=range]::-moz-range-thumb:active {
|
|
box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
|
|
-webkit-box-shadow: inset 0 0 3px #387bbe, 0 0 9px #387bbe;
|
|
}
|
|
|
|
.sliderContainer >input[type="range"] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
height: 2px;
|
|
width: 100%;
|
|
position: absolute;
|
|
background-color: #C6C6C6;
|
|
pointer-events: none;
|
|
}
|
|
|
|
|