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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
package.json
View File

@ -39,17 +39,17 @@
}, },
"devDependencies": { "devDependencies": {
"ansi-colors": "^4.1.1", "ansi-colors": "^4.1.1",
"autoprefixer": "^9.7.5", "autoprefixer": "^9.7.6",
"aws-sdk": "^2.649.0", "aws-sdk": "^2.658.0",
"@babel/core": "^7.9.0", "@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0", "@babel/preset-env": "^7.9.5",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"browser-sync": "^2.26.7", "browser-sync": "^2.26.7",
"del": "^5.1.0", "del": "^5.1.0",
"eslint": "^6.8.0", "eslint": "^6.8.0",
"eslint-config-airbnb-base": "^14.1.0", "eslint-config-airbnb-base": "^14.1.0",
"eslint-config-prettier": "^6.10.1", "eslint-config-prettier": "^6.10.1",
"eslint-plugin-import": "^2.20.1", "eslint-plugin-import": "^2.20.2",
"eslint-plugin-simple-import-sort": "^5.0.2", "eslint-plugin-simple-import-sort": "^5.0.2",
"fancy-log": "^1.3.3", "fancy-log": "^1.3.3",
"fastly-purge": "^1.0.1", "fastly-purge": "^1.0.1",
@ -77,21 +77,21 @@
"prettier-stylelint": "^0.4.2", "prettier-stylelint": "^0.4.2",
"remark-cli": "^8.0.0", "remark-cli": "^8.0.0",
"remark-validate-links": "^10.0.0", "remark-validate-links": "^10.0.0",
"rollup": "^2.3.1", "rollup": "^2.6.1",
"rollup-plugin-babel": "^4.4.0", "rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-node-resolve": "^5.2.0",
"stylelint": "^13.2.1", "stylelint": "^13.3.2",
"stylelint-config-prettier": "^8.0.1", "stylelint-config-prettier": "^8.0.1",
"stylelint-config-recommended": "^3.0.0", "stylelint-config-recommended": "^3.0.0",
"stylelint-config-sass-guidelines": "^7.0.0", "stylelint-config-sass-guidelines": "^7.0.0",
"stylelint-order": "^4.0.0", "stylelint-order": "^4.0.0",
"stylelint-scss": "^3.16.0", "stylelint-scss": "^3.17.0",
"stylelint-selector-bem-pattern": "^2.1.0", "stylelint-selector-bem-pattern": "^2.1.0",
"through2": "^3.0.1" "through2": "^3.0.1"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.4", "core-js": "^3.6.5",
"custom-event-polyfill": "^1.0.7", "custom-event-polyfill": "^1.0.7",
"loadjs": "^4.2.0", "loadjs": "^4.2.0",
"rangetouch": "^2.0.1", "rangetouch": "^2.0.1",

83
readme.md
View File

@ -42,7 +42,7 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
### HTML5 Video ### HTML5 Video
```html ```html
<video poster="/path/to/poster.jpg" id="player" playsinline controls> <video id="player" playsinline controls data-poster="/path/to/poster.jpg">
<source src="/path/to/video.mp4" type="video/mp4" /> <source src="/path/to/video.mp4" type="video/mp4" />
<source src="/path/to/video.webm" type="video/webm" /> <source src="/path/to/video.webm" type="video/webm" />
@ -51,6 +51,8 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
</video> </video>
``` ```
**Note**: The poster image should be specified using `data-poster`. This is to prevent it [being downloaded twice](https://github.com/sampotts/plyr/issues/1531). If you're sure the image will be cached, you can still use the `poster` attribute for true progressive enhancement.
### HTML5 Audio ### HTML5 Audio
```html ```html
@ -174,17 +176,86 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option
# Advanced # Advanced
## Custom CSS ## Customizing the CSS
If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). If you want to change any design tokens used for the rendering of the player, you can do so using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
Here's a list of the properties and what they are used for: Here's a list of the properties and what they are used for:
| Name | Description | Fallback | | Name | Description | Default / Fallback |
| ------------------- | ----------------------------------------------- | --------------------- | | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `--plyr-color-main` | The main branding color - used for highlighting | `hsl(198, 100%, 50%)` | | `--plyr-color-main` | The primary UI color. | ![#f03c15](https://placehold.it/15/00b3ff/000000?text=+) `#00b3ff` |
| `--plyr-tab-focus-color` | The color used for the dotted outline when an element is `:focus-visible` (equivalent) keyboard focus. | `--plyr-color-main` |
| `--plyr-badge-background` | The background color for badges in the menu. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-badge-text-color` | The text color for badges. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-badge-border-radius` | The border radius used for badges. | `2px` |
| `--plyr-tab-focus-color` | The color used to highlight tab (keyboard) focus. | `--plyr-color-main` |
| `--plyr-captions-background` | The color for the background of captions. | `rgba(0, 0, 0, 0.8)` |
| `--plyr-captions-text-color` | The color used for the captions text. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-control-icon-size` | The size of the icons used in the controls. | `18px` |
| `--plyr-control-spacing` | The space between controls (sometimes used in a multiple - e.g. `10px / 2 = 5px`). | `10px` |
| `--plyr-control-padding` | The padding inside controls. | `--plyr-control-spacing * 0.7` (`7px`) |
| `--plyr-control-radius` | The border radius used on controls. | `3px` |
| `--plyr-control-toggle-checked-background` | The background color used for checked menu items. | `--plyr-color-main` |
| `--plyr-video-controls-background` | The background for the video controls. | `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` |
| `--plyr-video-control-color` | The text/icon color for video controls. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-video-control-color-hover` | The text/icon color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-video-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` |
| `--plyr-audio-controls-background` | The background for the audio controls. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-audio-control-color` | The text/icon color for audio controls. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-audio-control-color-hover` | The text/icon color used when audio controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-audio-control-background-hover` | The background color used when video controls are `:hover`, `:focus` and `:focus-visible` (equivalent). | `--plyr-color-main` |
| `--plyr-menu-background` | The background color for menus. | `rgba(255, 255, 255, 0.9)` |
| `--plyr-menu-color` | The text/icon color for menu items. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-menu-shadow` | The shadow used on menus. | `0 1px 2px rgba(0, 0, 0, 0.15)` |
| `--plyr-menu-radius` | The border radius on the menu. | `4px` |
| `--plyr-menu-arrow-size` | The size of the arrow on the bottom of the menu. | `6px` |
| `--plyr-menu-item-arrow-color` | The color of the arrows in the menu. | ![#728197](https://placehold.it/15/728197/000000?text=+) `#728197` |
| `--plyr-menu-item-arrow-size` | The size of the arrows in the menu. | `4px` |
| `--plyr-menu-border-color` | The border color for the bottom of the back button in the top of the sub menu pages. | ![#dcdfe5](https://placehold.it/15/dcdfe5/000000?text=+) `#dcdfe5` |
| `--plyr-menu-border-shadow-color` | The shadow below the border of the back button in the top of the sub menu pages. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-progress-loading-size` | The size of the stripes in the loading state in the scrubber. | `25px` |
| `--plyr-progress-loading-background` | The background color on the loading state in the scrubber. | `rgba(35, 40, 47, 0.6)` |
| `--plyr-video-progress-buffered-background` | The fill color for the buffer indication in the scrubber for video. | `rgba(255, 255, 255, 0.25)` |
| `--plyr-audio-progress-buffered-background` | The fill color for the buffer indication in the scrubber for audio. | `rgba(193, 200, 209, 0.6)` |
| `--plyr-range-thumb-height` | The height of the scrubber handle/thumb. | `13px` |
| `--plyr-range-thumb-background` | The background of the scrubber handle/thumb. | ![#ffffff](https://placehold.it/15/ffffff/000000?text=+) `#ffffff` |
| `--plyr-range-thumb-shadow` | The shadow of the scrubber handle/thumb. | `0 1px 1px rgba(215, 26, 18, 0.15), 0 0 0 1px rgba(215, 26, 18, 0.2)` |
| `--plyr-range-thumb-active-shadow-width` | The width of the shadow when the scrubber handle/thumb is `:active` (pressed). | `3px` |
| `--plyr-range-track-height` | The height of the scrubber/progress track. | `5px` |
| `--plyr-range-fill-background` | The fill color of the scrubber/progress. | `--plyr-color-main` |
| `--plyr-video-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` |
| `--plyr-video-range-thumb-active-shadow-color` | The color of the shadow when the video scrubber handle/thumb is `:active` (pressed). | `rgba(255, 255, 255, 0.5)` |
| `--plyr-audio-range-track-background` | The background of the scrubber/progress. | `--plyr-video-progress-buffered-background` |
| `--plyr-audio-range-thumb-active-shadow-color` | The color of the shadow when the audio scrubber handle/thumb is `:active` (pressed). | `rgba(215, 26, 18, 0.1)` |
| `--plyr-tooltip-background` | The background color for tooltips. | `rgba(255, 255, 255, 0.9)` |
| `--plyr-tooltip-color` | The text color for tooltips. | ![#4a5464](https://placehold.it/15/4a5464/000000?text=+) `#4a5464` |
| `--plyr-tooltip-padding` | The padding for tooltips. | `calc(var(--plyr-control-spacing) / 2))` |
| `--plyr-tooltip-arrow-size` | The size of the arrow under tooltips. | `4px` |
| `--plyr-tooltip-radius` | The border radius on tooltips. | `3px` |
| `--plyr-tooltip-shadow` | The shadow on tooltips. | `0 1px 2px rgba(0, 0, 0, 0.15)` |
| `--plyr-font-family` | The font family used in the player. | |
| `--plyr-font-size-base` | The base font size. Mainly used for captions. | `15px` |
| `--plyr-font-size-small` | The smaller font size. Mainly used for captions. | `13px` |
| `--plyr-font-size-large` | The larger font size. Mainly used for captions. | `18px` |
| `--plyr-font-size-xlarge` | The even larger font size. Mainly used for captions. | `21px` |
| `--plyr-font-size-time` | The font size for the time. | `--plyr-font-size-small` |
| `--plyr-font-size-menu` | The font size used in the menu. | `--plyr-font-size-small` |
| `--plyr-font-size-badge` | The font size used for badges. | `9px` |
| `--plyr-font-weight-regular` | The regular font weight. | `400` |
| `--plyr-font-weight-bold` | The bold font weight. | `600` |
| `--plyr-line-height` | The line height used within the player. | `1.7` |
| `--plyr-font-smoothing` | Whether to enable font antialiasing within the player. | `false` |
You can set them in your CSS: You can set them in your CSS for all players:
```css
:root {
--plyr-color-main: #1ac266;
}
```
...or for a specific class name:
```css ```css
.player { .player {

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

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

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

@ -19,21 +19,6 @@
transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out;
width: 100%; 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 { span:empty {
display: none; display: none;
} }
@ -56,3 +41,18 @@
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions { .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
transform: translateY(calc(#{$plyr-control-spacing} * -4)); 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 // Arrow
&::after { &::after {
border: 4px solid transparent; border: $plyr-menu-arrow-size solid transparent;
border-top-color: $plyr-menu-background; border-top-color: $plyr-menu-background;
content: ''; content: '';
height: 0; height: 0;
position: absolute; position: absolute;
right: 15px; right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
top: 100%; top: 100%;
width: 0; width: 0;
} }
@ -87,7 +87,7 @@
} }
&::after { &::after {
border: 4px solid transparent; border: $plyr-menu-item-arrow-size solid transparent;
content: ''; content: '';
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -98,8 +98,8 @@
padding-right: calc(#{$plyr-control-padding} * 4); padding-right: calc(#{$plyr-control-padding} * 4);
&::after { &::after {
border-left-color: $plyr-menu-arrow-color; border-left-color: $plyr-menu-item-arrow-color;
right: 5px; right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
} }
&.plyr__tab-focus::after, &.plyr__tab-focus::after,
@ -117,13 +117,13 @@
width: calc(100% - (#{$plyr-control-padding} * 2)); width: calc(100% - (#{$plyr-control-padding} * 2));
&::after { &::after {
border-right-color: $plyr-menu-arrow-color; border-right-color: $plyr-menu-item-arrow-color;
left: $plyr-control-padding; left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
} }
&::before { &::before {
background: $plyr-menu-border-color; background: $plyr-menu-back-border-color;
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color; box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
content: ''; content: '';
height: 1px; height: 1px;
left: 0; left: 0;

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

@ -8,10 +8,10 @@
background: transparent; background: transparent;
border: 0; border: 0;
border-radius: calc(#{$plyr-range-thumb-height} * 2); 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; color: $plyr-range-fill-background;
display: block; display: block;
height: $plyr-range-max-height; height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
margin: 0; margin: 0;
padding: 0; padding: 0;
transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease;

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

@ -4,7 +4,7 @@
// Nicer focus styles // 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-color: $color;
outline-offset: 2px; outline-offset: 2px;
outline-style: dotted; outline-style: dotted;
@ -17,9 +17,6 @@
@if $mode { @if $mode {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} @else {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
} }
} }
@ -45,7 +42,7 @@
width: $plyr-range-thumb-height; 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; 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 // Preview Thumbnails
// -------------------------------------------------------------- // --------------------------------------------------------------
@import './settings.scss'; @import './settings';
.plyr__preview-thumb { .plyr__preview-thumb {
background-color: $plyr-preview-background; background-color: $plyr-preview-background;
@ -68,7 +68,7 @@
span { span {
background-color: $plyr-preview-time-background; background-color: $plyr-preview-time-background;
border-radius: ($plyr-preview-radius - 1px); border-radius: calc(#{$plyr-preview-radius} - 1px);
color: $plyr-preview-time-color; color: $plyr-preview-time-color;
font-size: $plyr-preview-time-font-size; font-size: $plyr-preview-time-font-size;
padding: $plyr-preview-time-padding; padding: $plyr-preview-time-padding;
@ -84,6 +84,7 @@
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen) margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
opacity: 0; opacity: 0;
overflow: hidden; overflow: hidden;
pointer-events: none;
position: absolute; position: absolute;
right: 0; right: 0;
top: 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-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; $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-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !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-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-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-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-large: $plyr-font-size-xlarge !default;

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

@ -2,4 +2,4 @@
// Cosmetic // 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-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-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-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
$plyr-menu-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default; $plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !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;

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-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: var(
--plyr-audio-progress-buffered-background, --plyr-audio-progress-buffered-background,
rgba($plyr-color-gray-200, 0.66) rgba($plyr-color-gray-200, 0.6)
) !default; ) !default;

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

@ -5,7 +5,6 @@
// Thumb // Thumb
$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !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-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: var(
--plyr-range-thumb-shadow, --plyr-range-thumb-shadow,
0 1px 1px rgba($plyr-color-gray-900, 0.15), 0 1px 1px rgba($plyr-color-gray-900, 0.15),
@ -13,15 +12,10 @@ $plyr-range-thumb-shadow: var(
) !default; ) !default;
// Active state // 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; $plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
// Track // Track
$plyr-range-track-height: var(--plyr-range-track-height, 5px) !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 // Fill
$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default; $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-range-track-background,
$plyr-video-progress-buffered-background $plyr-video-progress-buffered-background
) !default; ) !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: var(
--plyr-audio-range-track-background, --plyr-audio-range-track-background,
$plyr-audio-progress-buffered-background $plyr-audio-progress-buffered-background
) !default; ) !default;
$plyr-audio-range-thumb-shadow-color: var( $plyr-audio-range-thumb-active-shadow-color: var(
--plyr-audio-range-thumb-shadow-color, --plyr-audio-range-thumb-active-shadow-color,
rgba($plyr-color-gray-900, 0.1) rgba($plyr-color-gray-900, 0.1)
) !default; ) !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-padding: var(--plyr-tooltip-padding, calc(#{$plyr-control-spacing} / 2)) !default;
$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default; $plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !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 // 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-base: var(--plyr-font-size-base, 15px) !default;
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !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-large: var(--plyr-font-size-large, 18px) !default;
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !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-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-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-regular: var(--plyr-font-weight-regular, 400) !default;
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default; $plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
$plyr-line-height: var(--plyr-line-height, 1.7) !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 // Pressed styles
&:active { &:active {
&::-webkit-slider-thumb { &::-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 { &::-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 { &::-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 // Pressed styles
&:active { &:active {
&::-webkit-slider-thumb { &::-webkit-slider-thumb {
@include plyr-range-thumb-active(); @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
} }
&::-moz-range-thumb { &::-moz-range-thumb {
@include plyr-range-thumb-active(); @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
} }
&::-ms-thumb { &::-ms-thumb {
@include plyr-range-thumb-active(); @include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
} }
} }
} }