Merge branch 'develop' of https://github.com/Selz/plyr into develop

# Conflicts:
#	dist/plyr.js
#	dist/plyr.js.map
#	src/js/controls.js

5 files changed, 54 insertions, 16 deletions

diff --git a/src/less/components/badges.less b/src/less/components/badges.less
index 94035e9b..d87706df 100644
--- a/src/less/components/badges.less
+++ b/src/less/components/badges.less
@@ -3,11 +3,11 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    padding: 0 4px;
+    padding: 3px 4px;
     border-radius: 2px;
     background: @plyr-menu-color;
     color: @plyr-menu-bg;
     font-size: @plyr-font-size-tiny;
-    line-height: 1.5;
+    line-height: 1;
     .plyr-font-smoothing(on);
 }
diff --git a/src/less/components/buttons.less b/src/less/components/buttons.less
index 542580a2..3a9057c6 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/buttons.less
@@ -53,13 +53,13 @@
 .plyr__play-large {
     display: none;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    padding: ceil(@plyr-control-spacing * 1.25);
+    padding: ceil(@plyr-control-spacing * 1.5);
     background: fade(@plyr-video-control-bg-hover, 80%);
-    border: 3px solid currentColor;
+    border: 0;
     border-radius: 100%;
     box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
@@ -81,7 +81,12 @@
     }
 
     &:focus {
-        outline: 1px dotted fade(@plyr-video-control-color, 50%);
+        outline: 0;
+    }
+
+    &.plyr__tab-focus {
+        outline: 0;
+        box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
     }
 }
 
diff --git a/src/less/components/embed.less b/src/less/components/embed.less
index d31e4770..a50a432b 100644
--- a/src/less/components/embed.less
+++ b/src/less/components/embed.less
@@ -6,7 +6,8 @@
 .plyr__video-embed {
     // Default to 16:9 ratio but this is set by JavaScript based on config
     @padding: ((100 / 16) * 9);
-    @offset: unit((300 - @padding) / 6, ~'%');
+    @height: 200;
+    @offset: unit((@height - @padding) / (@height / 50), ~'%');
 
     padding-bottom: unit(@padding, ~'%');
     height: 0;
@@ -24,7 +25,7 @@
     // Vimeo hack
     > div {
         position: relative;
-        padding-bottom: 300%;
+        padding-bottom: unit(@height, ~'%');
         transform: translateY(-@offset);
     }
 }
diff --git a/src/less/components/menus.less b/src/less/components/menus.less
index a679e69b..f96393e0 100644
--- a/src/less/components/menus.less
+++ b/src/less/components/menus.less
@@ -129,11 +129,45 @@
         }
 
         label.plyr__control {
-            padding-left: ceil(@plyr-control-padding * 2.5);
+            padding-left: @plyr-control-padding;
 
-            input[type='radio'] {
+            /*input[type='radio'] {
                 position: relative;
                 left: -@plyr-control-padding;
+            }*/
+
+            input[type='radio'] + span {
+                position: relative;
+                display: block;
+                height: 14px;
+                width: 14px;
+                border-radius: 100%;
+                background: fade(#000, 10%);
+                margin-right: @plyr-control-spacing;
+                box-shadow: inset 0 1px 1px fade(#000, 15%);
+
+                &::after {
+                    content: '';
+                    position: absolute;
+                    height: 6px;
+                    width: 6px;
+                    top: 4px;
+                    left: 4px;
+                    transform: scale(0);
+                    opacity: 0;
+                    background: #fff;
+                    border-radius: 100%;
+                    transition: transform 0.3s ease, opacity 0.3s ease;
+                }
+            }
+
+            input[type='radio']:checked + span {
+                background: @plyr-color-main;
+
+                &::after {
+                    transform: scale(1);
+                    opacity: 1;
+                }
             }
         }
 
diff --git a/src/less/components/sliders.less b/src/less/components/sliders.less
index d075d69f..dff1da8b 100644
--- a/src/less/components/sliders.less
+++ b/src/less/components/sliders.less
@@ -12,6 +12,8 @@
     cursor: pointer;
     border: none;
     background: transparent;
+    transition: box-shadow 0.3s ease;
+    border-radius: (@plyr-range-thumb-height * 2);
 
     // Used in JS to populate lower fill for WebKit
     color: @plyr-range-selected-bg;
@@ -79,10 +81,6 @@
         border: 0;
     }
 
-    &.plyr__tab-focus {
-        outline-offset: 3px;
-    }
-
     // Pressed styles
     &:active {
         &::-webkit-slider-thumb {
@@ -114,7 +112,7 @@
     }
 
     &.plyr__tab-focus {
-        outline: 1px dotted fade(@plyr-video-control-color, 50%);
+        box-shadow: 0 0 0 3px fade(@plyr-video-control-color, 50%);
     }
 }
 
@@ -133,6 +131,6 @@
     }
 
     &.plyr__tab-focus {
-        outline: 1px dotted fade(@plyr-audio-control-color, 50%);
+        box-shadow: 0 0 0 3px fade(@plyr-audio-control-color, 50%);
     }
 }