Merge branch 'master' into develop

# Conflicts:
#	src/js/plyr.js

2 files changed, 58 insertions, 17 deletions

diff --git a/src/less/plyr.less b/src/less/plyr.less
index ca7b555a..162e8fd0 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -19,7 +19,8 @@
     position: relative;
     max-width: 100%;
     min-width: 200px;
-    font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
+    font-family: @plyr-font-family;
+    direction: ltr;
 
     & when (@plyr-border-box = true) {
         // border-box everything
@@ -177,7 +178,6 @@
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
     overflow: hidden;
-    border-radius: inherit;
 
     iframe {
         position: absolute;
@@ -225,6 +225,8 @@
         border-radius: 2px;
         padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
         background: @plyr-captions-bg;
+        box-decoration-break: clone;
+        line-height: 150%;
     }
     span:empty {
         display: none;
@@ -246,16 +248,18 @@
 
 // Controls
 // --------------------------------------------------------------
+// Hide native controls
+.plyr ::-webkit-media-controls {
+    display: none;
+}
+
 // Playback controls
 .plyr__controls {
     display: flex;
     align-items: center; 
-
     line-height: 1;
     text-align: center;
 
-    transition: opacity .3s ease;
-
     // Spacing
     > button,
     .plyr__progress,
@@ -280,7 +284,7 @@
         flex-shrink: 0;
         overflow: visible; // IE11
         vertical-align: middle;
-        padding: (@plyr-control-spacing * .7);
+        padding: @plyr-control-padding;
         border: 0;
         background: transparent;
         border-radius: 3px;
@@ -289,8 +293,8 @@
         color: inherit;
 
         svg {
-            width: 18px;
-            height: 18px;
+            width: @plyr-control-icon-size;
+            height: @plyr-control-icon-size;
             display: block;
             fill: currentColor;
         }
@@ -319,6 +323,7 @@
 // Hide controls 
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
+    pointer-events: none;
 }
 
 // Video controls
@@ -332,6 +337,7 @@
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     color: @plyr-video-control-color;
+    transition: opacity .3s ease;
 
     button {
         // Hover and tab focus
@@ -349,7 +355,6 @@
     border-radius: inherit;
     background: @plyr-audio-controls-bg;
     border: @plyr-audio-controls-border;
-    box-shadow: @plyr-audio-controls-box-shadow;
     color: @plyr-audio-control-color;
 
     button {
@@ -366,6 +371,7 @@
 .plyr__play-large {
     display: none;
     position: absolute;
+    z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -373,7 +379,7 @@
     background: @plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%);
+    box-shadow: 0 1px 1px fade(#000, 15%);
     color: @plyr-video-control-color;
     transition: all .3s ease;
 
@@ -480,6 +486,40 @@
     z-index: 3;
 }
 
+// First tooltip
+.plyr__controls button:first-child .plyr__tooltip {
+    left: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 0 100%;
+
+    &::before {
+        left: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+    }
+}
+
+// Last tooltip
+.plyr__controls button:last-child .plyr__tooltip {
+    right: 0;
+    transform: translate(0, 10px) scale(.8);
+    transform-origin: 100% 100%;
+
+    &::before {
+        left: auto;
+        right: (@plyr-control-icon-size / 2) + @plyr-control-padding;
+        transform: translateX(50%);
+    }
+}
+
+.plyr__controls button:first-child,
+.plyr__controls button:last-child {
+    &:hover .plyr__tooltip,
+    &.tab-focus:focus .plyr__tooltip,
+    .plyr__tooltip--visible {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
+
 // Playback progress
 // --------------------------------------------------------------
 // <progress> element
@@ -624,7 +664,6 @@
     display: inline-block;
     vertical-align: middle;
     font-size: @plyr-font-size-small;
-    line-height: .95;
 }
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
diff --git a/src/less/variables.less b/src/less/variables.less
index 0b2d0895..041eec20 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -11,33 +11,35 @@
 // Colors
 @plyr-color-main:                       #3498db;
 
-// Font sizes
+// Font
+@plyr-font-family:                      'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
 @plyr-font-size-small:                  14px;
 @plyr-font-size-base:                   16px;
 
 // Captions
-@plyr-captions-bg: 						fade(#000, 70%);
-@plyr-captions-color: 					#fff;
+@plyr-captions-bg:                      fade(#000, 70%);
+@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);
 @plyr-font-size-captions-large:         (@plyr-font-size-base * 2);
 
 // Controls
+@plyr-control-icon-size:                18px;
 @plyr-control-spacing:                  10px;
+@plyr-control-padding:                  (@plyr-control-spacing * .7);
 @plyr-video-controls-bg:                #000;
 @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-controls-box-shadow:        0 1px 1px fade(#000, 5%);
 @plyr-audio-control-color:              #565D64;
 @plyr-audio-control-color-hover:        #fff;
 @plyr-audio-control-bg-hover:           @plyr-color-main;
 
 // Tooltips
 @plyr-tooltip-bg:                       fade(#000, 70%);
-@plyr-tooltip-color:                   	#fff;
+@plyr-tooltip-color:                    #fff;
 @plyr-tooltip-padding:                  (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size:               4px;
 @plyr-tooltip-radius:                   3px;
@@ -62,7 +64,7 @@
 @plyr-range-thumb-active-scale:         1.25;
 @plyr-video-range-track-bg:             @plyr-video-progress-buffered-bg;
 @plyr-audio-range-track-bg:             @plyr-audio-progress-buffered-bg;
-@plyr-range-selected-bg: 				@plyr-color-main;
+@plyr-range-selected-bg:                @plyr-color-main;
 
 // Breakpoints
 @plyr-bp-screen-sm:                     480px;