Apply back Jellyfin changes

src/bower_components/emby-webcomponents/displaysettings/displaysettings.template.html

@@ -55,7 +55,7 @@
         <div class="fieldDescription">
             <div>${LabelDisplayLanguageHelp}</div>
             <div class="learnHowToContributeContainer hide" style="margin-top: .25em;">
-                <a is="emby-linkbutton" class="button-link" href="http://emby.media/community/index.php?/topic/5727-join-our-translation-team" target="_blank">${LearnHowYouCanContribute}</a>
+                <a is="emby-linkbutton" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">${LearnHowYouCanContribute}</a>
             </div>
         </div>
     </div>
@@ -127,7 +127,6 @@
 
     <div class="selectContainer">
         <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
-        <div class="fieldDescription">${FeatureRequiresEmbyPremiere}</div>
     </div>
 
     <div class="checkboxContainer checkboxContainer-withDescription fldSeasonalThemes hide">
@@ -140,7 +139,6 @@
 
     <div class="selectContainer selectDashboardThemeContainer hide">
         <select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
-        <div class="fieldDescription">${FeatureRequiresEmbyPremiere}</div>
     </div>
     <div class="selectContainer hide selectScreensaverContainer">
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
@@ -190,4 +188,4 @@
     <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
         <span>${Save}</span>
     </button>
-</form>
+</form>

src/bower_components/emby-webcomponents/emby-radio/emby-radio.css

@@ -50,7 +50,7 @@
 }
 
 .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid rgb(82, 181, 75);
+    border: 2px solid #00a4dc;
 }
 
 .mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
@@ -76,7 +76,7 @@
     -webkit-transform: scale3d(0, 0, 0);
     transform: scale3d(0, 0, 0);
     border-radius: 50%;
-    background: rgb(82, 181, 75);
+    background: #00a4dc;
 }
 
 .mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
@@ -94,7 +94,7 @@
 }
 
 .mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0px 10px rgba(82, 181, 75, 0.26);
+    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26)
 }
 
 .mdl-radio__label {

src/bower_components/emby-webcomponents/emby-slider/emby-slider.css

@@ -18,7 +18,7 @@ _:-ms-input-placeholder {
     user-select: none;
     outline: 0;
     padding: 1em 0;
-    color: #52B54B;
+    color: #00a4dc;
     -webkit-align-self: center;
     -ms-flex-item-align: center;
     align-self: center;
@@ -52,7 +52,7 @@ _:-ms-input-placeholder {
     }
 
     .mdl-slider::-moz-range-progress {
-        background: #52B54B;
+        background: #00a4dc;
     }
 
     .mdl-slider::-ms-track {
@@ -77,7 +77,7 @@ _:-ms-input-placeholder {
         height: 1.8em;
         box-sizing: border-box;
         border-radius: 50%;
-        background: #52B54B;
+        background: #00a4dc;
         border: none;
         transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
     }
@@ -102,7 +102,7 @@ _:-ms-input-placeholder {
     box-sizing: border-box;
     border-radius: 50%;
     background-image: none;
-    background: #52B54B;
+    background: #00a4dc;
     border: none;
 }
 
@@ -112,7 +112,7 @@ _:-ms-input-placeholder {
     height: 1.8em;
     box-sizing: border-box;
     border-radius: 50%;
-    background: #52B54B;
+    background: #00a4dc;
     border: none;
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
@@ -180,7 +180,7 @@ _:-ms-input-placeholder {
     width: 0;
     top: 0;
     bottom: 0;
-    background-color: #52B54B;
+    background-color: #00a4dc;
 }
 
 .mdl-slider-background-lower-clear {

src/bower_components/emby-webcomponents/emby-toggle/emby-toggle.css

@@ -48,7 +48,7 @@
 }
 
 .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
-    background: rgba(82,181,75, 0.5);
+    background: rgba(0, 164, 220, 0.5);
 }
 
 .mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
@@ -75,7 +75,7 @@
 }
 
 .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
-    background: rgb(82,181,75);
+    background: #00a4dc;
     left: 1.466em;
     box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
 }
@@ -104,8 +104,8 @@
 }
 
 .mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
-    box-shadow: 0 0 0 1.39em rgba(82,181,75, 0.26);
-    background-color: rgba(82,181,75, 0.26);
+    box-shadow: 0 0 0 1.39em rgba(0, 164, 220, 0.26);
+    background-color: rgba(0, 164, 220, 0.26);
 }
 
 .mdl-switch__label {

src/bower_components/emby-webcomponents/homesections/homesections.js

@@ -374,11 +374,11 @@
         var html = '';
         html += '<div class="verticalSection appInfoSection">';
         html += '<div class="sectionTitleContainer sectionTitleContainer-cards">';
-        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">Discover Emby Theater</h2>';
+        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">Discover Jellyfin Theater</h2>';
         html += '<button is="paper-icon-button-light" class="sectionTitleButton" onclick="this.parentNode.parentNode.remove();" class="autoSize"><i class="md-icon">close</i></button>';
         html += '</div>';
 
-        var nameText = 'Emby Theater';
+        var nameText = 'Jellyfin Theater';
         html += '<div class="padded-left padded-right">';
         html += '<p class="sectionTitle-cards">A beautiful app for your TV and large screen tablet. ' + nameText + ' runs on Windows, Xbox One, Raspberry Pi, Samsung Smart TVs, Sony PS4, Web Browsers, and more.</p>';
         html += '<div class="itemsContainer vertical-wrap" is="emby-itemscontainer">';

src/bower_components/emby-webcomponents/itemcontextmenu.js

@@ -18,7 +18,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                 commands.push({
                     name: globalize.translate('sharedcomponents#Play'),
                     id: 'resume'
-                });
+        });
             }
 
             if (options.playAllFromHere && item.Type !== 'Program' && item.Type !== 'TvChannel') {
@@ -163,12 +163,12 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
 
                 var text = (item.Type === 'Timer' || item.Type === 'SeriesTimer') ? globalize.translate('sharedcomponents#Edit') : globalize.translate('sharedcomponents#EditMetadata');
 
-                commands.push({
-                    name: text,
+            commands.push({
+                name: text,
                     id: 'edit'
                 });
-            }
         }
+    }
 
         if (itemHelper.canEditImages(user, item)) {
 
@@ -288,7 +288,7 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                 deleted: deleted
             });
         };
-    }
+        }
 
     function executeCommand(item, id, options) {
 
@@ -305,110 +305,110 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                         require(['collectionEditor'], function (collectionEditor) {
 
                             new collectionEditor().show({
-                                items: [itemId],
-                                serverId: serverId
+                            items: [itemId],
+                            serverId: serverId
 
                             }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
-                        });
-                        break;
+                    });
+                    break;
                     }
                 case 'addtoplaylist':
                     {
                         require(['playlistEditor'], function (playlistEditor) {
 
                             new playlistEditor().show({
-                                items: [itemId],
-                                serverId: serverId
+                            items: [itemId],
+                            serverId: serverId
 
                             }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
-                        });
-                        break;
+                    });
+                    break;
                     }
                 case 'download':
                     {
                         require(['fileDownloader'], function (fileDownloader) {
-                            var downloadHref = apiClient.getItemDownloadUrl(itemId);
+                        var downloadHref = apiClient.getItemDownloadUrl(itemId);
 
                             fileDownloader.download([
                                 {
-                                    url: downloadHref,
-                                    itemId: itemId,
-                                    serverId: serverId
+                            url: downloadHref,
+                            itemId: itemId,
+                            serverId: serverId
                                 }]);
 
                             getResolveFunction(getResolveFunction(resolve, id), id)();
-                        });
+                    });
 
-                        break;
+                    break;
                     }
                 case 'editsubtitles':
                     {
                         require(['subtitleEditor'], function (subtitleEditor) {
 
                             subtitleEditor.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
-                        });
-                        break;
+                    });
+                    break;
                     }
                 case 'edit':
                     {
                         editItem(apiClient, item).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
-                        break;
+                    break;
                     }
                 case 'editimages':
                     {
                         require(['imageEditor'], function (imageEditor) {
 
-                            imageEditor.show({
-                                itemId: itemId,
-                                serverId: serverId
+                        imageEditor.show({
+                            itemId: itemId,
+                            serverId: serverId
 
                             }).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
-                        });
-                        break;
+                    });
+                    break;
                     }
                 case 'identify':
                     {
                         require(['itemIdentifier'], function (itemIdentifier) {
 
                             itemIdentifier.show(itemId, serverId).then(getResolveFunction(resolve, id, true), getResolveFunction(resolve, id));
-                        });
-                        break;
+                    });
+                    break;
                     }
                 case 'refresh':
                     {
                         refresh(apiClient, item);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'open':
                     {
                         appRouter.showItem(item);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'play':
                     {
                         play(item, false);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'resume':
                     {
                         play(item, true);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'queue':
                     {
                         play(item, false, true);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'queuenext':
                     {
                         play(item, false, true, true);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'record':
                     require(['recordingCreator'], function (recordingCreator) {
@@ -419,29 +419,27 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     {
                         playbackManager.shuffle(item);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'instantmix':
                     {
                         playbackManager.instantMix(item);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'delete':
                     {
                         deleteItem(apiClient, item).then(getResolveFunction(resolve, id, true, true), getResolveFunction(resolve, id));
-                        break;
+                    break;
                     }
                 case 'share':
                     {
-                        navigator.share({
-                            title: item.Name,
-                            text: item.Overview,
-
-                            // TODO: Make this the server's external url
-                            url: 'https://emby.media'
-                        });
-                        break;
+                    navigator.share({
+                        title: item.Name,
+                        text: item.Overview,
+                        url: "https://github.com/jellyfin/jellyfin"
+                    });
+                    break;
                     }
                 case 'album':
                     {
@@ -453,53 +451,53 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
                     {
                         appRouter.showItem(item.ArtistItems[0].Id, item.ServerId);
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'playallfromhere':
                     {
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'queueallfromhere':
                     {
-                        getResolveFunction(resolve, id)();
-                        break;
+                    getResolveFunction(resolve, id)();
+                    break;
                     }
                 case 'convert':
                     {
                         require(['syncDialog'], function (syncDialog) {
-                            syncDialog.showMenu({
-                                items: [item],
-                                serverId: serverId,
+                        syncDialog.showMenu({
+                            items: [item],
+                            serverId: serverId,
                                 mode: 'convert'
                             });
                         });
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'sync':
                     {
                         require(['syncDialog'], function (syncDialog) {
-                            syncDialog.showMenu({
-                                items: [item],
-                                serverId: serverId,
+                        syncDialog.showMenu({
+                            items: [item],
+                            serverId: serverId,
                                 mode: 'sync'
                             });
                         });
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'synclocal':
                     {
                         require(['syncDialog'], function (syncDialog) {
-                            syncDialog.showMenu({
-                                items: [item],
-                                serverId: serverId,
+                        syncDialog.showMenu({
+                            items: [item],
+                            serverId: serverId,
                                 mode: 'download'
                             });
                         });
                         getResolveFunction(resolve, id)();
-                        break;
+                    break;
                     }
                 case 'removefromplaylist':
 
@@ -578,14 +576,14 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'appRouter',
 
         if (item.Type === 'Program') {
             playbackManager[method]({
-                ids: [item.ChannelId],
-                startPositionTicks: startPosition,
-                serverId: item.ServerId
+            ids: [item.ChannelId],
+            startPositionTicks: startPosition,
+            serverId: item.ServerId
             });
         } else {
             playbackManager[method]({
-                items: [item],
-                startPositionTicks: startPosition
+            items: [item],
+            startPositionTicks: startPosition
             });
         }
     }

src/bower_components/emby-webcomponents/listview/listview.css

@@ -125,9 +125,9 @@
     display: flex;
 }
 
-    .listItemImageButton:hover {
+.listItemImageButton:hover {
         transform: scale(1.2, 1.2);
-    }
+}
 
 .listItemImageButton-icon {
     background: rgba(0,0,0,.4);
@@ -175,13 +175,13 @@
     padding: 0 .25em 0 0;
 }
 
-    .listItemIcon:not(.listItemIcon-transparent) {
-        background-color: #52B54B;
-        color: #fff;
-        padding: .5em;
-        border-radius: 100em;
-        margin: 0 .2em 0 .4em;
-    }
+.listItemIcon:not(.listItemIcon-transparent) {
+    background-color: #00a4dc;
+    color: #fff;
+    padding: .5em;
+    border-radius: 100em;
+    margin: 0 .2em 0 .4em;
+}
 
 .listItemProgressBar {
     position: absolute;
@@ -194,17 +194,17 @@
     border-radius: .2em;
 }
 
-    .listItem:focus .secondary {
-        color: inherit !important;
-    }
+.listItem:focus .secondary {
+    color: inherit !important;
+}
 
 .listItem-focusscale {
     transition: transform .2s ease-out;
 }
 
-    .listItem-focusscale:focus {
-        transform: scale(1.025, 1.025);
-    }
+.listItem-focusscale:focus {
+    transform: scale(1.025, 1.025);
+}
 
 .paperList {
     margin: .5em auto;
@@ -260,4 +260,4 @@
 
 .listItemCheckboxContainer {
     width: auto !important;
-}
+}

src/bower_components/emby-webcomponents/playback/experimentalwarnings.js

@@ -46,21 +46,21 @@ define(['connectionManager', 'globalize', 'userSettings', 'apphost'], function (
     function showBlurayMessage() {
 
         var message =
-            'Playback of Bluray folders in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Emby app with native Bluray folder support.';
+            'Playback of Bluray folders in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Jellyfin app with native Bluray folder support.';
         return showMessage(message, 'blurayexpirementalinfo', 'nativeblurayplayback');
     }
 
     function showDvdMessage() {
 
         var message =
-            'Playback of Dvd folders in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Emby app with native Dvd folder support.';
+            'Playback of Dvd folders in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Jellyfin app with native Dvd folder support.';
         return showMessage(message, 'dvdexpirementalinfo', 'nativedvdplayback');
     }
 
     function showIsoMessage() {
 
         var message =
-            'Playback of ISO files in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Emby app with native ISO support.';
+            'Playback of ISO files in this app is experimental. Some titles may not work at all. For a better experience, consider converting to mkv video files, or use an Jellyfin app with native ISO support.';
         return showMessage(message, 'isoexpirementalinfo', 'nativeisoplayback');
     }
 

src/bower_components/emby-webcomponents/playback/iconosd.css

@@ -30,11 +30,11 @@
 }
 
 .iconOsdProgressInner {
-    background: #52B54B;
+    background: #00a4dc;
     height: 100%;
     border-radius: .25em;
 }
 
 .brightnessOsdProgressInner {
     background: #FF9800;
-}
+}

src/bower_components/emby-webcomponents/registrationservices/registrationservices.js

@@ -42,33 +42,6 @@
                 dlg.classList.add('formDialog');
 
                 var html = '';
-                html += '<div class="formDialogHeader">';
-                html += '<button is="paper-icon-button-light" class="btnCancelSupporterInfo autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>';
-                html += '<h3 class="formDialogHeaderTitle">Emby Premiere';
-                html += '</h3>';
-                html += '</div>';
-
-
-                html += '<div class="formDialogContent smoothScrollY">';
-                html += '<div class="dialogContentInner dialog-content-centered">';
-
-                html += '<h1>' + globalize.translate('sharedcomponents#HeaderDiscoverEmbyPremiere') + '</h1>';
-
-                html += '<p>' + globalize.translate('sharedcomponents#MessageDidYouKnowCinemaMode') + '</p>';
-                html += '<p>' + globalize.translate('sharedcomponents#MessageDidYouKnowCinemaMode2') + '</p>';
-
-                html += '<h1 style="margin-top:1.5em;">' + globalize.translate('sharedcomponents#HeaderBenefitsEmbyPremiere') + '</h1>';
-
-                html += '<div class="paperList">';
-                html += getSubscriptionBenefits().map(getSubscriptionBenefitHtml).join('');
-                html += '</div>';
-
-                html += '<br/>';
-
-                html += '<div class="formDialogFooter">';
-
-                html += '<button is="emby-button" type="button" class="raised button-submit block btnGetPremiere block formDialogFooterItem" autoFocus><span>' + globalize.translate('sharedcomponents#HeaderBecomeProjectSupporter') + '</span></button>';
-
                 var seconds = 11;
 
                 html += '<div class="continueTimeText formDialogFooterItem" style="margin: 1.5em 0 .5em;">' + globalize.translate('sharedcomponents#ContinueInSecondsValue', seconds) + '</div>';
@@ -281,7 +254,7 @@
 
     function showOverLimitAlert() {
 
-        return alertText('Your Emby Premiere device limit has been exceeded. Please check with the owner of your Emby Server and have them contact Emby support at apps@emby.media if necessary.').catch(function () {
+        return alertText('Your Jellyfin Premiere device limit has been exceeded. Please check with the owner of your Jellyfin Server and have them contact Emby support at apps@emby.media if necessary.').catch(function () {
             return Promise.resolve();
         });
     }
@@ -330,8 +303,8 @@
 
         html += '<h1>' + globalize.translate('sharedcomponents#HeaderTermsOfPurchase') + '</h1>';
 
-        termsOfPurchase.push('<a is="emby-linkbutton" class="button-link" href="https://emby.media/privacy" target="_blank">' + globalize.translate('sharedcomponents#PrivacyPolicy') + '</a>');
-        termsOfPurchase.push('<a is="emby-linkbutton" class="button-link" href="https://emby.media/terms" target="_blank">' + globalize.translate('sharedcomponents#TermsOfUse') + '</a>');
+        termsOfPurchase.push('<a is="emby-linkbutton" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">' + globalize.translate('sharedcomponents#PrivacyPolicy') + '</a>');
+        termsOfPurchase.push('<a is="emby-linkbutton" class="button-link" href="https://github.com/jellyfin/jellyfin" target="_blank">' + globalize.translate('sharedcomponents#TermsOfUse') + '</a>');
 
         html += '<ul>';
         html += termsOfPurchase.map(getPurchaseTermHtml).join('');
@@ -415,7 +388,7 @@
         html += '</p>';
 
         if (subscriptionOptions.length) {
-            html += '<h1 style="margin-top:1.5em;">' + globalize.translate('sharedcomponents#HeaderBenefitsEmbyPremiere') + '</h1>';
+            html += '<h1 style="margin-top:1.5em;">' + globalize.translate('sharedcomponents#HeaderBenefitsJellyfinPremiere') + '</h1>';
 
             html += '<div class="paperList" style="margin-bottom:1em;">';
             html += getSubscriptionBenefits().map(getSubscriptionBenefitHtml).join('');
@@ -524,7 +497,7 @@
         });
 
         list.push({
-            name: 'Emby DVR',
+            name: 'Jellyfin DVR',
             icon: '&#xE1B2;',
             text: globalize.translate('sharedcomponents#DvrFeatureDescription')
         });
@@ -626,7 +599,7 @@
         html += '</p>';
 
         html += '<p>';
-        html += '<button is="emby-button" type="button" class="raised button-cancel block btnRestoreSub"><span>' + globalize.translate('sharedcomponents#IHaveEmbyPremiere') + '</span></button>';
+        html += '<button is="emby-button" type="button" class="raised button-cancel block btnRestoreSub"><span>' + globalize.translate('sharedcomponents#IHaveJellyfinPremiere') + '</span></button>';
         html += '</p>';
 
         if (unlockableProductInfo) {
@@ -657,7 +630,7 @@
             dialogHelper.close(dlg);
             alertText({
                 text: globalize.translate('sharedcomponents#MessageToValidateSupporter'),
-                title: 'Emby Premiere'
+                title: 'Jellyfin Premiere'
             });
 
         });
@@ -742,7 +715,7 @@
         return iapManager.getSubscriptionOptions().then(function (subscriptionOptions) {
 
             var dialogOptions = {
-                title: 'Emby Premiere',
+                title: 'Jellyfin Premiere',
                 feature: 'sync'
             };
 

src/bower_components/emby-webcomponents/require/requiretext.js

@@ -2,7 +2,7 @@ define(function () {
     'use strict';
 
     // hack to work around the server's auto-redirection feature
-    var addRedirectPrevention = self.dashboardVersion != null && self.Dashboard && !self.Dashboard.isConnectMode();
+    var addRedirectPrevention = self.dashboardVersion != null && self.Dashboard && !self.AppInfo.isNativeApp;
 
     return {
 

src/bower_components/emby-webcomponents/router.js

@@ -99,8 +99,8 @@ define(['loading', 'globalize', 'events', 'viewManager', 'layoutManager', 'skinM
                     require(['alert'], function (alert) {
                         alert({
 
-                            text: globalize.translate('sharedcomponents#ServerUpdateNeeded', 'https://emby.media'),
-                            html: globalize.translate('sharedcomponents#ServerUpdateNeeded', '<a href="https://emby.media">https://emby.media</a>')
+                            text: globalize.translate('sharedcomponents#ServerUpdateNeeded', 'https://github.com/jellyfin/jellyfin'),
+                            html: globalize.translate('sharedcomponents#ServerUpdateNeeded', '<a href="https://github.com/jellyfin/jellyfin">https://github.com/jellyfin/jellyfin</a>')
 
                         }).then(function () {
                             appRouter.showSelectServer();

src/bower_components/emby-webcomponents/sync/syncjobeditor.js

@@ -99,7 +99,7 @@
         html += '</div>';
 
         html += '<div class="secondary listItemBodyText" style="padding-top:5px;">';
-        html += '<div style="background:#e0e0e0;height:2px;"><div style="background:#52B54B;width:' + (jobItem.Progress || 0) + '%;height:100%;"></div></div>';
+        html += '<div style="background:#e0e0e0;height:2px;"><div style="background:#00a4dc;width:' + (jobItem.Progress || 0) + '%;height:100%;"></div></div>';
         html += '</div>';
 
         html += '</div>';

src/bower_components/emby-webcomponents/themes/appletv/theme.css

@@ -1,437 +1,446 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #303030
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
-.skinHeader-withBackground, .formDialogHeader:not(.formDialogHeader-clear) {
-    color: rgba(0,0,0,.7);
+.formDialogHeader:not(.formDialogHeader-clear),
+.skinHeader-withBackground {
+    color: rgba(0, 0, 0, .7);
     background: #303030;
-    background: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
+    background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
+    background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
+    background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
+    background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
 }
 
-@supports ( (backdrop-filter: blur(1.5em)) or (-webkit-backdrop-filter: blur(1.5em)) ) {
-
+@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
     .skinHeader-blurred {
-        background: linear-gradient(to right,rgba(188,188,188,.7), rgba(167,180,183,.7), rgba(190,181,165,.7), rgba(173,190,194,.7), rgba(185,199,203,.7));
+        background: -webkit-gradient(linear, left top, right top, from(rgba(188, 188, 188, .7)), color-stop(rgba(167, 180, 183, .7)), color-stop(rgba(190, 181, 165, .7)), color-stop(rgba(173, 190, 194, .7)), to(rgba(185, 199, 203, .7)));
+        background: -webkit-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
+        background: -o-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
+        background: linear-gradient(to right, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
         -webkit-backdrop-filter: blur(1.5em);
-        backdrop-filter: blur(1.5em);
+        backdrop-filter: blur(1.5em)
     }
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
-    backdrop-filter: none !important;
+    backdrop-filter: none !important
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logodark.png);
+    background-image: url(../logodark.png)
 }
 
 html {
-    background: #D5E9F2;
+    background: #D5E9F2
 }
 
-.backgroundContainer, .dialog {
-    background: #D5E9F2 url(https://github.com/MediaBrowser/Emby.Resources/raw/master/images/wallpaper/atv1-1080.png) no-repeat center center;
-    background-size: 100% 100%;
+.backgroundContainer,
+.dialog {
+    background: url(https://github.com/MediaBrowser/Emby.Resources/raw/master/images/wallpaper/atv1-1080.png) center center no-repeat #D5E9F2;
+    -webkit-background-size: 100% 100%;
+    background-size: 100% 100%
 }
 
-    .backgroundContainer.withBackdrop {
-        background: linear-gradient(to bottom,rgba(192,212,222,.94), rgba(235,250,254,.94), rgba(227,220,212,.94), rgba(206,214,216,.94), rgba(192,211,218,.94));
-    }
+.backgroundContainer.withBackdrop {
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, .94)), color-stop(rgba(235, 250, 254, .94)), color-stop(rgba(227, 220, 212, .94)), color-stop(rgba(206, 214, 216, .94)), to(rgba(192, 211, 218, .94)));
+    background: -webkit-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
+    background: -o-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
+    background: linear-gradient(to bottom, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94))
+}
 
 .actionSheet {
-    background: #f0f0f0;
+    background: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #fff;
     background: rgba(0, 0, 0, .14);
-    color: inherit;
+    color: inherit
 }
 
-    .raised:focus, .fab:focus {
-        background: rgba(0, 0, 0, .24);
-    }
+.fab:focus,
+.raised:focus {
+    background: rgba(0, 0, 0, .24)
+}
 
 .button-submit {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-    }
+.button-submit:focus {
+    background: #0cb0e8
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #555;
-    color: rgba(0, 0, 0, .7);
+    color: rgba(0, 0, 0, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: green;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: green
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
+.paperList,
+.visualCardBox {
     background-color: #fff;
-    background-color: rgba(0, 0, 0, .1);
+    background-color: rgba(0, 0, 0, .1)
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0,0,0,.08);
+    border-top: 1px solid rgba(0, 0, 0, .08)
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret, .fieldDescription {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #888;
-    color: rgba(0, 0, 0, .5);
+    color: rgba(0, 0, 0, .5)
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(0, 0, 0, .14);
+    background: rgba(0, 0, 0, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
-.appfooter, .formDialogFooter:not(.formDialogFooter-clear) {
-    color: rgba(0,0,0,.7);
+.appfooter,
+.formDialogFooter:not(.formDialogFooter-clear) {
+    color: rgba(0, 0, 0, .7);
     background: #303030;
-    background: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
+    background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
+    background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
+    background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
+    background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important;
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
+    background-color: #00a4dc;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #f8f8f8;
-    background: rgba(0, 0, 0, .1);
+    background: rgba(0, 0, 0, .1)
 }
 
 .listItem-border {
-    border-color: rgba(0, 0, 0, .1) !important;
+    border-color: rgba(0, 0, 0, .1) !important
 }
 
 .listItem:focus {
-    background: rgba(0, 0, 0, .2);
+    background: rgba(0, 0, 0, .2)
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
-    background: rgba(255,255,255,.9);
+    background: rgba(255, 255, 255, .9);
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
-    background: rgba(255,255,255,.9);
-    border: .07em solid rgba(0, 0, 0, .158);
+    background: rgba(255, 255, 255, .9);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #00a4dc
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
-    color: #fff;
+    background-color: #00a4dc;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff;
+    background: #00a4dc !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(0,0,0,.5);
+    color: rgba(0, 0, 0, .5)
 }
 
-.emby-tab-button-active {
-    color: #fff;
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
     border-color: #555;
-    border-color: rgba(0, 0, 0, .1);
+    border-color: rgba(0, 0, 0, .1)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #E4E2DC);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#E4E2DC));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC);
+    background: linear-gradient(rgba(0, 0, 0, 0), #E4E2DC)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }

src/bower_components/emby-webcomponents/themes/blueradiance/theme.css

@@ -1,447 +1,453 @@
+.skinHeader,
 html {
     color: #ddd;
-    color: rgba(255, 255, 255, .8);
+    color: rgba(255, 255, 255, .8)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #303030
 }
 
 .emby-collapsible-button {
     border-color: #383838;
-    border-color: rgba(255,255,255, .135);
+    border-color: rgba(255, 255, 255, .135)
 }
 
 .skinHeader-withBackground {
     background: #303030;
-    background: linear-gradient(to right,#291A31, #033664, #011432, #141A3A, #291A31);
+    background: -webkit-gradient(linear, left top, right top, from(#291A31), color-stop(#033664), color-stop(#011432), color-stop(#141A3A), to(#291A31));
+    background: -webkit-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
+    background: -o-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
+    background: linear-gradient(to right, #291A31, #033664, #011432, #141A3A, #291A31)
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .dialog {
-    background-color: #033361;
+.dialog,
+html {
+    background-color: #033361
 }
 
 .backgroundContainer {
-    background: #033361 url(bg.jpg) no-repeat center top;
-    background-size: cover;
+    background: url(bg.jpg) center top no-repeat #033361;
+    -webkit-background-size: cover;
+    background-size: cover
 }
 
-    .backgroundContainer.withBackdrop {
-        opacity: .93;
-    }
-
-@media (orientation: portrait) {
+.backgroundContainer.withBackdrop {
+    opacity: .93
+}
 
+@media (orientation:portrait) {
     .backgroundContainer {
-        background-position: 30% top;
+        background-position: 30% top
     }
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
-.raised, .fab {
-    background: rgba(0,0,0,.5);
-    color: rgba(255, 255, 255, .87);
+.fab,
+.raised {
+    background: rgba(0, 0, 0, .5);
+    color: rgba(255, 255, 255, .87)
 }
 
-    .raised:focus, .fab:focus {
-        background: rgba(0,0,0,.7);
-    }
+.fab:focus,
+.raised:focus {
+    background: rgba(0, 0, 0, .7)
+}
 
 .button-submit {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #0cb0e8;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #bbb;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
-    color: #52B54B;
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #00a4dc
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox, .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear), .collapseContent {
-    background-color: rgba(0,0,0,.5);
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: rgba(0, 0, 0, .5)
 }
 
 .defaultCardBackground1 {
-    background-color: #d2b019;
+    background-color: #d2b019
 }
 
 .defaultCardBackground2 {
-    background-color: #338abb;
+    background-color: #338abb
 }
 
 .defaultCardBackground3 {
-    background-color: #6b689d;
+    background-color: #6b689d
 }
 
 .defaultCardBackground4 {
-    background-color: #dd452b;
+    background-color: #dd452b
 }
 
 .defaultCardBackground5 {
-    background-color: #5ccea9;
+    background-color: #5ccea9
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .actionsheetDivider {
     background: #444;
-    background: rgba(255, 255, 255, .14);
+    background: rgba(255, 255, 255, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
 .actionSheetMenuItem:hover {
-    background-color: rgba(0,0,0, .5);
+    background-color: rgba(0, 0, 0, .5)
 }
 
 .toast {
     background: #303030;
     color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #033664;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #999;
     color: rgba(255, 255, 255, .5);
-    background-color: transparent;
+    background-color: transparent
 }
 
 .alphaPickerButton-selected {
-    color: #fff;
+    color: #fff
 }
 
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important;
+    background-color: #00a4dc;
+    color: #fff !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9);
+    background: rgba(30, 30, 30, .9)
 }
 
 .listItem-border {
-    border-color: rgba(255,255,255,.1) !important;
+    border-color: rgba(255, 255, 255, .1) !important
 }
 
 .listItem:focus {
-    background: rgba(0,0,0,.3);
+    background: rgba(0, 0, 0, .3)
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
+.button-flat-accent,
 .button-link {
-    color: #52B54B;
-}
-
-.button-flat-accent {
-    color: #52B54B;
+    color: #00a4dc
 }
 
 .mediaInfoText {
     color: #ddd;
-    background: rgba(170,170,190, .2);
+    background: rgba(170, 170, 190, .2)
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
-    background: rgba(0,0,0,.5);
+    background: rgba(0, 0, 0, .5);
     border: .07em solid transparent;
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
-    background: rgba(0,0,0,.5);
-    border: .07em solid transparent;
+    background: rgba(0, 0, 0, .5);
+    border: .07em solid transparent
 }
 
-    .emby-select-withcolor > option {
-        color: inherit;
-        background: #222;
-    }
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B !important;
-    }
+.emby-select-withcolor:focus {
+    border-color: #00a4dc !important
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #00a4dc
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background-color: #1c1c1c;
+    background-color: #1c1c1c
 }
 
 .navMenuOption:hover {
-    background: #252528;
+    background: #252528
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff;
+    background: #00a4dc !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .4);
+    color: rgba(255, 255, 255, .4)
 }
 
 .emby-tab-button-active {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #52B54B;
-    background: transparent;
+    color: #00a4dc;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(255,255,255,.05);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(255, 255, 255, .05)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.4) !important;
+    background: rgba(0, 0, 0, .4) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(255,255,255,.3);
+    color: rgba(255, 255, 255, .3)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #181818);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818);
+    background: linear-gradient(rgba(0, 0, 0, 0), #181818)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
-/* scrollbars */
 .layout-desktop ::-webkit-scrollbar {
     width: 1em;
-    height: 1em;
+    height: 1em
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b;
+    background-color: #3b3b3b
 }
 
-::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
-    background: #888 no-repeat center;
+    background: center no-repeat #888
 }
 
 .timeslotHeaders-desktop::-webkit-scrollbar {
-    height: .7em;
+    height: .7em
 }

src/bower_components/emby-webcomponents/themes/dark-green/theme.css

@@ -1,451 +1,451 @@
+.skinHeader,
 html {
     color: #eee;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #52B54B
 }
 
 .emby-collapsible-button {
     border-color: #383838;
-    border-color: rgba(255,255,255, .135);
+    border-color: rgba(255, 255, 255, .135)
 }
 
 .skinHeader {
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
 .skinHeader-withBackground {
     background-color: #52B54B;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
     background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-.dialog {
-    background-color: #282828;
+.backgroundContainer,
+.dialog,
+html {
+    background-color: #282828
 }
 
-html, .backgroundContainer {
-    background-color: #282828;
+.backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, .86)
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(0,0,0,.86);
-    }
-
-/* buttons */
 .paper-icon-button-light:focus {
     color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    background-color: rgba(82, 181, 75, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #404040;
-    color: #fff;
+    color: #fff
 }
 
-    .raised:focus, .fab:focus {
-        background: #505050;
-    }
+.fab:focus,
+.raised:focus {
+    background: #505050
+}
 
 .button-submit {
     background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #5EC157;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #bbb;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
-    color: #52B54B;
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #52B54B
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox, .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear), .collapseContent {
-    background-color: #222;
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: #222
 }
 
 .defaultCardBackground1 {
-    background-color: #d2b019;
+    background-color: #d2b019
 }
 
 .defaultCardBackground2 {
-    background-color: #338abb;
+    background-color: #338abb
 }
 
 .defaultCardBackground3 {
-    background-color: #6b689d;
+    background-color: #6b689d
 }
 
 .defaultCardBackground4 {
-    background-color: #dd452b;
+    background-color: #dd452b
 }
 
 .defaultCardBackground5 {
-    background-color: #5ccea9;
+    background-color: #5ccea9
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .actionsheetDivider {
     background: #444;
-    background: rgba(255, 255, 255, .14);
+    background: rgba(255, 255, 255, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #222;
+    background-color: #222
 }
 
 .toast {
     background: #303030;
     color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #101010;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #52B54B
 }
 
 .selectionCommandsPanel {
     background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #52B54B
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #999;
     color: rgba(255, 255, 255, .5);
-    background-color: transparent;
+    background-color: transparent
 }
 
 .alphaPickerButton-selected {
-    color: #fff;
+    color: #fff
 }
 
 .alphaPickerButton-tv:focus {
     background-color: #52B54B;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9);
+    background: rgba(30, 30, 30, .9)
 }
 
 .listItem-border {
-    border-color: rgba(30, 30, 30, .9) !important;
+    border-color: rgba(30, 30, 30, .9) !important
 }
 
 .listItem:focus {
-    background: #333;
+    background: #333
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #52B54B
 }
 
+.button-flat-accent,
 .button-link {
-    color: #52B54B;
-}
-
-.button-flat-accent {
-    color: #52B54B;
+    color: #52B54B
 }
 
 .mediaInfoText {
     color: #ddd;
-    background: rgba(170,170,190, .2);
+    background: rgba(170, 170, 190, .2)
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #1c1c1c;
     border: .07em solid #1c1c1c;
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #52B54B
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #1c1c1c;
-    border: .07em solid #1c1c1c;
+    border: .07em solid #1c1c1c
 }
 
-    .emby-select-withcolor > option {
-        color: inherit;
-        background: #222;
-    }
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B !important;
-    }
+.emby-select-withcolor:focus {
+    border-color: #52B54B !important
+}
 
 .emby-select-tv-withcolor:focus {
     background-color: #52B54B !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #52B54B
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(82, 181, 75, .26)
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #52B54B
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #52B54B
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
     background-color: #1c1c1f;
     color: #ccc;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
 .navMenuOption:hover {
-    background: #252528;
+    background: #252528
 }
 
 .navMenuOption-selected {
     background: #52B54B !important;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
     background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
-    color: #fff;
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: #383838;
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: #383838
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: #1e1e1e !important;
+    background: #1e1e1e !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
+.guide-channelHeaderCell:focus,
+.programCell:focus {
     background-color: #52B54B !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(255,255,255,.3);
+    color: rgba(255, 255, 255, .3)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #52B54B
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #52B54B;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #191919);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#191919));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #191919);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #191919);
+    background: linear-gradient(rgba(0, 0, 0, 0), #191919)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #52B54B;
+    border-color: #52B54B
 }
 
-/* scrollbars */
 .layout-desktop ::-webkit-scrollbar {
     width: 1em;
-    height: 1em;
+    height: 1em
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b;
+    background-color: #3b3b3b
 }
 
-::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
-    background: #888 no-repeat center;
+    background: center no-repeat #888
 }

src/bower_components/emby-webcomponents/themes/dark-red/theme.css

@@ -1,449 +1,449 @@
+.skinHeader,
 html {
     color: #eee;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #c33
 }
 
 .emby-collapsible-button {
     border-color: #383838;
-    border-color: rgba(255,255,255, .135);
+    border-color: rgba(255, 255, 255, .135)
 }
 
 .skinHeader {
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
 .skinHeader-withBackground {
-    background-color: #cc3333;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    background-color: #c33;
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
     background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-.dialog {
-    background-color: #282828;
+.backgroundContainer,
+.dialog,
+html {
+    background-color: #282828
 }
 
-html, .backgroundContainer {
-    background-color: #282828;
+.backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, .86)
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(0,0,0,.86);
-    }
-
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #cc3333;
-    background-color: rgba(204, 51, 51, 0.2);
+    color: #c33;
+    background-color: rgba(204, 51, 51, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #404040;
-    color: #fff;
+    color: #fff
 }
 
-    .raised:focus, .fab:focus {
-        background: #505050;
-    }
+.fab:focus,
+.raised:focus {
+    background: #505050
+}
 
 .button-submit {
-    background: #cc3333;
+    background: #c33
 }
 
-    .button-submit:focus {
-        background: #D83F3F;
-    }
+.button-submit:focus {
+    background: #D83F3F
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #bbb;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
-    color: #cc3333;
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #c33
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox, .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear), .collapseContent {
-    background-color: #222;
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: #222
 }
 
 .defaultCardBackground1 {
-    background-color: #d2b019;
+    background-color: #d2b019
 }
 
 .defaultCardBackground2 {
-    background-color: #338abb;
+    background-color: #338abb
 }
 
 .defaultCardBackground3 {
-    background-color: #6b689d;
+    background-color: #6b689d
 }
 
 .defaultCardBackground4 {
-    background-color: #dd452b;
+    background-color: #dd452b
 }
 
 .defaultCardBackground5 {
-    background-color: #5ccea9;
+    background-color: #5ccea9
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .actionsheetDivider {
     background: #444;
-    background: rgba(255, 255, 255, .14);
+    background: rgba(255, 255, 255, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #222;
+    background-color: #222
 }
 
 .toast {
     background: #303030;
     color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #101010;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #cc3333;
+    border: 1px solid #c33
 }
 
 .selectionCommandsPanel {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #cc3333;
+    color: #c33
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #999;
     color: rgba(255, 255, 255, .5);
-    background-color: transparent;
+    background-color: transparent
 }
 
 .alphaPickerButton-selected {
-    color: #fff;
+    color: #fff
 }
 
 .alphaPickerButton-tv:focus {
-    background-color: #cc3333;
-    color: #fff !important;
+    background-color: #c33;
+    color: #fff !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9);
+    background: rgba(30, 30, 30, .9)
 }
 
 .listItem-border {
-    border-color: rgba(30, 30, 30, .9) !important;
+    border-color: rgba(30, 30, 30, .9) !important
 }
 
 .listItem:focus {
-    background: #333;
+    background: #333
 }
 
 .progressring-spiner {
-    border-color: #cc3333;
+    border-color: #c33
 }
 
+.button-flat-accent,
 .button-link {
-    color: #cc3333;
-}
-
-.button-flat-accent {
-    color: #cc3333;
+    color: #c33
 }
 
 .mediaInfoText {
     color: #ddd;
-    background: rgba(170,170,190, .2);
+    background: rgba(170, 170, 190, .2)
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #1c1c1c;
     border: .07em solid #1c1c1c;
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #cc3333;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #c33
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #1c1c1c;
-    border: .07em solid #1c1c1c;
+    border: .07em solid #1c1c1c
 }
 
-    .emby-select-withcolor > option {
-        color: inherit;
-        background: #222;
-    }
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #cc3333 !important;
-    }
+.emby-select-withcolor:focus {
+    border-color: #c33 !important
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #cc3333 !important;
-    color: #fff !important;
+    background-color: #c33 !important;
+    color: #fff !important
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #cc3333;
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #c33
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(204, 51, 51, 0.26);
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(204, 51, 51, .26)
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #cc3333;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #cc3333;
+    background-color: #c33
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #cc3333;
+    background-color: #CB272A
 }
 
+.countIndicator,
 .playedIndicator {
-    background: #cc3333;
+    background: #c33
 }
 
 .fullSyncIndicator {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
     background-color: #1c1c1f;
     color: #ccc;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
 .navMenuOption:hover {
-    background: #252528;
+    background: #252528
 }
 
 .navMenuOption-selected {
-    background: #cc3333 !important;
-    color: #fff;
+    background: #c33 !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
-    color: #fff;
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: #383838;
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: #383838
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: #1e1e1e !important;
+    background: #1e1e1e !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #cc3333 !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #c33 !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(255,255,255,.3);
+    color: rgba(255, 255, 255, .3)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #cc3333;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #c33
+}
 
-    .guide-date-tab-button:focus {
-        color: #cc3333;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #c33;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #cc3333;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #191919);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#191919));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #191919);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #191919);
+    background: linear-gradient(rgba(0, 0, 0, 0), #191919)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #cc3333;
+    border-color: #c33
 }
 
-/* scrollbars */
 .layout-desktop ::-webkit-scrollbar {
     width: 1em;
-    height: 1em;
+    height: 1em
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b;
+    background-color: #3b3b3b
 }
 
-::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
-    background: #888 no-repeat center;
+    background: center no-repeat #888
 }

src/bower_components/emby-webcomponents/themes/dark/theme.css

@@ -1,434 +1,439 @@
+.skinHeader,
 html {
     color: #ddd;
-    color: rgba(255, 255, 255, .8);
+    color: rgba(255, 255, 255, .8)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #101010
 }
 
 .emby-collapsible-button {
     border-color: #383838;
-    border-color: rgba(255,255,255, .135);
+    border-color: rgba(255, 255, 255, .135)
 }
 
 .skinHeader-withBackground {
-    background-color: #1f1f1f;
+    background-color: #101010
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .dialog, .backgroundContainer {
-    background-color: #1a1a1a;
+.backgroundContainer,
+.dialog,
+html {
+    background-color: #101010
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(0,0,0,.86);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, .86)
+}
 
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #303030;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-    .raised:focus, .fab:focus {
-        background: #383838;
-    }
+.fab:focus,
+.raised:focus {
+    background: #383838
+}
 
 .button-submit {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #0cb0e8;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #bbb;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
-    color: #52B54B;
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #00a4dc
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox, .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear), .collapseContent {
-    background-color: #242424;
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: #242424
 }
 
 .defaultCardBackground1 {
-    background-color: #d2b019;
+    background-color: #d2b019
 }
 
 .defaultCardBackground2 {
-    background-color: #338abb;
+    background-color: #338abb
 }
 
 .defaultCardBackground3 {
-    background-color: #6b689d;
+    background-color: #6b689d
 }
 
 .defaultCardBackground4 {
-    background-color: #dd452b;
+    background-color: #dd452b
 }
 
 .defaultCardBackground5 {
-    background-color: #5ccea9;
+    background-color: #5ccea9
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .actionsheetDivider {
     background: #444;
-    background: rgba(255, 255, 255, .14);
+    background: rgba(255, 255, 255, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #242424;
+    background-color: #242424
 }
 
 .toast {
     background: #303030;
     color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #101010;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #999;
     color: rgba(255, 255, 255, .5);
-    background-color: transparent;
+    background-color: transparent
 }
 
 .alphaPickerButton-selected {
-    color: #fff;
+    color: #fff
 }
 
 .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important;
+    background-color: #00a4dc;
+    color: #fff !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9);
+    background: rgba(30, 30, 30, .9)
 }
 
 .listItem-border {
-    border-color: rgba(34,34,34, .9) !important;
+    border-color: rgba(34, 34, 34, .9) !important
 }
 
 .listItem:focus {
-    background: #333;
+    background: #333
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
+.button-flat-accent,
 .button-link {
-    color: #52B54B;
-}
-
-.button-flat-accent {
-    color: #52B54B;
+    color: #00a4dc
 }
 
 .mediaInfoText {
     color: #ddd;
-    background: rgba(170,170,190, .2);
+    background: rgba(170, 170, 190, .2)
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #292929;
     border: .07em solid #292929;
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #292929;
-    border: .07em solid #292929;
+    border: .07em solid #292929
 }
 
-    .emby-select-withcolor > option {
-        color: inherit;
-        background: #222;
-    }
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B !important;
-    }
+.emby-select-withcolor:focus {
+    border-color: #00a4dc !important
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #00a4dc
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background-color: #1c1c1c;
+    background-color: #1c1c1c
 }
 
 .navMenuOption:hover {
-    background: #252528;
+    background: #252528
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff;
+    background: #00a4dc !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .4);
+    color: rgba(255, 255, 255, .4)
 }
 
 .emby-tab-button-active {
-    color: #52B54B;
+    color: #fff
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
+.emby-tab-button-active.emby-button-tv {
+    color: #999;
+    color: rgba(255, 255, 255, .4)
+}
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #52B54B;
-    background: transparent;
+    color: #fff;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(255,255,255,.05);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(255, 255, 255, .05)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: #1e1e1e !important;
+    background: #1e1e1e !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(255,255,255,.3);
+    color: rgba(255, 255, 255, .3)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #1a1a1a);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#101010));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #101010);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #101010);
+    background: linear-gradient(rgba(0, 0, 0, 0), #101010)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
-/* scrollbars */
 .layout-desktop ::-webkit-scrollbar {
     width: 1em;
-    height: 1em;
+    height: 1em
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b;
+    background-color: #3b3b3b
 }
 
-::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
-    background: #888 no-repeat center;
+    background: center no-repeat #888
 }
 
 .timeslotHeaders-desktop::-webkit-scrollbar {
-    height: .7em;
+    height: .7em
 }

src/bower_components/emby-webcomponents/themes/halloween/theme.css

@@ -1,483 +1,485 @@
-/*@import url('https://fonts.googleapis.com/css?family=Creepster');*/
-@import url('https://fonts.googleapis.com/css?family=Eater');
+@import url(https://fonts.googleapis.com/css?family=Eater);
+
+h1,
+h2 {
+    font-family: Eater;
+    font-weight: 400 !important
+}
 
 h1 {
-    font-family: Eater;
-    font-weight: normal !important;
-    font-size: 1.566em !important;
+    font-size: 1.566em !important
 }
 
 h2 {
-    font-family: Eater;
-    font-weight: normal !important;
-    font-size: 1.305em !important;
+    font-size: 1.305em !important
 }
 
-.sectionTabs button, .userViewNames .btnUserViewHeader {
+.sectionTabs button,
+.userViewNames .btnUserViewHeader {
     font-family: Eater !important;
-    font-size: 87% !important;
+    font-size: 87% !important
 }
 
+.skinHeader,
 html {
     color: #eee;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #202020
 }
 
 .emby-collapsible-button {
     border-color: #383838;
-    border-color: rgba(255,255,255, .135);
+    border-color: rgba(255, 255, 255, .135)
 }
 
 .skinHeader {
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
 .skinHeader-withBackground {
-    background-color: #202020;
+    background-color: #202020
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-.dialog {
-    background-color: #1a1a1a;
+.backgroundContainer,
+.dialog,
+html {
+    background-color: #1a1a1a
 }
 
-html, .backgroundContainer {
-    background-color: #1a1a1a;
+.backgroundContainer.withBackdrop {
+    background-color: rgba(12, 12, 12, .9)
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(12,12,12, .9);
-    }
-
-/* buttons */
 .paper-icon-button-light:focus {
     color: #FF9100;
-    background-color: rgba(255, 145, 0, 0.2);
+    background-color: rgba(255, 145, 0, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #404040;
-    color: #fff;
+    color: #fff
 }
 
-    .raised:focus, .fab:focus {
-        background: #505050;
-    }
+.fab:focus,
+.raised:focus {
+    background: #505050
+}
 
 .button-submit {
     background: #FF9100;
-    color: #fff;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #FF9D0C;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #FF9D0C;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #bbb;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
-    color: #FF9100;
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #FF9100
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox, .formDialogHeader:not(.formDialogHeader-clear), .formDialogFooter:not(.formDialogFooter-clear), .collapseContent {
-    background-color: #222;
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    background-color: #222
 }
 
 .defaultCardBackground1 {
-    background-color: #d2b019;
+    background-color: #d2b019
 }
 
 .defaultCardBackground2 {
-    background-color: #338abb;
+    background-color: #338abb
 }
 
 .defaultCardBackground3 {
-    background-color: #6b689d;
+    background-color: #6b689d
 }
 
 .defaultCardBackground4 {
-    background-color: #dd452b;
+    background-color: #dd452b
 }
 
 .defaultCardBackground5 {
-    background-color: #5ccea9;
+    background-color: #5ccea9
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .actionsheetDivider {
     background: #444;
-    background: rgba(255, 255, 255, .14);
+    background: rgba(255, 255, 255, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #222;
+    background-color: #222
 }
 
 .toast {
     background: #303030;
     color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #101010;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #FF9100;
+    border: 1px solid #FF9100
 }
 
 .selectionCommandsPanel {
     background: #FF9100;
-    color: #fff;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #FF9100;
+    color: #FF9100
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #999;
     color: rgba(255, 255, 255, .5);
-    background-color: transparent;
+    background-color: transparent
 }
 
 .alphaPickerButton-selected {
-    color: #fff;
+    color: #fff
 }
 
 .alphaPickerButton-tv:focus {
     background-color: #FF9100;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(30, 30, 30, .9);
+    background: rgba(30, 30, 30, .9)
 }
 
 .listItem-border {
-    border-color: rgba(30, 30, 30, .9) !important;
+    border-color: rgba(30, 30, 30, .9) !important
 }
 
 .listItem:focus {
-    background: #333;
+    background: #333
 }
 
 .progressring-spiner {
-    border-color: #FF9100;
+    border-color: #FF9100
 }
 
+.button-flat-accent,
 .button-link {
-    color: #FF9100;
-}
-
-.button-flat-accent {
-    color: #FF9100;
+    color: #FF9100
 }
 
 .mediaInfoText {
     color: #ddd;
-    background: rgba(170,170,190, .2);
+    background: rgba(170, 170, 190, .2)
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #262626;
     border: .07em solid #262626;
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #FF9100;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #FF9100
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #262626;
-    border: .07em solid #262626;
+    border: .07em solid #262626
 }
 
-    .emby-select-withcolor > option {
-        color: inherit;
-        background: #222;
-    }
+.emby-select-withcolor>option {
+    color: inherit;
+    background: #222
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #FF9100 !important;
-    }
+.emby-select-withcolor:focus {
+    border-color: #FF9100 !important
+}
 
 .emby-select-tv-withcolor:focus {
     background-color: #FF9100 !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #FF9100;
+.emby-checkbox:checked+span+span+.checkboxOutline {
+    border-color: #FF9100
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(204, 51, 51, 0.26);
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(204, 51, 51, .26)
 }
 
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #FF9100;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #FF9100;
+    background-color: #FF9100
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #FF9100;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #FF9100;
+    background: #FF9100
 }
 
 .fullSyncIndicator {
-    background: #FF9100;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
     background-color: #1c1c1f;
     color: #ccc;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
 .navMenuOption:hover {
-    background: #252528;
+    background: #252528
 }
 
 .navMenuOption-selected {
     background: #FF9100 !important;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
     background: #FF9100;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .emby-tab-button-active {
-    color: #FF9100;
+    color: #FF9100
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
 
 .emby-tab-button.emby-button-tv:focus {
     color: #FF9100;
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: #282828;
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: #282828
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: #1e1e1e !important;
+    background: #1e1e1e !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
+.guide-channelHeaderCell:focus,
+.programCell:focus {
     background-color: #FF9100 !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(255,255,255,.3);
+    color: rgba(255, 255, 255, .3)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #191919);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#191919));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #191919);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #191919);
+    background: linear-gradient(rgba(0, 0, 0, 0), #191919)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #FF9100;
+    color: #FF9100
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #FF9100;
+    color: #FF9100
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #FF9100;
+    border-color: #FF9100
 }
 
-/* scrollbars */
 .layout-desktop ::-webkit-scrollbar {
     width: 1em;
-    height: 1em;
+    height: 1em
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b;
+    background-color: #3b3b3b
 }
 
-::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
-    background: #888 no-repeat center;
+    background: center no-repeat #888
 }
 
-/* horizontal home header buttons */
 .btnUserViewHeader:focus {
-    color: #FF9100 !important;
+    color: #FF9100 !important
 }
 
-    .btnUserViewHeader:focus .userViewButtonText {
-        border-bottom-color: #FF9100 !important;
-    }
+.btnUserViewHeader:focus .userViewButtonText {
+    border-bottom-color: #FF9100 !important
+}
 
 .emby-button:focus:not(.btnUserViewHeader):not(.emby-tab-button) {
-    background: #FF9100;
+    background: #FF9100
 }

src/bower_components/emby-webcomponents/themes/light-blue/theme.css

@@ -1,441 +1,433 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #2196F3
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
 .skinHeader-withBackground {
     background-color: #2196F3;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    color: #fff;
-    /*background-image: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);*/
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    color: #fff
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .backgroundContainer {
-    background-color: #f2f2f2;
-    /*background-image: linear-gradient(to bottom,#C2D4DE, #EBFAFE, #E3DCD4, #CED6D8, #C0D3DA);*/
+.backgroundContainer,
+html {
+    background-color: #f2f2f2
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(255,255,255, .94);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(255, 255, 255, .94)
+}
 
 .dialog {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
     color: #2196F3;
-    background-color: rgba(33, 150, 243, 0.2);
+    background-color: rgba(33, 150, 243, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #d8d8d8;
-    color: inherit;
+    color: inherit
 }
 
-.button-submit:focus {
-    background: #5EC157;
-    color: #fff;
-}
-
-.raised:focus, .fab:focus {
+.fab:focus,
+.raised:focus {
     background: #ccc;
-    color: inherit;
+    color: inherit
 }
 
 .button-submit {
     background: #2196F3;
-    color: #fff;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #2DA2FF;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #2DA2FF;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
-    color: #555;
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #555
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: #2196F3;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #2196F3
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
-    background-color: #fff;
+.paperList,
+.visualCardBox {
+    background-color: #fff
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
     background-color: #2196F3;
-    color: #fff;
+    color: #fff
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     background-color: #f0f0f0;
-    border-top: 1px solid rgba(0,0,0,.08);
-    color: inherit;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
-    color: #888;
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #888
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #282828;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #2196F3;
+    border: 1px solid #2196F3
 }
 
 .selectionCommandsPanel {
     background: #2196F3;
-    color: #fff;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #2196F3;
+    color: #2196F3
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
     background-color: #2196F3;
-    color: #fff !important;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
+    background: #f8f8f8
 }
 
 .listItem-border {
-    border-color: #f0f0f0 !important;
+    border-color: #f0f0f0 !important
 }
 
 .listItem:focus {
-    background: #ddd;
+    background: #ddd
 }
 
 .progressring-spiner {
-    border-color: #2196F3;
+    border-color: #2196F3
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #2196F3;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #2196F3
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #2196F3
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #2196F3;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
     background-color: #2196F3;
-    color: #fff;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #2196F3;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(33, 150, 243, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(33, 150, 243, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #2196F3;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #2196F3;
+    background-color: #2196F3
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #2196F3;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #2196F3;
+    background: #2196F3
 }
 
 .fullSyncIndicator {
-    background: #2196F3;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
     background: #2196F3 !important;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
     background: #2196F3;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #fff;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
     color: #fff;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1)
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-        color: rgba(255, 255, 255, 1);
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
     color: rgba(255, 255, 255, 1);
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(0,0,0,.12);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
+.guide-channelHeaderCell:focus,
+.programCell:focus {
     background-color: #2196F3 !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #2196F3;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #2196F3
+}
 
-    .guide-date-tab-button:focus {
-        color: #2196F3;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #2196F3;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #2196F3;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #f2f2f2);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #2196F3;
+    border-color: #2196F3
 }

src/bower_components/emby-webcomponents/themes/light-green/theme.css

@@ -1,446 +1,443 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #52B54B
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
 .skinHeader-withBackground {
     background-color: #52B54B;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    color: #fff;
-    /*background-image: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);*/
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    color: #fff
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .backgroundContainer {
-    background-color: #f2f2f2;
-    /*background-image: linear-gradient(to bottom,#C2D4DE, #EBFAFE, #E3DCD4, #CED6D8, #C0D3DA);*/
+.backgroundContainer,
+html {
+    background-color: #f2f2f2
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(255,255,255, .94);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(255, 255, 255, .94)
+}
 
 .dialog {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
     color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    background-color: rgba(82, 181, 75, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
 .skinHeader-withBackground .button-link {
-    color: #fff;
+    color: #fff
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #d8d8d8;
-    color: inherit;
+    color: inherit
 }
 
-    .raised:focus, .fab:focus {
-        background: #ccc;
-        color: inherit;
-    }
+.fab:focus,
+.raised:focus {
+    background: #ccc;
+    color: inherit
+}
 
 .button-submit {
     background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #5EC157;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
-    color: #555;
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #555
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: green;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: green
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
-    background-color: #fff;
+.paperList,
+.visualCardBox {
+    background-color: #fff
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
     background-color: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     background-color: #f0f0f0;
     border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0,0,0,.08);
-    color: inherit;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
-    color: #888;
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #888
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(0, 0, 0, .14);
+    background: rgba(0, 0, 0, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #282828;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #52B54B
 }
 
 .selectionCommandsPanel {
     background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #52B54B
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
     background-color: #52B54B;
-    color: #fff !important;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
+    background: #f8f8f8
 }
 
 .listItem-border {
-    border-color: #f0f0f0 !important;
+    border-color: #f0f0f0 !important
 }
 
 .listItem:focus {
-    background: #ddd;
+    background: #ddd
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #52B54B
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #52B54B
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #52B54B
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
     background-color: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(82, 181, 75, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #52B54B
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #52B54B
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
     background: #52B54B !important;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
     background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #fff;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
     color: #fff;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1)
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-        color: rgba(255, 255, 255, 1);
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
     color: rgba(255, 255, 255, 1);
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(0,0,0,.12);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
+.guide-channelHeaderCell:focus,
+.programCell:focus {
     background-color: #52B54B !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #52B54B
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #52B54B;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #f2f2f2);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #52B54B;
+    border-color: #52B54B
 }

src/bower_components/emby-webcomponents/themes/light-pink/theme.css

@@ -1,443 +1,440 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #E91E63
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
 .skinHeader-withBackground {
     background-color: #E91E63;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    color: #fff;
-    /*background-image: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);*/
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    color: #fff
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .backgroundContainer {
-    background-color: #f2f2f2;
-    /*background-image: linear-gradient(to bottom,#C2D4DE, #EBFAFE, #E3DCD4, #CED6D8, #C0D3DA);*/
+.backgroundContainer,
+html {
+    background-color: #f2f2f2
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(255,255,255, .94);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(255, 255, 255, .94)
+}
 
 .dialog {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
     color: #E91E63;
-    background-color: rgba(233, 30, 99, 0.2);
+    background-color: rgba(233, 30, 99, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #d8d8d8;
-    color: inherit;
+    color: inherit
 }
 
-    .raised:focus, .fab:focus {
-        background: #ccc;
-        color: inherit;
-    }
+.fab:focus,
+.raised:focus {
+    background: #ccc;
+    color: inherit
+}
 
 .button-submit {
     background: #E91E63;
-    color: #fff;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #F52A6F;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #F52A6F;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #555;
-    color: rgba(0, 0, 0, .7);
+    color: rgba(0, 0, 0, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: #E91E63;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #E91E63
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
-    background-color: #F8BBD0;
+.paperList,
+.visualCardBox {
+    background-color: #F8BBD0
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
     background-color: #E91E63;
-    color: #fff;
+    color: #fff
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     background-color: #f0f0f0;
-    border-top: 1px solid rgba(0,0,0,.08);
-    color: inherit;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #888;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(0, 0, 0, .14);
+    background: rgba(0, 0, 0, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #282828;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #E91E63;
+    border: 1px solid #E91E63
 }
 
 .selectionCommandsPanel {
     background: #E91E63;
-    color: #fff;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #E91E63;
+    color: #E91E63
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
     background-color: #E91E63;
-    color: #fff !important;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
+    background: #f8f8f8
 }
 
 .listItem-border {
-    border-color: #f0f0f0 !important;
+    border-color: #f0f0f0 !important
 }
 
 .listItem:focus {
-    background: #ddd;
+    background: #ddd
 }
 
 .progressring-spiner {
-    border-color: #E91E63;
+    border-color: #E91E63
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #E91E63;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #E91E63
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #E91E63
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #E91E63;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
     background-color: #E91E63;
-    color: #fff;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #E91E63;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(233, 30, 99, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(233, 30, 99, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #E91E63;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #E91E63;
+    background-color: #E91E63
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #E91E63;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #E91E63;
+    background: #E91E63
 }
 
 .fullSyncIndicator {
-    background: #E91E63;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
     background: #E91E63 !important;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
     background: #E91E63;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #fff;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
     color: #fff;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1)
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-        color: rgba(255, 255, 255, 1);
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
     color: rgba(255, 255, 255, 1);
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(0,0,0,.12);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
+.guide-channelHeaderCell:focus,
+.programCell:focus {
     background-color: #E91E63 !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #E91E63;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #E91E63
+}
 
-    .guide-date-tab-button:focus {
-        color: #E91E63;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #E91E63;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #E91E63;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #f2f2f2);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #E91E63;
+    border-color: #E91E63
 }

src/bower_components/emby-webcomponents/themes/light-purple/theme.css

@@ -1,444 +1,441 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #673AB7
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
 .skinHeader-withBackground {
     background-color: #673AB7;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    color: #fff;
-    /*background-image: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);*/
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    color: #fff
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .backgroundContainer {
-    background-color: #EDE7F6;
-    /*background-image: linear-gradient(to bottom,#C2D4DE, #EBFAFE, #E3DCD4, #CED6D8, #C0D3DA);*/
+.backgroundContainer,
+html {
+    background-color: #EDE7F6
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(237,241,236, .94);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(237, 241, 236, .94)
+}
 
 .dialog {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
     color: #673AB7;
-    background-color: rgba(103, 58, 183, 0.2);
+    background-color: rgba(103, 58, 183, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #d8d8d8;
-    color: inherit;
+    color: inherit
 }
 
-    .raised:focus, .fab:focus {
-        background: #ccc;
-        color: inherit;
-    }
+.fab:focus,
+.raised:focus {
+    background: #ccc;
+    color: inherit
+}
 
 .button-submit {
     background: #673AB7;
-    color: #fff;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #7346C3;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #7346C3;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #555;
-    color: rgba(0, 0, 0, .7);
+    color: rgba(0, 0, 0, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: #673AB7;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #673AB7
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
-    background-color: #D1C4E9;
+.paperList,
+.visualCardBox {
+    background-color: #D1C4E9
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
     background-color: #673AB7;
-    color: #fff;
+    color: #fff
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     background-color: #f0f0f0;
     border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0,0,0,.08);
-    color: inherit;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #888;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(0, 0, 0, .14);
+    background: rgba(0, 0, 0, .14)
 }
 
 .listItem:focus {
-    background: #ddd;
+    background: #ddd
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #282828;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #673AB7;
+    border: 1px solid #673AB7
 }
 
 .selectionCommandsPanel {
     background: #673AB7;
-    color: #fff;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #673AB7;
+    color: #673AB7
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
     background-color: #673AB7;
-    color: #fff !important;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
+    background: #f8f8f8
 }
 
 .listItem-border {
-    border-color: #f0f0f0 !important;
+    border-color: #f0f0f0 !important
 }
 
 .progressring-spiner {
-    border-color: #673AB7;
+    border-color: #673AB7
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #673AB7;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #673AB7
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #673AB7
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #673AB7;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
     background-color: #673AB7;
-    color: #fff;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #673AB7;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(103, 58, 183, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(103,58,183, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #673AB7;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #673AB7;
+    background-color: #673AB7
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #673AB7;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #673AB7;
+    background: #673AB7
 }
 
 .fullSyncIndicator {
-    background: #673AB7;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
     background: #673AB7 !important;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
     background: #673AB7;
-    color: #fff;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #fff;
-    color: rgba(255, 255, 255, .54);
+    color: rgba(255, 255, 255, .54)
 }
 
-.emby-tab-button-active {
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
     color: #fff;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1)
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-        color: rgba(255, 255, 255, 1);
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
     color: rgba(255, 255, 255, 1);
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(0,0,0,.12);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
+.guide-channelHeaderCell:focus,
+.programCell:focus {
     background-color: #673AB7 !important;
-    color: #fff !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #673AB7;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #673AB7
+}
 
-    .guide-date-tab-button:focus {
-        color: #673AB7;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #673AB7;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #673AB7;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #EDE7F6);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#EDE7F6));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #EDE7F6);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #EDE7F6);
+    background: linear-gradient(rgba(0, 0, 0, 0), #EDE7F6)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #673AB7;
+    border-color: #673AB7
 }

src/bower_components/emby-webcomponents/themes/light-red/theme.css

@@ -1,442 +1,439 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #c33
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
 .skinHeader-withBackground {
-    background-color: #cc3333;
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    color: #fff;
-    /*background-image: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);*/
+    background-color: #c33;
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    color: #fff
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .backgroundContainer {
-    background-color: #f2f2f2;
-    /*background-image: linear-gradient(to bottom,#C2D4DE, #EBFAFE, #E3DCD4, #CED6D8, #C0D3DA);*/
+.backgroundContainer,
+html {
+    background-color: #f2f2f2
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(255,255,255, .94);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(255, 255, 255, .94)
+}
 
 .dialog {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #cc3333;
-    background-color: rgba(204, 51, 51, 0.2);
+    color: #c33;
+    background-color: rgba(204, 51, 51, .2)
 }
 
 .skinHeader-withBackground .paper-icon-button-light:focus {
     color: #fff;
-    background-color: rgba(255, 255, 255, 0.2);
+    background-color: rgba(255, 255, 255, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #d8d8d8;
-    color: inherit;
+    color: inherit
 }
 
-    .raised:focus, .fab:focus {
-        background: #ccc;
-        color: inherit;
-    }
+.fab:focus,
+.raised:focus {
+    background: #ccc;
+    color: inherit
+}
 
 .button-submit {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #D83F3F;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #D83F3F;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
-    color: #555;
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #555
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: #cc3333;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #c33
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
-    background-color: #fff;
+.paperList,
+.visualCardBox {
+    background-color: #fff
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #cc3333;
-    color: #fff;
+    background-color: #c33;
+    color: #fff
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     background-color: #f0f0f0;
     border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0,0,0,.08);
-    color: inherit;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
-    color: #888;
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #888
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(0, 0, 0, .14);
+    background: rgba(0, 0, 0, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #282828;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #cc3333;
+    border: 1px solid #c33
 }
 
 .selectionCommandsPanel {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #cc3333;
+    color: #c33
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
-    background-color: #cc3333;
-    color: #fff !important;
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
+    background-color: #c33;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
+    background: #f8f8f8
 }
 
 .listItem-border {
-    border-color: #f0f0f0 !important;
+    border-color: #f0f0f0 !important
 }
 
 .listItem:focus {
-    background: #ddd;
+    background: #ddd
 }
 
 .progressring-spiner {
-    border-color: #cc3333;
+    border-color: #c33
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #cc3333;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #c33
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #c33
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #cc3333;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #cc3333;
-    color: #fff;
+    background-color: #c33;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #cc3333;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(204, 51, 51, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(204,51,51, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #cc3333;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #cc3333;
+    background-color: #c33
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #cc3333;
+    background-color: #CB272A
 }
 
+.countIndicator,
 .playedIndicator {
-    background: #cc3333;
+    background: #c33
 }
 
 .fullSyncIndicator {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
-    background: #cc3333 !important;
-    color: #fff;
+    background: #c33 !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #cc3333;
-    color: #fff;
+    background: #c33;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #fff;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
     color: #fff;
-    color: rgba(255, 255, 255, 1);
+    color: rgba(255, 255, 255, 1)
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-        color: rgba(255, 255, 255, 1);
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
     color: rgba(255, 255, 255, 1);
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(0,0,0,.12);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #cc3333 !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #c33 !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #f2f2f2);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #cc3333;
+    border-color: #c33
 }

src/bower_components/emby-webcomponents/themes/light/theme.css

@@ -1,437 +1,434 @@
-html, .skinHeader {
+.skinHeader,
+html {
     color: #222;
-    color: rgba(0, 0, 0, .87);
+    color: rgba(0, 0, 0, .87)
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #303030
 }
 
 .emby-collapsible-button {
     border-color: #ccc;
-    border-color: rgba(0, 0, 0, .158);
+    border-color: rgba(0, 0, 0, .158)
 }
 
 .collapseContent {
-    background-color: #eaeaea;
+    background-color: #eaeaea
 }
 
 .skinHeader-withBackground {
     background-color: #303030;
     color: #ccc;
     color: rgba(255, 255, 255, .87);
-    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    /*background-image: linear-gradient(to right,#BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);*/
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
 .osdHeader {
-    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-html, .backgroundContainer {
-    background-color: #f2f2f2;
-    /*background-image: linear-gradient(to bottom,#C2D4DE, #EBFAFE, #E3DCD4, #CED6D8, #C0D3DA);*/
+.backgroundContainer,
+html {
+    background-color: #f2f2f2
 }
 
-    .backgroundContainer.withBackdrop {
-        background-color: rgba(255,255,255, .94);
-    }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(255, 255, 255, .94)
+}
 
 .dialog {
-    background-color: #f0f0f0;
+    background-color: #f0f0f0
 }
 
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #d8d8d8;
-    color: inherit;
+    color: inherit
 }
 
-    .raised:focus, .fab:focus {
-        background: #ccc;
-    }
+.fab:focus,
+.raised:focus {
+    background: #ccc
+}
 
 .button-submit {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-    }
+.button-submit:focus {
+    background: #0cb0e8
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
-    color: #555;
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    color: #555
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused, .button-link {
-    color: green;
+.button-link,
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: green
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox {
-    background-color: #fff;
+.paperList,
+.visualCardBox {
+    background-color: #fff
 }
 
 .defaultCardBackground1 {
-    background-color: #009688;
+    background-color: #009688
 }
 
 .defaultCardBackground2 {
-    background-color: #D32F2F;
+    background-color: #D32F2F
 }
 
 .defaultCardBackground3 {
-    background-color: #0288D1;
+    background-color: #0288D1
 }
 
 .defaultCardBackground4 {
-    background-color: #388E3C;
+    background-color: #388E3C
 }
 
 .defaultCardBackground5 {
-    background-color: #F57F17;
+    background-color: #F57F17
 }
 
 .formDialogHeader:not(.formDialogHeader-clear) {
-    background-color: #52B54B;
-    color: #fff;
+    background-color: #00a4dc;
+    color: #fff
 }
 
 .formDialogFooter:not(.formDialogFooter-clear) {
     background-color: #f0f0f0;
     border-top: 1px solid #ddd;
-    border-top: 1px solid rgba(0,0,0,.08);
-    color: inherit;
+    border-top: 1px solid rgba(0, 0, 0, .08);
+    color: inherit
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
-    color: #888;
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    color: #888
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(0, 0, 0, .14);
-}
-
-.fieldDescription {
-    color: #888;
+    background: rgba(0, 0, 0, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
-.formDialogHeader a {
-    color: #fff;
+.formDialogHeader a,
+.toast {
+    color: #fff
 }
 
 .actionSheetMenuItem:hover {
-    background-color: #ddd;
+    background-color: #ddd
 }
 
 .toast {
     background: #303030;
-    color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
 .appfooter {
     background: #282828;
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
 .nowPlayingBarSecondaryText {
-    color: #999;
+    color: #999
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #555;
     color: rgba(0, 0, 0, .7);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important;
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
+    background-color: #00a4dc;
+    color: #fff !important
 }
 
-/* listItem */
 .detailTableBodyRow-shaded:nth-child(even) {
-    background: #f8f8f8;
+    background: #f8f8f8
 }
 
 .listItem-border {
-    border-color: #f0f0f0 !important;
+    border-color: #f0f0f0 !important
 }
 
 .listItem:focus {
-    background: #ddd;
+    background: #ddd
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
 .mediaInfoText {
     color: #333;
-    background: #fff;
+    background: #fff
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    border-radius: .15em;
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
+    border: .07em solid rgba(0, 0, 0, .158)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #00a4dc
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
-    color: #fff;
+    background-color: #00a4dc;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
-    background: #fff;
+    background: #fff
 }
 
 .navMenuOption:hover {
-    background: #f2f2f2;
+    background: #f2f2f2
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff;
+    background: #00a4dc !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .emby-tab-button-active {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
+}
 
 .emby-tab-button.emby-button-tv:focus {
-    color: #52B54B;
-    background: transparent;
+    color: #00a4dc;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
-    border-color: rgba(0,0,0,.12);
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(0, 0, 0, .12)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.1) !important;
+    background: rgba(0, 0, 0, .1) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(0, 0, 0, .54);
+    color: rgba(0, 0, 0, .54)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #f2f2f2);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
+    background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }

src/bower_components/emby-webcomponents/themes/wmc/theme.css

@@ -1,30 +1,39 @@
 html {
     color: #eee;
     color: rgba(255, 255, 255, .9);
-    background-color: #0F3562;
+    background-color: #0F3562
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+  background-color: #0C2450
 }
 
 .emby-collapsible-button {
     border-color: #383838;
-    border-color: rgba(255,255,255, .135);
+    border-color: rgba(255, 255, 255, .135)
 }
 
 .skinHeader {
     color: #ccc;
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-.skinHeader-withBackground, .formDialogHeader:not(.formDialogHeader-clear) {
+.formDialogHeader:not(.formDialogHeader-clear),
+.skinHeader-withBackground {
     background-color: #0C2450;
-    background: linear-gradient(to bottom, #0C2450, #081B3B);
+    background: -webkit-gradient(linear, left top, left bottom, from(#0C2450), to(#081B3B));
+    background: -webkit-linear-gradient(top, #0C2450, #081B3B);
+    background: -o-linear-gradient(top, #0C2450, #081B3B);
+    background: linear-gradient(to bottom, #0C2450, #081B3B)
 }
 
-@supports ( (backdrop-filter: blur(1.5em)) or (-webkit-backdrop-filter: blur(1.5em)) ) {
-
+@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
     .skinHeader-blurred {
-        background: rgba(20,20,20,.7);
+        background: rgba(20, 20, 20, .7);
         -webkit-backdrop-filter: blur(1.5em);
-        backdrop-filter: blur(1.5em);
+        backdrop-filter: blur(1.5em)
     }
 }
 
@@ -32,412 +41,409 @@ html {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
 .pageTitleWithDefaultLogo {
-    background-image: url(../logowhite.png);
+    background-image: url(../logowhite.png)
 }
 
-.backgroundContainer, .dialog {
+.backgroundContainer,
+.dialog {
     background-color: #0F3562;
-    background: linear-gradient(to bottom, #0F3562, #1162A4, #03215F);
+    background: -webkit-gradient(linear, left top, left bottom, from(#0F3562), color-stop(#1162A4), to(#03215F));
+    background: -webkit-linear-gradient(top, #0F3562, #1162A4, #03215F);
+    background: -o-linear-gradient(top, #0F3562, #1162A4, #03215F);
+    background: linear-gradient(to bottom, #0F3562, #1162A4, #03215F)
 }
 
-    .backgroundContainer.withBackdrop {
-        background: rgba(17, 98, 164, .9);
-    }
+.backgroundContainer.withBackdrop {
+    background: rgba(17, 98, 164, .9)
+}
 
-/* buttons */
 .paper-icon-button-light:focus {
-    color: #52B54B;
-    background-color: rgba(82, 181, 75, 0.2);
+    color: #00a4dc;
+    background-color: rgba(0,164,220, .2)
 }
 
-.raised, .fab {
+.fab,
+.raised {
     background: #082845;
-    color: #fff;
+    color: #fff
 }
 
-    .raised:focus, .fab:focus {
-        background: #143451;
-    }
+.fab:focus,
+.raised:focus {
+    background: #143451
+}
 
 .button-submit {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-    .button-submit:focus {
-        background: #5EC157;
-        color: #fff;
-    }
+.button-submit:focus {
+    background: #0cb0e8;
+    color: #fff
+}
 
 .checkboxLabel {
-    color: inherit;
+    color: inherit
 }
 
-.paperListLabel, .inputLabelUnfocused, .textareaLabelUnfocused, .inputLabel, .checkboxListLabel {
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
     color: #bbb;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
-    color: #52B54B;
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    color: #00a4dc
 }
 
 .checkboxOutline {
-    border-color: currentColor;
+    border-color: currentColor
 }
 
-.paperList, .visualCardBox, .collapseContent {
-    background-color: #0F3562;
+.collapseContent,
+.paperList,
+.visualCardBox {
+    background-color: #0F3562
 }
 
 .defaultCardBackground1 {
-    background-color: #d2b019;
+    background-color: #d2b019
 }
 
 .defaultCardBackground2 {
-    background-color: #338abb;
+    background-color: #338abb
 }
 
 .defaultCardBackground3 {
-    background-color: #6b689d;
+    background-color: #6b689d
 }
 
 .defaultCardBackground4 {
-    background-color: #dd452b;
+    background-color: #dd452b
 }
 
 .defaultCardBackground5 {
-    background-color: #5ccea9;
+    background-color: #5ccea9
 }
 
-.listItem .secondary, .nowPlayingBarSecondaryText, .secondaryText, .fieldDescription, .cardText-secondary, .programSecondaryTitle, .guide-programNameCaret {
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
 .actionsheetDivider {
     background: #ddd;
-    background: rgba(255, 255, 255, .14);
+    background: rgba(255, 255, 255, .14)
 }
 
 .cardFooter-vibrant .cardText-secondary {
     color: inherit;
-    opacity: .5;
+    opacity: .5
 }
 
 .toast {
     background: #081B3B;
     color: #fff;
-    color: rgba(255, 255, 255, .87);
+    color: rgba(255, 255, 255, .87)
 }
 
-/* appfooter */
-.appfooter, .formDialogFooter:not(.formDialogFooter-clear) {
+.appfooter,
+.formDialogFooter:not(.formDialogFooter-clear) {
     background: #0C2450;
+    background: -webkit-gradient(linear, left bottom, left top, from(#0C2450), to(#081B3B));
+    background: -webkit-linear-gradient(bottom, #0C2450, #081B3B);
+    background: -o-linear-gradient(bottom, #0C2450, #081B3B);
     background: linear-gradient(to top, #0C2450, #081B3B);
-    color: rgba(255, 255, 255, .78);
+    color: rgba(255, 255, 255, .78)
 }
 
-@supports ( (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) ) {
-
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
-        background: rgba(24,24,24,.7);
+        background: rgba(24, 24, 24, .7);
         -webkit-backdrop-filter: blur(20px);
-        backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px)
     }
 }
 
-/* Multi-select */
 .itemSelectionPanel {
-    border: 1px solid #52B54B;
+    border: 1px solid #00a4dc
 }
 
 .selectionCommandsPanel {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* upNextDialog */
 .upNextDialog-countdownText {
-    color: #52B54B;
+    color: #00a4dc
 }
 
-/* alphaPicker */
 .alphaPickerButton {
     color: #999;
     color: rgba(255, 255, 255, .5);
-    background-color: transparent;
+    background-color: transparent
 }
 
-.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
-    background-color: #52B54B;
-    color: #fff !important;
+.alphaPickerButton-selected,
+.alphaPickerButton-tv:focus {
+    background-color: #00a4dc;
+    color: #fff !important
 }
 
 .detailTableBodyRow-shaded:nth-child(even) {
     background: #1c1c1c;
-    background: rgba(0, 0, 0, .3);
+    background: rgba(0, 0, 0, .3)
 }
 
 .listItem-border {
-    border-color: rgba(0, 0, 0, .3) !important;
+    border-color: rgba(0, 0, 0, .3) !important
 }
 
 .listItem:focus {
-    background: #333;
+    background: #333
 }
 
 .progressring-spiner {
-    border-color: #52B54B;
+    border-color: #00a4dc
 }
 
+.button-flat-accent,
 .button-link {
-    color: #52B54B;
-}
-
-.button-flat-accent {
-    color: #52B54B;
+    color: #00a4dc
 }
 
 .mediaInfoText {
     color: #ddd;
-    background: rgba(170,170,190, .2);
+    background: rgba(170, 170, 190, .2)
 }
 
+.mediaInfoTimerIcon,
 .starIcon {
-    color: #CB272A;
+    color: #CB272A
 }
 
-.mediaInfoTimerIcon {
-    color: #CB272A;
-}
-
-/* inputs */
-.emby-input, .emby-textarea {
+.emby-input,
+.emby-textarea {
     color: inherit;
-    background: rgba(255,255,255,.2);
-    border: .07em solid rgba(255,255,255, .135);
-    border-radius: .15em;
+    background: rgba(255, 255, 255, .2);
+    border: .07em solid rgba(255, 255, 255, .135);
+    -webkit-border-radius: .15em;
+    border-radius: .15em
 }
 
-    .emby-input:focus, .emby-textarea:focus {
-        border-color: #52B54B;
-    }
+.emby-input:focus,
+.emby-textarea:focus {
+    border-color: #00a4dc
+}
 
-/* select */
 .emby-select-withcolor {
     color: inherit;
-    background: rgba(255,255,255,.2);
-    border: .07em solid rgba(255,255,255, .135);
+    background: rgba(255, 255, 255, .2);
+    border: .07em solid rgba(255, 255, 255, .135)
 }
 
-    .emby-select-withcolor > option {
-        color: #000;
-        background: #fff;
-    }
+.emby-checkbox:checked+span+span+.checkboxOutline,
+.emby-select-withcolor:focus {
+    border-color: #00a4dc
+}
 
-    .emby-select-withcolor:focus {
-        border-color: #52B54B;
-    }
+.emby-select-withcolor>option {
+    color: #000;
+    background: #fff
+}
 
 .emby-select-tv-withcolor:focus {
-    background-color: #52B54B;
-    color: #fff;
+    background-color: #00a4dc;
+    color: #fff
 }
 
-/* checkbox */
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    border-color: #52B54B;
+.emby-checkbox:focus+span+.emby-checkbox-focushelper {
+    background-color: rgba(0,164,220, .26)
 }
 
-.emby-checkbox:focus + span + .emby-checkbox-focushelper {
-    background-color: rgba(82, 181, 75, 0.26);
-}
-
-.emby-checkbox:checked + span + span + .checkboxOutline {
-    background-color: #52B54B;
-}
-
-/* indicators */
+.emby-checkbox:checked+span+span+.checkboxOutline,
 .itemProgressBarForeground {
-    background-color: #52B54B;
+    background-color: #00a4dc
 }
 
 .itemProgressBarForeground-recording {
-    background-color: #CB272A;
-}
-
-.countIndicator {
-    background: #52B54B;
+    background-color: #CB272A
 }
 
+.countIndicator,
+.fullSyncIndicator,
 .playedIndicator {
-    background: #52B54B;
+    background: #00a4dc
 }
 
 .fullSyncIndicator {
-    background: #52B54B;
-    color: #fff;
+    color: #fff
 }
 
-/* main nav drawer */
 .mainDrawer {
     background-color: #0F3562;
     color: #ccc;
-    color: rgba(255, 255, 255, .7);
+    color: rgba(255, 255, 255, .7)
 }
 
-.navMenuOption:hover, .actionSheetMenuItem:hover {
+.actionSheetMenuItem:hover,
+.navMenuOption:hover {
     background: #252528;
-    background: rgba(0, 0, 0, .2);
+    background: rgba(0, 0, 0, .2)
 }
 
 .navMenuOption-selected {
-    background: #52B54B !important;
-    color: #fff;
+    background: #00a4dc !important;
+    color: #fff
 }
 
-/* emby-button */
 .emby-button-focusscale:focus {
-    background: #52B54B;
-    color: #fff;
+    background: #00a4dc;
+    color: #fff
 }
 
-/* emby-tabs */
 .emby-tab-button {
     color: #999;
-    color: rgba(255, 255, 255, .5);
+    color: rgba(255, 255, 255, .5)
 }
 
-.emby-tab-button-active {
-    color: #fff;
+.emby-tab-button-active,
+.emby-tab-button-active.emby-button-tv {
+    color: #fff
 }
 
-    .emby-tab-button-active.emby-button-tv {
-        color: #fff;
-    }
-
 .emby-tab-button.emby-button-tv:focus {
     color: #fff;
-    background: transparent;
+    background: 0 0
 }
 
-/* guide */
-.guide-channelHeaderCell, .channelPrograms, .programCell {
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
     border-color: #999;
-    border-color: rgba(255, 255, 255, .1);
+    border-color: rgba(255, 255, 255, .1)
 }
 
 .programCell-sports {
-    background: #3949AB !important;
+    background: #3949AB !important
 }
 
 .programCell-movie {
-    background: #5E35B1 !important;
+    background: #5E35B1 !important
 }
 
 .programCell-kids {
-    background: #039BE5 !important;
+    background: #039BE5 !important
 }
 
 .programCell-news {
-    background: #43A047 !important;
+    background: #43A047 !important
 }
 
 .programCell-active {
-    background: rgba(0,0,0,.3) !important;
+    background: rgba(0, 0, 0, .3) !important
 }
 
-.programCell:focus, .guide-channelHeaderCell:focus {
-    background-color: #52B54B !important;
-    color: #fff !important;
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    background-color: #00a4dc !important;
+    color: #fff !important
 }
 
 .guide-programTextIcon {
     color: #1e1e1e;
-    background: #555;
+    background: #555
 }
 
 .guide-headerTimeslots {
-    color: inherit;
+    color: inherit
 }
 
 .guide-date-tab-button {
     color: #555;
-    color: rgba(255,255,255,.3);
+    color: rgba(255, 255, 255, .3)
 }
 
-    .guide-date-tab-button.emby-tab-button-active {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    color: #00a4dc
+}
 
-    .guide-date-tab-button:focus {
-        color: #52B54B;
-    }
+.guide-date-tab-button.emby-button-tv:focus {
+    background-color: #00a4dc;
+    color: #fff
+}
 
-    .guide-date-tab-button.emby-button-tv:focus {
-        background-color: #52B54B;
-        color: #fff;
-    }
-
-/* detail screen */
 .itemBackdropFader {
-    background: linear-gradient(rgba(0,0,0,0), #115E9E);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#115E9E));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #115E9E);
+    background: -o-linear-gradient(rgba(0, 0, 0, 0), #115E9E);
+    background: linear-gradient(rgba(0, 0, 0, 0), #115E9E)
 }
 
-/* used by directory picker and other areas */
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    border-radius: .25em;
+    -webkit-border-radius: .25em;
+    border-radius: .25em
 }
 
-/* buttons */
 .ratingbutton-icon-withrating {
-    color: #cc3333;
+    color: #c33
 }
 
+.downloadbutton-icon-complete,
 .downloadbutton-icon-on {
-    color: #4285F4;
-}
-
-.downloadbutton-icon-complete {
-    color: #4285F4;
+    color: #4285F4
 }
 
 .playstatebutton-icon-played {
-    color: #cc3333;
+    color: #c33
 }
 
 .repeatButton-active {
-    color: #4285F4;
+    color: #4285F4
 }
 
-/* cards */
 .card:focus .card-focuscontent {
-    border-color: #fff;
+    border-color: #fff
 }
 
-/* scrollbars */
 .layout-desktop ::-webkit-scrollbar {
     width: 1em;
-    height: 1em;
+    height: 1em
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
-    background-color: #081B3B;
+    background-color: #081B3B
 }
 
-::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
-    background: rgba(255, 255, 255, .7) no-repeat center;
+    background: center no-repeat rgba(255, 255, 255, .7)
 }