How to set background to transparent

[JustSimplyKyle]

This, doesn't work.

This, however DOES work.

But it also has the caveat of transparenting the popup window.

This is my style.css
https://0x0.st/oY-y.css

[JakeStanger]

If you want to target the container and everything inside the container, you could use:

.container, .container * {
  background-color: rgba(0, 0, 0, 0);
}

That will recursively set the background on all children and their children.

If you want to target only the first layer of children:

.container, .container > * {
  background-color: rgba(0, 0, 0, 0);
}

If needed you could then set the colour back on each widget.

EDIT: Transparency needs to be set on the window, which can be done using the .background class:

.background {
  background-color: rgba(0, 0, 0, 0);
}

[JustSimplyKyle]

Still doesn't work, but surprisingly, both these two solutions still will transparent the pop-up window

[JakeStanger]

Hm okay that's unexpected. Could you share your current config & css please, and I'll have a play

[JustSimplyKyle]

https://0x0.st/oY4H.corn
https://0x0.st/oY48.css

[JakeStanger]

Aha, cracked it. So you need to add the transparency onto the top-level background:

.background {
  background-color: rgba(0, 0, 0, 0);
}

I'll make sure that selector gets added to the wiki.

And it makes sense this was adding transparency to the menus:

.container, .container * {
  background-color: rgba(0, 0, 0, 0);
}

Since that's saying "target the container and every element inside the container at any depth". On everything else, you're explicitly overruling that with another background colour, but the menu background aren't specified anywhere so abide by that rule.

CSS is an adventure.

Btw, love the gradients! Would be awesome if I can add your config/style to a showcase when it's finished.

[JustSimplyKyle]

Of course! The "inspiration"(I basically used his css) is from
https://github.com/flick0/dotfiles/blob/dreamy/config/hypr/component/waybar/style.css