Converted to 2 space indentation
This commit is contained in:
Sam Potts
@ -4,61 +4,58 @@
|
||||
|
||||
// Container
|
||||
.plyr--audio {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Controls container
|
||||
.plyr--audio .plyr__controls {
|
||||
background: var(--plyr-audio-controls-background, $plyr-audio-controls-background);
|
||||
border-radius: inherit;
|
||||
color: var(--plyr-audio-control-color, $plyr-audio-control-color);
|
||||
padding: $plyr-control-spacing;
|
||||
background: $plyr-audio-controls-background;
|
||||
border-radius: inherit;
|
||||
color: $plyr-audio-control-color;
|
||||
padding: $plyr-control-spacing;
|
||||
}
|
||||
|
||||
// Control elements
|
||||
.plyr--audio .plyr__control {
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: var(
|
||||
--plyr-audio-control-background-hover,
|
||||
var(--plyr-color-main, $plyr-audio-control-background-hover)
|
||||
);
|
||||
color: var(--plyr-audio-control-color-hover, $plyr-audio-control-color-hover);
|
||||
}
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-audio-control-background-hover;
|
||||
color: $plyr-audio-control-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Range inputs
|
||||
.plyr--full-ui.plyr--audio input[type='range'] {
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $plyr-audio-range-track-background;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: $plyr-audio-range-track-background;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: $plyr-audio-range-track-background;
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress
|
||||
.plyr--audio .plyr__progress__buffer {
|
||||
color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background);
|
||||
color: $plyr-audio-progress-buffered-background;
|
||||
}
|
||||
|
||||
@ -4,20 +4,20 @@
|
||||
|
||||
// Container
|
||||
.plyr--video {
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
|
||||
&.plyr--menu-open {
|
||||
overflow: visible;
|
||||
}
|
||||
&.plyr--menu-open {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__video-wrapper {
|
||||
background: #000;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Default to 16:9 ratio but this is set by JavaScript based on config
|
||||
@ -25,142 +25,138 @@ $embed-padding: ((100 / 16) * 9);
|
||||
|
||||
.plyr__video-embed,
|
||||
.plyr__video-wrapper--fixed-ratio {
|
||||
height: 0;
|
||||
padding-bottom: to-percentage($embed-padding);
|
||||
height: 0;
|
||||
padding-bottom: to-percentage($embed-padding);
|
||||
}
|
||||
|
||||
.plyr__video-embed iframe,
|
||||
.plyr__video-wrapper--fixed-ratio video {
|
||||
border: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// If the full custom UI is supported
|
||||
.plyr--full-ui .plyr__video-embed {
|
||||
$height: 240;
|
||||
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
|
||||
$height: 240;
|
||||
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
|
||||
|
||||
// Only used for Vimeo
|
||||
> .plyr__video-embed__container {
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
}
|
||||
// Only used for Vimeo
|
||||
> .plyr__video-embed__container {
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
}
|
||||
}
|
||||
|
||||
// Controls container
|
||||
.plyr--video .plyr__controls {
|
||||
background: $plyr-video-controls-background;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
bottom: 0;
|
||||
color: var(--plyr-video-control-color, $plyr-video-control-color);
|
||||
left: 0;
|
||||
padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
||||
z-index: 3;
|
||||
background: $plyr-video-controls-background;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
bottom: 0;
|
||||
color: $plyr-video-control-color;
|
||||
left: 0;
|
||||
padding: calc(#{$plyr-control-spacing} / 2);
|
||||
padding-top: calc(#{$plyr-control-spacing} * 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
||||
z-index: 3;
|
||||
|
||||
@media (min-width: $plyr-bp-sm) {
|
||||
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
|
||||
}
|
||||
@media (min-width: $plyr-bp-sm) {
|
||||
padding: $plyr-control-spacing;
|
||||
padding-top: calc(#{$plyr-control-spacing} * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide controls
|
||||
.plyr--video.plyr--hide-controls .plyr__controls {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
// Control elements
|
||||
.plyr--video .plyr__control {
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: var(
|
||||
--plyr-video-control-background-hover,
|
||||
var(--plyr-color-main, $plyr-video-control-background-hover)
|
||||
);
|
||||
color: var(--plyr-video-control-color-hover, $plyr-video-control-color-hover);
|
||||
}
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-video-control-background-hover;
|
||||
color: $plyr-video-control-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Large play button (video only)
|
||||
.plyr__control--overlaid {
|
||||
background: var(
|
||||
--plyr-video-control-background-hover,
|
||||
var(--plyr-color-main, $plyr-video-control-background-hover)
|
||||
);
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
color: $plyr-video-control-color;
|
||||
display: none;
|
||||
left: 50%;
|
||||
opacity: 0.9;
|
||||
padding: ceil($plyr-control-spacing * 1.5);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 0.3s;
|
||||
z-index: 2;
|
||||
background: $plyr-video-control-background-hover;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
color: $plyr-video-control-color;
|
||||
display: none;
|
||||
left: 50%;
|
||||
opacity: 0.9;
|
||||
padding: calc(#{$plyr-control-spacing} * 1.5);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 0.3s;
|
||||
z-index: 2;
|
||||
|
||||
// Offset icon to make the play button look right
|
||||
svg {
|
||||
left: 2px;
|
||||
position: relative;
|
||||
}
|
||||
// Offset icon to make the play button look right
|
||||
svg {
|
||||
left: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr--playing .plyr__control--overlaid {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.plyr--full-ui.plyr--video .plyr__control--overlaid {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Video range inputs
|
||||
.plyr--full-ui.plyr--video input[type='range'] {
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $plyr-video-range-track-background;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: $plyr-video-range-track-background;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: $plyr-video-range-track-background;
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active();
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active();
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
|
||||
}
|
||||
|
||||
// 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();
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress
|
||||
.plyr--video .plyr__progress__buffer {
|
||||
color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background);
|
||||
color: $plyr-video-progress-buffered-background;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user