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

[evomedia]

Would love some advice on this. Not sure why but with my current CSS theme code I am getting a "<body>" text on my Jellyfin MP app and the browser. Tried to inspect element it on my browser to find where it comes from but it isn't very possible.

Here are some screenshots of the issue.

   
   
   
   

This is my current CSS 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');
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.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: 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;}