Merge pull request #773 from dkanada/style

Minor theme changes and tweak session cards on dashboard

src/assets/css/librarybrowser.css

@@ -224,6 +224,12 @@
     left: 0;
 }
 
+.centerMessage {
+    margin: auto;
+    width: 30%;
+    text-align: center;
+}
+
 .layout-desktop .searchTabButton,
 .layout-mobile .searchTabButton,
 .layout-tv .headerSearchButton {

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/components/tabbedview/itemstab.js

@@ -104,24 +104,17 @@ define(['playbackManager', 'userSettings', 'alphaPicker', 'alphaNumericShortcuts
     }
 
     function showSortMenu() {
-
         var instance = this;
-
         require(['sortMenu'], function (SortMenu) {
-
             new SortMenu().show({
-
                 settingsKey: instance.getSettingsKey(),
                 settings: instance.getSortValues(),
                 onChange: instance.itemsContainer.refreshItems.bind(instance.itemsContainer),
                 serverId: instance.params.serverId,
                 sortOptions: instance.getSortMenuOptions()
-
             }).then(function () {
-
                 updateSortText(instance);
                 updateAlphaPickerState(instance);
-
                 instance.itemsContainer.refreshItems();
             });
         });

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);
     }
@@ -241,7 +241,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);
     }
@@ -328,7 +328,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

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

src/tv.html

@@ -45,11 +45,9 @@
     <div class="pageTabContent" id="upcomingTab" data-index="3">
         <div id="upcomingItems">
         </div>
-        <div class="noItemsMessage" style="display: none;">
-            <p>${MessageNothingHere}</p>
-            <p>
-                <a href="library.html">${MessagePleaseEnsureInternetMetadata}</a>
-            </p>
+        <div class="noItemsMessage centerMessage" style="display: none;">
+            <h1>${MessageNothingHere}</h1>
+            <p>${MessagePleaseEnsureInternetMetadata}</p>
         </div>
     </div>
     <div class="pageTabContent" id="genresTab" data-index="4">