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: