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

Merge branch 'develop' into css-variables

Browse Source 
# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss
This commit is contained in:
Sam Potts
2020-03-30 10:45:57 +11:00
parent 50a7c2fad6 ad63af5096
commit da943b384c
110 changed files with 27759 additions and 10721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/sass/base.scss
View File

@ -5,24 +5,28 @@
// 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);
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
// Media elements
video,
audio {
border-radius: inherit;
height: auto;
vertical-align: middle;
audio,
iframe {
display: block;
height: 100%;
width: 100%;
}

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

@ -3,10 +3,10 @@
// --------------------------------------------------------------
.plyr__badge {
background: $plyr-badge-bg;
background: var(--plyr-badge-background, $plyr-badge-background);
border-radius: 2px;
color: $plyr-badge-color;
font-size: var(--plyr-font-size-badge);
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;
}

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

@ -10,7 +10,6 @@
.plyr__captions {
animation: plyr-fade-in 0.3s ease;
bottom: 0;
color: var(--plyr-captions-text-color);
display: none;
font-size: $plyr-font-size-captions-small;
left: 0;
@ -21,9 +20,12 @@
width: 100%;
.plyr__caption {
background: var(--plyr-captions-background);
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;

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

@ -5,21 +5,22 @@
.plyr__control {
background: transparent;
border: 0;
border-radius: var(--plyr-control-radius);
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);
padding: var(--plyr-control-padding, $plyr-control-padding);
position: relative;
transition: all 0.3s ease;
svg {
display: block;
fill: currentColor;
height: var(--plyr-control-icon-size);
height: var(--plyr-control-icon-size, $plyr-control-icon-size);
pointer-events: none;
width: var(--plyr-control-icon-size);
width: var(--plyr-control-icon-size, $plyr-control-icon-size);
}
// Default focus
@ -50,64 +51,3 @@ a.plyr__control {
.plyr__control.plyr__control--pressed .label--not-pressed {
display: none;
}
// Audio control
.plyr--audio .plyr__control {
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: $plyr-audio-control-bg-hover;
color: $plyr-audio-control-color-hover;
}
}
// Video control
.plyr--video .plyr__control {
svg {
filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
}
// Hover and tab focus
&.plyr__tab-focus,
&:hover,
&[aria-expanded='true'] {
background: var(--plyr-video-control-bg-hover);
color: var(--plyr-video-control-color-hover);
}
}
// Large play button (video only)
.plyr__control--overlaid {
background: var(--plyr-video-control-bg-hover);
border: 0;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(#000, 0.15);
color: var(--plyr-video-control-color-hover);
display: none;
left: 50%;
padding: ceil($plyr-control-spacing * 1.5);
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
// Offset icon to make the play button look right
svg {
left: 2px; // Offset to make the play button look right
position: relative;
}
&:hover,
&:focus {
background: var(--plyr-video-control-bg-hover);
}
}
.plyr--playing .plyr__control--overlaid {
opacity: 0;
visibility: hidden;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
display: block;
}

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

@ -12,11 +12,11 @@
align-items: center;
display: flex;
justify-content: flex-end;
min-width: 0; // Fix for Edge issue where content would overflow
text-align: center;
.plyr__progress__container {
flex: 1;
min-width: 0; // Fix for Edge issue where content would overflow
}
// Spacing
@ -41,14 +41,6 @@
&.plyr__time + .plyr__time {
padding-left: 0;
}
&.plyr__volume {
padding-right: ($plyr-control-spacing / 2);
}
&.plyr__volume:first-child {
padding-right: 0;
}
}
// Hide empty controls
@ -57,40 +49,6 @@
}
}
// Audio controls
.plyr--audio .plyr__controls {
background: $plyr-audio-controls-bg;
border-radius: inherit;
color: $plyr-audio-control-color;
padding: $plyr-control-spacing;
}
// Video controls
.plyr--video .plyr__controls {
background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
bottom: 0;
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;
@media (min-width: $plyr-bp-sm) {
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
}
}
// Hide video controls
.plyr--video.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none;
transform: translateY(100%);
}
// Some options are hidden by default
.plyr [data-plyr='captions'],
.plyr [data-plyr='pip'],

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

