Removed extra <progress> for populating lower fill on range inputs

3 files changed, 71 insertions, 83 deletions

diff --git a/src/less/mixins.less b/src/less/mixins.less
index 0b75b2a6..a620a599 100644
--- a/src/less/mixins.less
+++ b/src/less/mixins.less
@@ -18,7 +18,7 @@
     background: @plyr-range-thumb-bg;
     border: @plyr-range-thumb-border;
     border-radius: 100%;
-    transition: background .2s ease, border .2s ease, transform .2s ease;
+    transition: background 0.2s ease, border 0.2s ease, transform 0.2s ease;
     box-shadow: @plyr-range-thumb-shadow;
     box-sizing: border-box;
 }
@@ -26,4 +26,4 @@
     background: @plyr-range-thumb-active-bg;
     border-color: @plyr-range-thumb-active-border-color;
     transform: scale(@plyr-range-thumb-active-scale);
-}
\ No newline at end of file
+}
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 0c36930c..22e29aa2 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -1,6 +1,7 @@
 // ==========================================================================
 // Plyr styles
 // https://github.com/sampotts/plyr
+// TODO: break into smaller files and look at use of BEM classnames
 // ==========================================================================
 
 @import 'variables';
@@ -57,7 +58,7 @@
     }
 
     // ARIA
