Merge branch 'develop' into css-variables

# Conflicts:
#	demo/dist/demo.css
#	demo/dist/demo.min.js.map
#	demo/index.html
#	dist/plyr.css
#	dist/plyr.min.js.map
#	dist/plyr.min.mjs.map
#	dist/plyr.polyfilled.min.js.map
#	dist/plyr.polyfilled.min.mjs.map
#	gulpfile.js
#	src/sass/base.scss
#	src/sass/components/control.scss
#	src/sass/settings/colors.scss
#	src/sass/settings/controls.scss

5 files changed, 23 insertions, 25 deletions

diff --git a/demo/src/sass/components/buttons.scss b/demo/src/sass/components/buttons.scss
index 5ff6fc12..279007fb 100644
--- a/demo/src/sass/components/buttons.scss
+++ b/demo/src/sass/components/buttons.scss
@@ -6,11 +6,9 @@
 .button,
 .button__count {
     align-items: center;
-    background: $color-button-background;
     border: 0;
     border-radius: $border-radius-base;
     box-shadow: 0 1px 1px rgba(#000, 0.1);
-    color: $color-button-text;
     display: inline-flex;
     padding: ($spacing-base * 0.75);
     position: relative;
@@ -21,14 +19,16 @@
 
 // Buttons
 .button {
+    background: $color-button-background;
+    color: $color-button-text;
     font-weight: $font-weight-bold;
-    padding-left: $spacing-base;
-    padding-right: $spacing-base;
+    padding-left: ($spacing-base * 1.25);
+    padding-right: ($spacing-base * 1.25);
     transition: all 0.2s ease;
 
     &:hover,
     &:focus {
-        color: $gray-dark;
+        background: $color-button-background-hover;
 
         // Remove the underline/border
         &::after {
@@ -65,12 +65,14 @@
 // Count bubble
 .button__count {
     animation: fadein 0.2s ease;
-    margin-left: ($spacing-base / 2);
+    background: $color-button-count-background;
+    color: $color-button-count-text;
+    margin-left: ($spacing-base * 0.75);
 
     &::before {
         border: $arrow-size solid transparent;
         border-left-width: 0;
-        border-right-color: $color-button-background;
+        border-right-color: $color-button-count-background;
         content: '';
         height: 0;
         position: absolute;
diff --git a/demo/src/sass/components/header.scss b/demo/src/sass/components/header.scss
index eab2214e..fd014ead 100644
--- a/demo/src/sass/components/header.scss
+++ b/demo/src/sass/components/header.scss
@@ -6,6 +6,13 @@ header {
     padding-bottom: $spacing-base;
     text-align: center;
 
+    h1 span {
+        animation: shrinkHide 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2s forwards;
+        display: inline-block;
+        font-weight: $font-weight-light;
+        opacity: 0.5;
+    }
+
     .call-to-action {
         margin-top: ($spacing-base * 1.5);
     }
@@ -15,5 +22,9 @@ header {
         max-width: 360px;
         padding-bottom: ($spacing-base * 2);
         text-align: left;
+
+        p:first-of-type {
+            @include font-size($font-size-base + 1);
+        }
     }
 }
diff --git a/demo/src/sass/components/icons.scss b/demo/src/sass/components/icons.scss
index b2b353a6..ec9f8c5c 100644
--- a/demo/src/sass/components/icons.scss
+++ b/demo/src/sass/components/icons.scss
@@ -19,5 +19,5 @@ label svg {
 
 a .icon,
 .btn .icon {
-    margin-right: floor($spacing-base / 3);
+    margin-right: ($spacing-base / 2);
 }
diff --git a/demo/src/sass/components/links.scss b/demo/src/sass/components/links.scss
index b2930862..1d49be3a 100644
--- a/demo/src/sass/components/links.scss
+++ b/demo/src/sass/components/links.scss
@@ -12,7 +12,6 @@ button.faux-link {
 a {
     border-bottom: 1px dotted currentColor;
     color: $color-link;
-    font-weight: $font-weight-bold;
     position: relative;
     text-decoration: none;
     transition: all 0.2s ease;
diff --git a/demo/src/sass/components/players.scss b/demo/src/sass/components/players.scss
index d088a91d..d05e9849 100644
--- a/demo/src/sass/components/players.scss
+++ b/demo/src/sass/components/players.scss
@@ -2,16 +2,10 @@
 // Examples
 // ==========================================================================
 
-// For non supported browsers
-video {
-    max-width: 100%;
-    vertical-align: middle;
-}
-
 // Example players
 .plyr {
     border-radius: $border-radius-base;
-    box-shadow: 0 2px 5px rgba(#000, 0.2);
+    box-shadow: 0 2px 15px rgba(#000, 0.1);
     margin: $spacing-base auto;
 
     &.plyr--audio {
@@ -34,17 +28,9 @@ video {
 
 // Style full supported player
 .plyr__cite {
-    display: none;
-    margin-top: $spacing-base;
+    color: $color-gray-500;
 
     .icon {
         margin-right: ceil($spacing-base / 6);
     }
 }
-
-.plyr--video:not(.plyr--youtube):not(.plyr--vimeo) ~ ul .plyr__cite--video,
-.plyr--audio ~ ul .plyr__cite--audio,
-.plyr--youtube ~ ul .plyr__cite--youtube,
-.plyr--vimeo ~ ul .plyr__cite--vimeo {
-    display: block;
-}