@ -24,7 +24,7 @@
// The actual menu container
&__container {
animation: plyr-popup 0.2s ease;
background: $plyr-menu-bg;
background: $plyr-menu-background;
border-radius: 4px;
bottom: 100%;
box-shadow: $plyr-menu-shadow;
@ -39,14 +39,13 @@
> 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);
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-bg;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
@ -74,8 +73,7 @@
color: $plyr-menu-color;
display: flex;
font-size: $plyr-font-size-menu;
padding: ceil($plyr-control-padding / 2)
ceil($plyr-control-padding * 1.5);
padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
user-select: none;
width: 100%;
@ -174,7 +172,7 @@
&[aria-checked='true'] {
&::before {
background: $plyr-color-main;
background: var(--plyr-color-main, $plyr-color-main);
}
&::after {
opacity: 1;

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

@ -67,25 +67,16 @@ $plyr-progress-offset: $plyr-range-thumb-height;
}
}
.plyr--video .plyr__progress__buffer {
box-shadow: 0 1px 1px rgba(#000, 0.15);
color: $plyr-video-progress-buffered-bg;
}
.plyr--audio .plyr__progress__buffer {
color: $plyr-audio-progress-buffered-bg;
}
// Loading state
.plyr--loading .plyr__progress__buffer {
animation: plyr-progress 1s linear infinite;
background-image: linear-gradient(
-45deg,
$plyr-progress-loading-bg 25%,
var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
transparent 25%,
transparent 50%,
$plyr-progress-loading-bg 50%,
$plyr-progress-loading-bg 75%,
var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
transparent 75%,
transparent
);
@ -95,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
}
.plyr--video.plyr--loading .plyr__progress__buffer {
background-color: $plyr-video-progress-buffered-bg;
background-color: $plyr-video-progress-buffered-background;
}
.plyr--audio.plyr--loading .plyr__progress__buffer {
background-color: $plyr-audio-progress-buffered-bg;
background-color: $plyr-audio-progress-buffered-background;
}

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

@ -9,7 +9,7 @@
border: 0;
border-radius: ($plyr-range-thumb-height * 2);
// color is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-bg;
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
margin: 0;
@ -19,11 +19,7 @@
&::-webkit-slider-runnable-track {
@include plyr-range-track();
background-image: linear-gradient(
to right,
currentColor var(--value, 0%),
transparent var(--value, 0%)
);
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
}
&::-webkit-slider-thumb {
@ -96,69 +92,3 @@
}
}
}
// Video range inputs
.plyr--full-ui.plyr--video input[type='range'] {
&::-webkit-slider-runnable-track {
background-color: $plyr-video-range-track-bg;
}
&::-moz-range-track {
background-color: $plyr-video-range-track-bg;
}
&::-ms-track {
background-color: $plyr-video-range-track-bg;
}
// 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();
}
}
}
// Audio range inputs
.plyr--full-ui.plyr--audio input[type='range'] {
&::-webkit-slider-runnable-track {
background-color: $plyr-audio-range-track-bg;
}
&::-moz-range-track {
background-color: $plyr-audio-range-track-bg;
}
&::-ms-track {
background-color: $plyr-audio-range-track-bg;
}
// 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
);
}
}
}

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

@ -18,7 +18,3 @@
display: none;
}
}
.plyr--video .plyr__time {
text-shadow: 0 1px 1px rgba(#000, 0.15);
}

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

@ -3,7 +3,7 @@
// --------------------------------------------------------------
.plyr__tooltip {
background: $plyr-tooltip-bg;
background: $plyr-tooltip-background;
border-radius: $plyr-tooltip-radius;
bottom: 100%;
box-shadow: $plyr-tooltip-shadow;
@ -27,7 +27,7 @@
&::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-bg;
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
bottom: -$plyr-tooltip-arrow-size;
content: '';
height: 0;

55
src/sass/components/video.scss
View File

@ -1,55 +0,0 @@
// --------------------------------------------------------------
// Video styles
// --------------------------------------------------------------
.plyr--video {
background: #000;
overflow: hidden;
// Menu open
&.plyr--menu-open {
overflow: visible;
}
}
.plyr__video-wrapper {
background: #000;
border-radius: inherit;
overflow: hidden;
position: relative;
// Require z-index to force border-radius
z-index: 0;
}
// Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9);
.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
height: 0;
padding-bottom: to-percentage($embed-padding);
}
.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
user-select: none;
width: 100%;
}
// If the full custom UI is supported
.plyr--full-ui .plyr__video-embed {
$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);
}
}

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

@ -5,33 +5,21 @@
.plyr__volume {
align-items: center;
display: flex;
flex: 1;
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;
}
@media (min-width: $plyr-bp-sm) {
max-width: 90px;
}
@media (min-width: $plyr-bp-md) {
max-width: 110px;
}
}
// Hide sound controls on iOS
// It's not supported to change volume using JavaScript:
// https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
// Auto size on iOS as there's no slider
.plyr--is-ios .plyr__volume {
display: none !important;
}
// Vimeo has no toggle mute method so hide mute button
// https://github.com/vimeo/player.js/issues/236#issuecomment-384663183
.plyr--is-ios.plyr--vimeo [data-plyr='mute'] {
display: none !important;
min-width: 0;
width: auto;
}

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

