Merge pull request #1663 from sampotts/master

Merge back to beta

16 files changed, 100 insertions, 97 deletions

diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 1c9aab2b..0022d17b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -63,10 +63,6 @@ a.plyr__control {
 
 // Video control
 .plyr--video .plyr__control {
-    svg {
-        filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
-    }
-
     // Hover and tab focus
     &.plyr__tab-focus,
     &:hover,
@@ -81,7 +77,6 @@ a.plyr__control {
     background: rgba($plyr-video-control-bg-hover, 0.8);
     border: 0;
     border-radius: 100%;
-    box-shadow: 0 1px 1px rgba(#000, 0.15);
     color: $plyr-video-control-color;
     display: none;
     left: 50%;
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 41426e8b..8abee204 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -14,42 +14,47 @@
     justify-content: flex-end;
     text-align: center;
 
-    // Spacing
-    > .plyr__control,
-    .plyr__progress,
-    .plyr__time,
-    .plyr__menu,
-    .plyr__volume {
-        margin-left: ($plyr-control-spacing / 2);
+    .plyr__progress__container {
+        flex: 1;
+        min-width: 0; // Fix for Edge issue where content would overflow
     }
 
-    .plyr__menu + .plyr__control,
-    > .plyr__control + .plyr__menu,
-    > .plyr__control + .plyr__control,
-    .plyr__progress + .plyr__control {
-        margin-left: floor($plyr-control-spacing / 4);
-    }
+    // Spacing
+    .plyr__controls__item {
+        margin-left: ($plyr-control-spacing / 4);
+
+        &:first-child {
+            margin-left: 0;
+            margin-right: auto;
+        }
+
+        &.plyr__progress__container {
+            padding-left: ($plyr-control-spacing / 4);
+        }
+
+        &.plyr__time {
+            padding: 0 ($plyr-control-spacing / 2);
+        }
 
-    > .plyr__control:first-child,
-    > .plyr__control:first-child + [data-plyr='pause'] {
-        margin-left: 0;
-        margin-right: auto;
+        &.plyr__progress__container:first-child,
+        &.plyr__time:first-child,
+        &.plyr__time + .plyr__time {
+            padding-left: 0;
+        }
+
+        &.plyr__volume {
+            padding-right: ($plyr-control-spacing / 2);
+        }
+
+        &.plyr__volume:first-child {
+            padding-right: 0;
+        }
     }
 
     // Hide empty controls
     &:empty {
         display: none;
     }
-
-    @media (min-width: $plyr-bp-sm) {
-        > .plyr__control,
-        .plyr__menu,
-        .plyr__progress,
-        .plyr__time,
-        .plyr__volume {
-            margin-left: $plyr-control-spacing;
-        }
-    }
 }
 
 // Audio controls
@@ -62,10 +67,7 @@
 
 // Video controls
 .plyr--video .plyr__controls {
-    background: linear-gradient(
-        rgba($plyr-video-controls-bg, 0),
-        rgba($plyr-video-controls-bg, 0.7)
-    );
+    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     bottom: 0;
diff --git a/src/sass/components/embed.scss b/src/sass/components/embed.scss
deleted file mode 100644
index 25431caf..00000000
--- a/src/sass/components/embed.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// --------------------------------------------------------------
-// Embedded players
-// YouTube, Vimeo, etc
-// --------------------------------------------------------------
-
-// Default to 16:9 ratio but this is set by JavaScript based on config
-$embed-padding: ((100 / 16) * 9);
-
-.plyr__video-embed {
-    height: 0;
-    padding-bottom: to-percentage($embed-padding);
-    position: relative;
-
-    iframe {
-        border: 0;
-        height: 100%;
-        left: 0;
-        position: absolute;
-        top: 0;
-        user-select: none;
-        width: 100%;
-    }
-}
-
-// If the full custom UI is supported
-.plyr--full-ui .plyr__video-embed {
-    $height: 240;
-    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
-
-    // Only used for Vimeo
-    > .plyr__video-embed__container {
-        padding-bottom: to-percentage($height);
-        position: relative;
-        transform: translateY(-$offset);
-    }
-}
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index f28a19ca..04c83516 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -2,18 +2,19 @@
 // Playback progress
 // --------------------------------------------------------------
 
+// Offset the range thumb in order to be able to calculate the relative progress (#954)
+$plyr-progress-offset: $plyr-range-thumb-height;
+
 .plyr__progress {
-    flex: 1;
-    left: $plyr-range-thumb-height / 2;
-    margin-right: $plyr-range-thumb-height;
+    left: $plyr-progress-offset / 2;
+    margin-right: $plyr-progress-offset;
     position: relative;
 
     input[type='range'],
     &__buffer {
-        margin-left: -($plyr-range-thumb-height / 2);
-        margin-right: -($plyr-range-thumb-height / 2);
-        // Offset the range thumb in order to be able to calculate the relative progress (#954)
-        width: calc(100% + #{$plyr-range-thumb-height});
+        margin-left: -($plyr-progress-offset / 2);
+        margin-right: -($plyr-progress-offset / 2);
+        width: calc(100% + #{$plyr-progress-offset});
     }
 
     input[type='range'] {
diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index c3dc4152..fdcf4f2d 100644
--- a/src/sass/components/video.scss
+++ b/src/sass/components/video.scss
@@ -20,3 +20,36 @@
     // Require z-index to force border-radius
     z-index: 0;
 }
+
+// Default to 16:9 ratio but this is set by JavaScript based on config
+$embed-padding: ((100 / 16) * 9);
+
+.plyr__video-embed,
+.plyr__video-wrapper--fixed-ratio {
+    height: 0;
+    padding-bottom: to-percentage($embed-padding);
+}
+
+.plyr__video-embed iframe,
+.plyr__video-wrapper--fixed-ratio video {
+    border: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    user-select: none;
+    width: 100%;
+}
+
+// If the full custom UI is supported
+.plyr--full-ui .plyr__video-embed {
+    $height: 240;
+    $offset: to-percentage(($height - $embed-padding) / ($height / 50));
+
+    // Only used for Vimeo
+    > .plyr__video-embed__container {
+        padding-bottom: to-percentage($height);
+        position: relative;
+        transform: translateY(-$offset);
+    }
+}
diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss
index 554c66a5..5a1ca753 100644
--- a/src/sass/lib/mixins.scss
+++ b/src/sass/lib/mixins.scss
@@ -62,12 +62,13 @@
 
     .plyr__video-wrapper {
         height: 100%;
-        width: 100%;
+        position: static;
     }
 
     // Vimeo requires some different styling
     &.plyr--vimeo .plyr__video-wrapper {
         height: 0;
+        position: relative;
         top: 50%;
         transform: translateY(-50%);
     }
diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss
index c5acef75..44ec5351 100644
--- a/src/sass/plugins/ads.scss
+++ b/src/sass/plugins/ads.scss
@@ -23,7 +23,7 @@
 
     // The countdown label
     &::after {
-        background: rgba($plyr-color-gunmetal, 0.8);
+        background: rgba($plyr-color-gray-9, 0.8);
         border-radius: 2px;
         bottom: $plyr-control-spacing;
         color: #fff;
diff --git a/src/sass/plugins/previewThumbnails.scss b/src/sass/plugins/preview-thumbnails.scss
index 02a2f619..b2b272c1 100644
--- a/src/sass/plugins/previewThumbnails.scss
+++ b/src/sass/plugins/preview-thumbnails.scss
@@ -7,7 +7,7 @@ $plyr-preview-bg: $plyr-tooltip-bg !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-bg: $plyr-color-heather !default;
+$plyr-preview-image-bg: $plyr-color-gray-2 !default;
 $plyr-preview-time-font-size: $plyr-font-size-time !default;
 $plyr-preview-time-padding: 3px 6px !default;
 $plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss
index 468c534c..144297f7 100644
--- a/src/sass/plyr.scss
+++ b/src/sass/plyr.scss
@@ -29,7 +29,6 @@
 @import 'components/captions';
 @import 'components/control';
 @import 'components/controls';
-@import 'components/embed';
 @import 'components/menus';
 @import 'components/sliders';
 @import 'components/poster';
@@ -42,7 +41,7 @@
 @import 'states/fullscreen';
 
 @import 'plugins/ads';
-@import 'plugins/previewThumbnails';
+@import 'plugins/preview-thumbnails';
 
 @import 'utils/animation';
 @import 'utils/hidden';
diff --git a/src/sass/settings/badges.scss b/src/sass/settings/badges.scss
index 4f98c9a8..5fd0c138 100644
--- a/src/sass/settings/badges.scss
+++ b/src/sass/settings/badges.scss
@@ -2,5 +2,5 @@
 // Badges
 // ==========================================================================
 
-$plyr-badge-bg: $plyr-color-fiord !default;
+$plyr-badge-bg: $plyr-color-gray-7 !default;
 $plyr-badge-color: #fff !default;
diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss
index c9ea580c..e3883eef 100644
--- a/src/sass/settings/colors.scss
+++ b/src/sass/settings/colors.scss
@@ -2,8 +2,16 @@
 // Colors
 // ==========================================================================
 
-$plyr-color-main: #1aafff !default;
-$plyr-color-gunmetal: #2f343d !default;
-$plyr-color-fiord: #4f5b5f !default;
-$plyr-color-lynch: #6b7d85 !default;
-$plyr-color-heather: #b7c5cd !default;
+$plyr-color-main: hsl(198, 100%, 50%) !default;
+
+// Grayscale
+$plyr-color-gray-9: hsl(210, 15%, 16%);
+$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
+$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
+$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
+$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
+$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
+$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
+$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
+$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
+$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss
index d6d2c153..da9f4e58 100644
--- a/src/sass/settings/controls.scss
+++ b/src/sass/settings/controls.scss
@@ -13,6 +13,6 @@ $plyr-video-control-color-hover: #fff !default;
 $plyr-video-control-bg-hover: $plyr-color-main !default;
 
 $plyr-audio-controls-bg: #fff !default;
-$plyr-audio-control-color: $plyr-color-fiord !default;
+$plyr-audio-control-color: $plyr-color-gray-7 !default;
 $plyr-audio-control-color-hover: #fff !default;
 $plyr-audio-control-bg-hover: $plyr-color-main !default;
diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss
index 64df9863..420ebb03 100644
--- a/src/sass/settings/menus.scss
+++ b/src/sass/settings/menus.scss
@@ -3,8 +3,8 @@
 // ==========================================================================
 
 $plyr-menu-bg: rgba(#fff, 0.9) !default;
-$plyr-menu-color: $plyr-color-fiord !default;
+$plyr-menu-color: $plyr-color-gray-7 !default;
 $plyr-menu-arrow-size: 6px !default;
-$plyr-menu-border-color: $plyr-color-heather !default;
+$plyr-menu-border-color: $plyr-color-gray-2 !default;
 $plyr-menu-border-shadow-color: #fff !default;
 $plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
diff --git a/src/sass/settings/progress.scss b/src/sass/settings/progress.scss
index 074ee3c6..10b6ebb7 100644
--- a/src/sass/settings/progress.scss
+++ b/src/sass/settings/progress.scss
@@ -4,8 +4,8 @@
 
 // Loading
 $plyr-progress-loading-size: 25px !default;
-$plyr-progress-loading-bg: rgba($plyr-color-gunmetal, 0.6) !default;
+$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
 
 // Buffered
 $plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
-$plyr-audio-progress-buffered-bg: rgba($plyr-color-heather, 0.66) !default;
+$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss
index 6ac053b0..c4d239ae 100644
--- a/src/sass/settings/sliders.scss
+++ b/src/sass/settings/sliders.scss
@@ -9,7 +9,7 @@ $plyr-range-thumb-active-shadow-width: 3px !default;
 $plyr-range-thumb-height: 13px !default;
 $plyr-range-thumb-bg: #fff !default;
 $plyr-range-thumb-border: 2px solid transparent !default;
-$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
+$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
 
 // Track
 $plyr-range-track-height: 5px !default;
diff --git a/src/sass/settings/tooltips.scss b/src/sass/settings/tooltips.scss
index fd304d60..2d298ef8 100644
--- a/src/sass/settings/tooltips.scss
+++ b/src/sass/settings/tooltips.scss
@@ -3,7 +3,7 @@
 // ==========================================================================
 
 $plyr-tooltip-bg: rgba(#fff, 0.9) !default;
-$plyr-tooltip-color: $plyr-color-fiord !default;
+$plyr-tooltip-color: $plyr-color-gray-7 !default;
 $plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
 $plyr-tooltip-arrow-size: 4px !default;
 $plyr-tooltip-radius: 3px !default;