Scyfin CSS Theme (10.9.x Support)

[Loof27]

Repository: https://github.com/loof2736/scyfin

---

Custom CSS theme for Jellyfin with support for backdrops

---

Scyfin Base Theme

Code:

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

Options (Add these below the base theme)

---

Disable static left drawer 

• Code:

  @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css');
   
  

OLED

• Code:

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

Seafoam

• Code:

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

Coral

• Code:

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

Snow

• Code:

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

[Hooleyhill]

Nice update.

[xiNe]

is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it

[Ted Hinklater]

is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it

You can add this to your CSS box after your @import line(s)

Code:

.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #626262 !important;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

[xiNe]

is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it

You can add this to your CSS box after your @import line(s)

Code:

.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #626262 !important;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

thanks. finally I found below way to hide it;

.detailPageSecondaryContainer {
  background-clip: text
}

[luckey]

Hello! Thank you so much for your theme! I've been using it for a long time, with some modifications I made. But after recent updates, it's showing me a "dark box" on the left side.

   

This only happens in the Jellyfin Media Player... It looks normal on the web.

Also, can you help me show images in the Details Page background instead of my custom background image?

It should look like this:

   

[Kiekan]

is it possible to enable the backdrop ONLY in the movie detail page?
backdrop everywhere is kinda annoying...but i counldn't figure out a way to achieve it

You can add this to your CSS box after your @import line(s)

Code:

.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-color: #626262 !important;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

thanks. finally I found below way to hide it;

.detailPageSecondaryContainer {
  background-clip: text
}

It looks like this is no longer working on Jellyfin 10.11.X.

For reference, I have the import CSS formatted as such:

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
}

Is there any other way to only show the backdrops on the movie/show detail pages?

[Ted Hinklater]

Wait I just realised, if you click your profile icon, go to Settings > Display, and disable Backdrops, it'll only show backdrops on the item detail page

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

Wait I just realised, if you click your profile icon, go to Settings > Display, and disable Backdrops, it'll only show backdrops on the item detail page

[Kiekan]

Wait I just realised, if you click your profile icon, go to Settings > Display, and disable Backdrops, it'll only show backdrops on the item detail page

True. But you lose the transparency element that show the backdrop completely when you disable this function in the user settings.

With backdrops disabled in the user settings:


With backdrops enabled in user settings:


I guess ultimately, I'm just looking for a way to remove that grey box that covers up the backdrop in the show/movie details page.