From a97008aeebb19678e5183e7c934e60729857e11b Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Fri, 24 Apr 2020 00:14:50 +1000
Subject: [PATCH] More work on custom properties and documentation

---
 package.json                                  |  16 +-
 readme.md                                     | 367 +++++++++++-------
 src/sass/components/badges.scss               |   2 +-
 src/sass/components/captions.scss             |  30 +-
 src/sass/components/menus.scss                |  18 +-
 src/sass/components/sliders.scss              |   4 +-
 src/sass/lib/mixins.scss                      |   7 +-
 .../plugins/preview-thumbnails/index.scss     |   5 +-
 src/sass/settings/badges.scss                 |   2 +-
 src/sass/settings/captions.scss               |   8 +-
 src/sass/settings/cosmetics.scss              |   2 +-
 src/sass/settings/menus.scss                  |  14 +-
 src/sass/settings/progress.scss               |   2 +-
 src/sass/settings/sliders.scss                |  15 +-
 src/sass/settings/tooltips.scss               |   2 +-
 src/sass/settings/type.scss                   |   7 +-
 src/sass/types/audio.scss                     |   6 +-
 src/sass/types/video.scss                     |   6 +-
 18 files changed, 290 insertions(+), 223 deletions(-)

diff --git a/package.json b/package.json
index d41ee9a7..bf89db18 100644
--- a/package.json
+++ b/package.json
@@ -39,17 +39,17 @@
   },
   "devDependencies": {
     "ansi-colors": "^4.1.1",
-    "autoprefixer": "^9.7.5",
-    "aws-sdk": "^2.649.0",
+    "autoprefixer": "^9.7.6",
+    "aws-sdk": "^2.658.0",
     "@babel/core": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
     "babel-eslint": "^10.1.0",
     "browser-sync": "^2.26.7",
     "del": "^5.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "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",
     "fancy-log": "^1.3.3",
     "fastly-purge": "^1.0.1",
@@ -77,21 +77,21 @@
     "prettier-stylelint": "^0.4.2",
     "remark-cli": "^8.0.0",
     "remark-validate-links": "^10.0.0",
-    "rollup": "^2.3.1",
+    "rollup": "^2.6.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "stylelint": "^13.2.1",
+    "stylelint": "^13.3.2",
     "stylelint-config-prettier": "^8.0.1",
     "stylelint-config-recommended": "^3.0.0",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "stylelint-order": "^4.0.0",
-    "stylelint-scss": "^3.16.0",
+    "stylelint-scss": "^3.17.0",
     "stylelint-selector-bem-pattern": "^2.1.0",
     "through2": "^3.0.1"
   },
   "dependencies": {
-    "core-js": "^3.6.4",
+    "core-js": "^3.6.5",
     "custom-event-polyfill": "^1.0.7",
     "loadjs": "^4.2.0",
     "rangetouch": "^2.0.1",
diff --git a/readme.md b/readme.md
index 7e4b0223..bfc07a51 100644
--- a/readme.md
+++ b/readme.md
@@ -8,26 +8,26 @@ Plyr is a simple, lightweight, accessible and customizable HTML5, YouTube and Vi
 
 # Features
 
--   📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
--   💪 **Accessible** - full support for VTT captions and screen readers
--   🔧 **[Customizable](#html)** - make the player look how you want with the markup you want
--   😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
-    `<span>` or `<a href="#">` button hacks
--   📱 **Responsive** - works with any screen size
--   💵 **[Monetization](#ads)** - make money from your videos
--   📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
--   🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
--   🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
--   🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
--   ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
--   🖥 **Picture-in-Picture** - supports picture-in-picture mode
--   📱 **Playsinline** - supports the `playsinline` attribute
--   🏎 **Speed controls** - adjust speed on the fly
--   📖 **Multiple captions** - support for multiple caption tracks
--   🌎 **i18n support** - support for internationalization of controls
--   👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
--   🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
--   💁‍♀️ **SASS** - to include in your build processes
+- 📼 **HTML Video & Audio, YouTube & Vimeo** - support for the major formats
+- 💪 **Accessible** - full support for VTT captions and screen readers
+- 🔧 **[Customizable](#html)** - make the player look how you want with the markup you want
+- 😎 **Clean HTML** - uses the _right_ elements. `<input type="range">` for volume and `<progress>` for progress and well, `<button>`s for buttons. There's no
+  `<span>` or `<a href="#">` button hacks
+- 📱 **Responsive** - works with any screen size
+- 💵 **[Monetization](#ads)** - make money from your videos
+- 📹 **[Streaming](#demos)** - support for hls.js, Shaka and dash.js streaming playback
+- 🎛 **[API](#api)** - toggle playback, volume, seeking, and more through a standardized API
+- 🎤 **[Events](#events)** - no messing around with Vimeo and YouTube APIs, all events are standardized across formats
+- 🔎 **[Fullscreen](#fullscreen)** - supports native fullscreen with fallback to "full window" modes
+- ⌨️ **[Shortcuts](#shortcuts)** - supports keyboard shortcuts
+- 🖥 **Picture-in-Picture** - supports picture-in-picture mode
+- 📱 **Playsinline** - supports the `playsinline` attribute
+- 🏎 **Speed controls** - adjust speed on the fly
+- 📖 **Multiple captions** - support for multiple caption tracks
+- 🌎 **i18n support** - support for internationalization of controls
+- 👌 **[Preview thumbnails](#preview-thumbnails)** - support for displaying preview thumbnails
+- 🤟 **No frameworks** - written in "vanilla" ES6 JavaScript, no jQuery required
+- 💁‍♀️ **SASS** - to include in your build processes
 
 ### Demos
 
@@ -42,21 +42,23 @@ Plyr extends upon the standard [HTML5 media element](https://developer.mozilla.o
 ### HTML5 Video
 
 ```html
-<video poster="/path/to/poster.jpg" id="player" playsinline controls>
-    <source src="/path/to/video.mp4" type="video/mp4" />
-    <source src="/path/to/video.webm" type="video/webm" />
+<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.webm" type="video/webm" />
 
-    <!-- Captions are optional -->
-    <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
+  <!-- Captions are optional -->
+  <track kind="captions" label="English captions" src="/path/to/captions.vtt" srclang="en" default />
 </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
 
 ```html
 <audio id="player" controls>
-    <source src="/path/to/audio.mp3" type="audio/mp3" />
-    <source src="/path/to/audio.ogg" type="audio/ogg" />
+  <source src="/path/to/audio.mp3" type="audio/mp3" />
+  <source src="/path/to/audio.ogg" type="audio/ogg" />
 </audio>
 ```
 
@@ -68,12 +70,12 @@ We recommend [progressive enhancement](https://www.smashingmagazine.com/2009/04/
 
 ```html
 <div class="plyr__video-embed" id="player">
-    <iframe
-        src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
-        allowfullscreen
-        allowtransparency
-        allow="autoplay"
-    ></iframe>
+  <iframe
+    src="https://www.youtube.com/embed/bTqVqk7FSmY?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
+    allowfullscreen
+    allowtransparency
+    allow="autoplay"
+  ></iframe>
 </div>
 ```
 
@@ -93,12 +95,12 @@ Much the same as YouTube above.
 
 ```html
 <div class="plyr__video-embed" id="player">
-    <iframe
-        src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
-        allowfullscreen
-        allowtransparency
-        allow="autoplay"
-    ></iframe>
+  <iframe
+    src="https://player.vimeo.com/video/76979871?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media"
+    allowfullscreen
+    allowtransparency
+    allow="autoplay"
+  ></iframe>
 </div>
 ```
 
@@ -123,7 +125,7 @@ Alternatively you can include the `plyr.js` script before the closing `</body>`
 ```html
 <script src="path/to/plyr.js"></script>
 <script>
-    const player = new Plyr('#player');
+  const player = new Plyr('#player');
 </script>
 ```
 
@@ -164,9 +166,9 @@ reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.5.10
 
 Plyr has partnered up with [vi.ai](https://vi.ai/publisher-video-monetization/?aid=plyrio) to offer monetization options for your videos. Getting setup is easy:
 
--   [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
--   Grab your publisher ID from the code snippet
--   Enable ads in the [config options](#options) and enter your publisher ID
+- [Sign up for a vi.ai account](https://vi.ai/publisher-video-monetization/?aid=plyrio)
+- Grab your publisher ID from the code snippet
+- Enable ads in the [config options](#options) and enter your publisher ID
 
 Any questions regarding the ads can be sent straight to vi.ai and any issues with rendering raised through GitHub issues.
 
@@ -174,21 +176,90 @@ If you do not wish to use Vi, you can set your own `ads.tagUrl` [option](#option
 
 # 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).
 
 Here's a list of the properties and what they are used for:
 
-| Name                | Description                                     | Fallback              |
-| ------------------- | ----------------------------------------------- | --------------------- |
-| `--plyr-color-main` | The main branding color - used for highlighting | `hsl(198, 100%, 50%)` |
+| Name                                           | Description                                                                                             | Default / Fallback                                                    |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
+| `--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
 .player {
-    --plyr-color-main: #1ac266;
+  --plyr-color-main: #1ac266;
 }
 ```
 
@@ -241,9 +312,9 @@ WebVTT captions are supported. To add a caption track, check the HTML example ab
 
 You can specify a range of arguments for the constructor to use:
 
--   A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
--   A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
--   A [jQuery](https://jquery.com) object
+- A [CSS string selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
+- A [`HTMLElement`](https://developer.mozilla.org/en/docs/Web/API/HTMLElement)
+- A [jQuery](https://jquery.com) object
 
 _Note_: If a `NodeList`, `Array`, or jQuery object are passed, the first element will be used for setup. To setup multiple players, see [multiple players](#multiple-players) below.
 
@@ -289,7 +360,7 @@ The second argument for the constructor is the [options](#options) object:
 
 ```javascript
 const player = new Plyr('#player', {
-    title: 'Example Title',
+  title: 'Example Title',
 });
 ```
 
@@ -344,9 +415,9 @@ Note the single quotes encapsulating the JSON and double quotes on the object ke
 1.  Vimeo only
 2.  Autoplay is generally not recommended as it is seen as a negative user experience. It is also disabled in many browsers. Before raising issues, do your homework. More info can be found here:
 
--   https://webkit.org/blog/6784/new-video-policies-for-ios/
--   https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
--   https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
+- https://webkit.org/blog/6784/new-video-policies-for-ios/
+- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
+- https://hacks.mozilla.org/2019/02/firefox-66-to-block-automatically-playing-audible-video-and-audio/
 
 # API
 
@@ -358,7 +429,7 @@ The easiest way to access the Plyr object is to set the return value from your c
 
 ```javascript
 const player = new Plyr('#player', {
-    /* options */
+  /* options */
 });
 ```
 
@@ -366,7 +437,7 @@ You can also access the object through any events:
 
 ```javascript
 element.addEventListener('ready', event => {
-    const player = event.detail.plyr;
+  const player = event.detail.plyr;
 });
 ```
 
@@ -460,39 +531,39 @@ Video example:
 
 ```javascript
 player.source = {
-    type: 'video',
-    title: 'Example title',
-    sources: [
-        {
-            src: '/path/to/movie.mp4',
-            type: 'video/mp4',
-            size: 720,
-        },
-        {
-            src: '/path/to/movie.webm',
-            type: 'video/webm',
-            size: 1080,
-        },
-    ],
-    poster: '/path/to/poster.jpg',
-    previewThumbnails: {
-        src: '/path/to/thumbnails.vtt',
+  type: 'video',
+  title: 'Example title',
+  sources: [
+    {
+      src: '/path/to/movie.mp4',
+      type: 'video/mp4',
+      size: 720,
     },
-    tracks: [
-        {
-            kind: 'captions',
-            label: 'English',
-            srclang: 'en',
-            src: '/path/to/captions.en.vtt',
-            default: true,
-        },
-        {
-            kind: 'captions',
-            label: 'French',
-            srclang: 'fr',
-            src: '/path/to/captions.fr.vtt',
-        },
-    ],
+    {
+      src: '/path/to/movie.webm',
+      type: 'video/webm',
+      size: 1080,
+    },
+  ],
+  poster: '/path/to/poster.jpg',
+  previewThumbnails: {
+    src: '/path/to/thumbnails.vtt',
+  },
+  tracks: [
+    {
+      kind: 'captions',
+      label: 'English',
+      srclang: 'en',
+      src: '/path/to/captions.en.vtt',
+      default: true,
+    },
+    {
+      kind: 'captions',
+      label: 'French',
+      srclang: 'fr',
+      src: '/path/to/captions.fr.vtt',
+    },
+  ],
 };
 ```
 
@@ -500,18 +571,18 @@ Audio example:
 
 ```javascript
 player.source = {
-    type: 'audio',
-    title: 'Example title',
-    sources: [
-        {
-            src: '/path/to/audio.mp3',
-            type: 'audio/mp3',
-        },
-        {
-            src: '/path/to/audio.ogg',
-            type: 'audio/ogg',
-        },
-    ],
+  type: 'audio',
+  title: 'Example title',
+  sources: [
+    {
+      src: '/path/to/audio.mp3',
+      type: 'audio/mp3',
+    },
+    {
+      src: '/path/to/audio.ogg',
+      type: 'audio/ogg',
+    },
+  ],
 };
 ```
 
@@ -519,13 +590,13 @@ YouTube example:
 
 ```javascript
 player.source = {
-    type: 'video',
-    sources: [
-        {
-            src: 'bTqVqk7FSmY',
-            provider: 'youtube',
-        },
-    ],
+  type: 'video',
+  sources: [
+    {
+      src: 'bTqVqk7FSmY',
+      provider: 'youtube',
+    },
+  ],
 };
 ```
 
@@ -535,13 +606,13 @@ Vimeo example
 
 ```javascript
 player.source = {
-    type: 'video',
-    sources: [
-        {
-            src: '143418951',
-            provider: 'vimeo',
-        },
-    ],
+  type: 'video',
+  sources: [
+    {
+      src: '143418951',
+      provider: 'vimeo',
+    },
+  ],
 };
 ```
 
@@ -566,7 +637,7 @@ property. Here's an example:
 
 ```javascript
 player.on('ready', event => {
-    const instance = event.detail.plyr;
+  const instance = event.detail.plyr;
 });
 ```
 
@@ -625,8 +696,8 @@ YouTube and Vimeo are currently supported and function much like a HTML5 video.
 to access the API's directly. You can do so via the `embed` property of your player object - e.g. `player.embed`. You can then use the relevant methods from the
 third party APIs. More info on the respective API's here:
 
--   [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
--   [Vimeo player.js Reference](https://github.com/vimeo/player.js)
+- [YouTube iframe API Reference](https://developers.google.com/youtube/iframe_api_reference)
+- [Vimeo player.js Reference](https://github.com/vimeo/player.js)
 
 _Note_: Not all API methods may work 100%. Your mileage may vary. It's better to use the Plyr API where possible.
 
@@ -692,9 +763,9 @@ const supported = Plyr.supported('video', 'html5', true);
 
 The arguments are:
 
--   Media type (`audio` or `video`)
--   Provider (`html5`, `youtube` or `vimeo`)
--   Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
+- Media type (`audio` or `video`)
+- Provider (`html5`, `youtube` or `vimeo`)
+- Whether the player has the `playsinline` attribute (only applicable to iOS 10+)
 
 ## Disable support programmatically
 
@@ -702,7 +773,7 @@ The `enabled` option can be used to disable certain User Agents. For example, if
 
 ```javascript
 {
-    enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+  enabled: /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
 }
 ```
 
@@ -735,42 +806,42 @@ Plyr is developed by [@sam_potts](https://twitter.com/sam_potts) / [sampotts.me]
 
 Plyr costs money to run, not only my time. I donate my time for free as I enjoy building Plyr but unfortunately have to pay for domains, hosting, and more. Any help with costs is appreciated...
 
--   [Donate via Patreon](https://www.patreon.com/plyr)
--   [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
+- [Donate via Patreon](https://www.patreon.com/plyr)
+- [Donate via PayPal](https://www.paypal.me/pottsy/20usd)
 
 # Mentions
 
--   [ProductHunt](https://www.producthunt.com/tech/plyr)
--   [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
--   [HTML5 Weekly #177](http://html5weekly.com/issues/177)
--   [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
--   [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
--   [Front End Focus #177](https://frontendfoc.us/issues/177)
--   [Hacker News](https://news.ycombinator.com/item?id=9136774)
--   [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
--   [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
--   [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
--   [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
+- [ProductHunt](https://www.producthunt.com/tech/plyr)
+- [The Changelog](http://thechangelog.com/plyr-simple-html5-media-player-custom-controls-webvtt-captions/)
+- [HTML5 Weekly #177](http://html5weekly.com/issues/177)
+- [Responsive Design #149](http://us4.campaign-archive2.com/?u=559bc631fe5294fc66f5f7f89&id=451a61490f)
+- [Web Design Weekly #174](https://web-design-weekly.com/2015/02/24/web-design-weekly-174/)
+- [Front End Focus #177](https://frontendfoc.us/issues/177)
+- [Hacker News](https://news.ycombinator.com/item?id=9136774)
+- [Web Platform Daily](http://webplatformdaily.org/releases/2015-03-04)
+- [LayerVault Designer News](https://news.layervault.com/stories/45394-plyr--a-simple-html5-media-player)
+- [The Treehouse Show #131](https://teamtreehouse.com/library/episode-131-origami-react-responsive-hero-images)
+- [noupe.com](http://www.noupe.com/design/html5-plyr-is-a-responsive-and-accessible-video-player-94389.html)
 
 # Used by
 
--   [Selz.com](https://selz.com)
--   [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
--   [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
--   [TomTom.com](http://prioritydriving.tomtom.com/)
--   [DIGBMX](http://digbmx.com/)
--   [Grime Archive](https://grimearchive.com/)
--   [koel - A personal music streaming server that works.](http://koel.phanan.net/)
--   [Oscar Radio](http://oscar-radio.xyz/)
--   [Sparkk TV](https://www.sparkktv.com/)
--   [@halfhalftravel](https://www.halfhalftravel.com/)
+- [Selz.com](https://selz.com)
+- [Peugeot.fr](http://www.peugeot.fr/marque-et-technologie/technologies/peugeot-i-cockpit.html)
+- [Peugeot.de](http://www.peugeot.de/modelle/modellberater/208-3-turer/fotos-videos.html)
+- [TomTom.com](http://prioritydriving.tomtom.com/)
+- [DIGBMX](http://digbmx.com/)
+- [Grime Archive](https://grimearchive.com/)
+- [koel - A personal music streaming server that works.](http://koel.phanan.net/)
+- [Oscar Radio](http://oscar-radio.xyz/)
+- [Sparkk TV](https://www.sparkktv.com/)
+- [@halfhalftravel](https://www.halfhalftravel.com/)
 
 If you want to be added to the list, open a pull request. It'd be awesome to see how you're using Plyr 😎
 
 # Useful links and credits
 
--   [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player)
--   [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
+- [PayPal's Accessible HTML5 Video Player (which Plyr was originally ported from)](https://github.com/paypal/accessible-html5-video-player)
+- [An awesome guide for Plyr in Japanese!](http://syncer.jp/how-to-use-plyr-io) by [@arayutw](https://twitter.com/arayutw)
 
 # Thanks
 
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 83d045a6..3acb3cc4 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -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;
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index eb3c9389..2acab086 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -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;
+  }
+}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 49cec6f5..fccf303e 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -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;
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b7872bcb..b90e7229 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -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;
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 9186fec6..cbb8cc78 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -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;
 }
 
diff --git a/src/sass/plugins/preview-thumbnails/index.scss b/src/sass/plugins/preview-thumbnails/index.scss
index 6a0382d0..7a9eb991 100644
--- a/src/sass/plugins/preview-thumbnails/index.scss
+++ b/src/sass/plugins/preview-thumbnails/index.scss
@@ -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;
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 0148f570..e56da1f8 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -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;
diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss
index 85735faf..23d944cb 100644
--- a/src/sass/settings/captions.scss
+++ b/src/sass/settings/captions.scss
@@ -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;
diff --git a/src/sass/settings/cosmetics.scss b/src/sass/settings/cosmetics.scss
index 3320ae7f..4fc10de5 100644
--- a/src/sass/settings/cosmetics.scss
+++ b/src/sass/settings/cosmetics.scss
@@ -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;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index bdd1eb36..283a0c59 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -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;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 7e76da19..4e5105f0 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -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;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 928a46b3..444b43da 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -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;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index 76a9855a..629e9358 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -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;
diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss
index f424ecef..17db54f2 100644
--- a/src/sass/settings/type.scss
+++ b/src/sass/settings/type.scss
@@ -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;
diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
index 154d1ce9..a44244c9 100644
--- a/src/sass/types/audio.scss
+++ b/src/sass/types/audio.scss
@@ -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);
     }
   }
 }
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
index c18c1b45..0cfaeacb 100644
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@@ -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);
     }
   }
 }