minor theme changes

src/components/appfooter/appfooter.js

@@ -2,24 +2,18 @@ define(['browser', 'css!./appfooter'], function (browser) {
     'use strict';
 
     function render(options) {
-
         var elem = document.createElement('div');
-
         elem.classList.add('appfooter');
 
-        elem.classList.add('appfooter-blurred');
-
         document.body.appendChild(elem);
 
         return elem;
     }
 
     function appFooter(options) {
-
         var self = this;
 
         self.element = render(options);
-
         self.add = function (elem) {
             self.element.appendChild(elem);
         };

src/controllers/dashboard/dashboard.js

@@ -301,23 +301,30 @@ define(["datetime", "events", "itemHelper", "serverNotifications", "dom", "globa
                 html += "</div>";
                 html += '<div class="sessionCardFooter cardFooter">';
                 html += '<div class="sessionCardButtons flex align-items-center justify-content-center">';
-                var btnCssClass;
-                btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl && session.DeviceId !== connectionManager.deviceId() ? "" : " hide";
-                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">pause</i></button>';
+
+                var btnCssClass = session.ServerId && session.NowPlayingItem && session.SupportsRemoteControl ? "" : " hide";
+                var playIcon = session.PlayState.IsPaused ? 'pause' : 'play';
+
+                html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionPlayPause paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">' + playIcon + '</i></button>';
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionStop paper-icon-button-light ' + btnCssClass + '"><i class="material-icons">stop</i></button>';
+
                 btnCssClass = session.TranscodingInfo && session.TranscodingInfo.TranscodeReasons && session.TranscodingInfo.TranscodeReasons.length ? "" : " hide";
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionInfo paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("ViewPlaybackInfo") + '"><i class="material-icons">info</i></button>';
+
                 btnCssClass = session.ServerId && -1 !== session.SupportedCommands.indexOf("DisplayMessage") && session.DeviceId !== connectionManager.deviceId() ? "" : " hide";
                 html += '<button is="paper-icon-button-light" class="sessionCardButton btnSessionSendMessage paper-icon-button-light ' + btnCssClass + '" title="' + globalize.translate("SendMessage") + '"><i class="material-icons">message</i></button>';
                 html += "</div>";
+
                 html += '<div class="sessionNowPlayingStreamInfo" style="padding:.5em 0 1em;">';
                 html += DashboardPage.getSessionNowPlayingStreamInfo(session);
                 html += "</div>";
+
                 html += '<div class="flex align-items-center justify-content-center">';
                 var userImage = DashboardPage.getUserImage(session);
                 html += userImage ? '<div class="activitylogUserPhoto" style="background-image:url(\'' + userImage + "');\"></div>" : '<div style="height:1.71em;"></div>';
                 html += '<div class="sessionUserName">';
                 html += DashboardPage.getUsersHtml(session);
+
                 html += "</div>";
                 html += "</div>";
                 html += "</div>";

src/elements/emby-button/emby-button.css

@@ -47,10 +47,6 @@
     background: transparent;
 }
 
-.button-flat:hover {
-    opacity: 0.5;
-}
-
 .button-link {
     background: transparent;
     margin: 0;

src/themes/blueradiance/theme.css

@@ -182,7 +182,7 @@ html {
 }
 
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
+    .appfooter {
         background: rgba(1, 2, 50, 0.7);
         backdrop-filter: blur(20px);
     }
@@ -233,7 +233,10 @@ html {
     border-color: #00a4dc;
 }
 
-.button-flat-accent,
+.button-flat:hover {
+    color: #00a4dc;
+}
+
 .button-link {
     color: #00a4dc;
 }

src/themes/dark/theme.css

@@ -16,7 +16,7 @@ html {
 }
 
 .skinHeader-withBackground {
-    background-color: #101010;
+    background-color: #202020;
 }
 
 .skinHeader.semiTransparent {
@@ -157,7 +157,7 @@ html {
 }
 
 .appfooter {
-    background: #101010;
+    background: #202020;
     color: #ccc;
     color: rgba(255, 255, 255, 0.78);
 }
@@ -195,6 +195,10 @@ html {
     background: rgba(30, 30, 30, 0.9);
 }
 
+.detailSticky {
+    background: #202020;
+}
+
 .listItem-border {
     border-color: rgba(34, 34, 34, 0.9) !important;
 }
@@ -207,7 +211,10 @@ html {
     border-color: #00a4dc;
 }
 
-.button-flat-accent,
+.button-flat:hover {
+    color: #00a4dc;
+}
+
 .button-link {
     color: #00a4dc;
 }

src/themes/purplehaze/theme.css

@@ -276,7 +276,7 @@ a[data-role=button] {
 }
 
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
-    .appfooter-blurred {
+    .appfooter {
         background: rgba(6, 37, 111, 0.7);
         backdrop-filter: blur(20px);
     }
@@ -321,7 +321,10 @@ a[data-role=button] {
     border-color: #48c3c8;
 }
 
-.button-flat-accent,
+.button-flat:hover {
+    color: #48c3c8;
+}
+
 .button-link {
     color: #48c3c8;
 }

src/themes/wmc/theme.css

@@ -219,7 +219,10 @@ html {
     border-color: #00a4dc;
 }
 
-.button-flat-accent,
+.button-flat:hover {
+    color: #00a4dc;
+}
+
 .button-link {
     color: #00a4dc;
 }