diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 11e5340fb..58e780bd7 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -487,15 +487,19 @@ function setTrailerButtonVisibility(page, item) {
}
}
-function renderBackdrop(item) {
+function renderBackdrop(page, item) {
if (!layoutManager.mobile && dom.getWindowSize().innerWidth >= 1000) {
- setBackdrops([item]);
+ const isBannerEnabled = !layoutManager.tv && userSettings.detailsBanner();
+ // If backdrops are disabled, but the header banner is enabled, add a class to the page to disable the transparency
+ page.classList.toggle('noBackdropTransparency', isBannerEnabled && !userSettings.enableBackdrops());
+
+ setBackdrops([item], null, null, isBannerEnabled);
} else {
clearBackdrop();
}
}
-function renderDetailPageBackdrop(page, item, apiClient) {
+function renderHeaderBackdrop(page, item, apiClient) {
// Details banner is disabled in user settings
if (!userSettings.detailsBanner()) {
return false;
@@ -509,7 +513,7 @@ function renderDetailPageBackdrop(page, item, apiClient) {
let hasbackdrop = false;
const itemBackdropElement = page.querySelector('#itemBackdrop');
- const imgUrl = getItemBackdropImageUrl(apiClient, item, { maxWitdh: dom.getScreenWidth() }, false);
+ const imgUrl = getItemBackdropImageUrl(apiClient, item, { maxWidth: dom.getScreenWidth() }, false);
if (imgUrl) {
imageLoader.lazyImage(itemBackdropElement, imgUrl);
@@ -531,10 +535,13 @@ function reloadFromItem(instance, page, params, item, user) {
// Save some screen real estate in TV mode
if (!layoutManager.tv) {
renderLogo(page, item, apiClient);
- renderDetailPageBackdrop(page, item, apiClient);
+ }
+ // Render the mobile header backdrop
+ if (layoutManager.mobile) {
+ renderHeaderBackdrop(page, item, apiClient);
}
- renderBackdrop(item);
+ renderBackdrop(page, item);
// Render the main information for the item
page.querySelector('.detailPagePrimaryContainer').classList.add('detailRibbon');
@@ -2026,7 +2033,7 @@ export default function (view, params) {
if (currentItem) {
libraryMenu.setTitle('');
renderTrackSelections(page, self, currentItem, true);
- renderBackdrop(currentItem);
+ renderBackdrop(page, currentItem);
}
} else {
reload(self, page, params);
diff --git a/src/styles/librarybrowser.scss b/src/styles/librarybrowser.scss
index 700a1eb62..9ec55e0bd 100644
--- a/src/styles/librarybrowser.scss
+++ b/src/styles/librarybrowser.scss
@@ -579,14 +579,6 @@
height: 30vh;
}
}
-
- .layout-desktop &::after {
- content: "";
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.65);
- display: block;
- }
}
.layout-tv .itemBackdrop {
@@ -850,11 +842,11 @@
}
.detailPageSecondaryContainer {
- margin: 1.25em 0;
+ padding-top: 1.25em;
}
.layout-mobile .detailPageSecondaryContainer {
- margin: 1em 0;
+ padding-top: 1em;
}
.detailImageContainer .card {
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css
index 86f7e9373..bee10ed5f 100644
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@@ -252,6 +252,10 @@ a[data-role=button] {
background: none;
}
+.noBackdropTransparency .detailPageSecondaryContainer {
+ background-color: #d5e9f2;
+}
+
.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 fefc10297..aabfaba6b 100644
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@@ -243,6 +243,12 @@ a[data-role=button] {
background: none;
}
+.noBackdropTransparency .detailPageSecondaryContainer {
+ background: url(bg.jpg) center top no-repeat #033361;
+ background-size: cover;
+ background-attachment: fixed;
+}
+
.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 4901458f6..f7447c4c8 100644
--- a/src/themes/dark/theme.css
+++ b/src/themes/dark/theme.css
@@ -225,6 +225,10 @@ html {
background: none;
}
+.noBackdropTransparency .detailPageSecondaryContainer {
+ background-color: #101010;
+}
+
.listItem-border {
border-color: rgba(34, 34, 34, 0.9) !important;
}
diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css
index c614e1a8c..feedf23a1 100644
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@@ -257,6 +257,10 @@ a[data-role=button] {
color: inherit;
}
+.noBackdropTransparency .detailPageSecondaryContainer {
+ background-color: #f2f2f2;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #f8f8f8;
}
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index 69148a36c..87e4f7cc3 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -326,6 +326,12 @@ a[data-role=button] {
background: none;
}
+.noBackdropTransparency .detailPageSecondaryContainer {
+ background: url(bg.jpg) center top no-repeat #030322;
+ background-size: cover;
+ background-attachment: fixed;
+}
+
.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 8a44d81b3..5d62369a8 100644
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@@ -228,6 +228,12 @@ a[data-role=button] {
background: none;
}
+.noBackdropTransparency .detailPageSecondaryContainer {
+ background: linear-gradient(to bottom, #0f3562, #1162a4, #03215f);
+ background-color: #0f3562;
+ background-attachment: fixed;
+}
+
.detailTableBodyRow-shaded:nth-child(even) {
background: #1c1c1c;
background: rgba(0, 0, 0, 0.3);