155 lines
3.6 KiB
Plaintext
155 lines
3.6 KiB
Plaintext
// Controls
|
|
// --------------------------------------------------------------
|
|
|
|
// Playback controls
|
|
.plyr__controls {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
line-height: 1;
|
|
text-align: center;
|
|
|
|
transition: opacity .3s ease;
|
|
|
|
// Spacing
|
|
> button,
|
|
.plyr__progress,
|
|
.plyr__time {
|
|
margin-left: (@plyr-control-spacing / 2);
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
.plyr__volume {
|
|
margin-left: (@plyr-control-spacing / 2);
|
|
}
|
|
[data-plyr="pause"] {
|
|
margin-left: 0;
|
|
}
|
|
|
|
// Buttons
|
|
button {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
vertical-align: middle;
|
|
padding: (@plyr-control-spacing / 2);
|
|
border: 0;
|
|
background: transparent;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: background .3s ease, color .3s ease, opacity .3s ease;
|
|
color: inherit;
|
|
|
|
svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: block;
|
|
fill: currentColor;
|
|
}
|
|
|
|
// Default focus
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
}
|
|
|
|
// Hide toggle icons by default
|
|
.icon--exit-fullscreen,
|
|
.icon--muted,
|
|
.icon--captions-on {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: @plyr-bp-screen-sm) {
|
|
> button,
|
|
.plyr__progress,
|
|
.plyr__time {
|
|
margin-left: @plyr-control-spacing;
|
|
}
|
|
button {
|
|
padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
|
|
}
|
|
}
|
|
}
|
|
// Hide controls
|
|
.plyr--hide-controls .plyr__controls {
|
|
opacity: 0;
|
|
}
|
|
|
|
// Video controls
|
|
.plyr--video .plyr__controls {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: (@plyr-control-spacing * 5) @plyr-control-spacing @plyr-control-spacing;
|
|
background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 50%));
|
|
border-bottom-left-radius: inherit;
|
|
border-bottom-right-radius: inherit;
|
|
color: @plyr-video-control-color;
|
|
|
|
button {
|
|
// Hover and tab focus
|
|
&.tab-focus:focus,
|
|
&:hover {
|
|
background: @plyr-video-control-bg-hover;
|
|
color: @plyr-video-control-color-hover;
|
|
}
|
|
}
|
|
|
|
@media (min-width: @plyr-bp-screen-sm) {
|
|
padding-left: (@plyr-control-spacing * 1.5);
|
|
padding-right: (@plyr-control-spacing * 1.5);
|
|
}
|
|
}
|
|
|
|
// Audio controls
|
|
.plyr--audio .plyr__controls {
|
|
padding: @plyr-control-spacing;
|
|
border-radius: inherit;
|
|
background: @plyr-audio-controls-bg;
|
|
border: @plyr-audio-controls-border;
|
|
box-shadow: @plyr-audio-controls-box-shadow;
|
|
color: @plyr-audio-control-color;
|
|
|
|
button {
|
|
// Hover and tab focus
|
|
&.tab-focus:focus,
|
|
&:hover {
|
|
background: @plyr-audio-control-bg-hover;
|
|
color: @plyr-audio-control-color-hover;
|
|
}
|
|
}
|
|
}
|
|
|
|
// States
|
|
.plyr__controls [data-plyr='pause'],
|
|
.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--fullscreen-active .icon--exit-fullscreen,
|
|
.plyr--muted .plyr__controls .icon--muted,
|
|
.plyr--captions-active .plyr__controls .icon--captions-on {
|
|
display: block;
|
|
|
|
& + svg {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
// Some options are hidden by default
|
|
.plyr [data-plyr='captions'],
|
|
.plyr [data-plyr='fullscreen'] {
|
|
display: none;
|
|
}
|
|
.plyr--captions-enabled [data-plyr='captions'],
|
|
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
|
|
display: inline-block;
|
|
} |