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

2 files changed, 230 insertions, 0 deletions

diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss
new file mode 100644
index 00000000..d39f6f96
--- /dev/null
+++ b/src/sass/types/audio.scss
@@ -0,0 +1,64 @@
+// --------------------------------------------------------------
+// Audio styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--audio {
+    display: block;
+}
+
+// Controls container
+.plyr--audio .plyr__controls {
+    background: var(--plyr-audio-controls-background, $plyr-audio-controls-background);
+    border-radius: inherit;
+    color: var(--plyr-audio-control-color, $plyr-audio-control-color);
+    padding: $plyr-control-spacing;
+}
+
+// Control elements
+.plyr--audio .plyr__control {
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: var(
+            --plyr-audio-control-background-hover,
+            var(--plyr-color-main, $plyr-audio-control-background-hover)
+        );
+        color: var(--plyr-audio-control-color-hover, $plyr-audio-control-color-hover);
+    }
+}
+
+// Range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    }
+
+    &::-moz-range-track {
+        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    }
+
+    &::-ms-track {
+        background-color: var(--plyr-audio-range-track-background, $plyr-audio-range-track-background);
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+        }
+    }
+}
+
+// Progress
+.plyr--audio .plyr__progress__buffer {
+    color: var(--plyr-audio-progress-buffered-background, $plyr-audio-progress-buffered-background);
+}
diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss
new file mode 100644
index 00000000..6a17a51a
--- /dev/null
+++ b/src/sass/types/video.scss
@@ -0,0 +1,166 @@
+// --------------------------------------------------------------
+// Video styles
+// --------------------------------------------------------------
+
+// Container
+.plyr--video {
+    background: #000;
+    overflow: hidden;
+
+    &.plyr--menu-open {
+        overflow: visible;
+    }
+}
+
+.plyr__video-wrapper {
+    background: #000;
+    height: 100%;
+    margin: auto;
+    overflow: hidden;
+    width: 100%;
+}
+
+// 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;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+// 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);
+    }
+}
+
+// Controls container
+.plyr--video .plyr__controls {
+    background: $plyr-video-controls-background;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    bottom: 0;
+    color: var(--plyr-video-control-color, $plyr-video-control-color);
+    left: 0;
+    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
+    position: absolute;
+    right: 0;
+    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
+    z-index: 3;
+
+    @media (min-width: $plyr-bp-sm) {
+        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    }
+}
+
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    pointer-events: none;
+    transform: translateY(100%);
+}
+
+// Control elements
+.plyr--video .plyr__control {
+    // Hover and tab focus
+    &.plyr__tab-focus,
+    &:hover,
+    &[aria-expanded='true'] {
+        background: var(
+            --plyr-video-control-background-hover,
+            var(--plyr-color-main, $plyr-video-control-background-hover)
+        );
+        color: var(--plyr-video-control-color-hover, $plyr-video-control-color-hover);
+    }
+}
+
+// Large play button (video only)
+.plyr__control--overlaid {
+    background: var(
+        --plyr-video-control-background-hover,
+        var(--plyr-color-main, $plyr-video-control-background-hover)
+    );
+    border: 0;
+    border-radius: 100%;
+    color: $plyr-video-control-color;
+    display: none;
+    left: 50%;
+    opacity: 0.9;
+    padding: ceil($plyr-control-spacing * 1.5);
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transition: 0.3s;
+    z-index: 2;
+
+    // Offset icon to make the play button look right
+    svg {
+        left: 2px;
+        position: relative;
+    }
+
+    &:hover,
+    &:focus {
+        opacity: 1;
+    }
+}
+
+.plyr--playing .plyr__control--overlaid {
+    opacity: 0;
+    visibility: hidden;
+}
+
+.plyr--full-ui.plyr--video .plyr__control--overlaid {
+    display: block;
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    }
+
+    &::-moz-range-track {
+        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    }
+
+    &::-ms-track {
+        background-color: var(--plyr-video-range-track-background, $plyr-video-range-track-background);
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active();
+        }
+    }
+}
+
+// Progress
+.plyr--video .plyr__progress__buffer {
+    color: var(--plyr-video-progress-buffered-background, $plyr-video-progress-buffered-background);
+}