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/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;