Manual merge of #543 PR

2 files changed, 20 insertions, 23 deletions

diff --git a/src/less/plyr.less b/src/less/plyr.less
index 9e1dee8d..b85a5221 100644
--- a/src/less/plyr.less
+++ b/src/less/plyr.less
@@ -291,16 +291,14 @@
     .plyr__menu {
         margin-left: (@plyr-control-spacing / 2);
 
-        &:first-child {
+        &:first-child,
+        &:first-child + [data-plyr="pause"] {
             margin-left: 0;
         }
     }
     .plyr__volume {
         margin-left: (@plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
-        margin-left: 0;
-    }
 
     @media (min-width: @plyr-bp-screen-sm) {
         > .plyr__control,
diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss
index 639caaf1..60d2e2fe 100644
--- a/src/scss/plyr.scss
+++ b/src/scss/plyr.scss
@@ -61,14 +61,14 @@
         height: ($plyr-range-thumb-height * $plyr-range-thumb-active-scale);
         width: 100%;
         margin: 0;
-        padding: 0; 
+        padding: 0;
         vertical-align: middle;
-        
+
         appearance: none;
         cursor: pointer;
         border: none;
         background: transparent;
-        
+
         // WebKit
         &::-webkit-slider-runnable-track {
             @include plyr-range-track();
@@ -86,7 +86,7 @@
         &::-moz-range-thumb {
             @include plyr-range-thumb();
         }
-        
+
         // Microsoft
         &::-ms-track {
             height: $plyr-range-track-height;
@@ -104,7 +104,7 @@
         &::-ms-thumb {
             @include plyr-range-thumb();
             // For some reason, Edge uses the -webkit margin above
-            margin-top: 0; 
+            margin-top: 0;
         }
         &::-ms-tooltip {
             display: none;
@@ -116,11 +116,11 @@
         }
         &::-moz-focus-outer {
             border: 0;
-        }        
+        }
         &.tab-focus:focus {
             outline-offset: 3px;
         }
-        
+
         // Pressed styles
         &:active {
             &::-webkit-slider-thumb {
@@ -264,26 +264,25 @@
 // Playback controls
 .plyr__controls {
     display: flex;
-    align-items: center; 
+    align-items: center;
     line-height: 1;
     text-align: center;
 
     // Spacing
-    > button,
+    > .plyr__control,
     .plyr__progress,
-    .plyr__time {
+    .plyr__time,
+    .plyr__menu {
         margin-left: ($plyr-control-spacing / 2);
 
-        &:first-child {
+        &:first-child,
+        &:first-child + [data-plyr="pause"] {
             margin-left: 0;
         }
     }
     .plyr__volume {
         margin-left: ($plyr-control-spacing / 2);
     }
-    [data-plyr="pause"] {
-        margin-left: 0;
-    }
 
     // Buttons
     button {
@@ -328,7 +327,7 @@
         }
     }
 }
-// Hide controls 
+// Hide controls
 .plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;
@@ -475,7 +474,7 @@
         height: 0;
         left: 50%;
         transform: translateX(-50%);
-    
+
         // The background triangle
         bottom: -$plyr-tooltip-arrow-size;
         border-right: $plyr-tooltip-arrow-size solid transparent;
@@ -624,16 +623,16 @@
     }
     &::-moz-progress-bar {
         transition: width .2s ease;
-    }    
+    }
     &::-ms-fill {
         transition: width .2s ease;
-    }            
+    }
 }
 .plyr--video .plyr__progress--buffer,
 .plyr--video .plyr__volume--display {
     background: $plyr-video-range-track-bg;
 }
-.plyr--video .plyr__progress--buffer { 
+.plyr--video .plyr__progress--buffer {
     color: $plyr-video-progress-buffered-bg;
 }
 .plyr--audio .plyr__progress--buffer,