GTK 4 CSS customisation help needed

[calestyo (Christoph Anton Mitterer)]

Hey there.

Perhaps someone can help me with the following:

Some years ago I hacked together a .config/gtk-3.0/gtk.css which mainly gave me some better visible difference of the windows headers bars between active windows (where I took some blueish colour) and inactive ones (where I took some grey).

Looks like:

/******************************************************************************
 * Client-Side Decorations (CSD) For Windows                                  *
 ******************************************************************************/
/*Set the headerbar colour and window shadow for active windows.
 * 
 * If the `background-color`-property would be used, the `background-image`-
 * property would need to be set to `none` or `unset`.*/
window.csd headerbar
{
	border-color: #2d76a2;
	background: #3580bf linear-gradient(to top, #3487ba, #358cbf);
	box-shadow: inset 0 1px rgba(90, 179, 231, 0.8);
}


/*Set the headerbar colour, transition effect and window shadow for inactive
 *windows.*/
window.csd headerbar:backdrop
{
	border-color: #d5d0cc;
	background-color: #f6f5f4;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
	transition: 200ms ease-out;
	background-image: none;
}




/*Disable the shadow of the headerbar button symbols for active windows.*/
window.csd headerbar button
{
	-gtk-icon-shadow: none;
}




/******************************************************************************
 * Server-Side Decorations (SSD) For Windows                                  *
 ******************************************************************************/
/* • Any changes to SSDs require a restart of the desktop environment to take
 *   effect.
 * • The SSDs seem to be also used by GTK2.
 */


/*Set the headerbar colour and window shadow for active windows.
 * 
 * If the `background-color`-property would be used, the `background-image`-
 * property would need to be set to `none` or `unset`.*/
window.ssd headerbar.titlebar
{
	border-color: #2d76a2;
	background: #3580bf linear-gradient(to top, #3487ba, #358cbf);
	box-shadow: inset 0 1px rgba(90, 179, 231, 0.8);
}


/*Set the headerbar colour, transition effect and window shadow for inactive
 *windows.*/
window.ssd headerbar.titlebar:backdrop
{
	border-color: #d5d0cc;
	background-color: #f6f5f4;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
	transition: 200ms ease-out;
	background-image: none;
}




/*Disable the shadow of the headerbar button symbols for active windows.*/
window.ssd headerbar button
{
	-gtk-icon-shadow: none;
}




/******************************************************************************
 * GNOME Terminal                                                             *
 ******************************************************************************/
/* Add a border at the left and bottom sides of the window in order to visualise
 * the size of the window (in particular when overlapping with other windows of
 * the same colour, for example other terminals).
 * Assuming that a vertical scroll-bar is always displayed at the right side, no
 * border is added there.
 * 
 * See also
 * https://gitlab.gnome.org/GNOME/gnome-terminal/-/issues/7976#note_2053437 and
 * following. */
terminal-window:not(.maximized):not(.fullscreen):not(.tiled) terminal-screen-container box
{
	border-bottom: 1px solid silver;
	border-left: 1px solid silver;
}

This is - apparently - even auto-magically picked up by GTK2.

First, if I do/use anything wrong above, or could be done better… don’t hesitate to tell me.

Second, with more and more programs ported to GTK4, I tried to adapt the whole thing for that, which proved however to be a bit more difficult.

So far I came up with this, with partially works:

/******************************************************************************
 * Client-Side Decorations (CSD) For Windows                                  *
 ******************************************************************************/
/*Set the headerbar colour and window shadow for active windows.
 * 
 * If the `background-color`-property would be used, the `background-image`-
 * property would need to be set to `none` or `unset`.*/
window.csd headerbar,
window.csd windowhandle box
{
	/* This is `Default-light.css`’ colour `theme_fg_color`.
	 * It’s (re-)set as this CSS is used for all modes (including dark).*/
	color: #2e3436;
	
	background: #3580bf linear-gradient(to top, #3487ba, #358cbf);
}


/*Set the headerbar colour, transition effect and window shadow for inactive
 *windows.*/
window.csd headerbar:backdrop,
window.csd windowhandle:backdrop box
{
	/* This is `Default-light.css`’ colour `theme_unfocused_fg_color`.*/
	color: #929595;
	
	background-color: #f6f5f4;
	transition: 200ms ease-out;
	background-image: none;
}




/******************************************************************************
 * Server-Side Decorations (SSD) For Windows                                  *
 ******************************************************************************/
/* • Any changes to SSDs require a restart of the desktop environment to take
 *   effect.
 * • The SSDs seem to be also used by GTK2.
 */


/*Set the headerbar colour and window shadow for active windows.
 * 
 * If the `background-color`-property would be used, the `background-image`-
 * property would need to be set to `none` or `unset`.*/
window.ssd headerbar.titlebar
{
	background: #3580bf linear-gradient(to top, #3487ba, #358cbf);
}


/*Set the headerbar colour, transition effect and window shadow for inactive
 *windows.*/
window.ssd headerbar.titlebar:backdrop
{
	background-color: #f6f5f4;
	transition: 200ms ease-out;
	background-image: none;
}

Now what doesn’t work is mainly:

1. For the CSD/backdrop-case, when as background-color: I’d chose something more solid, like green, then the actual colour of an inactive window isn’t green but a somwhat faded version of that.
   The same happens on the (font) color:.

   When I set transition: none; then I even shortly see the full solid greenbut then fades out nevertheless.

2. What I can’t get working at all: with my GTK 3 config, the active window had a surrounding shadow, but inactive ones had no shadow at all.
   With GTK 4, active ones do have a shadow, but inactive ones as well (albeit a smaller one).
   I’d like to get rid of that smaller one completely.

3. The transitions kinda don’t work. I mean when I set a much longer transition: 2000ms ease-out; then I see basically like two consecutive transitions. First a fast one, where I get a dim version of my above blueish colour… then a slow one where it fades out to the dim green.

Now some questions:

4. Is SSD with GTK4 even still a thing? Or could I just get rid of the window.ssd cases?

5. Why do I need background-image: none; (it looks wrong if I don’t set it… for both GTK 3 and 4)?

6. Is my selection right?
   I first tried with only window.csd headerbar respectively window.csd headerbar:backdrop, like I do with GTK 3. While that worked for many (GTK 4) progs, it didn’t for some, in particular not for gnome-charcters, gnome-system-monitor and yelp.
   Without the additional selection of window.csd windowhandle box (and it’s :backdrop counterpart) I got some white stripes in the header bars, like:

   
   
   (above and below the bar from left to right)
   
   
   (above and below the bare, but only on the left side.

   Actually, I can completely drop the window.csd headerbarand it’s corresponding :backdrop selector and it will work with just the ones on windowhandle box.
   But are these the proper ones?

7. I needed to drop the box-shadow: from my original GTK 3 CSS, cause with that it looked weird on the above special programs:

   <no image, as the system forbids new users to post more than two images o.O>

   (these spurious brighter extra lines).
   No idea why these come.

Thanks
Chris.

[calestyo (Christoph Anton Mitterer)]

(but it just let’s me do an extra post with the 3rd image )