8 files changed, 43 insertions, 28 deletions
diff --git a/src/less/bundle.less b/src/less/bundle.less
index ad676ec9..2ee66ebc 100644
--- a/src/less/bundle.less
+++ b/src/less/bundle.less
@@ -13,8 +13,8 @@
 @import 'base';
 
 @import 'components/badges';
-@import 'components/buttons';
 @import 'components/captions';
+@import 'components/control';
 @import 'components/controls';
 @import 'components/embed';
 @import 'components/menus';
diff --git a/src/less/components/captions.less b/src/less/components/captions.less
index ad0fc79f..605d7e49 100644
--- a/src/less/components/captions.less
+++ b/src/less/components/captions.less
@@ -39,12 +39,12 @@
         display: none;
     }
 
-    @media (min-width: @plyr-bp-screen-sm) {
+    @media @plyr-mq-sm {
         padding: (@plyr-control-spacing * 2);
         font-size: @plyr-font-size-captions-base;
     }
 
-    @media (min-width: @plyr-bp-screen-md) {
+    @media @plyr-mq-md {
         font-size: @plyr-font-size-captions-medium;
     }
 }
diff --git a/src/less/components/buttons.less b/src/less/components/control.less
index 8c775d73..48b73e0f 100644
--- a/src/less/components/buttons.less
+++ b/src/less/components/control.less
@@ -1,13 +1,15 @@
+// --------------------------------------------------------------
+// Control buttons
+// --------------------------------------------------------------
+
 .plyr__control {
     position: relative;
-    display: inline-block;
     flex-shrink: 0;
     overflow: visible; // IE11
-    vertical-align: middle;
     padding: @plyr-control-padding;
     border: 0;
     background: transparent;
-    border-radius: 3px;
+    border-radius: @plyr-control-radius;
     cursor: pointer;
     transition: all 0.3s ease;
     color: inherit;
@@ -66,7 +68,7 @@
 
     svg {
         position: relative;
-        left: 2px;
+        left: 2px; // Offset to make the play button look right
         width: @plyr-control-icon-size-large;
         height: @plyr-control-icon-size-large;
     }
@@ -78,7 +80,7 @@
 }
 
 .plyr--full-ui.plyr--video .plyr__control--overlaid {
-    display: inline-block;
+    display: block;
 }
 
 .plyr--playing .plyr__control--overlaid {
diff --git a/src/less/components/controls.less b/src/less/components/controls.less
index fe257224..fb66e869 100644
--- a/src/less/components/controls.less
+++ b/src/less/components/controls.less
@@ -30,7 +30,7 @@
         margin-left: (@plyr-control-spacing / 2);
     }
 
-    @media (min-width: @plyr-bp-screen-sm) {
+    @media @plyr-mq-sm {
         > .plyr__control,
         .plyr__progress,
         .plyr__time,
diff --git a/src/less/components/times.less b/src/less/components/times.less
index 29b06aa0..09a55702 100644
--- a/src/less/components/times.less
+++ b/src/less/components/times.less
@@ -3,24 +3,20 @@
 // --------------------------------------------------------------
 
 .plyr__time {
-    display: inline-block;
-    vertical-align: middle;
     font-size: @plyr-font-size-time;
 }
 
 // Media duration hidden on small screens
 .plyr__time + .plyr__time {
-    display: none;
-
-    @media (min-width: @plyr-bp-screen-md) {
-        display: inline-block;
-    }
-
     // Add a slash in before
     &::before {
         content: '\2044';
         margin-right: @plyr-control-spacing;
     }
+
+    @media @plyr-mq-sm-max {
+        display: none;
+    }
 }
 
 .plyr--video .plyr__time {
diff --git a/src/less/components/volume.less b/src/less/components/volume.less
index 1c9054b7..bb5a49ba 100644
--- a/src/less/components/volume.less
+++ b/src/less/components/volume.less
@@ -11,12 +11,11 @@
         z-index: 2;
     }
 
-    @media (min-width: @plyr-bp-screen-sm) {
-        display: block;
+    @media @plyr-mq-sm {
         max-width: 50px;
     }
 
-    @media (min-width: @plyr-bp-screen-md) {
+    @media @plyr-mq-md {
         max-width: 80px;
     }
 }
diff --git a/src/less/lib/mixins.less b/src/less/lib/mixins.less
index e58bb16e..8a3c52ab 100644
--- a/src/less/lib/mixins.less
+++ b/src/less/lib/mixins.less
@@ -90,7 +90,7 @@
     }
 
     // Large captions in full screen on larger screens
-    @media (min-width: @plyr-bp-screen-lg) {
+    @media @plyr-mq-lg {
         .plyr__captions {
             font-size: @plyr-font-size-captions-large;
         }
diff --git a/src/less/settings.less b/src/less/settings.less
index 604fa62c..73cd10ca 100644
--- a/src/less/settings.less
+++ b/src/less/settings.less
@@ -42,10 +42,13 @@
 @plyr-control-icon-size-large: 20px;
 @plyr-control-spacing: 10px;
 @plyr-control-padding: (@plyr-control-spacing * 0.7);
+@plyr-control-radius: 3px;
+
 @plyr-video-controls-bg: #000;
 @plyr-video-control-color: #fff;
 @plyr-video-control-color-hover: #fff;
 @plyr-video-control-bg-hover: @plyr-color-main;
+
 @plyr-audio-controls-bg: #fff;
 @plyr-audio-control-color: @plyr-color-fiord;
 @plyr-audio-control-color-hover: #fff;
@@ -74,20 +77,35 @@
 @plyr-audio-progress-buffered-bg: fade(@plyr-color-heather, 66%);
 
 // Range sliders
-@plyr-range-track-height: 8px;
-@plyr-range-thumb-height: floor(@plyr-range-track-height * 2);
-@plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
+@plyr-range-track-height: 6px;
+@plyr-range-thumb-height: ceil(@plyr-range-track-height * 2.3);
+@plyr-range-thumb-width: ceil(@plyr-range-track-height * 2.3);
 @plyr-range-thumb-bg: #fff;
 @plyr-range-thumb-border: 2px solid transparent;
 @plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%);
 @plyr-range-thumb-active-border-color: #fff;
 @plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
-@plyr-range-thumb-active-scale: 1.25;
+@plyr-range-thumb-active-scale: 1.5;
 @plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
 @plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
 @plyr-range-selected-bg: @plyr-color-main;
 
 // Breakpoints
-@plyr-bp-screen-sm: 480px;
-@plyr-bp-screen-md: 768px;
-@plyr-bp-screen-lg: 1024px;
+@plyr-bp-sm: 480px;
+@plyr-bp-md: 768px;
+@plyr-bp-lg: 1024px;
+
+// Max-width media queries
+@plyr-bp-xs-max: (@plyr-bp-sm - 1);
+@plyr-bp-sm-max: (@plyr-bp-md - 1);
+@plyr-bp-md-max: (@plyr-bp-lg - 1);
+
+// Mobile first
+@plyr-mq-sm: ~'only screen and (min-width: @{plyr-bp-sm}) ';
+@plyr-mq-md: ~'only screen and (min-width: @{plyr-bp-md}) ';
+@plyr-mq-lg: ~'only screen and (min-width: @{plyr-bp-lg}) ';
+
+// Mobile last
+@plyr-mq-xs-max: ~'only screen and (max-width: @{plyr-bp-xs-max}) ';
+@plyr-mq-sm-max: ~'only screen and (max-width: @{plyr-bp-sm-max}) ';
+@plyr-mq-md-max: ~'only screen and (max-width: @{plyr-bp-md-max}) ';