-    [aria-hidden="true"] {
+    [aria-hidden='true'] {
         display: none;
     }
 
@@ -77,7 +78,7 @@
 
     // Range inputs
     // Specificity is for bootstrap compatibility
-    input[type="range"] {
+    input[type='range'] {
         display: block;
         height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
         width: 100%;
@@ -87,6 +88,9 @@
         border: none;
         background: transparent;
 
+        // Used in JS to populate lower fill for WebKit
+        color: @plyr-range-selected-bg;
+
         // WebKit
         -webkit-appearance: none;
 
@@ -106,6 +110,11 @@
         &::-moz-range-thumb {
             .plyr-range-thumb();
         }
+        &::-moz-range-progress {
+            height: @plyr-range-track-height;
+            background: currentColor;
+            border-radius: (@plyr-range-track-height / 2);
+        }
 
         // Microsoft
         &::-ms-track {
@@ -119,7 +128,7 @@
         }
         &::-ms-fill-lower {
             .plyr-range-track();
-            background: @plyr-range-selected-bg;
+            background: currentColor;
         }
         &::-ms-thumb {
             .plyr-range-thumb();
@@ -157,13 +166,37 @@
 }
 
 // Video range inputs
-.plyr--video input[type="range"].tab-focus {
-    outline: 1px dotted fade(@plyr-video-control-color, 50%);
+.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: @plyr-video-range-track-bg;
+    }
+    &::-moz-range-track {
+        background: @plyr-video-range-track-bg;
+    }
+    &::-ms-track {
+        background: @plyr-video-range-track-bg;
+    }
+
+    &.tab-focus {
+        outline: 1px dotted fade(@plyr-video-control-color, 50%);
+    }
 }
 
 // Audio range inputs
-.plyr--audio input[type="range"].tab-focus {
-    outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: @plyr-audio-range-track-bg;
+    }
+    &::-moz-range-track {
+        background: @plyr-audio-range-track-bg;
+    }
+    &::-ms-track {
+        background: @plyr-audio-range-track-bg;
+    }
+
+    &.tab-focus {
+        outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+    }
 }
 
 // Screen reader only elements
@@ -354,7 +387,6 @@
         display: block;
         fill: currentColor;
         pointer-events: none;
-        filter: drop-shadow(0 1px 1px fade(#000, 15%));
     }
 
     // Hide toggle icons by default
@@ -378,17 +410,21 @@
     bottom: 0;
     z-index: 2;
     padding: (@plyr-control-spacing * 3.5) @plyr-control-spacing @plyr-control-spacing;
-    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 85%));
+    background: linear-gradient(fade(@plyr-video-controls-bg, 0%), fade(@plyr-video-controls-bg, 70%));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
     transition: opacity 0.3s ease;
 
     .plyr__control {
+        svg {
+            filter: drop-shadow(0 1px 1px fade(#000, 15%));
+        }
+
         // Hover and tab focus
         &.tab-focus,
         &:hover,
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
             background: @plyr-video-control-bg-hover;
             color: @plyr-video-control-color-hover;
         }
@@ -407,7 +443,7 @@
         // Hover and tab focus
         &.tab-focus,
         &:hover,
-        &[aria-expanded="true"] {
+        &[aria-expanded='true'] {
             background: @plyr-audio-control-bg-hover;
             color: @plyr-audio-control-color-hover;
         }
@@ -461,11 +497,11 @@
 }
 
 // States
-.plyr__controls [data-plyr="pause"],
-.plyr--playing .plyr__controls [data-plyr="play"] {
+.plyr__controls [data-plyr='pause'],
+.plyr--playing .plyr__controls [data-plyr='play'] {
     display: none;
 }
-.plyr--playing .plyr__controls [data-plyr="pause"] {
+.plyr--playing .plyr__controls [data-plyr='pause'] {
     display: inline-block;
 }
 
@@ -481,16 +517,16 @@
 }
 
 // Some options are hidden by default
-.plyr [data-plyr="captions"],
-.plyr [data-plyr="fullscreen"],
-.plyr [data-plyr="pip"],
-.plyr [data-plyr="airplay"] {
+.plyr [data-plyr='captions'],
+.plyr [data-plyr='fullscreen'],
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'] {
     display: none;
 }
-.plyr--captions-enabled [data-plyr="captions"],
-.plyr--fullscreen-enabled [data-plyr="fullscreen"],
-.plyr--pip-enabled [data-plyr="pip"],
-.plyr--airplay-enabled [data-plyr="airplay"] {
+.plyr--captions-enabled [data-plyr='captions'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'],
+.plyr--pip-enabled [data-plyr='pip'],
+.plyr--airplay-enabled [data-plyr='airplay'] {
     display: inline-block;
 }
 
@@ -503,7 +539,7 @@
     .plyr__control svg {
         transition: transform 0.3s ease;
     }
-    .plyr__control[aria-expanded="true"] {
+    .plyr__control[aria-expanded='true'] {
         svg {
             transform: rotate(45deg);
         }
@@ -668,7 +704,7 @@
 
     &::before {
         // Arrows
-        content: "";
+        content: '';
         position: absolute;
         width: 0;
         height: 0;
@@ -739,16 +775,6 @@
     input[type='range'] {
         position: relative;
         z-index: 2;
-
-        &::-webkit-slider-runnable-track {
-            background: transparent;
-        }
-        &::-moz-range-track {
-            background: transparent;
-        }
-        &::-ms-fill-upper {
-            background: transparent;
-        }
     }
 
     // Seek tooltip to show time
@@ -760,9 +786,7 @@
     display: inline-block;
 }
 
-.plyr__progress--buffer,
-.plyr__progress--played,
-.plyr__volume--display {
+.plyr__progress--buffer {
     position: absolute;
     left: 0;
     top: 50%;
@@ -770,8 +794,7 @@
     height: @plyr-range-track-height;
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
-    vertical-align: top;
-
+    background: transparent;
     border: none;
     border-radius: 100px;
 
@@ -799,31 +822,6 @@
         border-radius: 100px;
     }
 }
-.plyr__progress--played,
-.plyr__volume--display {
-    z-index: 1;
-    color: @plyr-range-selected-bg;
-    background: transparent;
-    transition: none;
-
-    &::-webkit-progress-value {
-        min-width: @plyr-range-track-height;
-        max-width: 99%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: none;
-    }
-    &::-moz-progress-bar {
-        min-width: @plyr-range-track-height;
-        max-width: 99%;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        transition: none;
-    }
-    &::-ms-fill {
-        display: none;
-    }
-}
 .plyr__progress--buffer {
     &::-webkit-progress-value {
         transition: width 0.2s ease;
@@ -835,18 +833,10 @@
         transition: width 0.2s ease;
     }
 }
-.plyr--video .plyr__progress--buffer,
-.plyr--video .plyr__volume--display {
-    background: @plyr-video-range-track-bg;
-    box-shadow: 0 1px 1px fade(#000, 15%);
-}
 .plyr--video .plyr__progress--buffer {
+    box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-progress-buffered-bg;
 }
-.plyr--audio .plyr__progress--buffer,
-.plyr--audio .plyr__volume--display {
-    background: @plyr-audio-range-track-bg;
-}
 .plyr--audio .plyr__progress--buffer {
     color: @plyr-audio-progress-buffered-bg;
 }
@@ -892,7 +882,7 @@
 
     // Add a slash in before
     &::before {
-        content: "\2044";
+        content: '\2044';
         margin-right: @plyr-control-spacing;
     }
 }
@@ -926,7 +916,7 @@
 // It's not supported to change volume using JavaScript:
 // https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
 .plyr--is-ios .plyr__volume,
-.plyr--is-ios [data-plyr="mute"] {
+.plyr--is-ios [data-plyr='mute'] {
     display: none !important;
 }
 
diff --git a/src/less/variables.less b/src/less/variables.less
index fe6e3e39..8232c3cb 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -29,8 +29,8 @@
 // Controls
 @plyr-control-icon-size: 18px;
 @plyr-control-spacing: 10px;
-@plyr-control-padding: (@plyr-control-spacing * .7);
-@plyr-video-controls-bg: #343f4a;
+@plyr-control-padding: (@plyr-control-spacing * 0.7);
+@plyr-video-controls-bg: #000;
 @plyr-video-control-color: #fff;
 @plyr-video-control-color-hover: #fff;
 @plyr-video-control-bg-hover: @plyr-color-main;
@@ -55,10 +55,8 @@
 // Progress
 @plyr-progress-loading-size: 25px;
 @plyr-progress-loading-bg: fade(#343f4a, 20%);
-@plyr-video-progress-bg: fade(#fff, 25%);
-@plyr-video-progress-buffered-bg: @plyr-video-progress-bg;
-@plyr-audio-progress-bg: fade(#c6d6db, 66%);
-@plyr-audio-progress-buffered-bg: @plyr-audio-progress-bg;
+@plyr-video-progress-buffered-bg: fade(#fff, 25%);
+@plyr-audio-progress-buffered-bg: fade(#c6d6db, 66%);
 
 // Range sliders
 @plyr-range-track-height: 8px;