Linting and minor changes

3 files changed, 36 insertions, 19 deletions

diff --git a/src/js/plyr.js b/src/js/plyr.js
index f1b3c83e..4fd7c397 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -90,7 +90,7 @@
         // Speed default and options to display
         speed: {
             default: 1,
-            options: [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+            options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
         },
 
         // Keyboard shortcut settings
diff --git a/src/less/plyr.less b/src/less/plyr.less
index 6cf94410..a31e7280 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -32,9 +32,11 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
+    overflow: hidden;
     font-family: @plyr-font-family;
     font-weight: @plyr-font-weight-normal;
     direction: ltr;
+    text-shadow: none;
 
     & when(@plyr-border-box = true) {
         // border-box everything
@@ -320,7 +322,6 @@
 .plyr__controls {
     display: flex;
     align-items: center;
-    line-height: 1;
     text-align: center;
 
     // Spacing
@@ -354,11 +355,6 @@
         }
     }
 }
-// Hide controls
-.plyr--hide-controls .plyr__controls {
-    opacity: 0;
-    pointer-events: none;
-}
 
 // Buttons
 .plyr__control {
@@ -408,7 +404,7 @@
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
-    transition: opacity 0.3s ease;
+    transition: all 0.4s ease-in-out;
 
     .plyr__control {
         svg {
@@ -424,6 +420,12 @@
         }
     }
 }
+// Hide controls
+.plyr--video.plyr--hide-controls .plyr__controls {
+    opacity: 0;
+    transform: translateY(100%);
+    pointer-events: none;
+}
 
 // Audio controls
 .plyr--audio .plyr__controls {
@@ -552,6 +554,7 @@
 
         background: @plyr-menu-bg;
         border-radius: 4px;
+        box-shadow: 0 1px 2px fade(#000, 20%);
 
         white-space: nowrap;
         text-align: left;
@@ -585,8 +588,9 @@
         // Options
         .plyr__control {
             display: flex;
+            align-items: center;
             width: 100%;
-            padding: @plyr-control-padding (@plyr-control-padding * 2);
+            padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
             color: @plyr-menu-color;
             font-weight: @plyr-font-weight-bold;
             user-select: none;
@@ -597,6 +601,7 @@
                 top: 50%;
                 transform: translateY(-50%);
                 border: 4px solid transparent;
+                transition: border-color 0.2s ease;
             }
 
             &--forward {
@@ -606,6 +611,11 @@
                     right: 5px;
                     border-left-color: fade(@plyr-menu-color, 80%);
                 }
+
+                &.tab-focus::after,
+                &:hover::after {
+                    border-left-color: currentColor;
+                }
             }
 
             &--back {
@@ -615,7 +625,7 @@
                 margin: @plyr-control-padding;
                 margin-bottom: floor(@plyr-control-padding / 2);
                 padding-left: ceil(@plyr-control-padding * 4);
-                font-weight: 500;
+                font-weight: @plyr-font-weight-normal;
 
                 &::after {
                     left: @plyr-control-padding;
@@ -633,6 +643,11 @@
                     background: fade(#000, 15%);
                     box-shadow: 0 1px 0 fade(#fff, 10%);
                 }
+
+                &.tab-focus::after,
+                &:hover::after {
+                    border-right-color: currentColor;
+                }
             }
         }
 
@@ -647,13 +662,13 @@
 
         // Option value
         .plyr__menu__value {
-            display: inherit;
+            display: flex;
+            align-items: center;
             margin-left: auto;
             padding-left: ceil(@plyr-control-padding * 3.5);
             pointer-events: none;
             overflow: hidden;
-            font-weight: 500;
-            color: fade(@plyr-menu-color, 80%);
+            font-weight: @plyr-font-weight-normal;
 
             .plyr__badge {
                 font-weight: @plyr-font-weight-bold;
@@ -665,7 +680,7 @@
 // Badge
 // --------------------------------------------------------------
 .plyr__badge {
-    padding: 2px 4px;
+    padding: 1px 4px;
     border-radius: 2px;
     background: @plyr-menu-color;
     color: @plyr-menu-bg;
@@ -685,10 +700,11 @@
     opacity: 0;
     background: @plyr-tooltip-bg;
     border-radius: @plyr-tooltip-radius;
+    box-shadow: 0 1px 2px fade(#000, 10%);
 
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
-    font-weight: 500;
+    font-weight: @plyr-font-weight-normal;
     line-height: 1.3;
 
     transform: translate(-50%, 10px) scale(0.8);
diff --git a/src/less/variables.less b/src/less/variables.less
index 8232c3cb..e1b3f64b 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -13,13 +13,14 @@
 
 // Font
 @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-size-small: 14px;
+@plyr-font-size-tiny: 10px;
 @plyr-font-weight-normal: 500;
 @plyr-font-weight-bold: 600;
 
 // Captions
-@plyr-captions-bg: fade(#343f4a, 80%);
+@plyr-captions-bg: fade(#000, 80%);
 @plyr-captions-color: #fff;
 @plyr-font-size-captions-base: @plyr-font-size-base;
 @plyr-font-size-captions-small: @plyr-font-size-small;
@@ -41,8 +42,8 @@
 @plyr-audio-control-bg-hover: @plyr-color-main;
 
 // Tooltips
-@plyr-tooltip-bg: fade(#343f4a, 90%);
-@plyr-tooltip-color: #fff;
+@plyr-tooltip-bg: fade(#fff, 90%);
+@plyr-tooltip-color: #565d64;
 @plyr-tooltip-padding: (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size: 4px;
 @plyr-tooltip-radius: 3px;