2 files changed, 23 insertions, 12 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;
     }
diff --git a/src/less/variables.less b/src/less/variables.less
index 39a083a3..dd6c9e0f 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -15,11 +15,11 @@
 @plyr-font-family:                      inherit; //Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 @plyr-font-size-small:                  14px;
 @plyr-font-size-base:                   16px;
-@plyr-font-weight-normal:               400;
+@plyr-font-weight-normal:               500;
 @plyr-font-weight-bold:                 600;
 
 // Captions
-@plyr-captions-bg:                      fade(#000, 60%);
+@plyr-captions-bg:                      fade(#343f4a, 80%);
 @plyr-captions-color:                   #fff;
 @plyr-font-size-captions-base:          @plyr-font-size-base;
 @plyr-font-size-captions-medium:        ceil(@plyr-font-size-base * 1.5);
@@ -29,13 +29,13 @@
 @plyr-control-icon-size:                18px;
 @plyr-control-spacing:                  10px;
 @plyr-control-padding:                  (@plyr-control-spacing * .7);
-@plyr-video-controls-bg:                #000;
+@plyr-video-controls-bg:                #343f4a;
 @plyr-video-control-color:              #fff;
 @plyr-video-control-color-hover:        #fff;
 @plyr-video-control-bg-hover:           @plyr-color-main;
 @plyr-audio-controls-bg:                #fff;
 @plyr-audio-controls-border:            1px solid #dbe3e8;
-@plyr-audio-control-color:              #565D64;
+@plyr-audio-control-color:              #565d64;
 @plyr-audio-control-color-hover:        #fff;
 @plyr-audio-control-bg-hover:           @plyr-color-main;
 
@@ -56,7 +56,7 @@
 @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-bg:                fade(#c6d6db, 66%);
 @plyr-audio-progress-buffered-bg:       @plyr-audio-progress-bg;
 
 // Range sliders