fix some css issues with now playing bar

src/components/nowPlayingBar/nowPlayingBar.css

@@ -114,8 +114,6 @@
 
 .nowPlayingBarUserDataButtons {
     display: inline-block;
-    margin-left: 1em;
-    margin-right: 1em;
 }
 
 .nowPlayingBarPositionSlider::-webkit-slider-thumb {

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;

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) {

src/nowplaying.html

@@ -43,7 +43,7 @@
                             <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>
 

src/themes/appletv/theme.css

@@ -449,12 +449,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
+.buttonActive {
-    color: #4285f4;
+    color: #00a4dc;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
 }
 
 .card:focus .cardBox.visualCardBox,

src/themes/blueradiance/theme.css

@@ -441,12 +441,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
+.buttonActive {
-    color: #4285f4;
+    color: #00a4dc;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {

src/themes/dark/theme.css

@@ -412,12 +412,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
+.buttonActive {
-    color: #4285f4;
+    color: #00a4dc;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
 }
 
 .card:focus .cardBox.visualCardBox,

src/themes/light/theme.css

@@ -427,12 +427,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
+.buttonActive {
-    color: #4285f4;
+    color: #00a4dc;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {

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);

src/themes/wmc/theme.css

@@ -421,12 +421,8 @@ html {
     color: #c33;
 }
 
-.repeatButton-active {
+.buttonActive {
-    color: #4285f4;
+    color: #00a4dc;
-}
-
-.shuffleQueue-active {
-    color: #4285f4 !important;
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {