diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index 100a464cd..76b78fd73 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -410,7 +410,7 @@ button {
 }
 
 .cardOverlayButton {
-    color: rgba(255, 255, 255, .76) !important;
+    color: rgba(255, 255, 255, .76);
     margin: 0;
     z-index: 1;
     padding: .75em;
@@ -453,10 +453,6 @@ button {
     transition: transform 200ms ease-out;
 }
 
-    .cardOverlayButton-centered:hover {
-        transform: scale(1.2, 1.2);
-    }
-
 .bannerCard {
     width: 100%;
 }
@@ -490,14 +486,12 @@ button {
 }
 
 @media (min-width: 25em) {
-
     .backdropCard {
         width: 50%;
     }
 }
 
 @media (min-width: 31.25em) {
-
     .smallBackdropCard {
         width: 33.333333333333333333333333333333%;
     }
@@ -520,7 +514,6 @@ button {
 }
 
 @media (min-width: 50em) {
-
     .bannerCard {
         width: 50%;
     }
@@ -535,15 +528,12 @@ button {
 }
 
 @media (min-width: 62.5em) {
-
-
     .smallBackdropCard {
         width: 20%;
     }
 }
 
 @media (min-width: 75em) {
-
     .backdropCard {
         width: 25%;
     }
@@ -563,7 +553,6 @@ button {
 
 
 @media (min-width: 87.5em) {
-
     .squareCard, .portraitCard {
         width: 14.285714285714285714285714285714%;
     }
@@ -574,7 +563,6 @@ button {
 }
 
 @media (min-width: 100em) {
-
     .smallBackdropCard {
         width: 12.5%;
     }
@@ -589,14 +577,12 @@ button {
 }
 
 @media (min-width: 120em) {
-
     .squareCard, .portraitCard {
         width: 11.111111111111111111111111111111%;
     }
 }
 
 @media (min-width: 131.25em) {
-
     .bannerCard {
         width: 25%;
     }
@@ -607,7 +593,6 @@ button {
 }
 
 @media (min-width: 156.25em) {
-
     .backdropCard {
         width: 16.666666666666666666666666666667%;
     }
@@ -692,14 +677,12 @@ button {
 }
 
 @media (min-width: 50em) {
-
     .overflowSquareCard, .overflowPortraitCard {
         width: 18.4vw;
     }
 }
 
 @media (min-width: 75em) {
-
     .overflowBackdropCard, .overflowSmallBackdropCard {
         width: 23.3vw;
     }
@@ -710,7 +693,6 @@ button {
 }
 
 @media (min-width: 87.5em) {
-
     .overflowSquareCard, .overflowPortraitCard {
         width: 13.3vw;
     }
@@ -780,16 +762,15 @@ button {
     user-select: none;
 }
 
-.card-hoverable :hover .cardOverlayContainer {
+.card-hoverable:hover .cardOverlayContainer {
     opacity: 1;
 }
 
 .cardOverlayButton-hover {
     opacity: 0;
-    transition: opacity .2s;
+    transition: 0.2s;
     background: transparent;
-    color: #fff !important;
-    padding: .5em;
+    padding: 0.5em;
 }
 
 .cardOverlayButtonIcon-hover {
@@ -801,6 +782,7 @@ button {
 }
 
 .cardOverlayFab-primary {
+    background-color: rgba(0,0,0,0.7);
     font-size: 130%;
     padding: 0;
     width: 3em;
@@ -812,7 +794,7 @@ button {
     left: 50%;
 }
 
-.cardOverlayFab-primary i {
-    border: .07em solid rgba(255,255,255,.9);
-    color: #fff;
+.cardOverlayFab-primary:hover {
+    transform: scale(1.4, 1.4);
+    transition: 0.2s;
 }
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index d8c71d461..b41428e2a 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -6,22 +6,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         var enableFocusTransfrom = !browser.slow && !browser.edge;
 
         function getCardsHtml(items, options) {
-
             if (arguments.length === 1) {
-
                 options = arguments[0];
                 items = options.items;
             }
 
-            var html = buildCardsHtmlInternal(items, options);
-
-            return html;
+            return buildCardsHtmlInternal(items, options);
         }
 
         function getPostersPerRow(shape, screenWidth, isOrientationLandscape) {
-
             switch (shape) {
-
                 case 'portrait':
                     if (layoutManager.tv) {
                         return 100 / 16.66666667;
@@ -229,7 +223,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         }
 
         function isResizable(windowWidth) {
-
             var screen = window.screen;
             if (screen) {
                 var screenWidth = screen.availWidth;
@@ -243,11 +236,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
         }
 
         function getImageWidth(shape, screenWidth, isOrientationLandscape) {
-
-            //console.log(screenWidth);
             var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
-            //console.log(shape + '--' + imagesPerRow);
-
             var shapeWidth = screenWidth / imagesPerRow;
 
             return Math.round(shapeWidth);
@@ -1362,13 +1351,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, true);
             }
 
-            if (outerCardFooter && !options.cardLayout /*&& options.allowBottomPadding !== false*/) {
+            if (outerCardFooter && !options.cardLayout) {
                 cardBoxClass += ' cardBox-bottompadded';
             }
 
             var overlayButtons = '';
             if (layoutManager.mobile) {
-
                 var overlayPlayButton = options.overlayPlayButton;
 
                 if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) {
@@ -1386,7 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
                 }
 
                 if (options.overlayMoreButton) {
-
                     overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>';
                 }
             }
@@ -1527,10 +1514,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
 
             html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
 
-            var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction';
+            var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
 
             if (playbackManager.canPlay(item)) {
-                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>';
+                html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE037;</i></button>';
             }
 
             html += '<div class="cardOverlayButton-br">';
@@ -1538,7 +1525,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
             var userData = item.UserData || {};
 
             if (itemHelper.canMarkPlayed(item)) {
-
                 require(['emby-playstatebutton']);
                 html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>';
             }
diff --git a/src/components/emby-button/emby-button.css b/src/components/emby-button/emby-button.css
index 90807d2a8..148d1ebad 100644
--- a/src/components/emby-button/emby-button.css
+++ b/src/components/emby-button/emby-button.css
@@ -27,7 +27,6 @@
     /* Disable webkit tap highlighting */
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     text-decoration: none;
-
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
 }
@@ -40,9 +39,9 @@
     background: transparent;
 }
 
-    .button-flat:hover {
-        opacity: .5;
-    }
+.button-flat:hover {
+    opacity: .5;
+}
 
 .button-link {
     background: transparent;
@@ -65,10 +64,10 @@
     transform-origin: center center;
 }
 
-    .emby-button-focusscale:focus {
-        transform: scale(1.16);
-        z-index: 1;
-    }
+.emby-button-focusscale:focus {
+    transform: scale(1.16);
+    z-index: 1;
+}
 
 .emby-button > i {
     /* For non-fab buttons that have icons */
@@ -170,10 +169,10 @@
     transform-origin: center center;
 }
 
-    .icon-button-focusscale:focus {
-        transform: scale(1.3);
-        z-index: 1;
-    }
+.icon-button-focusscale:focus {
+    transform: scale(1.3);
+    z-index: 1;
+}
 
 .btnFilterWithBubble {
     position: relative;
diff --git a/src/components/nowplayingbar/nowplayingbar.js b/src/components/nowplayingbar/nowplayingbar.js
index 01c920a50..9fac61ba1 100644
--- a/src/components/nowplayingbar/nowplayingbar.js
+++ b/src/components/nowplayingbar/nowplayingbar.js
@@ -572,7 +572,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
                     var userData = item.UserData || {};
                     var likes = userData.Likes == null ? '' : userData.Likes;
 
-                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
+                    nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
                 });
 
             }
diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css
index 2342568ce..65b6745e9 100644
--- a/src/components/themes/appletv/theme.css
+++ b/src/components/themes/appletv/theme.css
@@ -71,9 +71,14 @@ html {
     background: #f0f0f0
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css
index c8ee55eff..ab59bcea9 100644
--- a/src/components/themes/blueradiance/theme.css
+++ b/src/components/themes/blueradiance/theme.css
@@ -58,9 +58,14 @@ html {
     }
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index 8f89ebef5..40490c1a8 100644
--- a/src/components/themes/dark/theme.css
+++ b/src/components/themes/dark/theme.css
@@ -43,9 +43,14 @@ html {
     background-color: rgba(0, 0, 0, .86)
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index 3e5809c19..8d83bed17 100644
--- a/src/components/themes/emby/theme.css
+++ b/src/components/themes/emby/theme.css
@@ -43,9 +43,14 @@ html {
     background-color: rgba(0, 0, 0, .86)
 }
 
+.paper-icon-button-light:hover {
+    color: #52b54b;
+    background-color: rgba(82, 181, 75, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #52b54b;
-    background-color: rgba(82, 181, 75, .2)
 }
 
 .fab,
diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css
index ac8c0e040..4a0c1f2ec 100644
--- a/src/components/themes/light/theme.css
+++ b/src/components/themes/light/theme.css
@@ -59,9 +59,14 @@ html {
     background-color: #f0f0f0
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,
diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css
index b3c3843ef..2e7f61c42 100644
--- a/src/components/themes/purple-haze/theme.css
+++ b/src/components/themes/purple-haze/theme.css
@@ -58,9 +58,14 @@ html {
     }
 }
 
+.paper-icon-button-light:hover {
+    color: #48C3C8;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #48C3C8;
-    background-color: rgba(0,164,220, .2)
 }
 
 progress {
diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css
index ac18837ee..bb6d6d70b 100644
--- a/src/components/themes/wmc/theme.css
+++ b/src/components/themes/wmc/theme.css
@@ -64,9 +64,14 @@ html {
     background: rgba(17, 98, 164, .9)
 }
 
+.paper-icon-button-light:hover {
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2);
+    transition: 0.2s;
+}
+
 .paper-icon-button-light:focus {
     color: #00a4dc;
-    background-color: rgba(0,164,220, .2)
 }
 
 .fab,