140 lines
3.1 KiB
SCSS
140 lines
3.1 KiB
SCSS
// --------------------------------------------------------------
|
|
// Slider inputs - <input type="range">
|
|
// --------------------------------------------------------------
|
|
|
|
.plyr--full-ui input[type='range'] {
|
|
// WebKit
|
|
-webkit-appearance: none; /* stylelint-disable-line */
|
|
background: transparent;
|
|
border: 0;
|
|
border-radius: ($plyr-range-thumb-height * 2);
|
|
// color is used in JS to populate lower fill for WebKit
|
|
color: $plyr-range-fill-bg;
|
|
display: block;
|
|
height: $plyr-range-max-height;
|
|
margin: 0;
|
|
padding: 0;
|
|
transition: box-shadow 0.3s ease;
|
|
width: 100%;
|
|
|
|
&::-webkit-slider-runnable-track {
|
|
@include plyr-range-track();
|
|
background-image: linear-gradient(to right, currentColor var(--value), transparent var(--value));
|
|
}
|
|
|
|
&::-webkit-slider-thumb {
|
|
@include plyr-range-thumb();
|
|
-webkit-appearance: none; /* stylelint-disable-line */
|
|
margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
|
|
}
|
|
|
|
// Mozilla
|
|
&::-moz-range-track {
|
|
@include plyr-range-track();
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
@include plyr-range-thumb();
|
|
}
|
|
|
|
&::-moz-range-progress {
|
|
background: currentColor;
|
|
border-radius: ($plyr-range-track-height / 2);
|
|
height: $plyr-range-track-height;
|
|
}
|
|
|
|
// Microsoft
|
|
&::-ms-track {
|
|
@include plyr-range-track();
|
|
color: transparent;
|
|
}
|
|
|
|
&::-ms-fill-upper {
|
|
@include plyr-range-track();
|
|
}
|
|
|
|
&::-ms-fill-lower {
|
|
@include plyr-range-track();
|
|
|
|
background: currentColor;
|
|
}
|
|
|
|
&::-ms-thumb {
|
|
@include plyr-range-thumb();
|
|
// For some reason, Edge uses the -webkit margin above
|
|
margin-top: 0;
|
|
}
|
|
|
|
&::-ms-tooltip {
|
|
display: none;
|
|
}
|
|
|
|
// Focus styles
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
|
|
&::-moz-focus-outer {
|
|
border: 0;
|
|
}
|
|
|
|
&.plyr__tab-focus {
|
|
&::-webkit-slider-runnable-track {
|
|
@include plyr-tab-focus();
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
@include plyr-tab-focus();
|
|
}
|
|
|
|
&::-ms-track {
|
|
@include plyr-tab-focus();
|
|
}
|
|
}
|
|
|
|
// Pressed styles
|
|
&:active {
|
|
&::-webkit-slider-thumb {
|
|
@include plyr-range-thumb-active();
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
@include plyr-range-thumb-active();
|
|
}
|
|
|
|
&::-ms-thumb {
|
|
@include plyr-range-thumb-active();
|
|
}
|
|
}
|
|
}
|
|
|
|
// Video range inputs
|
|
.plyr--full-ui.plyr--video input[type='range'] {
|
|
&::-webkit-slider-runnable-track {
|
|
background-color: $plyr-video-range-track-bg;
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
background-color: $plyr-video-range-track-bg;
|
|
}
|
|
|
|
&::-ms-track {
|
|
background-color: $plyr-video-range-track-bg;
|
|
}
|
|
}
|
|
|
|
// Audio range inputs
|
|
.plyr--full-ui.plyr--audio input[type='range'] {
|
|
&::-webkit-slider-runnable-track {
|
|
background-color: $plyr-audio-range-track-bg;
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
background-color: $plyr-audio-range-track-bg;
|
|
}
|
|
|
|
&::-ms-track {
|
|
background-color: $plyr-audio-range-track-bg;
|
|
}
|
|
}
|