@ -27,7 +27,7 @@ $css-vars-use-native: false !default;
//
// E.G.:
// color: var(--main-color);
// background: var(--main-bg, green);
// background: var(--main-background, green);
///
@function var($args...) {
// CHECK PARAMS

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

@ -37,7 +37,7 @@
}
@mixin plyr-range-thumb() {
background: $plyr-range-thumb-bg;
background: $plyr-range-thumb-background;
border: 0;
border-radius: 100%;
box-shadow: $plyr-range-thumb-shadow;
@ -47,7 +47,7 @@
width: $plyr-range-thumb-height;
}
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
@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;
}
@ -66,12 +66,13 @@
.plyr__video-wrapper {
height: 100%;
width: 100%;
position: static;
}
// Vimeo requires some different styling
&.plyr--vimeo .plyr__video-wrapper {
height: 0;
position: relative;
top: 50%;
transform: translateY(-50%);
}

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

@ -23,7 +23,7 @@
// The countdown label
&::after {
background: rgba($plyr-color-gunmetal, 0.8);
background: rgba($plyr-color-gray-900, 0.8);
border-radius: 2px;
bottom: $plyr-control-spacing;
color: #fff;

14
src/sass/plugins/previewThumbnails.scss → src/sass/plugins/preview-thumbnails.scss
View File

@ -3,19 +3,19 @@
// --------------------------------------------------------------
$plyr-preview-padding: $plyr-tooltip-padding !default;
$plyr-preview-bg: $plyr-tooltip-bg !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-bg: $plyr-color-heather !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-bg: rgba(0, 0, 0, 0.55);
$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-bg;
background-color: $plyr-preview-background;
border-radius: 3px;
bottom: 100%;
box-shadow: $plyr-preview-shadow;
@ -38,7 +38,7 @@ $plyr-preview-time-bottom-offset: 6px;
&::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-bg;
border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
bottom: -$plyr-preview-arrow-size;
content: '';
height: 0;
@ -50,7 +50,7 @@ $plyr-preview-time-bottom-offset: 6px;
}
&__image-container {
background: $plyr-preview-image-bg;
background: $plyr-preview-image-background;
border-radius: ($plyr-preview-radius - 1px);
overflow: hidden;
position: relative;
@ -77,7 +77,7 @@ $plyr-preview-time-bottom-offset: 6px;
z-index: 3;
span {
background-color: $plyr-preview-time-bg;
background-color: $plyr-preview-time-background;
border-radius: ($plyr-preview-radius - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;

6
src/sass/plyr.scss
View File

@ -37,14 +37,16 @@ $css-vars-use-native: true;
@import 'components/poster';
@import 'components/times';
@import 'components/tooltips';
@import 'components/video';
@import 'components/progress';
@import 'components/volume';
@import 'types/audio';
@import 'types/video';
@import 'states/fullscreen';
@import 'plugins/ads';
@import 'plugins/previewThumbnails';
@import 'plugins/preview-thumbnails';
@import 'utils/animation';
@import 'utils/hidden';

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

@ -2,5 +2,5 @@
// Badges
// ==========================================================================
$plyr-badge-bg: $plyr-color-fiord !default;
$plyr-badge-background: $plyr-color-gray-700 !default;
$plyr-badge-color: #fff !default;

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

@ -9,10 +9,3 @@ $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;
@include css-vars(
(
--plyr-captions-background: $plyr-captions-background,
--plyr-captions-text-color: $plyr-captions-text-color
)
);

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

@ -2,18 +2,32 @@
// Colors
// ==========================================================================
$plyr-color-main: #fff !default;
$plyr-color-gunmetal: #2f343d !default;
$plyr-color-fiord: #4f5b5f !default;
$plyr-color-lynch: #6b7d85 !default;
$plyr-color-heather: #b7c5cd !default;
$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-gunmetal: $plyr-color-gunmetal,
--plyr-color-fiord: $plyr-color-fiord,
--plyr-color-lynch: $plyr-color-lynch,
--plyr-color-heather: $plyr-color-heather
--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
)
);

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

@ -7,29 +7,12 @@ $plyr-control-spacing: 10px !default;
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
$plyr-control-radius: 3px !default;
$plyr-video-controls-bg: #000 !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: #000 !default;
$plyr-video-control-bg-hover: var(--plyr-color-main) !default;
$plyr-video-control-color-hover: #fff !default;
$plyr-video-control-background-hover: $plyr-color-main !default;
$plyr-audio-controls-bg: #fff !default;
$plyr-audio-control-color: var(--plyr-color-fiord) !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-bg-hover: var(--plyr-color-main) !default;
@include css-vars(
(
--plyr-control-icon-size: $plyr-control-icon-size,
--plyr-control-spacing: $plyr-control-spacing,
--plyr-control-padding: $plyr-control-padding,
--plyr-control-radius: $plyr-control-radius,
--plyr-video-controls-bg: $plyr-video-controls-bg,
--plyr-video-control-color: $plyr-video-control-color,
--plyr-video-control-color-hover: $plyr-video-control-color-hover,
--plyr-video-control-bg-hover: $plyr-video-control-bg-hover,
--plyr-audio-controls-bg: $plyr-audio-controls-bg,
--plyr-audio-control-color: $plyr-audio-control-color,
--plyr-audio-control-color-hover: $plyr-audio-control-color-hover,
--plyr-audio-control-bg-hover: $plyr-audio-control-bg-hover
)
);
$plyr-audio-control-background-hover: $plyr-color-main !default;

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

@ -2,9 +2,9 @@
// Menus
// ==========================================================================
$plyr-menu-bg: rgba(#fff, 0.9) !default;
$plyr-menu-color: $plyr-color-fiord !default;
$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: $plyr-color-heather !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;

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

@ -4,8 +4,8 @@
// Loading
$plyr-progress-loading-size: 25px !default;
$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.6) !default;
$plyr-progress-loading-background: rgba($plyr-color-gray-900, 0.6) !default;
// Buffered
$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
$plyr-video-progress-buffered-background: rgba(#fff, 0.25) !default;
$plyr-audio-progress-buffered-background: rgba($plyr-color-gray-200, 0.66) !default;

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

@ -7,18 +7,18 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
// Thumb
$plyr-range-thumb-height: 13px !default;
$plyr-range-thumb-bg: #fff !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-gunmetal, 0.2) !default;
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-900, 0.2) !default;
// Track
$plyr-range-track-height: 5px !default;
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
// Fill
$plyr-range-fill-bg: var(--plyr-color-main);
$plyr-range-fill-background: var(--plyr-color-main);
// Type specific
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
$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;

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

@ -2,8 +2,8 @@
// Tooltips
// ==========================================================================
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
$plyr-tooltip-color: $plyr-color-fiord !default;
$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;

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

@ -24,8 +24,8 @@
// Fallback for unsupported browsers
.plyr--fullscreen-fallback {
@include plyr-fullscreen-active();
bottom: 0;
display: block;
left: 0;
position: fixed;
right: 0;

64
src/sass/types/audio.scss Normal file
View File

@ -0,0 +1,64 @@
// --------------------------------------------------------------
// Audio styles
// --------------------------------------------------------------
// Container
.plyr--audio {
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;
}
// 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);
}
}
// 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);
}
&::-moz-range-track {
background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
}
&::-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);
}
}
}
// Progress
.plyr--audio .plyr__progress__buffer {
color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background);
}

