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

More work on custom properties and documentation

Browse Source
This commit is contained in:
Sam Potts
2020-04-24 00:14:50 +10:00
parent a9b24f5e1f
commit a97008aeeb
18 changed files with 290 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,7 +5,7 @@
.plyr__badge {
background: $plyr-badge-background;
border-radius: $plyr-badge-border-radius;
color: $plyr-badge-color;
color: $plyr-badge-text-color;
font-size: $plyr-font-size-badge;
line-height: 1;
padding: 3px 4px;

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

@ -19,21 +19,6 @@
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;
}
@ -56,3 +41,18 @@
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(calc(#{$plyr-control-spacing} * -4));
}
.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;
}
}

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

@ -44,12 +44,12 @@
// Arrow
&::after {
border: 4px solid transparent;
border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background;
content: '';
height: 0;
position: absolute;
right: 15px;
right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
top: 100%;
width: 0;
}
@ -87,7 +87,7 @@
}
&::after {
border: 4px solid transparent;
border: $plyr-menu-item-arrow-size solid transparent;
content: '';
position: absolute;
top: 50%;
@ -98,8 +98,8 @@
padding-right: calc(#{$plyr-control-padding} * 4);
&::after {
border-left-color: $plyr-menu-arrow-color;
right: 5px;
border-left-color: $plyr-menu-item-arrow-color;
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&.plyr__tab-focus::after,
@ -117,13 +117,13 @@
width: calc(100% - (#{$plyr-control-padding} * 2));
&::after {
border-right-color: $plyr-menu-arrow-color;
left: $plyr-control-padding;
border-right-color: $plyr-menu-item-arrow-color;
left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
}
&::before {
background: $plyr-menu-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
background: $plyr-menu-back-border-color;
box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
content: '';
height: 1px;
left: 0;

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

@ -8,10 +8,10 @@
background: transparent;
border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2);
// color is used in JS to populate lower fill for WebKit
// `color` property is used in JS to populate lower fill for WebKit
color: $plyr-range-fill-background;
display: block;
height: $plyr-range-max-height;
height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
margin: 0;
padding: 0;
transition: box-shadow 0.3s ease;

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

@ -4,7 +4,7 @@
// Nicer focus styles
// ---------------------------------------
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
outline-color: $color;
outline-offset: 2px;
outline-style: dotted;
@ -17,9 +17,6 @@
@if $mode {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
}
@ -45,7 +42,7 @@
width: $plyr-range-thumb-height;
}
@mixin plyr-range-thumb-active($color: $plyr-range-thumb-active-shadow-color) {
@mixin plyr-range-thumb-active($color) {
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
}

5
src/sass/plugins/preview-thumbnails/index.scss
View File

@ -2,7 +2,7 @@
// Preview Thumbnails
// --------------------------------------------------------------
@import './settings.scss';
@import './settings';
.plyr__preview-thumb {
background-color: $plyr-preview-background;
@ -68,7 +68,7 @@
span {
background-color: $plyr-preview-time-background;
border-radius: ($plyr-preview-radius - 1px);
border-radius: calc(#{$plyr-preview-radius} - 1px);
color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding;
@ -84,6 +84,7 @@
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0;
overflow: hidden;
pointer-events: none;
position: absolute;
right: 0;
top: 0;

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

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

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

@ -5,7 +5,7 @@
$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: 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;
$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;

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

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

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

@ -3,13 +3,13 @@
// ==========================================================================
$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba($plyr-color-gray-900, 0.15)) !default;
$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !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;
$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;

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

@ -10,5 +10,5 @@ $plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba(
$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)
rgba($plyr-color-gray-200, 0.6)
) !default;

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

@ -5,7 +5,6 @@
// Thumb
$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),
@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var(
) !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: 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-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
@ -31,11 +25,16 @@ $plyr-video-range-track-background: var(
--plyr-video-range-track-background,
$plyr-video-progress-buffered-background
) !default;
$plyr-video-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba(#fff, 0.5)
) !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,
$plyr-audio-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-active-shadow-color,
rgba($plyr-color-gray-900, 0.1)
) !default;

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

@ -7,4 +7,4 @@ $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;
$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;

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

@ -2,20 +2,19 @@
// Typography
// ==========================================================================
$plyr-font-family: var(--plyr-font-family) !default;
$plyr-font-family: var(--plyr-font-family, inherit) !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-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-size-badge: var(--plyr-font-size-badge, 9px) !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: var(--plyr-line-height, 1.7) !default;
$plyr-font-smoothing: false !default;
$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;

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

@ -42,15 +42,15 @@
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
}
}
}

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

@ -144,15 +144,15 @@ $embed-padding: ((100 / 16) * 9);
// Pressed styles
&:active {
&::-webkit-slider-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
&::-moz-range-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
&::-ms-thumb {
@include plyr-range-thumb-active();
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
}
}
}