Reverted LESS structure for now

2 files changed, 29 insertions, 21 deletions

diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 917c0645..d527a40e 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -215,7 +215,7 @@
     padding: ($plyr-control-spacing * 2);
     transform: translateY(-($plyr-control-spacing * 6));
     transition: transform .3s ease;
-    color: #fff;
+    color: $plyr-captions-color;
     font-size: $plyr-font-size-captions-base;
     text-align: center;
     font-weight: 400;
@@ -223,7 +223,7 @@
     span {
         border-radius: 2px;
         padding: floor($plyr-control-spacing / 3) $plyr-control-spacing;
-        background: transparentize(#000, .15);
+        background: $plyr-captions-bg;
     }
     span:empty {
         display: none;
@@ -277,8 +277,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;
@@ -312,9 +313,6 @@
         .plyr__time {
             margin-left: $plyr-control-spacing;
         }
-        button {
-            padding: ($plyr-control-spacing / 2) $plyr-control-spacing;
-        }
     }
 }
 // Hide controls 
@@ -342,11 +340,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
@@ -370,6 +363,7 @@
 
 // Large play button (video only)
 .plyr__play-large {
+    display: none;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -395,6 +389,9 @@
         outline: 1px dotted transparentize($plyr-video-control-color, .5);
     }
 }
+.plyr .plyr__play-large {
+    display: inline-block;
+}
 .plyr--audio .plyr__play-large {
     display: none;
 }
@@ -445,7 +442,6 @@
 
     opacity: 0;
     background: $plyr-tooltip-bg;
-    box-shadow: $plyr-tooltip-shadow;
     border-radius: $plyr-tooltip-radius;
 
     color: $plyr-tooltip-color;
@@ -487,8 +483,8 @@
 // --------------------------------------------------------------
 // <progress> element
 .plyr__progress {
+    display: none;
     position: relative;
-    display: inline-block;
     flex: 1;
 
     input[type="range"] {
@@ -511,6 +507,9 @@
         left: 0;
     }
 }
+.plyr .plyr__progress {
+    display: inline-block;
+}
 
 .plyr__progress--buffer,
 .plyr__progress--played,
@@ -556,12 +555,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;
@@ -641,8 +642,10 @@
 
 // Volume
 // --------------------------------------------------------------
-.plyr .plyr__volume { 
+.plyr__volume {
     display: none;
+}
+.plyr .plyr__volume {
     flex: 1;
     position: relative;
 
@@ -695,4 +698,11 @@
         left: 0;
         right: 0;
     }
+
+    // Vimeo requires some different styling
+    &.plyr--vimeo .plyr__video-wrapper {
+        height: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
 }
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 7cc7e34c..5aa0d629 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -17,7 +17,9 @@ $plyr-font-size-small:                  14px !default;
 $plyr-font-size-base:                   16px !default;
 
 // Captions
-$plyr-font-size-captions-base:          ceil($plyr-font-size-base * 1.25) !default;
+$plyr-captions-bg: 						transparentize(#000, .3) !default;
+$plyr-captions-color: 					#fff !default;
+$plyr-font-size-captions-base:          $plyr-font-size-base !default;
 $plyr-font-size-captions-medium:        ceil($plyr-font-size-base * 1.5) !default;
 $plyr-font-size-captions-large:         ($plyr-font-size-base * 2) !default;
 
@@ -35,12 +37,8 @@ $plyr-audio-control-color-hover:        #fff !default;
 $plyr-audio-control-bg-hover:           $plyr-color-main;
 
 // Tooltips
-$plyr-tooltip-bg:                       $plyr-video-controls-bg !default;
-$plyr-tooltip-border-color:             transparentize(darken($plyr-video-controls-bg, 75%), .9) !default;
-$plyr-tooltip-arrow-border-color:       transparentize(darken($plyr-video-controls-bg, 75%), .8) !default;
-$plyr-tooltip-border-width:             1px !default;
-$plyr-tooltip-shadow:                   0 0 5px $plyr-tooltip-border-color, 0 0 0 $plyr-tooltip-border-width $plyr-tooltip-border-color !default;
-$plyr-tooltip-color:                    $plyr-video-control-color !default;
+$plyr-tooltip-bg:                       transparentize(#000, .3) !default;
+$plyr-tooltip-color:                    #fff !default;
 $plyr-tooltip-padding:                  ($plyr-control-spacing / 2) !default;
 $plyr-tooltip-arrow-size:               4px !default;
 $plyr-tooltip-radius:                   3px !default;