search

CTalvio / Ultrachromic

The final form, the true evolution of the chromic theme saga!
MIT License
639 stars 40 forks source link

Backdrop is blurred entirely in title page at banner mode #94

Open Archer-Tatsu opened 3 months ago

Archer-Tatsu commented 3 months ago

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 commented 3 months ago

It's hapenning to me as well on Jellyfin 10.9.8

Sandoiitchisan commented 3 months ago

Same here

lootvig commented 1 month ago

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

It0w commented 3 weeks ago

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.