New update LIQUID GLASS jellyfin theme glassmorphism [10.11.x]

[Jfin]

A big thank you for your theme, blends well with iOS 26. I hope you keep improving it, I’m using it full-time now.

[Sphinx Coldhand]

My favorite theme! Big thank you for the 10.11 update. Keep up the good work!

[Sphinx Coldhand]

What would be the CSS code (for both theme variants) to blur the background image of the home page?

[Ted Hinklater]

It already is?



but if you're just asking in general, this theme uses a ::before layer over .backgroundContainer.withBackdrop with css that blurs anything beneath it:

Code:

#reactRoot:not(:has(.skinHeader.semiTransparent)) > .backgroundContainer.withBackdrop::before {
  backdrop-filter: blur(30px) saturate(80%) brightness(60%);
-  webkit-backdrop-filter: blur(30px) saturate(80%) brightness(60%);
}

You can do it that way or you can apply a blur to the backdrop itself on the homepage

Code:

#reactRoot:not(:has(.skinHeader.semiTransparent)) > .backdropContainer > .backdropImage {
  filter: blur(30px);
}

[Sphinx Coldhand]

I want to apply a blur only to the backdrop itself only on the homepage.
I tried both of your codes, none worked out.
Here is what I used:

Code:

@import 'https://cdn.jsdelivr.net/gh/alexyle/jellyfin-theme@liquid-glass/glassmorphism/theme.css';
#reactRoot:not(:has(.skinHeader.semiTransparent)) > .backdropContainer > .backdropImage {filter: blur(30px);}

[Ted Hinklater]

Yeah the theme is overriding it with its own blur, best bet is to copy the whole theme css instead of using the import link, and editing out the blur bit i mentioned

[Sphinx Coldhand]

From my understanding, the CSS is executed from top to bottom.
If I add, for example:

Code:

.backdropImage {filter: blur(20px) saturate(120%) contrast(120%) brightness(40%);}

after the @import, the backdrop is blured, but all, not only for the homepage.
So, the blur is not overriden by @import (it comes after the @import).
To me it seems that it has to be a possibility to achive the desired effect only for the homepage.