48 lines
1.3 KiB
SCSS
48 lines
1.3 KiB
SCSS
@mixin plyr-theme($background, $color: null) {
|
|
$color: if($color, $color, yiq($background));
|
|
|
|
.plyr[class] {
|
|
.plyr__control--overlaid {
|
|
background: rgba($background, .75) !important;
|
|
color: $color !important;
|
|
}
|
|
|
|
.plyr__control.plyr__tab-focus,
|
|
.plyr__control:hover,
|
|
.plyr__control[aria-expanded='true'] {
|
|
background: $background !important;
|
|
color: $color !important;
|
|
}
|
|
|
|
.plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']:not(.plyr__tab-focus):not(:hover) {
|
|
&::before {
|
|
background: $background !important;
|
|
}
|
|
&::after {
|
|
background: $color !important;
|
|
}
|
|
}
|
|
|
|
.plyr__control.plyr__tab-focus {
|
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($background, .4) !important;
|
|
}
|
|
}
|
|
|
|
.plyr--full-ui[class] input[type='range'] {
|
|
color: $background !important;
|
|
}
|
|
|
|
.plyr--full-ui[class] input[type='range'].plyr__tab-focus {
|
|
&::-webkit-slider-runnable-track {
|
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($background, .4) !important;
|
|
}
|
|
|
|
&::-moz-range-track {
|
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($background, .4) !important;
|
|
}
|
|
|
|
&::-ms-track {
|
|
box-shadow: 0 0 0 $component-focus-shadow-width rgba($background, .4) !important;
|
|
}
|
|
}
|
|
}
|