Global css overrides local application css

[samuliy]

As far as I know, I think it's common to use a global css in ~/.config/gtk-3.0/gtk.css

This should be loaded first, then ~/.config/swaync/style.css should be loaded "on top of that", meaning if there are different values, then swaync css should be prioritized.

I can't however get this to work.

---

I have this in my ~/.config/gtk-3.0/gtk.css:

.background {
  background-color: #f9f5d7;
  color: rgba(50, 48, 47, 0.87);
}

I have this in my ~/.config/swaync/style.css:

.background {
  color: transparent;
  background: transparent;
  background-color: transparent;
}

The result I get out of this is the swaync window blocks everything in my visible screen.

Removing .background from global config and restarting swaync loads the swaync css correctly, with transparent colors.

---

Side note:

Making changes to global css and using swaync-client --reload-css does not reload the global css.

---

swaync --version
swaync 0.7.2

gtk-layer-shell-0.7.0

[ErikReider]

Thanks for reporting. I won't be able to test/fix this for a few weeks (info in README) but I'll get to it at some point :)

I'll mark it as a bug until I can test

[ErikReider]

This is the priority in which GTK parses the CSS files. Swaync imports the user and the application CSS in a lower priority than ~/.config/gtk-3.0/gtk.css which is the intended behavior. Read this for more information.

What I could do is to change the application CSS priority to the same of ~/.config/gtk-3.0/gtk.css which other projects like Waybar already have done. This does mean though that you won't be able to override anything from your ~/.config/gtk-3.0/gtk.css file.

Making changes to global css and using swaync-client --reload-css does not reload the global css.

This only reloads the application CSS, not GTKs CSS.

[samuliy]

Okay, interesting.

This does mean though that you won't be able to override anything from your ~/.config/gtk-3.0/gtk.css file.

Do you mean that if I have my application specific config, I won't be able to override that with the global config?

As far as I understand this is how it usually is, where the global config has some sane defaults and the application can do it's own thing.

---

I also use Waybar so I can test this with it too.

Waybar has the main window with name waybar, label waybar and style class background.

I am able to have the main window background as transparent with this style.css:

window#waybar {
    background: rgba(0, 0, 0, 0);
}

So it somehow does prioritize application style.css over the global gtk.css. The same works when replacing window#waybar with .background.