CTalvio / Ultrachromic

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

Remove warning about glassy effect on Firefox from README #84

Closed ebkalderon closed 3 months ago

ebkalderon commented 8 months ago

Describe the bug

The README currently notes in the "Effects" section that:

Glassy is not supported by firefox, unless some flags are set to enable it (though even this is currently broken in firefox).

This doesn't seem to be the case anymore. When testing this theme on Jellyfin 10.8.13 and Firefox 118.0.2, I see that effects/glassy.css works perfectly fine. I did not have to change any relevant settings in the about:config to achieve this. I'm not sure when the glassy effect started working on Firefox (perhaps we could investigate), but I think it should be safe to remove this warning from the README as it seems to be no longer applicable.

To Reproduce

Apply the following two server-side CSS snippets, one after the other, to confirm the before/after screenshots (see the side-by-side images below) match the expected visual output. Do this while accessing jellyfin-web through a fairly recent release of Mozilla Firefox with stock about:config settings.

1. Without glassy effect

/* Directly taken from: https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css */

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.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-dashboard.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_border.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css');

:root {--rounding: 5px;}

/*Style backdrop*/
.backdropImage {
  filter: blur(60px) saturate(200%) contrast(160%) brightness(25%);
}

2. With glassy effect

  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.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-dashboard.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_border.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple.css');
  @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/overlayprogress.css');
+ @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');

  :root {--rounding: 5px;}

  /*Style backdrop*/
  .backdropImage {
    filter: blur(60px) saturate(200%) contrast(160%) brightness(25%);
  }

Screenshots

Glassy effect off/on in Firefox:

Without glassy effect With glassy effect