ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Converted to 2 space indentation

Browse Source
This commit is contained in:
Sam Potts
2020-04-11 16:23:14 +10:00
parent 8f5b59c18c
commit 502d5977d7
125 changed files with 10693 additions and 10797 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/sass/base.scss
View File

@ -4,66 +4,66 @@
// Base
.plyr {
@include plyr-font-smoothing($plyr-font-smoothing);
align-items: center;
direction: ltr;
display: flex;
flex-direction: column;
font-family: var(--plyr-font-family);
font-variant-numeric: tabular-nums; // Force monosace-esque number widths
font-weight: var(--plyr-font-weight-regular);
@include plyr-font-smoothing($plyr-font-smoothing);
align-items: center;
direction: ltr;
display: flex;
flex-direction: column;
font-family: $plyr-font-family;
font-variant-numeric: tabular-nums; // Force monosace-esque number widths
font-weight: $plyr-font-weight-regular;
height: 100%;
line-height: $plyr-line-height;
max-width: 100%;
min-width: 200px;
position: relative;
text-shadow: none;
transition: box-shadow 0.3s ease;
z-index: 0; // Force any border radius
// Media elements
video,
audio,
iframe {
display: block;
height: 100%;
line-height: var(--plyr-line-height);
max-width: 100%;
min-width: 200px;
position: relative;
text-shadow: none;
transition: box-shadow 0.3s ease;
z-index: 0; // Force any border radius
width: 100%;
}
// Media elements
video,
audio,
iframe {
display: block;
height: 100%;
width: 100%;
}
button {
font: inherit;
line-height: inherit;
width: auto;
}
button {
font: inherit;
line-height: inherit;
width: auto;
}
// Ignore focus
&:focus {
outline: 0;
}
// Ignore focus
&:focus {
outline: 0;
}
}
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
@if $plyr-border-box {
.plyr--full-ui {
box-sizing: border-box;
.plyr--full-ui {
box-sizing: border-box;
*,
*::after,
*::before {
box-sizing: inherit;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
}
}
// Fix 300ms delay
@if $plyr-touch-action {
.plyr--full-ui {
a,
button,
input,
label {
touch-action: manipulation;
}
.plyr--full-ui {
a,
button,
input,
label {
touch-action: manipulation;
}
}
}

12
src/sass/components/badges.scss
View File

@ -3,10 +3,10 @@
// --------------------------------------------------------------
.plyr__badge {
background: var(--plyr-badge-background, $plyr-badge-background);
border-radius: 2px;
color: var(--plyr-badge-color, $plyr-badge-color);
font-size: var(--plyr-font-size-badge, $plyr-font-size-badge);
line-height: 1;
padding: 3px 4px;
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
color: $plyr-badge-color;
font-size: $plyr-font-size-badge;
line-height: 1;
padding: 3px 4px;
}

78
src/sass/components/captions.scss
View File

@ -4,57 +4,55 @@
// Hide default captions
.plyr--full-ui ::-webkit-media-text-track-container {
display: none;
display: none;
}
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
animation: plyr-fade-in 0.3s ease;
bottom: 0;
display: none;
font-size: $plyr-font-size-captions-small;
left: 0;
padding: $plyr-control-spacing;
position: absolute;
text-align: center;
transition: transform 0.4s ease-in-out;
width: 100%;
.plyr__caption {
background: $plyr-captions-background;
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}
span:empty {
display: none;
font-size: $plyr-font-size-captions-small;
left: 0;
padding: $plyr-control-spacing;
position: absolute;
text-align: center;
transition: transform 0.4s ease-in-out;
width: 100%;
}
.plyr__caption {
background: $plyr-captions-background;
background: var(--plyr-captions-background, $plyr-captions-background);
border-radius: 2px;
box-decoration-break: clone;
color: $plyr-captions-text-color;
color: var(--plyr-captions-text-color, $plyr-captions-text-color);
line-height: 185%;
padding: 0.2em 0.5em;
white-space: pre-wrap;
@media (min-width: $plyr-bp-sm) {
font-size: $plyr-font-size-captions-base;
padding: calc(#{$plyr-control-spacing} * 2);
}
// Firefox adds a <div> when using getCueAsHTML()
div {
display: inline;
}
}
span:empty {
display: none;
}
@media (min-width: $plyr-bp-sm) {
font-size: $plyr-font-size-captions-base;
padding: ($plyr-control-spacing * 2);
}
@media (min-width: $plyr-bp-md) {
font-size: $plyr-font-size-captions-medium;
}
@media (min-width: $plyr-bp-md) {
font-size: $plyr-font-size-captions-medium;
}
}
.plyr--captions-active .plyr__captions {
display: block;
display: block;
}
// If the lower controls are shown and not empty
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(-($plyr-control-spacing * 4));
transform: translateY(calc(#{$plyr-control-spacing} * -4));
}

63
src/sass/components/control.scss
View File

@ -3,45 +3,44 @@
// --------------------------------------------------------------
.plyr__control {
background: transparent;
border: 0;
border-radius: $plyr-control-radius;
border-radius: var(--plyr-control-radius, $plyr-control-radius);
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible; // IE11
padding: var(--plyr-control-padding, $plyr-control-padding);
position: relative;
transition: all 0.3s ease;
background: transparent;
border: 0;
border-radius: $plyr-control-radius;
color: inherit;
cursor: pointer;
flex-shrink: 0;
overflow: visible; // IE11
padding: $plyr-control-padding;
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
height: var(--plyr-control-icon-size, $plyr-control-icon-size);
pointer-events: none;
width: var(--plyr-control-icon-size, $plyr-control-icon-size);
}
svg {
display: block;
fill: currentColor;
height: $plyr-control-icon-size;
pointer-events: none;
width: $plyr-control-icon-size;
}
// Default focus
&:focus {
outline: 0;
}
// Default focus
&:focus {
outline: 0;
}
// Tab focus
&.plyr__tab-focus {
@include plyr-tab-focus();
}
// Tab focus
&.plyr__tab-focus {
@include plyr-tab-focus();
}
}
// Remove any link styling
a.plyr__control {
text-decoration: none;
text-decoration: none;
&::after,
&::before {
display: none;
}
&::after,
&::before {
display: none;
}
}
// Change icons on state change
@ -49,5 +48,5 @@ a.plyr__control {
.plyr__control.plyr__control--pressed .icon--not-pressed,
.plyr__control:not(.plyr__control--pressed) .label--pressed,
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
display: none;
}

70
src/sass/components/controls.scss
View File

@ -4,49 +4,49 @@
// Hide native controls
.plyr--full-ui ::-webkit-media-controls {
display: none;
display: none;
}
// Playback controls
.plyr__controls {
align-items: center;
display: flex;
justify-content: flex-end;
text-align: center;
align-items: center;
display: flex;
justify-content: flex-end;
text-align: center;
.plyr__progress__container {
flex: 1;
min-width: 0; // Fix for Edge issue where content would overflow
.plyr__progress__container {
flex: 1;
min-width: 0; // Fix for Edge issue where content would overflow
}
// Spacing
.plyr__controls__item {
margin-left: calc(#{$plyr-control-spacing} / 4);
&:first-child {
margin-left: 0;
margin-right: auto;
}
// Spacing
.plyr__controls__item {
margin-left: ($plyr-control-spacing / 4);
&:first-child {
margin-left: 0;
margin-right: auto;
}
&.plyr__progress__container {
padding-left: ($plyr-control-spacing / 4);
}
&.plyr__time {
padding: 0 ($plyr-control-spacing / 2);
}
&.plyr__progress__container:first-child,
&.plyr__time:first-child,
&.plyr__time + .plyr__time {
padding-left: 0;
}
&.plyr__progress__container {
padding-left: calc(#{$plyr-control-spacing} / 4);
}
// Hide empty controls
&:empty {
display: none;
&.plyr__time {
padding: 0 calc(#{$plyr-control-spacing} / 2);
}
&.plyr__progress__container:first-child,
&.plyr__time:first-child,
&.plyr__time + .plyr__time {
padding-left: 0;
}
}
// Hide empty controls
&:empty {
display: none;
}
}
// Some options are hidden by default
@ -54,11 +54,11 @@
.plyr [data-plyr='pip'],
.plyr [data-plyr='airplay'],
.plyr [data-plyr='fullscreen'] {
display: none;
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;
display: inline-block;
}

360
src/sass/components/menus.scss
View File

@ -3,198 +3,200 @@
// --------------------------------------------------------------
.plyr__menu {
display: flex; // Edge fix
position: relative;
display: flex; // Edge fix
position: relative;
// Animate the icon
.plyr__control svg {
transition: transform 0.3s ease;
}
.plyr__control[aria-expanded='true'] {
svg {
transform: rotate(90deg);
}
// Hide tooltip
.plyr__tooltip {
display: none;
}
// Animate the icon
.plyr__control svg {
transition: transform 0.3s ease;
}
.plyr__control[aria-expanded='true'] {
svg {
transform: rotate(90deg);
}
// The actual menu container
&__container {
animation: plyr-popup 0.2s ease;
background: $plyr-menu-background;
border-radius: 4px;
bottom: 100%;
box-shadow: $plyr-menu-shadow;
color: $plyr-menu-color;
font-size: $plyr-font-size-base;
margin-bottom: 10px;
// Hide tooltip
.plyr__tooltip {
display: none;
}
}
// The actual menu container
&__container {
animation: plyr-popup 0.2s ease;
background: $plyr-menu-background;
border-radius: 4px;
bottom: 100%;
box-shadow: $plyr-menu-shadow;
color: $plyr-menu-color;
font-size: $plyr-font-size-base;
margin-bottom: 10px;
position: absolute;
right: -3px;
text-align: left;
white-space: nowrap;
z-index: 3;
> div {
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
// Arrow
&::after {
border: 4px solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: 15px;
top: 100%;
width: 0;
}
[role='menu'] {
padding: $plyr-control-padding;
}
[role='menuitem'],
[role='menuitemradio'] {
margin-top: 2px;
&:first-child {
margin-top: 0;
}
}
// Options
.plyr__control {
align-items: center;
color: $plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
padding-bottom: calc(#{$plyr-control-padding} / 1.5);
padding-left: calc(#{$plyr-control-padding} * 1.5);
padding-right: calc(#{$plyr-control-padding} * 1.5);
padding-top: calc(#{$plyr-control-padding} / 1.5);
user-select: none;
width: 100%;
> span {
align-items: inherit;
display: flex;
width: 100%;
}
&::after {
border: 4px solid transparent;
content: '';
position: absolute;
right: -3px;
text-align: left;
white-space: nowrap;
z-index: 3;
top: 50%;
transform: translateY(-50%);
}
> div {
overflow: hidden;
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
&--forward {
padding-right: calc(#{$plyr-control-padding} * 4);
// Arrow
&::after {
border: 4px solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: 15px;
top: 100%;
width: 0;
border-left-color: $plyr-menu-arrow-color;
right: 5px;
}
[role='menu'] {
padding: $plyr-control-padding;
&.plyr__tab-focus::after,
&:hover::after {
border-left-color: currentColor;
}
}
&--back {
font-weight: $plyr-font-weight-regular;
margin: $plyr-control-padding;
margin-bottom: calc(#{$plyr-control-padding} / 2);
padding-left: calc(#{$plyr-control-padding} * 4);
position: relative;
width: calc(100% - (#{$plyr-control-padding} * 2));
&::after {
border-right-color: $plyr-menu-arrow-color;
left: $plyr-control-padding;
}
[role='menuitem'],
[role='menuitemradio'] {
margin-top: 2px;
&:first-child {
margin-top: 0;
}
&::before {
background: $plyr-menu-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
content: '';
height: 1px;
left: 0;
margin-top: calc(#{$plyr-control-padding} / 2);
overflow: hidden;
position: absolute;
right: 0;
top: 100%;
}
// Options
.plyr__control {
align-items: center;
color: $plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
user-select: none;
width: 100%;
> span {
align-items: inherit;
display: flex;
width: 100%;
}
&::after {
border: 4px solid transparent;
content: '';
position: absolute;
top: 50%;
transform: translateY(-50%);
}
&--forward {
padding-right: ceil($plyr-control-padding * 4);
&::after {
border-left-color: rgba($plyr-menu-color, 0.8);
right: 5px;
}
&.plyr__tab-focus::after,
&:hover::after {
border-left-color: currentColor;
}
}
&--back {
$horizontal-padding: ($plyr-control-padding * 2);
font-weight: $plyr-font-weight-regular;
margin: $plyr-control-padding;
margin-bottom: floor($plyr-control-padding / 2);
padding-left: ceil($plyr-control-padding * 4);
position: relative;
width: calc(100% - #{$horizontal-padding});
&::after {
border-right-color: rgba($plyr-menu-color, 0.8);
left: $plyr-control-padding;
}
&::before {
background: $plyr-menu-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
content: '';
height: 1px;
left: 0;
margin-top: ceil($plyr-control-padding / 2);
overflow: hidden;
position: absolute;
right: 0;
top: 100%;
}
&.plyr__tab-focus::after,
&:hover::after {
border-right-color: currentColor;
}
}
}
.plyr__control[role='menuitemradio'] {
padding-left: $plyr-control-padding;
&::before,
&::after {
border-radius: 100%;
}
&::before {
background: rgba(#000, 0.1);
content: '';
display: block;
flex-shrink: 0;
height: 16px;
margin-right: $plyr-control-spacing;
transition: all 0.3s ease;
width: 16px;
}
&::after {
background: #fff;
border: 0;
height: 6px;
left: 12px;
opacity: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.3s ease, opacity 0.3s ease;
width: 6px;
}
&[aria-checked='true'] {
&::before {
background: var(--plyr-color-main, $plyr-color-main);
}
&::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
&.plyr__tab-focus::before,
&:hover::before {
background: rgba(#000, 0.1);
}
}
// Option value
.plyr__menu__value {
align-items: center;
display: flex;
margin-left: auto;
margin-right: -($plyr-control-padding - 2);
overflow: hidden;
padding-left: ceil($plyr-control-padding * 3.5);
pointer-events: none;
&.plyr__tab-focus::after,
&:hover::after {
border-right-color: currentColor;
}
}
}
.plyr__control[role='menuitemradio'] {
padding-left: $plyr-control-padding;
&::before,
&::after {
border-radius: 100%;
}
&::before {
background: rgba(#000, 0.1);
content: '';
display: block;
flex-shrink: 0;
height: 16px;
margin-right: $plyr-control-spacing;
transition: all 0.3s ease;
width: 16px;
}
&::after {
background: #fff;
border: 0;
height: 6px;
left: 12px;
opacity: 0;
top: 50%;
transform: translateY(-50%) scale(0);
transition: transform 0.3s ease, opacity 0.3s ease;
width: 6px;
}
&[aria-checked='true'] {
&::before {
background: $plyr-control-toggle-checked-background;
}
&::after {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
&.plyr__tab-focus::before,
&:hover::before {
background: rgba($plyr-color-gray-900, 0.1);
}
}
// Option value
.plyr__menu__value {
align-items: center;
display: flex;
margin-left: auto;
margin-right: calc((#{$plyr-control-padding} - 2) * -1);
overflow: hidden;
padding-left: calc(#{$plyr-control-padding} * 3.5);
pointer-events: none;
}
}
}

26
src/sass/components/poster.scss
View File

@ -3,20 +3,20 @@
// --------------------------------------------------------------
.plyr__poster {
background-color: #000;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.2s ease;
width: 100%;
z-index: 1;
background-color: #000;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity 0.2s ease;
width: 100%;
z-index: 1;
}
.plyr--stopped.plyr__poster-enabled .plyr__poster {
opacity: 1;
opacity: 1;
}

132
src/sass/components/progress.scss
View File

@ -6,89 +6,89 @@
$plyr-progress-offset: $plyr-range-thumb-height;
.plyr__progress {
left: $plyr-progress-offset / 2;
margin-right: $plyr-progress-offset;
left: calc(#{$plyr-progress-offset} * 0.5);
margin-right: $plyr-progress-offset;
position: relative;
input[type='range'],
&__buffer {
margin-left: calc(#{$plyr-progress-offset} * -0.5);
margin-right: calc(#{$plyr-progress-offset} * -0.5);
width: calc(100% + #{$plyr-progress-offset});
}
input[type='range'] {
position: relative;
z-index: 2;
}
input[type='range'],
&__buffer {
margin-left: -($plyr-progress-offset / 2);
margin-right: -($plyr-progress-offset / 2);
width: calc(100% + #{$plyr-progress-offset});
}
input[type='range'] {
position: relative;
z-index: 2;
}
// Seek tooltip to show time
.plyr__tooltip {
font-size: $plyr-font-size-time;
left: 0;
}
// Seek tooltip to show time
.plyr__tooltip {
font-size: $plyr-font-size-time;
left: 0;
}
}
.plyr__progress__buffer {
-webkit-appearance: none; /* stylelint-disable-line */
-webkit-appearance: none; /* stylelint-disable-line */
background: transparent;
border: 0;
border-radius: 100px;
height: $plyr-range-track-height;
left: 0;
margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
padding: 0;
position: absolute;
top: 50%;
&::-webkit-progress-bar {
background: transparent;
border: 0;
}
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
height: $plyr-range-track-height;
left: 0;
margin-top: -($plyr-range-track-height / 2);
padding: 0;
position: absolute;
top: 50%;
min-width: $plyr-range-track-height;
transition: width 0.2s ease;
}
&::-webkit-progress-bar {
background: transparent;
}
// Mozilla
&::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: $plyr-range-track-height;
transition: width 0.2s ease;
}
&::-webkit-progress-value {
background: currentColor;
border-radius: 100px;
min-width: $plyr-range-track-height;
transition: width 0.2s ease;
}
// Mozilla
&::-moz-progress-bar {
background: currentColor;
border-radius: 100px;
min-width: $plyr-range-track-height;
transition: width 0.2s ease;
}
// Microsoft
&::-ms-fill {
border-radius: 100px;
transition: width 0.2s ease;
}
// Microsoft
&::-ms-fill {
border-radius: 100px;
transition: width 0.2s ease;
}
}
// Loading state
.plyr--loading .plyr__progress__buffer {
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(
-45deg,
var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
transparent 25%,
transparent 50%,
var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
transparent 75%,
transparent
);
background-repeat: repeat-x;
background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
color: transparent;
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(
-45deg,
$plyr-progress-loading-background 25%,
transparent 25%,
transparent 50%,
$plyr-progress-loading-background 50%,
$plyr-progress-loading-background 75%,
transparent 75%,
transparent
);
background-repeat: repeat-x;
background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
color: transparent;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
background-color: $plyr-video-progress-buffered-background;
background-color: $plyr-video-progress-buffered-background;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: $plyr-audio-progress-buffered-background;
background-color: $plyr-audio-progress-buffered-background;
}

154
src/sass/components/sliders.scss
View File

@ -3,92 +3,92 @@
// --------------------------------------------------------------
.plyr--full-ui input[type='range'] {
// WebKit
// WebKit
-webkit-appearance: none; /* stylelint-disable-line */
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
// color is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;
width: 100%;
&::-webkit-slider-runnable-track {
@include plyr-range-track();
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
}
&::-webkit-slider-thumb {
@include plyr-range-thumb();
-webkit-appearance: none; /* stylelint-disable-line */
background: transparent;
margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
}
// Mozilla
&::-moz-range-track {
@include plyr-range-track();
}
&::-moz-range-thumb {
@include plyr-range-thumb();
}
&::-moz-range-progress {
background: currentColor;
border-radius: calc(#{$plyr-range-track-height} / 2);
height: $plyr-range-track-height;
}
// Microsoft
&::-ms-track {
@include plyr-range-track();
color: transparent;
}
&::-ms-fill-upper {
@include plyr-range-track();
}
&::-ms-fill-lower {
@include plyr-range-track();
background: currentColor;
}
&::-ms-thumb {
@include plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
}
&::-ms-tooltip {
display: none;
}
// Focus styles
&:focus {
outline: 0;
}
&::-moz-focus-outer {
border: 0;
border-radius: ($plyr-range-thumb-height * 2);
// color is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;
width: 100%;
}
&.plyr__tab-focus {
&::-webkit-slider-runnable-track {
@include plyr-range-track();
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
@include plyr-tab-focus();
}
&::-webkit-slider-thumb {
@include plyr-range-thumb();
-webkit-appearance: none; /* stylelint-disable-line */
margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
}
// Mozilla
&::-moz-range-track {
@include plyr-range-track();
@include plyr-tab-focus();
}
&::-moz-range-thumb {
@include plyr-range-thumb();
}
&::-moz-range-progress {
background: currentColor;
border-radius: ($plyr-range-track-height / 2);
height: $plyr-range-track-height;
}
// Microsoft
&::-ms-track {
@include plyr-range-track();
color: transparent;
}
&::-ms-fill-upper {
@include plyr-range-track();
}
&::-ms-fill-lower {
@include plyr-range-track();
background: currentColor;
}
&::-ms-thumb {
@include plyr-range-thumb();
// For some reason, Edge uses the -webkit margin above
margin-top: 0;
}
&::-ms-tooltip {
display: none;
}
// Focus styles
&:focus {
outline: 0;
}
&::-moz-focus-outer {
border: 0;
}
&.plyr__tab-focus {
&::-webkit-slider-runnable-track {
@include plyr-tab-focus();
}
&::-moz-range-track {
@include plyr-tab-focus();
}
&::-ms-track {
@include plyr-tab-focus();
}
@include plyr-tab-focus();
}
}
}

18
src/sass/components/times.scss
View File

@ -3,18 +3,18 @@
// --------------------------------------------------------------
.plyr__time {
font-size: $plyr-font-size-time;
font-size: $plyr-font-size-time;
}
// Media duration hidden on small screens
.plyr__time + .plyr__time {
// Add a slash in before
&::before {
content: '\2044';
margin-right: $plyr-control-spacing;
}
// Add a slash in before
&::before {
content: '\2044';
margin-right: $plyr-control-spacing;
}
@media (max-width: $plyr-bp-sm-max) {
display: none;
}
@media (max-width: calc(#{$plyr-bp-md} - 1)) {
display: none;
}
}

112
src/sass/components/tooltips.scss
View File

@ -3,86 +3,86 @@
// --------------------------------------------------------------
.plyr__tooltip {
background: $plyr-tooltip-background;
border-radius: $plyr-tooltip-radius;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
color: $plyr-tooltip-color;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
left: 50%;
line-height: 1.3;
margin-bottom: ($plyr-tooltip-padding * 2);
opacity: 0;
padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
background: $plyr-tooltip-background;
border-radius: $plyr-tooltip-radius;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
color: $plyr-tooltip-color;
font-size: $plyr-font-size-small;
font-weight: $plyr-font-weight-regular;
left: 50%;
line-height: 1.3;
margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
opacity: 0;
padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
pointer-events: none;
position: absolute;
transform: translate(-50%, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
white-space: nowrap;
z-index: 2;
// The background triangle
&::before {
border-left: $plyr-tooltip-arrow-size solid transparent;
border-right: $plyr-tooltip-arrow-size solid transparent;
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
bottom: -$plyr-tooltip-arrow-size;
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
// The background triangle
&::before {
border-left: $plyr-tooltip-arrow-size solid transparent;
border-right: $plyr-tooltip-arrow-size solid transparent;
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
}
// Displaying
.plyr .plyr__control:hover .plyr__tooltip,
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
opacity: 1;
transform: translate(-50%, 0) scale(1);
opacity: 1;
transform: translate(-50%, 0) scale(1);
}
.plyr .plyr__control:hover .plyr__tooltip {
z-index: 3;
z-index: 3;
}
// First tooltip
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
left: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
left: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 0 100%;
&::before {
left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
}
&::before {
left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
}
}
// Last tooltip
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
left: auto;
right: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
left: auto;
right: 0;
transform: translate(0, 10px) scale(0.8);
transform-origin: 100% 100%;
&::before {
left: auto;
right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
transform: translateX(50%);
}
&::before {
left: auto;
right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
transform: translateX(50%);
}
}
.plyr__controls > .plyr__control:first-child,
.plyr__controls > .plyr__control:first-child + .plyr__control,
.plyr__controls > .plyr__control:last-child {
&:hover .plyr__tooltip,
&.plyr__tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
transform: translate(0, 0) scale(1);
}
&:hover .plyr__tooltip,
&.plyr__tab-focus .plyr__tooltip,
.plyr__tooltip--visible {
transform: translate(0, 0) scale(1);
}
}

28
src/sass/components/volume.scss
View File

@ -3,23 +3,23 @@
// --------------------------------------------------------------
.plyr__volume {
align-items: center;
display: flex;
max-width: 110px;
min-width: 80px;
position: relative;
width: 20%;
align-items: center;
display: flex;
max-width: 110px;
min-width: 80px;
position: relative;
width: 20%;
input[type='range'] {
margin-left: ($plyr-control-spacing / 2);
margin-right: ($plyr-control-spacing / 2);
position: relative;
z-index: 2;
}
input[type='range'] {
margin-left: calc(#{$plyr-control-spacing} / 2);
margin-right: calc(#{$plyr-control-spacing} / 2);
position: relative;
z-index: 2;
}
}
// Auto size on iOS as there's no slider
.plyr--is-ios .plyr__volume {
min-width: 0;
width: auto;
min-width: 0;
width: auto;
}

34
src/sass/lib/animation.scss
View File

@ -3,29 +3,29 @@
// --------------------------------------------------------------
@keyframes plyr-progress {
to {
background-position: $plyr-progress-loading-size 0;
}
to {
background-position: $plyr-progress-loading-size 0;
}
}
@keyframes plyr-popup {
0% {
opacity: 0.5;
transform: translateY(10px);
}
0% {
opacity: 0.5;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes plyr-fade-in {
from {
opacity: 0;
}
from {
opacity: 0;
}
to {
opacity: 1;
}
to {
opacity: 1;
}
}

112
src/sass/lib/css-vars.scss
View File

@ -11,12 +11,12 @@ $css-vars-use-native: false !default;
// Assigns a variable to the global map
///
@function css-var-assign($varName: null, $varValue: null) {
@return map-merge(
$css-vars,
(
$varName: $varValue,
)
);
@return map-merge(
$css-vars,
(
$varName: $varValue,
)
);
}
///
@ -30,33 +30,33 @@ $css-vars-use-native: false !default;
// background: var(--main-background, green);
///
@function var($args...) {
// CHECK PARAMS
@if (length($args) ==0) {
@error 'Variable name is expected to be passed to the var() function';
}
@if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
@error "Variable name is expected to start from '--'";
// CHECK PARAMS
@if (length($args) ==0) {
@error 'Variable name is expected to be passed to the var() function';
}
@if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
@error "Variable name is expected to start from '--'";
}
// PROCESS
$var-name: nth($args, 1);
$var-value: map-get($css-vars, $var-name);
@if ($css-vars-use-native) {
// CSS variables
// Native CSS: don't process function in case of native
@return unquote('var(' + $args + ')');
} @else {
@if ($var-value == null) {
// variable is not provided so far
@if (length($args) == 2) {
$var-value: nth($args, 2);
}
}
// PROCESS
$var-name: nth($args, 1);
$var-value: map-get($css-vars, $var-name);
@if ($css-vars-use-native) {
// CSS variables
// Native CSS: don't process function in case of native
@return unquote('var(' + $args + ')');
} @else {
@if ($var-value == null) {
// variable is not provided so far
@if (length($args) == 2) {
$var-value: nth($args, 2);
}
}
// Sass: return value from the map
@return $var-value;
}
// Sass: return value from the map
@return $var-value;
}
}
///
@ -69,32 +69,32 @@ $css-vars-use-native: false !default;
// ));
///
@mixin css-vars($var-map: null) {
// CHECK PARAMS
@if ($var-map == null) {
@error 'Map of variables is expected, instead got: null';
}
@if (type_of($var-map) != map) {
@error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
}
// CHECK PARAMS
@if ($var-map == null) {
@error 'Map of variables is expected, instead got: null';
}
@if (type_of($var-map) != map) {
@error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
}
// PROCESS
@if ($css-vars-use-native) {
// CSS variables
// Native CSS: assign CSS custom properties to the global scope
@at-root :root {
@each $var-name, $var-value in $var-map {
@if (type_of($var-value) == string) {
#{$var-name}: $var-value; // to prevent quotes interpolation
} @else {
#{$var-name}: #{$var-value};
}
}
}
} @else {
// Sass or debug
// merge variables and values to the global map (provides no output)
@each $var-name, $var-value in $var-map {
$css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
// PROCESS
@if ($css-vars-use-native) {
// CSS variables
// Native CSS: assign CSS custom properties to the global scope
@at-root :root {
@each $var-name, $var-value in $var-map {
@if (type_of($var-value) == string) {
#{$var-name}: $var-value; // to prevent quotes interpolation
} @else {
#{$var-name}: #{$var-value};
}
}
}
} @else {
// Sass or debug
// merge variables and values to the global map (provides no output)
@each $var-name, $var-value in $var-map {
$css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
}
}
}

2
src/sass/lib/functions.scss
View File

@ -3,5 +3,5 @@
// ==========================================================================
@function to-percentage($input) {
@return $input * 1%;
@return $input * 1%;
}

134
src/sass/lib/mixins.scss
View File

@ -4,97 +4,95 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus() {
// box-shadow: 0 0 0 5px rgba($color, 0.5);
// outline: 0;
outline-color: var(--plyr-color-main);
outline-offset: 2px;
outline-style: dotted;
outline-width: 3px;
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
outline-color: $color;
outline-offset: 2px;
outline-style: dotted;
outline-width: 3px;
}
// Font smoothing
// ---------------------------------------
@mixin plyr-font-smoothing($mode: true) {
@if $mode {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
@if $mode {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}
// <input type="range"> styling
// ---------------------------------------
@mixin plyr-range-track() {
background: transparent;
border: 0;
border-radius: ($plyr-range-track-height / 2);
height: $plyr-range-track-height;
transition: box-shadow 0.3s ease;
user-select: none;
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-track-height} / 2);
height: $plyr-range-track-height;
transition: box-shadow 0.3s ease;
user-select: none;
}
@mixin plyr-range-thumb() {
background: $plyr-range-thumb-background;
border: 0;
border-radius: 100%;
box-shadow: $plyr-range-thumb-shadow;
height: $plyr-range-thumb-height;
position: relative;
transition: all 0.2s ease;
width: $plyr-range-thumb-height;
background: $plyr-range-thumb-background;
border: 0;
border-radius: 100%;
box-shadow: $plyr-range-thumb-shadow;
height: $plyr-range-thumb-height;
position: relative;
transition: all 0.2s ease;
width: $plyr-range-thumb-height;
}
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-background, 0.5)) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
}
// Fullscreen styles
// ---------------------------------------
@mixin plyr-fullscreen-active() {
background: #000;
border-radius: 0 !important;
background: #000;
border-radius: 0 !important;
height: 100%;
margin: 0;
width: 100%;
video {
height: 100%;
margin: 0;
width: 100%;
}
video {
height: 100%;
.plyr__video-wrapper {
height: 100%;
position: static;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
// Display correct icon
.plyr__control .icon--exit-fullscreen {
display: block;
+ svg {
display: none;
}
}
.plyr__video-wrapper {
height: 100%;
position: static;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}
// Display correct icon
.plyr__control .icon--exit-fullscreen {
display: block;
+ svg {
display: none;
}
}
// Hide cursor in fullscreen when controls hidden
&.plyr--hide-controls {
cursor: none;
}
// Large captions in full screen on larger screens
@media (min-width: $plyr-bp-lg) {
.plyr__captions {
font-size: $plyr-font-size-captions-large;
}
// Hide cursor in fullscreen when controls hidden
&.plyr--hide-controls {
cursor: none;
}
// Large captions in full screen on larger screens
@media (min-width: $plyr-bp-lg) {
.plyr__captions {
font-size: $plyr-font-size-captions-large;
}
}
}

86
src/sass/plugins/ads.scss
View File

@ -3,54 +3,54 @@
// ==========================================================================
.plyr__ads {
border-radius: inherit;
bottom: 0;
cursor: pointer;
left: 0;
overflow: hidden;
border-radius: inherit;
bottom: 0;
cursor: pointer;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: -1; // Hide it by default
// Make sure the inner container is big enough for the ad creative.
> div,
> div iframe {
height: 100%;
position: absolute;
right: 0;
top: 0;
z-index: -1; // Hide it by default
width: 100%;
}
// Make sure the inner container is big enough for the ad creative.
> div,
> div iframe {
height: 100%;
position: absolute;
width: 100%;
}
// The countdown label
&::after {
background: $plyr-color-gray-900;
border-radius: 2px;
bottom: $plyr-control-spacing;
color: #fff;
content: attr(data-badge-text);
font-size: 11px;
padding: 2px 6px;
pointer-events: none;
position: absolute;
right: $plyr-control-spacing;
z-index: 3;
}
// The countdown label
&::after {
background: rgba($plyr-color-gray-900, 0.8);
border-radius: 2px;
bottom: $plyr-control-spacing;
color: #fff;
content: attr(data-badge-text);
font-size: 11px;
padding: 2px 6px;
pointer-events: none;
position: absolute;
right: $plyr-control-spacing;
z-index: 3;
}
&::after:empty {
display: none;
}
&::after:empty {
display: none;
}
}
// Advertisement cue's for the progress bar
.plyr__cues {
background: currentColor;
display: block;
height: $plyr-range-track-height;
left: 0;
margin: -($plyr-range-track-height / 2) 0 0;
opacity: 0.8;
position: absolute;
top: 50%;
width: 3px;
z-index: 3; // Between progress and thumb
background: currentColor;
display: block;
height: $plyr-range-track-height;
left: 0;
margin: -($plyr-range-track-height / 2) 0 0;
opacity: 0.8;
position: absolute;
top: 50%;
width: 3px;
z-index: 3; // Between progress and thumb
}

118
src/sass/plugins/preview-thumbnails.scss
View File

@ -1,118 +0,0 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-background: $plyr-tooltip-background !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-background: $plyr-color-gray-200 !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;
.plyr__preview-thumb {
background-color: $plyr-preview-background;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: $plyr-preview-padding * 2;
opacity: 0;
padding: $plyr-preview-radius;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
&--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
// The background triangle
&::before {
border-left: $plyr-preview-arrow-size solid transparent;
border-right: $plyr-preview-arrow-size solid transparent;
border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
bottom: -$plyr-preview-arrow-size;
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
&__image-container {
background: $plyr-preview-image-background;
border-radius: ($plyr-preview-radius - 1px);
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
}
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-background;
border-radius: ($plyr-preview-radius - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
&--is-shown {
opacity: 1;
}
img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
}

108
src/sass/plugins/preview-thumbnails/index.scss Normal file
View File

@ -0,0 +1,108 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
@import './settings.scss';
.plyr__preview-thumb {
background-color: $plyr-preview-background;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
margin-bottom: calc(#{$plyr-preview-padding} * 2);
opacity: 0;
padding: $plyr-preview-radius;
pointer-events: none;
position: absolute;
transform: translate(0, 10px) scale(0.8);
transform-origin: 50% 100%;
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
z-index: 2;
&--is-shown {
opacity: 1;
transform: translate(0, 0) scale(1);
}
// The background triangle
&::before {
border-left: $plyr-preview-arrow-size solid transparent;
border-right: $plyr-preview-arrow-size solid transparent;
border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
bottom: calc(#{$plyr-preview-arrow-size} * -1);
content: '';
height: 0;
left: 50%;
position: absolute;
transform: translateX(-50%);
width: 0;
z-index: 2;
}
&__image-container {
background: $plyr-preview-image-background;
border-radius: calc(#{$plyr-preview-radius} - 1px);
overflow: hidden;
position: relative;
z-index: 0;
img {
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
left: 0;
max-height: none;
max-width: none;
position: absolute;
top: 0;
width: 100%;
}
}
// Seek time text
&__time-container {
bottom: $plyr-preview-time-bottom-offset;
left: 0;
position: absolute;
right: 0;
white-space: nowrap;
z-index: 3;
span {
background-color: $plyr-preview-time-background;
border-radius: ($plyr-preview-radius - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
}
}
}
.plyr__preview-scrubbing {
bottom: 0;
filter: blur(1px);
height: 100%;
left: 0;
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
transition: opacity 0.3s ease;
width: 100%;
z-index: 1;
&--is-shown {
opacity: 1;
}
img {
height: 100%;
left: 0;
max-height: none;
max-width: none;
object-fit: contain;
position: absolute;
top: 0;
width: 100%;
}
}

15
src/sass/plugins/preview-thumbnails/settings.scss Normal file
View File

@ -0,0 +1,15 @@
// --------------------------------------------------------------
// Preview Thumbnails
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-background: $plyr-tooltip-background !default;
$plyr-preview-radius: $plyr-tooltip-radius !default;
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
$plyr-preview-image-background: $plyr-color-gray-200 !default;
$plyr-preview-time-font-size: $plyr-font-size-time !default;
$plyr-preview-time-padding: 3px 6px !default;
$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
$plyr-preview-time-color: #fff;
$plyr-preview-time-bottom-offset: 6px;

2
src/sass/plyr.scss
View File

@ -46,7 +46,7 @@ $css-vars-use-native: true;
@import 'states/fullscreen';
@import 'plugins/ads';
@import 'plugins/preview-thumbnails';
@import 'plugins/preview-thumbnails/index';
@import 'utils/animation';
@import 'utils/hidden';

5
src/sass/settings/badges.scss
View File

@ -2,5 +2,6 @@
// Badges
// ==========================================================================
$plyr-badge-background: $plyr-color-gray-700 !default;
$plyr-badge-color: #fff !default;
$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
$plyr-badge-color: var(--plyr-badge-color, #fff) !default;
$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;

7
src/sass/settings/breakpoints.scss
View File

@ -1,12 +1,9 @@
// ==========================================================================
// Breakpoints
// NOTE: we can't use CSS variables for breakpoints unfortunately
// https://www.w3.org/TR/css-variables-1/#using-variables
// ==========================================================================
$plyr-bp-sm: 480px !default;
$plyr-bp-md: 768px !default;
$plyr-bp-lg: 1024px !default;
// Max-width media queries
$plyr-bp-xs-max: ($plyr-bp-sm - 1);
$plyr-bp-sm-max: ($plyr-bp-md - 1);
$plyr-bp-md-max: ($plyr-bp-lg - 1);

12
src/sass/settings/captions.scss
View File

@ -2,10 +2,10 @@
// Captions
// ==========================================================================
$plyr-captions-background: rgba(#000, 0.8) !default;
$plyr-captions-text-color: #fff !default;
$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
$plyr-font-size-captions-base: $plyr-font-size-base !default;
$plyr-font-size-captions-small: $plyr-font-size-small !default;
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
$plyr-font-size-captions-large: $plyr-font-size-xlarge !default;
$plyr-font-size-captions-base: var(--plyr-font-size-captions-base, $plyr-font-size-base) !default;
$plyr-font-size-captions-small: var(--plyr-font-size-captions-small, $plyr-font-size-small) !default;
$plyr-font-size-captions-medium: var(--plyr-font-size-captions-medium, $plyr-font-size-large) !default;
$plyr-font-size-captions-large: var(--plyr-font-size-captions-large, $plyr-font-size-xlarge) !default;

38
src/sass/settings/colors.scss
View File

@ -2,32 +2,16 @@
// Colors
// ==========================================================================
$plyr-color-main: hsl(198, 100%, 50%) !default;
$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
// Grayscale
$plyr-color-gray-900: hsl(210, 15%, 16%);
$plyr-color-gray-800: lighten($plyr-color-gray-900, 9%);
$plyr-color-gray-700: lighten($plyr-color-gray-800, 9%);
$plyr-color-gray-600: lighten($plyr-color-gray-700, 9%);
$plyr-color-gray-500: lighten($plyr-color-gray-600, 9%);
$plyr-color-gray-400: lighten($plyr-color-gray-500, 9%);
$plyr-color-gray-300: lighten($plyr-color-gray-400, 9%);
$plyr-color-gray-200: lighten($plyr-color-gray-300, 9%);
$plyr-color-gray-100: lighten($plyr-color-gray-200, 9%);
$plyr-color-gray-50: lighten($plyr-color-gray-100, 9%);
@include css-vars(
(
--plyr-color-main: $plyr-color-main,
--plyr-color-gray-900: $plyr-color-gray-900,
--plyr-color-gray-800: $plyr-color-gray-800,
--plyr-color-gray-700: $plyr-color-gray-700,
--plyr-color-gray-600: $plyr-color-gray-600,
--plyr-color-gray-500: $plyr-color-gray-500,
--plyr-color-gray-400: $plyr-color-gray-400,
--plyr-color-gray-300: $plyr-color-gray-300,
--plyr-color-gray-200: $plyr-color-gray-200,
--plyr-color-gray-100: $plyr-color-gray-100,
--plyr-color-gray-50: $plyr-color-gray-50
)
);
$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
$plyr-color-gray-50: hsl(216, 15%, 97%) !default;

38
src/sass/settings/controls.scss
View File

@ -2,17 +2,31 @@
// Controls
// ==========================================================================
$plyr-control-icon-size: 18px !default;
$plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
$plyr-control-radius: 3px !default;
$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
$plyr-control-padding: var(--plyr-control-padding, calc(#{$plyr-control-spacing} * 0.7)) !default;
$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
$plyr-video-controls-background: linear-gradient(rgba(#000, 0), rgba(#000, 0.75)) !default;
$plyr-video-control-color: #fff !default;
$plyr-video-control-color-hover: #fff !default;
$plyr-video-control-background-hover: $plyr-color-main !default;
$plyr-control-toggle-checked-background: var(
--plyr-control-toggle-checked-background,
var(--plyr-color-main, $plyr-color-main)
) !default;
$plyr-audio-controls-background: #fff !default;
$plyr-audio-control-color: $plyr-color-gray-700 !default;
$plyr-audio-control-color-hover: #fff !default;
$plyr-audio-control-background-hover: $plyr-color-main !default;
$plyr-video-controls-background: var(
--plyr-video-controls-background,
linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
) !default;
$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
$plyr-video-control-background-hover: var(
--plyr-video-control-background-hover,
var(--plyr-color-main, $plyr-color-main)
) !default;
$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
$plyr-audio-control-background-hover: var(
--plyr-audio-control-background-hover,
var(--plyr-color-main, $plyr-color-main)
) !default;

4
src/sass/settings/cosmetics.scss
View File

@ -2,6 +2,4 @@
// Cosmetic
// ==========================================================================
$plyr-tab-focus-default-color: $plyr-color-main !default;
@include css-vars((--plyr-tab-focus-default-color: $plyr-tab-focus-default-color));
$plyr-tab-focus-default-color: var(--plyr-tab-focus-default-color, var(--plyr-color-main, $plyr-color-main)) !default;

17
src/sass/settings/menus.scss
View File

@ -2,9 +2,14 @@
// Menus
// ==========================================================================
$plyr-menu-background: rgba(#fff, 0.9) !default;
$plyr-menu-color: $plyr-color-gray-700 !default;
$plyr-menu-arrow-size: 6px !default;
$plyr-menu-border-color: rgba($plyr-color-gray-500, 0.2) !default;
$plyr-menu-border-shadow-color: #fff !default;
$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 6px) !default;
$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
// Border seperators
$plyr-menu-border-color: var(--plyr-menu-border-color, $plyr-color-gray-100) !default;
$plyr-menu-border-shadow-color: var(--plyr-menu-border-shadow-color, #fff) !default;

11
src/sass/settings/progress.scss
View File

@ -3,9 +3,12 @@
// ==========================================================================
// Loading
$plyr-progress-loading-size: 25px !default;
$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default;
$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
// Buffered
$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default;
$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default;
$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
$plyr-audio-progress-buffered-background: var(
--plyr-audio-progress-buffered-background,
rgba($plyr-color-gray-200, 0.66)
) !default;

43
src/sass/settings/sliders.scss
View File

@ -2,23 +2,40 @@
// Sliders
// ==========================================================================
// Active state
$plyr-range-thumb-active-shadow-width: 3px !default;
// Thumb
$plyr-range-thumb-height: 13px !default;
$plyr-range-thumb-background: #fff !default;
$plyr-range-thumb-border: 2px solid transparent !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default;
$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
$plyr-range-thumb-border: var(--plyr-range-thumb-border, 2px solid transparent) !default;
$plyr-range-thumb-shadow: var(
--plyr-range-thumb-shadow,
0 1px 1px rgba($plyr-color-gray-900, 0.15),
0 0 0 1px rgba($plyr-color-gray-900, 0.2)
) !default;
// Active state
$plyr-range-thumb-active-shadow-color: var(--plyr-range-thumb-active-shadow-color, rgba(#fff, 0.5));
$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
// Track
$plyr-range-track-height: 5px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
$plyr-range-max-height: var(
--plyr-range-max-height,
calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height})
) !default;
// Fill
$plyr-range-fill-background: var(--plyr-color-main);
$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
// Type specific
$plyr-video-range-track-background: $plyr-video-progress-buffered-background !default;
$plyr-audio-range-track-background: $plyr-audio-progress-buffered-background !default;
$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
$plyr-video-range-track-background: var(
--plyr-video-range-track-background,
$plyr-video-progress-buffered-background
) !default;
$plyr-audio-range-track-background: var(
--plyr-audio-range-track-background,
$plyr-audio-progress-buffered-background
) !default;
$plyr-audio-range-thumb-shadow-color: var(
--plyr-audio-range-thumb-shadow-color,
rgba($plyr-color-gray-900, 0.1)
) !default;

12
src/sass/settings/tooltips.scss
View File

@ -2,9 +2,9 @@
// Tooltips
// ==========================================================================
$plyr-tooltip-background: rgba(#fff, 0.9) !default;
$plyr-tooltip-color: $plyr-color-gray-700 !default;
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
$plyr-tooltip-arrow-size: 4px !default;
$plyr-tooltip-radius: 3px !default;
$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
$plyr-tooltip-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;

39
src/sass/settings/type.scss
View File

@ -2,35 +2,20 @@
// Typography
// ==========================================================================
$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
$plyr-font-size-base: 16px !default;
$plyr-font-size-small: 14px !default;
$plyr-font-size-large: 18px !default;
$plyr-font-size-xlarge: 21px !default;
$plyr-font-family: var(--plyr-font-family) !default;
$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
$plyr-font-size-time: var(--plyr-font-size-small) !default;
$plyr-font-size-badge: 9px !default;
$plyr-font-size-menu: var(--plyr-font-size-small) !default;
$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
$plyr-font-size-menu: var(--plyr-font-size-time, $plyr-font-size-small) !default;
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
$plyr-font-weight-regular: 500 !default;
$plyr-font-weight-bold: 600 !default;
$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
$plyr-line-height: 1.7 !default;
$plyr-line-height: var(--plyr-line-height, 1.7) !default;
$plyr-font-smoothing: false !default;
@include css-vars(
(
--plyr-font-family: $plyr-font-family,
--plyr-font-size-base: $plyr-font-size-base,
--plyr-font-size-small: $plyr-font-size-small,
--plyr-font-size-large: $plyr-font-size-large,
--plyr-font-size-xlarge: $plyr-font-size-xlarge,
--plyr-font-size-time: $plyr-font-size-time,
--plyr-font-size-badge: $plyr-font-size-badge,
--plyr-font-size-menu: $plyr-font-size-menu,
--plyr-font-weight-regular: $plyr-font-weight-regular,
--plyr-font-weight-bold: $plyr-font-weight-bold,
--plyr-line-height: $plyr-line-height
)
);

24
src/sass/states/fullscreen.scss
View File

@ -3,32 +3,32 @@
// --------------------------------------------------------------
.plyr:fullscreen {
@include plyr-fullscreen-active();
@include plyr-fullscreen-active();
}
/* stylelint-disable-next-line */
.plyr:-webkit-full-screen {
@include plyr-fullscreen-active();
@include plyr-fullscreen-active();
}
/* stylelint-disable-next-line */
.plyr:-moz-full-screen {
@include plyr-fullscreen-active();
@include plyr-fullscreen-active();
}
/* stylelint-disable-next-line */
.plyr:-ms-fullscreen {
@include plyr-fullscreen-active();
@include plyr-fullscreen-active();
}
// Fallback for unsupported browsers
.plyr--fullscreen-fallback {
@include plyr-fullscreen-active();
bottom: 0;
display: block;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000000;
@include plyr-fullscreen-active();
bottom: 0;
display: block;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000000;
}

69
src/sass/types/audio.scss
View File

@ -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;
}

198
src/sass/types/video.scss
View File

@ -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;
}

2
src/sass/utils/animation.scss
View File

@ -3,5 +3,5 @@
// --------------------------------------------------------------
.plyr--no-transition {
transition: none !important;
transition: none !important;
}

34
src/sass/utils/hidden.scss
View File

@ -4,25 +4,25 @@
// Screen reader only elements
.plyr__sr-only {
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
// !important is not always needed
@if $plyr-sr-only-important {
border: 0 !important;
height: 1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
} @else {
border: 0;
height: 1px;
padding: 0;
position: absolute;
width: 1px;
}
// !important is not always needed
@if $plyr-sr-only-important {
border: 0 !important;
height: 1px !important;
padding: 0 !important;
position: absolute !important;
width: 1px !important;
} @else {
border: 0;
height: 1px;
padding: 0;
position: absolute;
width: 1px;
}
}
.plyr [hidden] {
display: none !important;
display: none !important;
}