Backdrop is blurred entirely in title page at banner mode

[Archer-Tatsu]

Describe the bug

Before Jellyfin 10.9, the theme works well for me. As is shown in the README.md, when applying banner mode (either w/ or wo/ logo), the bottom half of the backdrop will be blurred and dark, while keeping the top half bright and clear.

However, now in Jellyfin 10.9.7, the backdrop is blurred and dark entirely, which I think is worse than it was before.

Please help with this problem, thanks!

To Reproduce

This is what in my custom CSS code:

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/colorful.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner-logo.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');

@import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");

/*Style backdrop*/
.backdropImage {filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);}

:root {--accent: 98, 121, 205;}
:root {--rounding: 8px;}

Screenshots

This is what I expected (the top right one)

This is what I got

[LuisARosales]

It's hapenning to me as well on Jellyfin 10.9.8

[Sandoiitchisan]

Same here

[lootvig]

Same for me, and I thought I did something wrong with my custom CSS...

[It0w]

You can as a workaround change

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

to

.backdropImage {filter: brightness(25%);}

so you won't be blinded by the pictures and can still read the text.

[CTalvio]

Looks like some stuff has been changed around with how backdrops are displayed.

Gonna need to figure out a new way to deal with blurring them.