Transparency and blur on context menus, various pop-ups, overlays, etc

[iGerman00]

Currently, a lot of the UI with floating things isn't blurred behind. While some people might like it, I find it extremely difficult to read. When I initially configured the theme, I thought that the following would affect all floating things let me have them blurry, but apparently not:

    --panel-blur: on; /* off: no changes, on: blur the background of panels */
    --blur-amount: 12px; /* amount of blur */
    --bg-floating: var(--bg-3); /* set this to a more opaque color if floating panels look too transparent. only applies if panel blur is on  */

Additionally, it makes the panels not transparent anymore, so I've not included it at all. It doesn't have any effect on the floating things in the example below.

My current CSS overrides are:

body {
    --top-bar-button-position: off;
    --top-bar-title-position: left;
    --top-bar-height: 36px;
    --custom-dms-icon: hide;
    font-weight: 500;

    --custom-window-controls: off;
    --subtle-top-bar-title: on;

    --transparency-tweaks: on;
    --bg-1: rgba(73, 77, 100, 0.5); /* dark buttons when clicked */
    --bg-2: rgba(54, 58, 79, 0.8); /* dark buttons */
    --bg-3: rgba(30, 32, 48, 0.8); /* spacing, secondary elements */
    --bg-4: rgba(36, 39, 58, 0.0); /* main background color */

    --custom-chatbar: separated;
    --chatbar-height: 56px;

    --small-user-panel: on;
}

My proposition is for these floating elements to have their own options to configure, because panel blur and such corresponds to panels and it might be difficult to have both transparent panels and blurred menus.

^{re: https://discord.com/channels/1169089289552924712/1169089290014314558/1365823355403370496}

---

See examples:

And most egregiously, when the internet goes down:

[Warzob]

Bg 3 you have test ? try this --bg-3: hsla(220, 15%, 28%, 1); /* Lighter background */

[iGerman00]

That would make them opaque, and also bg-3 is tied to a lot of other stuff iirc so it makes a bunch of stuff opaque too when my entire theme is transparent and blurry

[refact0r]

first, this theme is really not supposed to be a transparency theme. this is a rabbit hole i don't want to get sucked down into, i simply provide the basic options because they work with the existing theme without much modification.

to explain why popup panels are not blurred, 1. it is a tedious task to select all of them, 2. there is a physical limitation with some of them where if you apply backdrop blur it alters the positioning of the panel. i'm pretty sure there isn't really a way to get around this, so that's why i added --bg-floating. set --bg-floating to an opaque color, not --bg-3 if transparent popup panels bother you.

so yeah, i plan on applying --bg-floating to more elements, like the profile panels you showed. i also think i can add blur to the no internet loading background.

[iGerman00]

this theme is really not supposed to be a transparency theme

Completely fair, just reporting everything I found so you get good context.

there is a physical limitation

I see, that's understandable too, simple opaque is fine for those.

set --bg-floating to an opaque color

This is where there's an issue. I've set it to red for testing here, and as you can see it also affects the rest of the theme and makes panels opaque - which I'd like to stay transparent. Their color vars did not change, only panel blur was flipped between on and off here. Tbh, I was under the impression bg-floating didn't work at all but I didn't read carefully enough and tried changing it with panel blur off. Still, though, it's an unexpected behavior that the panels just suddenly become way more opaque here.

My PC happened to go out of commission between me writing my last comment and now so I can't really test again on Windows (from which my last screenshots were), perhaps it was different and it was completely opaque, but here on Mac I can see the panels are still slightly transparent, just way more opaque than without panel blur being on, which somehow seems even weirder to me.

[refact0r]

weird

[Paneedah]

This isn't a perfect fix, however I have found this import which seems to improve the right-click pop-out menu. It does NOT however fix user pop-outs or anything besides the actual right-click on a message.

@import url("https://aushevahmad.github.io/awesome-css/modules/acrylicpopup.css");

Maybe someone smarter than me can figure out how to also apply this to users who don't have a gradient set?

Result of using this import (vs default behavior)