Repository: electron
Issue: GTK CSD: CSS rules are not properly applied to titlebar on wayland GNOME (ozone wayland backend)
Labels: platform/linux,bug :beetle:,has-repro-comment,33-x-y

### Preflight Checklist

- [x] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [x] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [x] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a bug report that matches the one I want to file, without success.

### Electron Version

33.0.0

### What operating system(s) are you using?

Other Linux

### Operating System Version

Linux DESKTOP-IJK2GUG 6.11.5 #1-NixOS SMP PREEMPT_DYNAMIC Tue Oct 22 13:51:37 UTC 2024 x86_64 GNU/Linux

### What arch are you using?

x64

### Last Known Working Electron version

_No response_

### Expected Behavior

Electron correctly uses ~/.config/gtk3/gtk.css and/or ~/.config/gtk4/gtk.css files when rendering wayland CSD titlebar using libgtk on GNOME.

High-level "expected behavior": [unite-shell](https://github.com/hardpixel/unite-shell/) extension properly hides titlebar when configured.

### Actual Behavior

CSS files are read, parsed, but incorrectly matched and applied.

High-level "actual behavior": [unite-shell](https://github.com/hardpixel/unite-shell/) extension cannot remove titlebar.

This extension uses negative margin (which does not work too) to remove titlebar when needed (it is configurable; for example, titlebars can be shown when not maximised and hidden when window is maximised).

### Testcase Gist URL

_No response_

### Additional Information

This issue is encountered here https://github.com/hardpixel/unite-shell/issues/371. I copied all relevant info below, you don't need to read it.

This issue is seen on GNOME 45, 46, and probably 44. Arch Linux was affected too (can't test - migrated from arch to nix).

As GNOME does not support SSD, this extention uses [CSS rules](https://github.com/hardpixel/unite-shell/tree/master/unite%40hardpixel.eu/styles) to remove titlebars on GTK windows.

Below is a simple demo of incorrect property applying:

![image](https://github.com/user-attachments/assets/63720d7f-d991-4ce2-afb8-074017fb452b)

Contents of ~/.config/gtk-3.0/gtk.css:

```css
/* UNITE windowDecorations */
/*@import url('/run/current-system/sw/share/gnome-shell/extensions/unite@hardpixel.eu/styles/gtk3/buttons-right/maximized.css');*/
/* windowDecorations UNITE */

.titlebar {
  color: rgba(1,0,0,1);
}
```

No matter what I set for RGB, it is always black. Alpha channel works:

![image](https://github.com/user-attachments/assets/3426de85-76c0-45ac-bfe2-6dc720c24db2)
alpha=0
![image](https://github.com/user-attachments/assets/d9cc3c43-74b3-4f30-8e19-c1db23cc921e)
alpha=0.2

And even if I change `.titlebar` to `.title`, the behavior is the same.

Object tree, for reference (from GTK_DEBUG=interactive):

![Image](https://github.com/user-attachments/assets/331d2ffc-5a60-470e-bf84-aa257fabb810)

And also a test for invalid matching:

```css
.maximized .titlebar.default-decoration {
  margin: -200px 0 0;
  opacity: 0;
}
```

Does not work at all, despite titlebar having default-decoration class too.

But something like that:

```css
.maximized .titlebar {
  margin: -200px 0 0;
  opacity: 0;
}
```

Actually triggers and properties are applied, but margin is ignored, while titlebar is transparent:

![image](https://github.com/user-attachments/assets/8fee257d-baea-41fb-9d92-7248fd327b34)

Open this image in gThumb or simply browser with light/dark theme to see that it is transparent. Also same behavior is seen on plain electron (`electron --ozone-platform-hint=auto`), it is not discord/vesktop bug.