128 lines
3.1 KiB
Plaintext
128 lines
3.1 KiB
Plaintext
// --------------------------------------------------------------
|
|
// Controls
|
|
// --------------------------------------------------------------
|
|
|
|
// Hide native controls
|
|
.plyr ::-webkit-media-controls {
|
|
display: none;
|
|
}
|
|
|
|
// Playback controls
|
|
.plyr__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
// Spacing
|
|
> .plyr__control,
|
|
.plyr__progress,
|
|
.plyr__time,
|
|
.plyr__menu {
|
|
margin-left: (@plyr-control-spacing / 2);
|
|
|
|
&:first-child,
|
|
&:first-child + [data-plyr='pause'] {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
.plyr__volume {
|
|
margin-left: (@plyr-control-spacing / 2);
|
|
}
|
|
|
|
@media (min-width: @plyr-bp-screen-sm) {
|
|
> .plyr__control,
|
|
.plyr__progress,
|
|
.plyr__time,
|
|
.plyr__menu {
|
|
margin-left: @plyr-control-spacing;
|
|
}
|
|
|
|
> .plyr__control + .plyr__control,
|
|
.plyr__menu + .plyr__control,
|
|
> .plyr__control + .plyr__menu {
|
|
margin-left: (@plyr-control-spacing / 2);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Video controls
|
|
.plyr--video .plyr__controls {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 2;
|
|
padding: (@plyr-control-spacing * 3.5) (@plyr-control-spacing + 2) @plyr-control-spacing;
|
|
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
color: @plyr-video-control-color;
|
|
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
|
|
|
.plyr__control {
|
|
svg {
|
|
filter: drop-shadow(0 1px 1px fade(#000, 15%));
|
|
}
|
|
|
|
// Hover and tab focus
|
|
&.tab-focus,
|
|
&:hover,
|
|
&[aria-expanded='true'] {
|
|
background: @plyr-video-control-bg-hover;
|
|
color: @plyr-video-control-color-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide controls
|
|
.plyr--video.plyr--hide-controls .plyr__controls {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
pointer-events: none;
|
|
}
|
|
|
|
// Audio controls
|
|
.plyr--audio .plyr__controls {
|
|
padding: @plyr-control-spacing;
|
|
border-radius: inherit;
|
|
background: @plyr-audio-controls-bg;
|
|
border: @plyr-audio-controls-border;
|
|
color: @plyr-audio-control-color;
|
|
}
|
|
|
|
// States
|
|
.plyr__controls [data-plyr='pause'] {
|
|
display: none;
|
|
}
|
|
.plyr--playing .plyr__controls [data-plyr='play'] {
|
|
display: none;
|
|
}
|
|
.plyr--playing .plyr__controls [data-plyr='pause'] {
|
|
display: inline-block;
|
|
}
|
|
|
|
// Change icons on state change
|
|
.plyr--muted .plyr__control .icon--muted,
|
|
.plyr--captions-active .plyr__control .icon--captions-on {
|
|
display: block;
|
|
|
|
& + svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Some options are hidden by default
|
|
.plyr [data-plyr='captions'],
|
|
.plyr [data-plyr='pip'],
|
|
.plyr [data-plyr='airplay'],
|
|
.plyr [data-plyr='fullscreen'] {
|
|
display: none;
|
|
}
|
|
.plyr--captions-enabled [data-plyr='captions'],
|
|
.plyr--pip-supported [data-plyr='pip'],
|
|
.plyr--airplay-supported [data-plyr='airplay'],
|
|
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
|
|
display: inline-block;
|
|
}
|