166
src/sass/types/video.scss Normal file
View File

@ -0,0 +1,166 @@
// --------------------------------------------------------------
// Video styles
// --------------------------------------------------------------
// Container
.plyr--video {
background: #000;
overflow: hidden;
&.plyr--menu-open {
overflow: visible;
}
}
.plyr__video-wrapper {
background: #000;
height: 100%;
margin: auto;
overflow: hidden;
width: 100%;
}
// Default to 16:9 ratio but this is set by JavaScript based on config
$embed-padding: ((100 / 16) * 9);
.plyr__video-embed,
.plyr__video-wrapper--fixed-ratio {
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;
}
// If the full custom UI is supported
.plyr--full-ui .plyr__video-embed {
$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);
}
}
// 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;
@media (min-width: $plyr-bp-sm) {
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
}
}
// Hide controls
.plyr--video.plyr--hide-controls .plyr__controls {
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);
}
}
// 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;
// Offset icon to make the play button look right
svg {
left: 2px;
position: relative;
}
&:hover,
&:focus {
opacity: 1;
}
}
.plyr--playing .plyr__control--overlaid {
opacity: 0;
visibility: hidden;
}
.plyr--full-ui.plyr--video .plyr__control--overlaid {
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);
}
&::-moz-range-track {
background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
}
&::-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();
}
}
}
// Progress
.plyr--video .plyr__progress__buffer {
color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background);
}