GTK 3.22 migration of older gtk.css -> Black Margin on elementaryOS apps

Question

I have a legacy gtk.css that was working fine on Ubuntu Xenial, I've just upgraded to Bionic (2018) and the same code now is not working anymore:

$ cat .config/gtk-3.0/gtk.css 
.window-frame {
  box-shadow: none;
  margin: 0px;
}

this code was needed to remove an ugly black border from windows as explained here Remove black margin from elementaryOS applications when using Awesome Window Manager.

I tried the selector .frame>border in the debugger $ GTK_DEBUG=interactive io.elementary.calculator but to no avail.

Anyone that follows GTK devel and knows how to update the CSS code? I tried to look into the official docs but couldn't find anything related to .window-frame having changed.

Answer 1

The .window-frame tweak does not work anymore on recent versions of GTK3 due to massive CSS overhaul. Here is a patch that seems to effectively disable these black borders on GTK3 (tested on version 3.24.18-1 of gtk3), to be written in ~/.config/gtk-3.0/gtk.css:

window > decoration {
  box-shadow: none;
  margin: 0;
}

This kind of solution can be derived using the GTK Inspector to debug GTK apps displaying issues.

Answer 2

It seems that .window-frame got changed in GTK CSS 3.22 from 3.18. For the sake of Google I coulnd't find into what got changed (someone mentioned frame but that doesn't work).

So I got a brutal patch that seems to kind of work and have few side effects:

* {
   box-shadow: none;
   margin: 0px;
}

hope this helps others while a proper solution is discovered.