diff --git a/src/components/nowPlayingBar/nowPlayingBar.css b/src/components/nowPlayingBar/nowPlayingBar.css
index e545d82d1..a884f6576 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.css
+++ b/src/components/nowPlayingBar/nowPlayingBar.css
@@ -114,8 +114,6 @@
 
 .nowPlayingBarUserDataButtons {
     display: inline-block;
-    margin-left: 1em;
-    margin-right: 1em;
 }
 
 .nowPlayingBarPositionSlider::-webkit-slider-thumb {
diff --git a/src/components/nowPlayingBar/nowPlayingBar.js b/src/components/nowPlayingBar/nowPlayingBar.js
index a229fab4b..215f6336a 100644
--- a/src/components/nowPlayingBar/nowPlayingBar.js
+++ b/src/components/nowPlayingBar/nowPlayingBar.js
@@ -72,7 +72,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         if (layoutManager.mobile) {
             html += '<button is="paper-icon-button-light" class="nextTrackButton mediaButton"><span class="material-icons skip_next"></span></button>';
         } else {
-            html += '<button is="paper-icon-button-light" class="btnToggleContextMenu"><span class="material-icons more_vert"></span></button>';
+            html += '<button is="paper-icon-button-light" class="btnToggleContextMenu mediaButton"><span class="material-icons more_vert"></span></button>';
         }
 
         html += '</div>';
@@ -355,7 +355,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
     function updateRepeatModeDisplay(repeatMode) {
         toggleRepeatButtonIcon.classList.remove('repeat', 'repeat_one');
-        const cssClass = 'repeatButton-active';
+        const cssClass = 'buttonActive';
 
         switch (repeatMode) {
             case 'RepeatAll':
@@ -375,18 +375,14 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
     }
 
     function updateTimeDisplay(positionTicks, runtimeTicks, bufferedRanges) {
-
         // See bindEvents for why this is necessary
         if (positionSlider && !positionSlider.dragging) {
             if (runtimeTicks) {
-
                 var pct = positionTicks / runtimeTicks;
                 pct *= 100;
 
                 positionSlider.value = pct;
-
             } else {
-
                 positionSlider.value = 0;
             }
         }
@@ -396,9 +392,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
         }
 
         if (currentTimeElement) {
-
             var timeText = positionTicks == null ? '--:--' : datetime.getDisplayRunningTime(positionTicks);
-
             if (runtimeTicks) {
                 timeText += ' / ' + datetime.getDisplayRunningTime(runtimeTicks);
             }
@@ -606,14 +600,11 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
     function onPlaybackStart(e, state) {
         console.debug('nowplaying event: ' + e.type);
-
         var player = this;
-
         onStateChanged.call(player, e, state);
     }
 
     function onRepeatModeChange() {
-
         if (!isEnabled) {
             return;
         }
@@ -628,9 +619,8 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
         let shuffleMode = playbackManager.getQueueShuffleMode();
         let context = nowPlayingBarElement;
-        const cssClass = 'shuffleQueue-active';
+        const cssClass = 'buttonActive';
         let toggleShuffleButton = context.querySelector('.btnShuffleQueue');
-
         switch (shuffleMode) {
             case 'Shuffle':
                 toggleShuffleButton.classList.add(cssClass);
@@ -643,7 +633,6 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
     }
 
     function showNowPlayingBar() {
-
         if (!isVisibilityAllowed) {
             hideNowPlayingBar();
             return;
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 33c44ab40..b283daaba 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -359,7 +359,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         function updateRepeatModeDisplay(repeatMode) {
             var context = dlg;
             let toggleRepeatButtons = context.querySelectorAll('.repeatToggleButton');
-            const cssClass = 'repeatButton-active';
+            const cssClass = 'buttonActive';
             let innHtml = '<span class="material-icons repeat"></span>';
             let repeatOn = true;
 
@@ -528,7 +528,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
         function onShuffleQueueModeChange(updateView = true) {
             let shuffleMode = playbackManager.getQueueShuffleMode(this);
             let context = dlg;
-            const cssClass = 'shuffleQueue-active';
+            const cssClass = 'buttonActive';
             let shuffleButtons = context.querySelectorAll('.btnShuffleQueue');
 
             for (let shuffleButton of shuffleButtons) {
diff --git a/src/nowplaying.html b/src/nowplaying.html
index 9460cb814..1f4d09312 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -5,7 +5,7 @@
         <div class="nowPlayingInfoContainer">
             <div class="nowPlayingPageImageContainer"></div>
             <div class="nowPlayingInfoControls">
-            
+
                 <div class="flex">
 
                     <div class="nowPlayingInfoContainerMedia">
@@ -15,9 +15,9 @@
                         <div class="nowPlayingArtist nowPlayingSerie"></div>
                     </div>
                     <div class="nowPlayingPageUserDataButtonsTitle"></div>
-                    
+
                 </div>
-                
+
                 <div class="sliderContainer flex">
                     <div class="positionTime"></div>
                         <div class="nowPlayingPositionSliderContainer">
@@ -25,25 +25,25 @@
                         </div>
                     <div class="runtime"></div>
                 </div>
-                
+
                 <div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
-                
+
                     <div class="nowPlayingInfoButtons">
 
                         <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${ButtonRepeat}"
                             data-command="SetRepeatMode">
                             <span class="material-icons repeat"></span>
                         </button>
-                    
+
                         <button is="paper-icon-button-light" class="btnRewind btnNowPlayingRewind btnPlayStateCommand autoSize" title="${Rewind}">
                             <span class="material-icons replay_10"></span>
                         </button>
-                        
+
                         <button is="paper-icon-button-light" class="btnPreviousTrack btnPlayStateCommand autoSize" title="${ButtonPreviousTrack}">
                             <span class="material-icons skip_previous"></span>
                         </button>
 
-                        <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize" title="${ButtonPause}">
+                        <button is="paper-icon-button-light" class="btnPlayPause btnPlayStateCommand autoSize cardOverlayButtonIcon" title="${ButtonPause}">
                             <span class="material-icons pause_circle_filled"></span>
                         </button>
 
@@ -54,7 +54,7 @@
                         <button is="paper-icon-button-light" class="btnPlayStateCommand btnNextTrack autoSize" title="${ButtonNextTrack}">
                             <span class="material-icons skip_next"></span>
                         </button>
-                        
+
                         <button is="paper-icon-button-light" class="btnPlayStateCommand btnFastForward btnNowPlayingFastForward autoSize" title="${FastForward}">
                             <span class="material-icons forward_30"></span>
                         </button>
@@ -66,7 +66,7 @@
                     </div>
 
                     <div class="nowPlayingSecondaryButtons">
-                    
+
                         <button is="paper-icon-button-light" class="btnAudioTracks videoButton btnPlayStateCommand autoSize" title="${ButtonAudioTracks}" data-command="GoToSearch">
                             <span class="material-icons audiotrack"></span>
                         </button>
@@ -74,7 +74,7 @@
                         <button is="paper-icon-button-light" class="btnSubtitles videoButton btnPlayStateCommand autoSize" title="${ButtonSubtitles}" data-command="GoToSearch">
                             <span class="material-icons closed_caption"></span>
                         </button>
-                    
+
                         <div class="nowPlayingPageUserDataButtons"></div>
 
                         <button is="paper-icon-button-light" class="btnToggleFullscreen videoButton btnPlayStateCommand autoSize" title="${ButtonFullscreen}" data-command="ToggleFullscreen">
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css
index 5838668e3..f77e0e5c7 100644
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@@ -449,12 +449,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc;
 }
 
 .card:focus .cardBox.visualCardBox,
diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css
index 6ab2e11ab..db08a889d 100644
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@@ -441,12 +441,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {
diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css
index cf35d0b69..646c51e20 100644
--- a/src/themes/dark/theme.css
+++ b/src/themes/dark/theme.css
@@ -412,12 +412,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc;
 }
 
 .card:focus .cardBox.visualCardBox,
diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css
index bc5df9ee7..a95f653cd 100644
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@@ -427,12 +427,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index e544af00a..452bab219 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -542,14 +542,10 @@ a[data-role=button] {
     color: #c33;
 }
 
-.repeatButton-active {
+.buttonActive {
     color: #4285f4;
 }
 
-.shuffleQueue-active {
-    color: #4285f4 !important;
-}
-
 .personCard .cardScalable {
     border-radius: 50% !important;
     border: 1px solid rgb(255, 255, 255);
diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css
index b66e7bd42..4281fce8c 100644
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@@ -421,12 +421,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
-    color: #4285f4;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
+.buttonActive {
+    color: #00a4dc;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {