From 4e474325f3da7c6ac3ca48f9bfc8c92c75c459e9 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:07:29 +0200 Subject: [PATCH 01/10] Make top bar non-floating on TV --- src/assets/css/librarybrowser.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 643fb9ca97..7f956174a7 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -163,6 +163,12 @@ transition: background ease-in-out 0.5s; } +.layout-tv .skinHeader { + /* In TV layout, it makes more sense to keep the top bar at the top of the page + Having it follow the view only makes us lose vertical space, while not being focusable */ + position: relative; +} + .hiddenViewMenuBar .skinHeader { display: none; } From 186acfc3e6ef54350d9201263ce4ca8e4e375f47 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:09:07 +0200 Subject: [PATCH 02/10] Fix inline CSS style for itemDetails --- src/controllers/itemDetails/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html index a69d917874..7806b454ac 100644 --- a/src/controllers/itemDetails/index.html +++ b/src/controllers/itemDetails/index.html @@ -7,8 +7,8 @@
-
-
+
+
@@ -124,7 +124,7 @@
-
+
@@ -139,14 +139,14 @@

-
-
+
+
-
+

${Schedule}

From 45cd976b494596b1e5a3170ed436bbaba71b42c7 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:30:01 +0200 Subject: [PATCH 03/10] Fix font sizes Makes the baseline 16px again (It was 14.88px before, for some reason) and sets the TV baseline to 20px. --- src/assets/css/fonts.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/assets/css/fonts.css b/src/assets/css/fonts.css index cb0da0f80f..6e87f11d9d 100644 --- a/src/assets/css/fonts.css +++ b/src/assets/css/fonts.css @@ -1,7 +1,5 @@ html { font-family: "Noto Sans", sans-serif; - font-size: 93%; - -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; @@ -29,7 +27,9 @@ h3 { } .layout-tv { - font-size: 130%; + /* Per WebOS and Tizen guidelines, fonts must be 20px minimum. + This takes the 16px baseline and multiplies it by 1.25 to get 20px. */ + font-size: 125%; } .layout-mobile { From 6336c50d3a253ffc9f0c8bf3101bee29d816b886 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:30:23 +0200 Subject: [PATCH 04/10] Fix scollers cutting off images when focused on TV --- src/assets/css/librarybrowser.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 7f956174a7..52f99a9e31 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -1146,13 +1146,13 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { } .layout-tv .padded-top-focusscale { - padding-top: 1em; - margin-top: -1em; + padding-top: 1.5em; + margin-top: -1.5em; } .layout-tv .padded-bottom-focusscale { - padding-bottom: 1em; - margin-bottom: -1em; + padding-bottom: 1.5em; + margin-bottom: -1.5em; } @media all and (min-height: 31.25em) { From 3f7a84512ee7b262238acbc7a6e9be91792d94b6 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:30:46 +0200 Subject: [PATCH 05/10] Fix icon posiition on cards in TV layout --- src/components/cardbuilder/card.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index 74c376e85b..4c046ce984 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -209,6 +209,10 @@ button::-moz-focus-inner { contain: strict; } +.defaultCardBackground { + display: flex; +} + .cardContent:not(.defaultCardBackground) { background-color: transparent; } From 98f5bc3d9c6bb0454deb81d9c6a152938c16b466 Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:53:11 +0200 Subject: [PATCH 06/10] Don't constraing end position for scrollers if in TV layout --- src/libraries/scroller.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/libraries/scroller.js b/src/libraries/scroller.js index c460ec5b2c..dbb3de16e3 100644 --- a/src/libraries/scroller.js +++ b/src/libraries/scroller.js @@ -256,7 +256,11 @@ var scrollerFactory = function (frame, options) { ensureSizeInfo(); var pos = self._pos; - newPos = within(newPos, pos.start, pos.end); + if (layoutManager.tv) { + newPos = within(newPos, pos.start); + } else { + newPos = within(newPos, pos.start, pos.end); + } if (!transform) { nativeScrollTo(nativeScrollElement, newPos, immediate); From 9518ffa456478ed1fd85128e1938cfcbf280444d Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 19:58:21 +0200 Subject: [PATCH 07/10] Use emblem as logo in TV layout --- src/themes/appletv/theme.css | 4 ++++ src/themes/blueradiance/theme.css | 4 ++++ src/themes/dark/theme.css | 4 ++++ src/themes/light/theme.css | 4 ++++ src/themes/purplehaze/theme.css | 4 ++++ src/themes/wmc/theme.css | 4 ++++ 6 files changed, 24 insertions(+) diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index 41540ce0dd..8b91bda65a 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -38,6 +38,10 @@ html { background-image: url(../../assets/img/banner-dark.png); } +.layout-tv .pageTitleWithDefaultLogo { + background-image: url(../../assets/img/icon-transparent.png); +} + html { background: #d5e9f2; } diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index 7ecc4a74a5..e503ba8416 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -41,6 +41,10 @@ html { background-image: url(../../assets/img/banner-light.png); } +.layout-tv .pageTitleWithDefaultLogo { + background-image: url(../../assets/img/icon-transparent.png); +} + .dialog, .nowPlayingPlaylist, .nowPlayingContextMenu, diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index be2b9269af..3acc425ddf 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -34,6 +34,10 @@ html { background-image: url(../../assets/img/banner-light.png); } +.layout-tv .pageTitleWithDefaultLogo { + background-image: url(../../assets/img/icon-transparent.png); +} + .backgroundContainer, .dialog, .nowPlayingPlaylist, diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index c5161985cd..d5eb94e1dc 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -42,6 +42,10 @@ html { background-image: url(../../assets/img/banner-light.png); } +.layout-tv .pageTitleWithDefaultLogo { + background-image: url(../../assets/img/icon-transparent.png); +} + .backgroundContainer, html { background-color: #f2f2f2; diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 1d82afc23a..7849c91658 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -36,6 +36,10 @@ html { background-image: url(../../assets/img/banner-light.png); } +.layout-tv .pageTitleWithDefaultLogo { + background-image: url(../../assets/img/icon-transparent.png); +} + .dialog, .nowPlayingPlaylist, .nowPlayingContextMenu, diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index 4a7375a129..01a6aa5efd 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -47,6 +47,10 @@ html { background-image: url(../../assets/img/banner-light.png); } +.layout-tv .pageTitleWithDefaultLogo { + background-image: url(../../assets/img/icon-transparent.png); +} + .backgroundContainer, .dialog, .nowPlayingPlaylist, From 350195b5bca9c741b81e6c65554e07785c1a398f Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 20:06:48 +0200 Subject: [PATCH 08/10] Hide admin menus if in TV layout --- src/controllers/user/menu/index.html | 2 +- src/controllers/user/menu/index.js | 17 +++++++++-------- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/controllers/user/menu/index.html b/src/controllers/user/menu/index.html index 4d91f1206f..1c131919fe 100644 --- a/src/controllers/user/menu/index.html +++ b/src/controllers/user/menu/index.html @@ -57,7 +57,7 @@
-
+

${HeaderAdmin}

diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js index f44a193a52..7a8d619bb0 100644 --- a/src/controllers/user/menu/index.js +++ b/src/controllers/user/menu/index.js @@ -1,4 +1,5 @@ import appHost from 'apphost'; +import layoutManager from 'layoutManager'; import 'listViewStyle'; import 'emby-button'; @@ -38,19 +39,19 @@ export default function (view, params) { page.querySelector('.selectServer').classList.add('hide'); } - // hide the actions if user preferences are being edited for a different user + ApiClient.getUser(userId).then(function (user) { + page.querySelector('.headerUsername').innerHTML = user.Name; + if (user.Policy.IsAdministrator && !layoutManager.tv) { + page.querySelector('.adminSection').classList.remove('hide'); + } + }); + + // Hide the actions if user preferences are being edited for a different user if (params.userId && params.userId !== Dashboard.getCurrentUserId) { page.querySelector('.userSection').classList.add('hide'); page.querySelector('.adminSection').classList.add('hide'); } - ApiClient.getUser(userId).then(function (user) { - page.querySelector('.headerUsername').innerHTML = user.Name; - if (!user.Policy.IsAdministrator) { - page.querySelector('.adminSection').classList.add('hide'); - } - }); - import('autoFocuser').then(({default: autoFocuser}) => { autoFocuser.autoFocus(view); }); From ece0b39d7085656d5aa8e8160fd98be6134bf60a Mon Sep 17 00:00:00 2001 From: MrTimscampi Date: Wed, 26 Aug 2020 21:29:10 +0200 Subject: [PATCH 09/10] Rework details page for TV --- src/assets/css/librarybrowser.css | 46 +++++++++++++++----------- src/controllers/itemDetails/index.html | 12 +++---- src/controllers/itemDetails/index.js | 45 ++++++++++++++++--------- src/themes/appletv/theme.css | 15 +++++---- src/themes/blueradiance/theme.css | 14 ++++---- src/themes/dark/theme.css | 13 ++++++++ src/themes/light/theme.css | 8 +++++ src/themes/purplehaze/theme.css | 13 +++++--- src/themes/wmc/theme.css | 14 ++++---- 9 files changed, 115 insertions(+), 65 deletions(-) diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css index 52f99a9e31..c9ee82c8a0 100644 --- a/src/assets/css/librarybrowser.css +++ b/src/assets/css/librarybrowser.css @@ -28,6 +28,10 @@ padding-top: 0 !important; } +.layout-tv .itemDetailPage { + padding-top: 4.2em !important; +} + .standalonePage { padding-top: 4.5em !important; } @@ -453,8 +457,7 @@ height: 26.5vh; } -.layout-desktop .itemBackdrop::after, -.layout-tv .itemBackdrop::after { +.layout-desktop .itemBackdrop::after { content: ""; width: 100%; height: 100%; @@ -462,8 +465,8 @@ display: block; } -.layout-desktop .noBackdrop .itemBackdrop, -.layout-tv .noBackdrop .itemBackdrop { +.layout-tv .itemBackdrop, +.layout-desktop .noBackdrop .itemBackdrop { display: none; } @@ -630,6 +633,10 @@ z-index: 2; } +.layout-tv .detailPagePrimaryContainer { + display: block; +} + .layout-mobile .detailPagePrimaryContainer { display: block; position: relative; @@ -643,12 +650,16 @@ padding-left: 32.45vw; } -.layout-desktop .detailRibbon, -.layout-tv .detailRibbon { +.layout-desktop .detailRibbon { margin-top: -7.2em; height: 7.2em; } +.layout-tv .detailRibbon { + margin-top: 0; + height: inherit; +} + .layout-desktop .noBackdrop .detailRibbon, .layout-tv .noBackdrop .detailRibbon { margin-top: 0; @@ -754,8 +765,7 @@ div.itemDetailGalleryLink.defaultCardBackground { position: relative; } - .layout-desktop .itemBackdrop, - .layout-tv .itemBackdrop { + .layout-desktop .itemBackdrop { height: 40vh; } @@ -781,13 +791,8 @@ div.itemDetailGalleryLink.defaultCardBackground { } .emby-button.detailFloatingButton { - position: absolute; - background-color: rgba(0, 0, 0, 0.5); - z-index: 3; - top: 100%; - left: 90%; - margin: -2.2em 0 0 -2.2em; - padding: 0.4em; + font-size: 1.4em; + margin-right: 0.5em !important; color: rgba(255, 255, 255, 0.76); } @@ -850,7 +855,7 @@ div.itemDetailGalleryLink.defaultCardBackground { -webkit-align-items: center; align-items: center; margin: 0 !important; - padding: 0.5em 0.7em !important; + padding: 0.7em 0.7em !important; } @media all and (min-width: 29em) { @@ -919,10 +924,6 @@ div.itemDetailGalleryLink.defaultCardBackground { } @media all and (min-width: 100em) { - .detailFloatingButton { - display: none !important; - } - .personBackdrop { display: none !important; } @@ -931,6 +932,11 @@ div.itemDetailGalleryLink.defaultCardBackground { font-size: 108%; margin: 1.25em 0; } + + .layout-tv .mainDetailButtons { + font-size: 108%; + margin: 1em 0 1.25em; + } } @media all and (max-width: 50em) { diff --git a/src/controllers/itemDetails/index.html b/src/controllers/itemDetails/index.html index 7806b454ac..3c808e0b7b 100644 --- a/src/controllers/itemDetails/index.html +++ b/src/controllers/itemDetails/index.html @@ -11,7 +11,7 @@
-
+
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index f837d3fc1d..fe5f8419d6 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -383,7 +383,7 @@ import 'emby-select'; itemType: 'MusicArtist', serverId: serverId }); - html.push('' + artist.Name + ''); + html.push('' + artist.Name + ''); } return html.join(' / '); @@ -416,7 +416,7 @@ import 'emby-select'; }, { context: context }); - parentNameHtml.push('' + item.SeriesName + ''); + parentNameHtml.push('' + item.SeriesName + ''); } else if (item.IsSeries || item.EpisodeTitle) { parentNameHtml.push(item.Name); } @@ -431,7 +431,7 @@ import 'emby-select'; }, { context: context }); - parentNameHtml.push('' + item.SeriesName + ''); + parentNameHtml.push('' + item.SeriesName + ''); } else if (item.ParentIndexNumber != null && item.Type === 'Episode') { parentRoute = appRouter.getRouteUrl({ Id: item.SeasonId, @@ -442,7 +442,7 @@ import 'emby-select'; }, { context: context }); - parentNameHtml.push('' + item.SeasonName + ''); + parentNameHtml.push('' + item.SeasonName + ''); } else if (item.ParentIndexNumber != null && item.IsSeries) { parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber); } else if (item.Album && item.AlbumId && (item.Type === 'MusicVideo' || item.Type === 'Audio')) { @@ -455,7 +455,7 @@ import 'emby-select'; }, { context: context }); - parentNameHtml.push('' + item.Album + ''); + parentNameHtml.push('' + item.Album + ''); } else if (item.Album) { parentNameHtml.push(item.Album); } @@ -572,9 +572,13 @@ import 'emby-select'; // Start rendering the artwork first renderImage(page, item); - renderLogo(page, item, apiClient); + + // Same some screen real estate in TV mode + if (!layoutManager.tv) { + renderLogo(page, item, apiClient); + renderDetailPageBackdrop(page, item, apiClient); + } renderBackdrop(item); - renderDetailPageBackdrop(page, item, apiClient); // Render the main information for the item page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon'); @@ -766,6 +770,9 @@ import 'emby-select'; elem.innerHTML = cardHtml; imageLoader.lazyChildren(elem); + + // Avoid breaking the design by preventing focus of the poster using the keyboard. + elem.querySelector('button').tabIndex = -1; } function renderImage(page, item) { @@ -1061,7 +1068,12 @@ import 'emby-select'; renderOverview(page, item); renderMiscInfo(page, item); reloadUserDataButtons(page, item); - renderLinks(page, item); + + // Don't allow redirection to other websites from the TV layout + if (!layoutManager.tv) { + renderLinks(page, item); + } + renderTags(page, item); renderSeriesAirTime(page, item, isStatic); } @@ -1672,12 +1684,6 @@ import 'emby-select'; hideAll(page, 'btnPlay', false); hideAll(page, 'btnShuffle', false); } - - // HACK: Call autoFocuser again because btnPlay may be hidden, but focused by reloadFromItem - // FIXME: Sometimes focus does not move until all (?) sections are loaded - import('autoFocuser').then(({default: autoFocuser}) => { - autoFocuser.autoFocus(page); - }); } function renderCollectionItemType(page, parentItem, type, items) { @@ -1982,7 +1988,16 @@ import 'emby-select'; let currentItem; const self = this; const apiClient = params.serverId ? connectionManager.getApiClient(params.serverId) : ApiClient; - view.querySelectorAll('.btnPlay'); + + const btnResume = view.querySelector('.mainDetailButtons .btnResume'); + const btnPlay = view.querySelector('.mainDetailButtons .btnPlay'); + if (layoutManager.tv && !btnResume.classList.contains('hide')) { + btnResume.classList.add('fab'); + btnResume.classList.add('detailFloatingButton'); + } else if (layoutManager.tv && btnResume.classList.contains('hide')) { + btnPlay.classList.add('fab'); + btnPlay.classList.add('detailFloatingButton'); + } bindAll(view, '.btnPlay', 'click', onPlayClick); bindAll(view, '.btnResume', 'click', onPlayClick); bindAll(view, '.btnInstantMix', 'click', onInstantMixClick); diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css index 8b91bda65a..ad18bf24c5 100644 --- a/src/themes/appletv/theme.css +++ b/src/themes/appletv/theme.css @@ -23,17 +23,17 @@ html { .skinHeader-withBackground { color: rgba(0, 0, 0, 0.7); background: #303030; - 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); } .skinHeader.semiTransparent { - -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } +.layout-tv .skinHeader.semiTransparent { + background: none; +} + .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-dark.png); } @@ -238,12 +238,13 @@ html { .detailRibbon { background: #303030; - 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); } +.layout-tv .detailRibbon { + background: none; +} + .detailTableBodyRow-shaded:nth-child(even) { background: #f8f8f8; background: rgba(0, 0, 0, 0.1); diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css index e503ba8416..85795c90c3 100644 --- a/src/themes/blueradiance/theme.css +++ b/src/themes/blueradiance/theme.css @@ -21,22 +21,20 @@ html { .skinHeader-withBackground { background: #303030; - 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: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); - background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background-color: rgba(0, 0, 0, 0.3); } +.layout-tv .skinHeader.semiTransparent { + background: none; +} + .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-light.png); } @@ -235,6 +233,10 @@ html { background: linear-gradient(to right, #291a31, #033664, #011432, #141a3a, #291a31); } +.layout-tv .detailRibbon { + background: none; +} + .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; background: rgba(30, 30, 30, 0.9); diff --git a/src/themes/dark/theme.css b/src/themes/dark/theme.css index 3acc425ddf..1024770c7c 100644 --- a/src/themes/dark/theme.css +++ b/src/themes/dark/theme.css @@ -30,6 +30,10 @@ html { background-color: rgba(0, 0, 0, 0.4); } +.layout-tv .skinHeader.semiTransparent { + background: none; +} + .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-light.png); } @@ -211,6 +215,10 @@ html { background: rgba(32, 32, 32, 0.8); } +.layout-tv .detailRibbon { + background: none; +} + .noBackdrop .detailRibbon { background: #202020; } @@ -458,3 +466,8 @@ html { background-color: #00a4dc; color: #fff; } + +.layout-tv .emby-button.detailFloatingButton:focus { + background-color: #f2f2f2; + color: #00a4dc; +} diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css index d5eb94e1dc..ec618138cd 100644 --- a/src/themes/light/theme.css +++ b/src/themes/light/theme.css @@ -38,6 +38,10 @@ html { background-color: rgba(0, 0, 0, 0.4); } +.layout-tv .skinHeader.semiTransparent { + background: none; +} + .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-light.png); } @@ -237,6 +241,10 @@ html { box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } +.layout-tv .detailRibbon { + background: none; +} + .detailTableBodyRow-shaded:nth-child(even) { background: #f8f8f8; } diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index 7849c91658..4b2451cfe4 100644 --- a/src/themes/purplehaze/theme.css +++ b/src/themes/purplehaze/theme.css @@ -17,21 +17,20 @@ html { .skinHeader-withBackground { background: #000420; - background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%); - background: -webkit-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%); background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%); } .skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); - background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background-color: rgba(0, 0, 0, 0.3); } +.layout-tv .skinHeader.semiTransparent { + background: none; +} + .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-light.png); } @@ -322,6 +321,10 @@ a[data-role=button] { background: linear-gradient(to right, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%); } +.layout-tv .detailRibbon { + background: none; +} + .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; background: rgba(30, 30, 30, 0.9); diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css index 01a6aa5efd..a0db089625 100644 --- a/src/themes/wmc/theme.css +++ b/src/themes/wmc/theme.css @@ -26,9 +26,6 @@ html { .formDialogHeader:not(.formDialogHeader-clear), .skinHeader-withBackground { - 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); background-color: #0c2450; } @@ -36,13 +33,14 @@ html { .skinHeader.semiTransparent { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; - background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0))); - background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); - background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); background-color: rgba(0, 0, 0, 0.3); } +.layout-tv .skinHeader.semiTransparent { + background: none; +} + .pageTitleWithDefaultLogo { background-image: url(../../assets/img/banner-light.png); } @@ -217,6 +215,10 @@ html { background-color: #081b3b; } +.layout-tv .detailRibbon { + background: none; +} + .detailTableBodyRow-shaded:nth-child(even) { background: #1c1c1c; background: rgba(0, 0, 0, 0.3); From 9e4e8a911f107ad2e7b146e1a150dc7dc87471d3 Mon Sep 17 00:00:00 2001 From: dkanada Date: Sun, 30 Aug 2020 23:14:39 +0900 Subject: [PATCH 10/10] fix spelling error --- src/controllers/itemDetails/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js index fe5f8419d6..cc970c856c 100644 --- a/src/controllers/itemDetails/index.js +++ b/src/controllers/itemDetails/index.js @@ -573,7 +573,7 @@ import 'emby-select'; // Start rendering the artwork first renderImage(page, item); - // Same some screen real estate in TV mode + // Save some screen real estate in TV mode if (!layoutManager.tv) { renderLogo(page, item, apiClient); renderDetailPageBackdrop(page, item, apiClient);