WIP on docs example

8 files changed, 31 insertions, 24 deletions

diff --git a/src/less/components/badges.less b/src/less/components/badges.less
index d87706df..2668674c 100644
--- a/src/less/components/badges.less
+++ b/src/less/components/badges.less
@@ -7,7 +7,6 @@
     border-radius: 2px;
     background: @plyr-menu-color;
     color: @plyr-menu-bg;
-    font-size: @plyr-font-size-tiny;
+    font-size: @plyr-font-size-micro;
     line-height: 1;
-    .plyr-font-smoothing(on);
 }
diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less
index 3a9057c6..238f13c9 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/buttons.less
@@ -9,7 +9,7 @@
     background: transparent;
     border-radius: 3px;
     cursor: pointer;
-    transition: background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
+    transition: all 0.3s ease;
     color: inherit;
 
     svg {
@@ -29,6 +29,11 @@
     &:focus {
         outline: 0;
     }
+
+    // Tab focus
+    &.plyr__tab-focus {
+        .plyr-tab-focus();
+    }
 }
 
 // Change icons on state change
@@ -85,8 +90,7 @@
     }
 
     &.plyr__tab-focus {
-        outline: 0;
-        box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
+        .plyr-tab-focus();
     }
 }
 
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index 3082b899..14c1d2e7 100644
--- a/src/less/components/captions.less
+++ b/src/less/components/captions.less
@@ -19,7 +19,6 @@
     color: @plyr-captions-color;
     font-size: @plyr-font-size-captions-small;
     text-align: center;
-    .plyr-font-smoothing(on);
 
     span {
         border-radius: 2px;
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
index 2b3ae418..80b8fabe 100644
--- a/src/less/components/menus.less
+++ b/src/less/components/menus.less
@@ -34,7 +34,7 @@
         white-space: nowrap;
         text-align: left;
         color: @plyr-menu-color;
-        font-size: @plyr-font-size-small;
+        font-size: @plyr-font-size-base;
 
         > div {
             overflow: hidden;
@@ -67,7 +67,6 @@
             width: 100%;
             padding: ceil(@plyr-control-padding / 2) (@plyr-control-padding * 2);
             color: @plyr-menu-color;
-            font-weight: @plyr-font-weight-bold;
             user-select: none;
 
             &::after {
@@ -101,7 +100,7 @@
                 margin: @plyr-control-padding;
                 margin-bottom: floor(@plyr-control-padding / 2);
                 padding-left: ceil(@plyr-control-padding * 4);
-                font-weight: @plyr-font-weight-normal;
+                font-weight: @plyr-font-weight-regular;
 
                 &::after {
                     left: @plyr-control-padding;
@@ -166,6 +165,10 @@
                 }
             }
 
+            input[type='radio']:focus + span {
+                .plyr-tab-focus();
+            }
+
             &.plyr__tab-focus input[type='radio'] + span,
             &:hover input[type='radio'] + span {
                 background: fade(#000, 10%);
@@ -181,11 +184,6 @@
             padding-left: ceil(@plyr-control-padding * 3.5);
             pointer-events: none;
             overflow: hidden;
-            font-weight: @plyr-font-weight-normal;
-
-            .plyr__badge {
-                font-weight: @plyr-font-weight-bold;
-            }
         }
     }
 }
diff --git a/src/less/components/progress.less b/src/less/components/progress.less
index 0022dfe0..1472f9c5 100644
--- a/src/less/components/progress.less
+++ b/src/less/components/progress.less
@@ -15,6 +15,7 @@
     // Seek tooltip to show time
     .plyr__tooltip {
         left: 0;
+        font-size: @plyr-font-size-time;
     }
 }
 
diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less
index dff1da8b..b420c8ad 100644
--- a/src/less/components/sliders.less
+++ b/src/less/components/sliders.less
@@ -81,6 +81,20 @@
         border: 0;
     }
 
+    &.plyr__tab-focus {
+        &::-webkit-slider-runnable-track {
+            .plyr-tab-focus();
+        }
+
+        &::-moz-range-track {
+            .plyr-tab-focus();
+        }
+
+        &::-ms-track {
+            .plyr-tab-focus();
+        }
+    }
+
     // Pressed styles
     &:active {
         &::-webkit-slider-thumb {
@@ -110,10 +124,6 @@
     &::-ms-track {
         background: @plyr-video-range-track-bg;
     }
-
-    &.plyr__tab-focus {
-        box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
-    }
 }
 
 // Audio range inputs
@@ -129,8 +139,4 @@
     &::-ms-track {
         background: @plyr-audio-range-track-bg;
     }
-
-    &.plyr__tab-focus {
-        box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%);
-    }
 }
diff --git a/src/less/components/times.less b/src/less/components/times.less
index ea4466d1..29b06aa0 100644
--- a/src/less/components/times.less
+++ b/src/less/components/times.less
@@ -5,7 +5,7 @@
 .plyr__time {
     display: inline-block;
     vertical-align: middle;
-    font-size: @plyr-font-size-small;
+    font-size: @plyr-font-size-time;
 }
 
 // Media duration hidden on small screens
diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less
index 7b85d3ff..79b8e404 100644
--- a/src/less/components/tooltips.less
+++ b/src/less/components/tooltips.less
@@ -15,7 +15,7 @@
     box-shadow: @plyr-tooltip-shadow;
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
-    font-weight: @plyr-font-weight-normal;
+    font-weight: @plyr-font-weight-regular;
     line-height: 1.3;
     transform: translate(-50%, 10px) scale(0.8);
     transform-origin: 50% 100%;