Can't find adjustments for dark red colored "Widget margin" from Inspector

In trying to make the headerbars smaller for gtk4 apps, I’ve made some progress but, haven’t covered all the bases yet. Some apps like nautilus/Files, for example, still have something keeping the height up. If I turn on the “Show Layout Borders” option in the Inspector (Global > Settings), this is what is shown currently:

Can see the only possible things keeping the height up are the two purple bars on the left and right sides, those are left and right margins so have no effect on the height; the 2 separators, which I’ve set with 1px margins and 1px min-height; then there is that dark red colored “Widget margin” (according to the help popup for “Show Layout Borders” option). But seems misleading, because if I adjust any widget margins then they show up in yellow (CSS margins), plus already have widget margins set to 0. I’ve tried going down all the CSS Nodes and can’t find out what is causing that dark red area, it’s mysterious! Pretty sure that’s the only thing left that could be keeping the height up. Any ideas? Below is the CSS code currently being applied. Thanks

box {
	border-spacing: 0 0;
	min-height: 1px;
}
button {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	min-height: 1px;
}
headerbar {
	min-height: 1px;
}
image {
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
}
menubutton {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	min-height: 1px;
}
row {
	margin-bottom: 0;
	margin-top: 0;
}
separator {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	min-height: 1px;
}
splitbutton {
	margin-bottom: 1px;
	margin-top: 1px;
	margin-left: 1px;
	margin-right: 1px;
	min-height: 1px;
}
widget {
	margin-bottom: 0px;
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-start: 0px;
	margin-end: 0px;
}

Ok instead of all that code above, I found this to work pretty good:

headerbar, headerbar * {
	border: 0;
	margin: 0;
	min-height: 0;
}

and now the results look like:

I’ll take it, even though that weird red area is still there, guess it wasn’t actually holding up the height. Not sure what I missed.

Small problem with the above code is that it also affects the drop-down menus, squishing all the items together. I tried to avoid it by trying headerbar, headerbar *:not(X) where X= many different things such as:

popover
popover *
* popover *
scrolledwindow
viewport stack box

Also tried using > and ~ and + etc to no avail.
I read the documentation but guess I have no idea how this stupid CSS selector works, any ideas? Thanks

Yes stupid indeed hah, finally found a way to undo the wildcard and this looks pretty ugly lol but it actually fixed everything, at least in nautilus and calculator. Yes actually had to put box 4 times in a row otherwise it was acting sketch…

headerbar,
headerbar *:not(popover):not(contents):not(scrolledwindow):not(viewport):not(stack):not(box):not(box):not(box):not(box):not(modelbutton):not(radio):not(label):not(accelerator):not(separator):not(scrollbar):not(range):not(trough):not(slider):not(overshoot):not(undershoot):not(junction):not(arrow):not(text) {
        border: 0;
        margin: 0;
        min-height: 0;
}

Can’t really understand these CSS selectors though, there must be a more efficient way, maybe need to go back and get rid of the wildcard and try matching individual nodes again since I must have missed some in my first post.

Been reading through .w3.org/TR/selectors-4 oh my gosh idk how you programmers do it, logical, elemental, attributes, classes, IDs, plus all these pseudo classes, and guess you can’t use combinators inside the not() but it says use a selector list which is a comma-separated list of simple, compound, or complex selectors. ahhh my head is gonna explode. hmm comma-separated, that means i could put all those nodes into one not() if i used commas? will try that and see…

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.