Styling for control changes

2 files changed, 40 insertions, 38 deletions

diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index 41426e8b..87494957 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -14,42 +14,46 @@
     justify-content: flex-end;
     text-align: center;
 
-    // Spacing
-    > .plyr__control,
-    .plyr__progress,
-    .plyr__time,
-    .plyr__menu,
-    .plyr__volume {
-        margin-left: ($plyr-control-spacing / 2);
+    .plyr__progress__container {
+        flex: 1;
     }
 
-    .plyr__menu + .plyr__control,
-    > .plyr__control + .plyr__menu,
-    > .plyr__control + .plyr__control,
-    .plyr__progress + .plyr__control {
-        margin-left: floor($plyr-control-spacing / 4);
-    }
+    // Spacing
+    .plyr__controls__item {
+        margin-left: ($plyr-control-spacing / 4);
+
+        &:first-child {
+            margin-left: 0;
+            margin-right: auto;
+        }
+
+        &.plyr__progress__container {
+            padding-left: ($plyr-control-spacing / 4);
+        }
+
+        &.plyr__time {
+            padding: 0 ($plyr-control-spacing / 2);
+        }
 
-    > .plyr__control:first-child,
-    > .plyr__control:first-child + [data-plyr='pause'] {
-        margin-left: 0;
-        margin-right: auto;
+        &.plyr__progress__container:first-child,
+        &.plyr__time:first-child,
+        &.plyr__time + .plyr__time {
+            padding-left: 0;
+        }
+
+        &.plyr__volume {
+            padding-right: ($plyr-control-spacing / 2);
+        }
+
+        &.plyr__volume:first-child {
+            padding-right: 0;
+        }
     }
 
     // Hide empty controls
     &:empty {
         display: none;
     }
-
-    @media (min-width: $plyr-bp-sm) {
-        > .plyr__control,
-        .plyr__menu,
-        .plyr__progress,
-        .plyr__time,
-        .plyr__volume {
-            margin-left: $plyr-control-spacing;
-        }
-    }
 }
 
 // Audio controls
@@ -62,10 +66,7 @@
 
 // Video controls
 .plyr--video .plyr__controls {
-    background: linear-gradient(
-        rgba($plyr-video-controls-bg, 0),
-        rgba($plyr-video-controls-bg, 0.7)
-    );
+    background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
     border-bottom-left-radius: inherit;
     border-bottom-right-radius: inherit;
     bottom: 0;
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index f28a19ca..04c83516 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -2,18 +2,19 @@
 // Playback progress
 // --------------------------------------------------------------
 
+// Offset the range thumb in order to be able to calculate the relative progress (#954)
+$plyr-progress-offset: $plyr-range-thumb-height;
+
 .plyr__progress {
-    flex: 1;
-    left: $plyr-range-thumb-height / 2;
-    margin-right: $plyr-range-thumb-height;
+    left: $plyr-progress-offset / 2;
+    margin-right: $plyr-progress-offset;
     position: relative;
 
     input[type='range'],
     &__buffer {
-        margin-left: -($plyr-range-thumb-height / 2);
-        margin-right: -($plyr-range-thumb-height / 2);
-        // Offset the range thumb in order to be able to calculate the relative progress (#954)
-        width: calc(100% + #{$plyr-range-thumb-height});
+        margin-left: -($plyr-progress-offset / 2);
+        margin-right: -($plyr-progress-offset / 2);
+        width: calc(100% + #{$plyr-progress-offset});
     }
 
     input[type='range'] {