Jellyfin Forum
Scyfin CSS Theme (10.9.x Support) - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: Scyfin CSS Theme (10.9.x Support) (/t-scyfin-css-theme-10-9-x-support)

Scyfin CSS Theme (10.9.x Support) - Loof27 - 2024-06-10

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

[Image: Fmvm6at.png]


Custom CSS theme for Jellyfin with support for backdrops


Scyfin Base Theme

[Image: homepage.png?raw=true]
[Image: details.png?raw=true]
[Image: details-backdrops.png?raw=true]
[Image: movies.png?raw=true]
[Image: dashboard.png?raw=true]
[Image: login.png?raw=true]

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');
  • [Image: seafoam.png?raw=true]

Coral
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
  • [Image: coral.png?raw=true]

Snow
  • Code:
    @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');
  • [Image: snow.png?raw=true]


RE: Scyfin CSS Theme (10.9.x Support) - Hooleyhill - 2024-06-10

Nice update.

RE: Scyfin CSS Theme (10.9.x Support) - cecilgagne - 2024-07-18

Great theme! Thanks for sharing it.

RE: Scyfin CSS Theme (10.9.x Support) - xiNe - 2024-08-18

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 Confused-face

RE: Scyfin CSS Theme (10.9.x Support) - Ted Hinklater - 2024-08-18

(2024-08-18, 12:35 PM)xiNe Wrote: 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 Confused-face

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


RE: Scyfin CSS Theme (10.9.x Support) - xiNe - 2024-08-19

(2024-08-18, 12:52 PM)Ted Hinklater Wrote:
(2024-08-18, 12:35 PM)xiNe Wrote: 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 Confused-face

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
}