3 files changed, 17 insertions, 14 deletions
diff --git a/src/less/bundle.less b/src/less/bundle.less
index 231210c8..ad676ec9 100644
--- a/src/less/bundle.less
+++ b/src/less/bundle.less
@@ -3,6 +3,7 @@
 // https://github.com/sampotts/plyr
 // TODO: Review use of BEM classnames
 // ==========================================================================
+@charset 'UTF-8';
 
 @import 'settings';
 
diff --git a/src/less/components/controls.less b/src/less/components/controls.less
index 20a2adf7..fe257224 100644
--- a/src/less/components/controls.less
+++ b/src/less/components/controls.less
@@ -87,20 +87,19 @@
     padding: @plyr-control-spacing;
     border-radius: inherit;
     background: @plyr-audio-controls-bg;
-    border: @plyr-audio-controls-border;
     color: @plyr-audio-control-color;
 }
 
 // Some options are hidden by default
 .plyr [data-plyr='captions'],
-    .plyr [data-plyr='pip'],
-    .plyr [data-plyr='airplay'],
-    .plyr [data-plyr='fullscreen'] {
+.plyr [data-plyr='pip'],
+.plyr [data-plyr='airplay'],
+.plyr [data-plyr='fullscreen'] {
     display: none;
 }
 .plyr--captions-enabled [data-plyr='captions'],
-    .plyr--pip-supported [data-plyr='pip'],
-    .plyr--airplay-supported [data-plyr='airplay'],
-    .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
+.plyr--pip-supported [data-plyr='pip'],
+.plyr--airplay-supported [data-plyr='airplay'],
+.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
diff --git a/src/less/settings.less b/src/less/settings.less
index 9ddbaa74..604fa62c 100644
--- a/src/less/settings.less
+++ b/src/less/settings.less
@@ -10,6 +10,10 @@
 
 // Colors
 @plyr-color-main: #1aafff;
+@plyr-color-gunmetal: #2f343d;
+@plyr-color-fiord: #4f5b5f;
+@plyr-color-lynch: #6b7d85;
+@plyr-color-heather: #b7c5cd;
 
 // Type
 @plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif;
@@ -43,14 +47,13 @@
 @plyr-video-control-color-hover: #fff;
 @plyr-video-control-bg-hover: @plyr-color-main;
 @plyr-audio-controls-bg: #fff;
-@plyr-audio-controls-border: 1px solid #dbe3e8;
-@plyr-audio-control-color: #565d64;
+@plyr-audio-control-color: @plyr-color-fiord;
 @plyr-audio-control-color-hover: #fff;
 @plyr-audio-control-bg-hover: @plyr-color-main;
 
 // Tooltips
 @plyr-tooltip-bg: fade(#fff, 90%);
-@plyr-tooltip-color: #565d64;
+@plyr-tooltip-color: @plyr-color-fiord;
 @plyr-tooltip-padding: (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size: 4px;
 @plyr-tooltip-radius: 3px;
@@ -60,15 +63,15 @@
 @plyr-menu-bg: @plyr-tooltip-bg;
 @plyr-menu-color: @plyr-tooltip-color;
 @plyr-menu-arrow-size: 6px;
-@plyr-menu-border-color: #b6c5cd;
+@plyr-menu-border-color: @plyr-color-heather;
 @plyr-menu-border-shadow-color: #fff;
 @plyr-menu-shadow: 0 1px 2px fade(#000, 15%);
 
 // Progress
 @plyr-progress-loading-size: 25px;
-@plyr-progress-loading-bg: fade(#343f4a, 20%);
+@plyr-progress-loading-bg: fade(@plyr-color-gunmetal, 20%);
 @plyr-video-progress-buffered-bg: fade(#fff, 25%);
-@plyr-audio-progress-buffered-bg: fade(#c6d6db, 66%);
+@plyr-audio-progress-buffered-bg: fade(@plyr-color-heather, 66%);
 
 // Range sliders
 @plyr-range-track-height: 8px;
@@ -76,7 +79,7 @@
 @plyr-range-thumb-width: floor(@plyr-range-track-height * 2);
 @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(#343f4a, 20%);
+@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;