From 7f624ebbb7f32bc54bb57d77a8408446e819f43a Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 14 May 2016 00:48:21 +1000
Subject: Icon tweaks, IE button fix

---
 src/less/plyr.less      | 22 ++++++++--------------
 src/less/variables.less | 12 +++++-------
 2 files changed, 13 insertions(+), 21 deletions(-)

(limited to 'src/less')

diff --git a/src/less/plyr.less b/src/less/plyr.less
index 69846a10..ee07ed47 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -199,9 +199,9 @@
     left: 0;
     width: 100%;
     padding: (@plyr-control-spacing * 2);
-    transform: translateY(-(@plyr-control-spacing * 6));
+    transform: translateY(-(@plyr-control-spacing * 4));
     transition: transform .3s ease;
-    color: #fff;
+    color: @plyr-captions-color;
     font-size: @plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
@@ -209,7 +209,7 @@
     span {
         border-radius: 2px;
         padding: floor(@plyr-control-spacing / 3) @plyr-control-spacing;
-        background: fade(#000, 85%);
+        background: @plyr-captions-bg;
     }
     span:empty {
         display: none;
@@ -226,7 +226,7 @@
     font-size: @plyr-font-size-captions-large;
 }
 .plyr--hide-controls .plyr__captions {
-    transform: translateY(-(@plyr-control-spacing * 2));
+    transform: translateY(-(@plyr-control-spacing * 1.5));
 }
 
 // Controls
@@ -263,8 +263,9 @@
         position: relative;
         display: inline-block;
         flex-shrink: 0;
+        overflow: visible; // IE11
         vertical-align: middle;
-        padding: (@plyr-control-spacing / 2);
+        padding: (@plyr-control-spacing * .7);
         border: 0;
         background: transparent;
         border-radius: 3px;
@@ -298,9 +299,6 @@
         .plyr__time {
             margin-left: @plyr-control-spacing;
         }
-        button {
-            padding: (@plyr-control-spacing / 2) @plyr-control-spacing;
-        }
     }
 }
 // Hide controls 
@@ -328,11 +326,6 @@
             color: @plyr-video-control-color-hover;
         }
     }
-
-    @media (min-width: @plyr-bp-screen-sm) {
-        padding-left: (@plyr-control-spacing * 1.5);
-        padding-right: (@plyr-control-spacing * 1.5);
-    }
 }
 
 // Audio controls
@@ -431,7 +424,6 @@
 
     opacity: 0;
     background: @plyr-tooltip-bg;
-    box-shadow: @plyr-tooltip-shadow;
     border-radius: @plyr-tooltip-radius;
 
     color: @plyr-tooltip-color;
@@ -542,12 +534,14 @@
         max-width: 99%;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+        transition: none;
     }
     &::-moz-progress-bar {
         min-width: @plyr-range-track-height;
         max-width: 99%;
         border-top-right-radius: 0;
         border-bottom-right-radius: 0;
+        transition: none;
     }
     &::-ms-fill {
         display: none;
diff --git a/src/less/variables.less b/src/less/variables.less
index ea5c6b8e..ef3b4e45 100644
--- a/src/less/variables.less
+++ b/src/less/variables.less
@@ -11,7 +11,9 @@
 @plyr-font-size-base:                   16px;
 
 // Captions
-@plyr-font-size-captions-base:          ceil(@plyr-font-size-base * 1.25);
+@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);
 
@@ -29,12 +31,8 @@
 @plyr-audio-control-bg-hover:           @plyr-color-main;
 
 // Tooltips
-@plyr-tooltip-bg:                       @plyr-video-controls-bg;
-@plyr-tooltip-border-color:             fade(darken(@plyr-video-controls-bg, 75%), 10%);
-@plyr-tooltip-arrow-border-color:       fade(darken(@plyr-video-controls-bg, 75%), 20%);
-@plyr-tooltip-border-width:             1px;
-@plyr-tooltip-shadow:                   0 0 5px @plyr-tooltip-border-color, 0 0 0 @plyr-tooltip-border-width @plyr-tooltip-border-color;
-@plyr-tooltip-color:                    @plyr-video-control-color;
+@plyr-tooltip-bg:                       fade(#000, 70%);
+@plyr-tooltip-color:                   	#fff;
 @plyr-tooltip-padding:                  (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size:               4px;
 @plyr-tooltip-radius:                   3px;
-- 
cgit v1.2.3


From d2e9c61fd7aacdc8f91ceec800d9cdf1e7e49e74 Mon Sep 17 00:00:00 2001
From: Sam Potts <me@sampotts.me>
Date: Sat, 14 May 2016 08:56:59 +1000
Subject: iOS bug fixes (fixes #213)

---
 src/less/plyr.less | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'src/less')

diff --git a/src/less/plyr.less b/src/less/plyr.less
index ee7d5b78..64a0eb85 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -364,6 +364,7 @@
 
 // Large play button (video only)
 .plyr__play-large {
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -389,6 +390,9 @@
         outline: 1px dotted fade(@plyr-video-control-color, 50%);
     }
 }
+.plyr .plyr__play-large {
+    display: inline-block;
+}
 .plyr--audio .plyr__play-large {
     display: none;
 }
@@ -481,7 +485,7 @@
 // <progress> element
 .plyr__progress {
     position: relative;
-    display: inline-block;
+    display: none;
     flex: 1;
 
     input[type="range"] {
@@ -504,6 +508,9 @@
         left: 0;
     }
 }
+.plyr .plyr__progress {
+    display: inline-block;
+}
 
 .plyr__progress--buffer,
 .plyr__progress--played,
@@ -636,8 +643,10 @@
 
 // Volume
 // --------------------------------------------------------------
-.plyr .plyr__volume { 
+.plyr__volume {
     display: none;
+}
+.plyr .plyr__volume {
     flex: 1;
     position: relative;
 
-- 
cgit v1.2.3