149 lines
3.9 KiB
SCSS
149 lines
3.9 KiB
SCSS
@import "../../scss/_bootstrap-extended/include";
|
|
|
|
/* Variables */
|
|
@import "plyr/src/sass/settings/breakpoints";
|
|
@import "plyr/src/sass/settings/colors";
|
|
@import "plyr/src/sass/settings/cosmetics";
|
|
@import "plyr/src/sass/settings/type";
|
|
@import "plyr/src/sass/settings/badges";
|
|
@import "plyr/src/sass/settings/captions";
|
|
@import "plyr/src/sass/settings/controls";
|
|
@import "plyr/src/sass/settings/helpers";
|
|
@import "plyr/src/sass/settings/menus";
|
|
@import "plyr/src/sass/settings/progress";
|
|
@import "plyr/src/sass/settings/sliders";
|
|
@import "plyr/src/sass/settings/tooltips";
|
|
@import "plyr/src/sass/lib/animation";
|
|
@import "plyr/src/sass/lib/functions";
|
|
@import "plyr/src/sass/lib/mixins";
|
|
|
|
/* Components */
|
|
@import "plyr/src/sass/base";
|
|
@import "plyr/src/sass/components/badges";
|
|
@import "plyr/src/sass/components/captions";
|
|
@import "plyr/src/sass/components/control";
|
|
@import "plyr/src/sass/components/controls";
|
|
@import "plyr/src/sass/components/menus";
|
|
@import "plyr/src/sass/components/sliders";
|
|
@import "plyr/src/sass/components/poster";
|
|
@import "plyr/src/sass/components/times";
|
|
@import "plyr/src/sass/components/tooltips";
|
|
@import "plyr/src/sass/components/progress";
|
|
@import "plyr/src/sass/components/volume";
|
|
@import "plyr/src/sass/types/audio";
|
|
@import "plyr/src/sass/types/video";
|
|
@import "plyr/src/sass/states/fullscreen";
|
|
@import "plyr/src/sass/plugins/ads";
|
|
@import "plyr/src/sass/plugins/preview-thumbnails";
|
|
@import "plyr/src/sass/utils/animation";
|
|
@import "plyr/src/sass/utils/hidden";
|
|
|
|
.plyr {
|
|
--plyr-color-main: var(--#{$prefix}primary);
|
|
--plyr-focus-visible-color: var(--#{$prefix}primary);
|
|
--plyr-menu-background: var(--#{$prefix}white);
|
|
--plyr-video-control-color-hover: var(--#{$prefix}primary-contrast);
|
|
--plyr-audio-control-color-hover: var(--plyr-video-control-color-hover);
|
|
.plyr--audio .plyr__controls {
|
|
padding: 0;
|
|
}
|
|
&.plyr--video,
|
|
&.plyr--audio {
|
|
.plyr__control:focus-visible {
|
|
outline: none;
|
|
}
|
|
}
|
|
&.plyr--audio {
|
|
.plyr__progress__buffer {
|
|
color: var(--#{$prefix}gray-200);
|
|
}
|
|
.plyr__controls {
|
|
background-color: var(--#{$prefix}paper-bg);
|
|
color: var(--#{$prefix}body-color);
|
|
}
|
|
}
|
|
&.plyr--full-ui.plyr--audio input[type="range"] {
|
|
&::-webkit-slider-runnable-track,
|
|
&::-moz-range-track,
|
|
&::-ms-track {
|
|
background-color: var(--#{$prefix}gray-100);
|
|
}
|
|
}
|
|
.plyr__menu__container .plyr__control[role="menuitemradio"] {
|
|
&:hover,
|
|
&:focus-visible {
|
|
&::before {
|
|
background: $plyr-color-gray-100;
|
|
}
|
|
}
|
|
&[aria-checked="true"] {
|
|
&:hover,
|
|
&:focus-visible {
|
|
&::before {
|
|
background: var(--#{$prefix}white);
|
|
}
|
|
&::after {
|
|
background: var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
input[type="range"] {
|
|
&::-ms-fill-lower {
|
|
background: var(--#{$prefix}primary);
|
|
}
|
|
&:active {
|
|
&::-webkit-slider-thumb {
|
|
background: var(--#{$prefix}primary);
|
|
}
|
|
&::-moz-range-thumb {
|
|
background: var(--#{$prefix}primary);
|
|
}
|
|
&::-ms-thumb {
|
|
background: var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
}
|
|
.plyr__tooltip,
|
|
.plyr__menu__container {
|
|
box-shadow: none;
|
|
filter: drop-shadow(0 .0625rem .125rem rgba($pure-black, .15));
|
|
}
|
|
.plyr__controls {
|
|
flex-wrap: wrap;
|
|
.plyr__progress__container {
|
|
min-inline-size: 3.75rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
//? Library does not provide RTL support
|
|
:dir(rtl) {
|
|
.plyr__menu__container {
|
|
direction: rtl;
|
|
|
|
.plyr__control--forward {
|
|
&::after {
|
|
border-inline-end-color: transparent;
|
|
border-inline-start-color: rgba($plyr-menu-color, .8);
|
|
inset-inline: auto 5px;
|
|
}
|
|
}
|
|
|
|
.plyr__menu__value {
|
|
padding-inline: calc(calc(var(--plyr-control-spacing, 10px) * .7) * 1.5) 1rem;
|
|
}
|
|
|
|
.plyr__control[role="menuitemradio"] {
|
|
|
|
&::before {
|
|
margin-inline: 0 $plyr-control-spacing;
|
|
}
|
|
|
|
&::after {
|
|
inset-inline: .9375rem auto;
|
|
}
|
|
}
|
|
}
|
|
}
|