1 files changed, 18 insertions, 7 deletions
diff --git a/src/less/plyr.less b/src/less/plyr.less
index a829da74..16d8fa25 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -78,14 +78,13 @@
         width: 100%;
         margin: 0;
         padding: 0;
-        vertical-align: middle;
-
-        appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
 
         // WebKit
+        -webkit-appearance: none;
+
         &::-webkit-slider-runnable-track {
             .plyr-range-track();
         }
@@ -413,9 +412,9 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    padding: @plyr-control-spacing;
-    background: @plyr-video-control-bg-hover;
-    border: 4px solid currentColor;
+    padding: ceil(@plyr-control-spacing * 1.25);
+    background: fade(@plyr-video-control-bg-hover, 80%);
+    border: 3px solid currentColor;
     border-radius: 100%;
     box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
@@ -431,6 +430,11 @@
         pointer-events: none;
     }
 
+    &:hover,
+    &:focus {
+        background: @plyr-video-control-bg-hover;
+    }
+
     &:focus {
         outline: 1px dotted fade(@plyr-video-control-color, 50%);
     }
@@ -759,10 +763,13 @@
     margin: -(@plyr-range-track-height / 2) 0 0;
     padding: 0;
     vertical-align: top;
-    appearance: none;
+    
     border: none;
     border-radius: 100px;
 
+    // WebKit
+    -webkit-appearance: none;
+
     &::-webkit-progress-bar {
         background: transparent;
     }
@@ -771,11 +778,15 @@
         border-radius: 100px;
         min-width: @plyr-range-track-height;
     }
+
+    // Mozilla
     &::-moz-progress-bar {
         background: currentColor;
         border-radius: 100px;
         min-width: @plyr-range-track-height;
     }
+
+    // Microsoft
     &::-ms-fill {
         border-radius: 100px;
     }