1 files changed, 48 insertions, 9 deletions

diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index c5e0bfaa..b100e761 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -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;
 
     @if $plyr-border-box == true {
         // border-box everything
@@ -224,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;
@@ -245,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,
@@ -288,8 +293,8 @@
         color: inherit;
 
         svg {
-            width: 18px;
-            height: 18px;
+            width: $plyr-control-icon-size;
+            height: $plyr-control-icon-size;
             display: block;
             fill: currentColor;
         }
@@ -318,6 +323,7 @@
 // Hide controls 
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
+    pointer-events: none;
 }
 
 // Video controls
@@ -331,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
@@ -348,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 {
@@ -365,6 +371,7 @@
 .plyr__play-large {
     display: none;
     position: absolute;
+    z-index: 1;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
@@ -372,7 +379,7 @@
     background: $plyr-video-control-bg-hover;
     border: 4px solid currentColor;
     border-radius: 100%;
-    box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85);
+    box-shadow: 0 1px 1px transparentize(#000, .85);
     color: $plyr-video-control-color;
     transition: all .3s ease;
 
@@ -479,6 +486,39 @@
     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
@@ -623,7 +663,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 {