19 changed files with 81 additions and 84 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,10 +1,3 @@
 # Changelog
 ### v3.7.8
 - Feat: Minor demo style tweaks
 - Fix: Minor style fixes related to backgrounds and border radii (🚨 Requires a SCSS/CSS update 🚨)
 ### v3.7.7
 - Fix (Accessibility): Don’t set tabindex on parent container
--- a/README.md
+++ b/README.md
@ -137,13 +137,13 @@ See [initialising](#initializing) for more information on advanced setups.
 You can use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills separately as part of your application but to make life easier you can use the polyfilled build.
 ```html
-<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.7.7/plyr.js"></script>
 ```
 ...or...
 ```html
-<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.7.7/plyr.polyfilled.js"></script>
 ```
 ## CSS
@ -157,13 +157,13 @@ Include the `plyr.css` stylesheet into your `<head>`.
 If you want to use our CDN (provided by [Cloudflare](https://www.cloudflare.com/)) for the default CSS, you can use the following:
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
+<link rel="stylesheet" href="https://cdn.plyr.io/3.7.7/plyr.css" />
 ```
 ## SVG Sprite
 The SVG sprite is loaded automatically from our CDN (provided by [Cloudflare](https://www.cloudflare.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.8/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.7.7/plyr.svg`.
 ### Self hosting
--- a/demo/index.html
+++ b/demo/index.html
@ -66,46 +66,42 @@
        <h1>Pl<span>a</span>y<span>e</span>r</h1>
        <p>
          A simple, accessible and customisable media player for
-          <button type="button" class="link" data-source="video">
+          <button type="button" class="faux-link" data-source="video">
            <svg class="icon">
              <title>HTML5</title>
              <path
                d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
-              ></path>
+              ></path></svg
-            </svg>
+            >Video</button
            Video</button
          >,
-          <button type="button" class="link" data-source="audio">
+          <button type="button" class="faux-link" data-source="audio">
            <svg class="icon">
              <title>HTML5</title>
              <path
                d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
-              ></path>
+              ></path></svg
-            </svg>
+            >Audio</button
            Audio</button
          >,
-          <button type="button" class="link" data-source="youtube">
+          <button type="button" class="faux-link" data-source="youtube">
            <svg class="icon" role="presentation">
              <title>YouTube</title>
              <path
                d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8
                   s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z
                    M6,11V5l5,3L6,11z"
-              ></path>
+              ></path></svg
-            </svg>
+            >YouTube
            YouTube
          </button>
          and
-          <button type="button" class="link" data-source="vimeo">
+          <button type="button" class="faux-link" data-source="vimeo">
            <svg class="icon" role="presentation">
              <title>Vimeo</title>
              <path
                d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5
                       C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4
                       c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"
-              ></path>
+              ></path></svg
-            </svg>
+            >Vimeo
            Vimeo
          </button>
        </p>
@ -181,10 +177,7 @@
                  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                ></path>
              </svg>
-              <a
+              <a href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323" target="_blank"
                href="https://itunes.apple.com/au/movie/view-from-a-blue-moon/id1041586323"
                target="_blank"
                class="link"
                >View From A Blue Moon</a
              >
              &copy; Brainfarm
@ -198,7 +191,7 @@
                  d="M14.738.326C14.548.118 14.28 0 14 0H2c-.28 0-.55.118-.738.326S.98.81 1.004 1.09l1 11c.03.317.208.603.48.767l5 3c.16.095.338.143.516.143s.356-.048.515-.143l5-3c.273-.164.452-.45.48-.767l1-11c.026-.28-.067-.557-.257-.764zM12 4H6v2h6v5.72l-4 1.334-4-1.333V9h2v1.28l2 .666 2-.667V8H4V2h8v2z"
                ></path>
              </svg>
-              <a href="http://www.kishibashi.com/" target="_blank" class="link"
+              <a href="http://www.kishibashi.com/" target="_blank"
                >Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;</a
              >
              &copy; Kishi Bashi
@ -222,7 +215,7 @@
          </li>
          <li class="plyr__cite plyr__cite--vimeo" hidden>
            <small>
-              <a href="https://vimeo.com/40648169" target="_blank" class="link">Toob “Wavaphon” Music Video</a>
+              <a href="https://vimeo.com/40648169" target="_blank">Toob “Wavaphon” Music Video</a>
              on&nbsp;
              <span class="color--vimeo">
                <svg class="icon" role="presentation">
@ -255,7 +248,7 @@
        <a
          href="https://twitter.com/intent/tweet?text=A+simple+HTML5+media+player+with+custom+controls+and+WebVTT+captions.&amp;url=http%3A%2F%2Fplyr.io&amp;via=Sam_Potts"
          target="_blank"
-          class="link js-shr"
+          class="js-shr"
          >tweet it</a
        >
        👍
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@ -7,7 +7,8 @@
 .button__count {
  align-items: center;
  border: 0;
-  border-radius: $border-radius-medium;
+  border-radius: $border-radius-base;
  box-shadow: 0 1px 1px rgba(#000, 0.1);
  display: inline-flex;
  padding: ($spacing-base * 0.75);
  position: relative;
@ -18,34 +19,27 @@
 // Buttons
 .button {
-  --shadow-color: 0deg 0% 20%;
+  background: $color-button-background;
  align-items: center;
  background-color: $color-button-background;
  background-image: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.05));
  border: 1px solid darken($color-button-background, 5);
  box-shadow: 0 0.8px 1px hsl(var(--shadow-color) / 0.05), 0 1.3px 1.6px -1px hsl(var(--shadow-color) / 0.06),
    0 2.8px 3.4px -2px hsl(var(--shadow-color) / 0.07);
  color: $color-button-text;
  display: inline-flex;
  font-weight: $font-weight-bold;
  gap: 0.25rem;
  padding-left: ($spacing-base * 1.25);
  padding-right: ($spacing-base * 1.25);
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;
  &:hover,
  &:focus {
    background: $color-button-background-hover;
    border-color: darken($color-button-background, 7);
    // Remove the underline/border
    &::after {
-      display: none !important;
+      display: none;
    }
  }
  &:hover {
    box-shadow: 0 2px 2px rgba(#000, 0.1);
  }
  &:focus {
    outline: 0;
  }
@ -55,12 +49,15 @@
  }
  &:active {
    box-shadow: none;
    top: 1px;
  }
 }
-  .icon {
+// Button group
-    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
+.button--with-count {
  display: inline-flex;
  .button .icon {
    flex-shrink: 0;
  }
 }
@ -69,21 +66,19 @@
 .button__count {
  animation: fade-in 0.2s ease;
  background: $color-button-count-background;
  border: 1px solid $color-gray-100;
  color: $color-button-count-text;
  margin-left: ($spacing-base * 0.75);
  &::before {
-    background-color: $color-button-count-background;
+    border: $arrow-size solid transparent;
-    border: inherit;
+    border-left-width: 0;
-    border-width: 0 0 1px 1px;
+    border-right-color: $color-button-count-background;
    content: '';
-    display: block;
+    height: 0;
    height: 8px;
    position: absolute;
    right: 100%;
    top: 50%;
-    transform: translateY(-50%) translateX(50%) translateX(-1px) rotate(45deg);
+    transform: translateY(-50%);
-    width: 8px;
+    width: 0;
  }
 }
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@ -2,9 +2,15 @@
 // Links
 // ==========================================================================
-.link {
+// Make a <button> look like an <a>
-  align-items: center;
+button.faux-link {
-  border-bottom: 1px dashed currentColor;
+  @extend a; // stylelint-disable-line
  @include cancel-button-styles;
 }
 // Links
 a {
  border-bottom: 1px dotted currentColor;
  color: $color-link;
  position: relative;
  text-decoration: none;
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@ -6,10 +6,8 @@
 // Example players
 .plyr {
-  --shadow-color: 197deg 32% 65%;
+  border-radius: $border-radius-large;
-  border-radius: $border-radius-2x-large;
+  box-shadow: 0 2px 15px rgba(#000, 0.1);
  box-shadow: 0 0.5px 0.6px hsl(var(--shadow-color) / 0.36), 0 1.7px 1.9px -0.8px hsl(var(--shadow-color) / 0.36),
    0 4.3px 4.8px -1.7px hsl(var(--shadow-color) / 0.36), -0.1px 10.6px 11.9px -2.5px hsl(var(--shadow-color) / 0.36);
  margin: $spacing-base auto;
  &.plyr--audio {
@ -19,7 +17,6 @@
 .plyr__video-wrapper::after {
  border: 1px solid rgba(#000, 0.15);
  border-bottom-color: rgba(#000, 0.25);
  border-radius: inherit;
  bottom: 0;
  content: '';
--- a/demo/src/sass/layout/core.scss
+++ b/demo/src/sass/layout/core.scss
@ -37,7 +37,6 @@ main {
 aside {
  align-items: center;
  background: #fff;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  flex-shrink: 0;
  justify-content: center;
--- a/demo/src/sass/lib/mixins.scss
+++ b/demo/src/sass/lib/mixins.scss
@ -4,6 +4,25 @@
@use 'sass:math';
 // Convert a <button> into an <a>
 // ---------------------------------------
@mixin cancel-button-styles() {
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font: inherit;
  line-height: $line-height-base;
  margin: 0;
  padding: 0;
  position: relative;
  text-align: inherit;
  text-shadow: inherit;
  user-select: text;
  vertical-align: baseline;
  width: auto;
 }
 // Nicer focus styles
 // ---------------------------------------
@mixin focus-visible($color: $focus-default-color) {
--- a/demo/src/sass/lib/reset.scss
+++ b/demo/src/sass/lib/reset.scss
@ -9,7 +9,3 @@
 *::before {
  box-sizing: border-box;
 }
 button {
  all: unset;
 }
--- a/demo/src/sass/settings/cosmetic.scss
+++ b/demo/src/sass/settings/cosmetic.scss
@ -6,9 +6,8 @@
 $arrow-size: 5px;
 // Radii
-$border-radius-small: 4px;
+$border-radius-base: 4px;
-$border-radius-medium: 6px;
+$border-radius-large: 8px;
 $border-radius-2x-large: 12px;
 // Background
 $page-background: linear-gradient(to left top, $color-background-from, $color-background-to);
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "plyr",
-  "version": "3.7.8",
+  "version": "3.7.7",
  "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
  "homepage": "https://plyr.io",
  "author": "Sam Potts <sam@potts.es>",
--- a/src/js/config/defaults.js
+++ b/src/js/config/defaults.js
@ -60,7 +60,7 @@ const defaults = {
  // Sprite (for icons)
  loadSprite: true,
  iconPrefix: 'plyr',
-  iconUrl: 'https://cdn.plyr.io/3.7.8/plyr.svg',
+  iconUrl: 'https://cdn.plyr.io/3.7.7/plyr.svg',
  // Blank video (used to prevent errors on source change)
  blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.7.8
+// plyr.js v3.7.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
--- a/src/js/plyr.polyfilled.js
+++ b/src/js/plyr.polyfilled.js
@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.7.8
+// plyr.js v3.7.7
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
--- a/src/sass/plugins/preview-thumbnails/settings.scss
+++ b/src/sass/plugins/preview-thumbnails/settings.scss
@ -4,7 +4,7 @@
 $plyr-preview-padding: $plyr-tooltip-padding !default;
 $plyr-preview-background: $plyr-tooltip-background !default;
-$plyr-preview-radius: $plyr-menu-radius !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
 $plyr-preview-shadow: $plyr-tooltip-shadow !default;
 $plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
 $plyr-preview-image-background: $plyr-color-gray-200 !default;
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@ -6,7 +6,7 @@ $plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
 $plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
 $plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
 $plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
-$plyr-control-radius: var(--plyr-control-radius, 4px) !default;
+$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
 $plyr-control-toggle-checked-background: var(
  --plyr-control-toggle-checked-background,
  var(--plyr-color-main, $plyr-color-main)
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@ -3,7 +3,7 @@
 // ==========================================================================
 $plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
-$plyr-menu-radius: var(--plyr-menu-radius, 8px) !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;
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@ -2,7 +2,7 @@
 // Tooltips
 // ==========================================================================
-$plyr-tooltip-background: var(--plyr-tooltip-background, #fff) !default;
+$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
 $plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
 $plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
 $plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
--- a/src/sass/types/video.scss
+++ b/src/sass/types/video.scss
@ -6,6 +6,7 @@
 // Container
 .plyr--video {
  background: var(--plyr-video-background, $plyr-video-background);
  overflow: hidden;
  &.plyr--menu-open {
@ -15,7 +16,6 @@
 .plyr__video-wrapper {
  background: var(--plyr-video-background, $plyr-video-background);
  border-radius: inherit;
  height: 100%;
  margin: auto;
  overflow: hidden;