Feature Request - Option to disable Backdrops on Navigation pages

[kiekan88]

Was wondering if it would be possible to add some optional CSS code to disable the backdrops feature on the main page or when navigating through libraries. This way the backdrops only populate on the individual TV Show or Movie listings.

I have seen that some have requested this feature here: https://features.jellyfin.org/posts/1302/setting-to-disable-backdrops-on-certain-pages

And the effect was accomplished by using the following code:

body.withSectionTabs div.backdropContainer {
display: none;
}

When trying this, though, it results in a solid black background. Is there any way to accomplish this and retain the standard "#101010" background for this theme?

[loof2736]

Try turning on backdrops in the settings, then see if this works for you:

/* Only show backdrops on details page */
body.withSectionTabs .backgroundContainer.withBackdrop {
    background: var(--primary-background-color) !important;
}
body.withSectionTabs .backgroundContainer.withBackdrop + div .mainDrawer {
    background: var(--secondary-background-color) !important;
}

[kiekan88]

Thanks for the response! With the help of Ted Hinklater on the official Jellyfin forums, I was able to achieve the desired effect. I modified Ted's code to include the blur effect used elsewhere:

.detailPageSecondaryContainer` {background-clip: text}

/* cover backdrops except for item page */
.page.libraryPage.backdropPage::before {content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #7b7b7b; background-size: cover; opacity: 1; z-index: -1; background-attachment: fixed; pointer-events: none;}

/* transparent pane for description section */
.layout-desktop .detailSectionContent { background: var(--primary-background-transparent) !important;  backdrop-filter: blur(var(--blur)) !important; }

/* transparent pane for audio/video/subtitle selection section */
.trackSelections { background: var(--primary-background-transparent) !important;  backdrop-filter: blur(var(--blur)) !important; }

/* transparent pane for writers/directors etc */
.layout-desktop .detailsGroupItem { background: var(--primary-background-transparent) !important;  backdrop-filter: blur(var(--blur)) !important; }

/* with backdrops disabled, transparent pane for all sections */
.noBackdropTransparency .detailPagePrimaryContainer, .noBackdropTransparency .detailPageSecondaryContainer {background-color: transparent !important;}