More Edge fixes and small UI bugs

3 files changed, 7 insertions, 21 deletions

diff --git a/src/less/components/menus.less b/src/less/components/menus.less
index 80b8fabe..f0a92d06 100644
--- a/src/less/components/menus.less
+++ b/src/less/components/menus.less
@@ -3,6 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__menu {
+    display: flex; // Edge fix
     position: relative;
 
     // Animate the icon
@@ -11,7 +12,7 @@
     }
     .plyr__control[aria-expanded='true'] {
         svg {
-            transform: rotate(45deg);
+            transform: rotate(90deg);
         }
 
         // Hide tooltip
diff --git a/src/less/components/progress.less b/src/less/components/progress.less
index 1472f9c5..1a252937 100644
--- a/src/less/components/progress.less
+++ b/src/less/components/progress.less
@@ -4,7 +4,7 @@
 
 .plyr__progress {
     position: relative;
-    display: none;
+    display: flex;
     flex: 1;
 
     input[type='range'] {
@@ -19,10 +19,6 @@
     }
 }
 
-.plyr .plyr__progress {
-    display: inline-block;
-}
-
 .plyr__progress--buffer {
     position: absolute;
     left: 0;
@@ -40,6 +36,7 @@
 
     &::-webkit-progress-bar {
         background: transparent;
+        transition: width 0.2s ease;
     }
 
     &::-webkit-progress-value {
@@ -53,24 +50,12 @@
         background: currentColor;
         border-radius: 100px;
         min-width: @plyr-range-track-height;
+        transition: width 0.2s ease;
     }
 
     // Microsoft
     &::-ms-fill {
         border-radius: 100px;
-    }
-}
-
-.plyr__progress--buffer {
-    &::-webkit-progress-value {
-        transition: width 0.2s ease;
-    }
-
-    &::-moz-progress-bar {
-        transition: width 0.2s ease;
-    }
-
-    &::-ms-fill {
         transition: width 0.2s ease;
     }
 }
diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less
index b420c8ad..41954a97 100644
--- a/src/less/components/sliders.less
+++ b/src/less/components/sliders.less
@@ -5,7 +5,7 @@
 // Specificity is for bootstrap compatibility
 .plyr--full-ui input[type='range'] {
     display: block;
-    height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
+    height: @plyr-range-thumb-active-height;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -16,7 +16,7 @@
     border-radius: (@plyr-range-thumb-height * 2);
 
     // Used in JS to populate lower fill for WebKit
-    color: @plyr-range-selected-bg;
+    color: @plyr-range-fill-bg;
 
     // WebKit
     -webkit-appearance: none;