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.

[cecilgagne]

Great theme! Thanks for sharing it.

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