From 1aeef8128895a97ba7f2f4e8f289efae4db5e9a9 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 13 Aug 2018 23:43:22 +1000
Subject: [PATCH] Controls spacing improvements

---
 src/sass/components/controls.scss | 40 ++++++++++++++++---------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index bde8600b..41426e8b 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -18,20 +18,24 @@
     > .plyr__control,
     .plyr__progress,
     .plyr__time,
-    .plyr__menu {
-        margin-left: ($plyr-control-spacing / 2);
-
-        &:first-child,
-        &:first-child + [data-plyr='pause'] {
-            margin-left: 0;
-            margin-right: auto;
-        }
-    }
-
+    .plyr__menu,
     .plyr__volume {
         margin-left: ($plyr-control-spacing / 2);
     }
 
+    .plyr__menu + .plyr__control,
+    > .plyr__control + .plyr__menu,
+    > .plyr__control + .plyr__control,
+    .plyr__progress + .plyr__control {
+        margin-left: floor($plyr-control-spacing / 4);
+    }
+
+    > .plyr__control:first-child,
+    > .plyr__control:first-child + [data-plyr='pause'] {
+        margin-left: 0;
+        margin-right: auto;
+    }
+
     // Hide empty controls
     &:empty {
         display: none;
@@ -39,17 +43,12 @@
 
     @media (min-width: $plyr-bp-sm) {
         > .plyr__control,
+        .plyr__menu,
         .plyr__progress,
         .plyr__time,
-        .plyr__menu {
+        .plyr__volume {
             margin-left: $plyr-control-spacing;
         }
-
-        > .plyr__control + .plyr__control,
-        .plyr__menu + .plyr__control,
-        > .plyr__control + .plyr__menu {
-            margin-left: ($plyr-control-spacing / 2);
-        }
     }
 }
 
@@ -72,12 +71,15 @@
     bottom: 0;
     color: $plyr-video-control-color;
     left: 0;
-    padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing
-        $plyr-control-spacing;
+    padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
     position: absolute;
     right: 0;
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
     z-index: 3;
+
+    @media (min-width: $plyr-bp-sm) {
+        padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
+    }
 }
 
 // Hide video controls