Scyfin CSS Theme (10.9.x Support)

[Ted Hinklater]

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.detailPageSecondaryContainer {
  background-clip: text
}

.page.libraryPage.backdropPage::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  background-attachment: fixed;
  pointer-events: none;
}

.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
  background: transparent !important;
  backdrop-filter: none !important;
}

[Kiekan]

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.detailPageSecondaryContainer {
  background-clip: text
}

.page.libraryPage.backdropPage::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  background-attachment: fixed;
  pointer-events: none;
}

.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
  background: transparent !important;
  backdrop-filter: none !important;
}

Thanks so much! This definitely does what I asked!

A couple quick questions:
1 - Is there a way to modify this so the background on the home page and navigating through libraries is not black? I believe the normal theme background is #101010.
2 - Is there a way to accomplish this effect without enabling the backdrops feature in the user settings? This way, I can have all my users share the same theme without having to enable the backdrops function on a per user/per device setting and without having to modify config files. Not sure if this requires heavy modification of the theme itself.

Sorry if this is a complicated request!

[Ted Hinklater]

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.detailPageSecondaryContainer {
  background-clip: text
}

.page.libraryPage.backdropPage::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  background-attachment: fixed;
  pointer-events: none;
}

.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
  background: transparent !important;
  backdrop-filter: none !important;
}

Thanks so much! This definitely does what I asked!

A couple quick questions:
1 - Is there a way to modify this so the background on the home page and navigating through libraries is not black? I believe the normal theme background is #101010.
2 - Is there a way to accomplish this effect without enabling the backdrops feature in the user settings? This way, I can have all my users share the same theme without having to enable the backdrops function on a per user/per device setting and without having to modify config files. Not sure if this requires heavy modification of the theme itself.

Sorry if this is a complicated request!

In the ::before element (we generated it to cover the backdrops)

Where it says background: #000;

Change that to #101010;

For backdrops-by-default there is a guide, i believe you want this

https://github.com/BobHasNoSoul/jellyfin...-all-users

[Kiekan]

In the ::before element (we generated it to cover the backdrops)

Where it says background: #000;

Change that to #101010;

For backdrops-by-default there is a guide, i believe you want this

https://github.com/BobHasNoSoul/jellyfin...-all-users

Appreciate you taking a look at this.

I tried changing the color hex code like you suggest and it does not appear to work. I noticed some strange things happening, actually.

For reference this is the code I am using. Just to verify that everything is correct:

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.detailPageSecondaryContainer {
  background-clip: text
}
.page.libraryPage.backdropPage::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #101010;
  background-size: cover;
  opacity: 1;
  z-index: -1;
  background-attachment: fixed;
  pointer-events: none;
}
.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
  background: transparent !important;
  backdrop-filter: none !important;
}

When using this code I see the following behavior:
When backdrops are disabled:
   

When backdrops are enabled:
   

I noticed that this also removed the pane behind the the text for the show/movie details:
   

Is this the intended function? Without this CSS code, this is how the show details look while backdrops are enabled:
   

For movies, if backdrops are disabled, I am also seeing this partial #101010 background behind the text:
   

I appreciate you pointing me toward the tutorial on how to enable backdrops for all users by default. But I was hoping to avoid having to modify config files, for fear of damaging something important and breaking my Jellyfin instance.

I was wondering if the easiest way to accomplish this is just to remove the layer above the backdrop when backdrops are disabled (the default view) - not sure if that makes sense.
   

[Ted Hinklater]

If it's too dark try #7b7b7b instead of #101010

I did remove the pane, with this part:

Code:

.layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailsGroupItem, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .detailSectionContent, .layout-desktop #itemDetailPage:not(.noBackdropTransparency) .trackSelections {
[b]  background: transparent !important;[/b]  /* hides the background) */
  backdrop-filter: none !important;[b] /* removed the filter that blurred the background under it) */ [/b]
}

Ah yeah our changes didn't cover when backdrops aren't enabled, this is with all the changes:

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
.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: transparent !important;}
/* transparent pane for audio/video/subtitle selection section */
.trackSelections { background: transparent !important;}
/* transparent pane for writers/directors etc */
.layout-desktop .detailsGroupItem { background: transparent !important;}
/* with backdrops disabled, transparent pane for all sections */
.noBackdropTransparency .detailPagePrimaryContainer, .noBackdropTransparency .detailPageSecondaryContainer {background-color: transparent !important;}

[Kiekan]

That did it! Thanks so much for your help in adjusting these settings!

[Loof27]

I just released an update that should fix some of the weird layout issues on 10.11.X, though it does also remove support for pre-10.11.X. For anybody still running 10.10.X, you should update your CSS and lock it to the previous release like this:

Code:

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.4.17/CSS/scyfin-theme.css');

Someone also opened an issue for the same thing you are looking for (Backdrops ONLY on the media detail page), and I made this before seeing the posts here. Make sure backdrops are turned ON in the settings:

Code:

/* 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;
}