This list will grow in future:
GTK3.24 button:hover GTK4.1 button:hover, button:checked:hover
GTK3.24 button:active GTK4 .1 button:active,button:checked:active
GTK3.24 .menuitem:hover GTK4 .1 modelbutton.flat:hover, modelbutton.flat:selected
GTK3.24 menubar > menuitem:hover GTK4.1 menubar > item:selected
GTK3.24 progressbar > progress GTK4.1 progressbar > trough > progress
GTK3.24 headerbar, toolbar, primary-toolbar GTK4.1 toolbar
GTK3.24 .background .titlebar GTK4.1 titlebar
NOTE: ONLY SEEN FROM THE CSS DESIGN, NOT FROM INTERNAL GTK CODE
And thats how far i did progress till now.
1 Like
GTK3.24 combobox menu GTK4.1 combobox popover, dropdown popover
GTK3.24 progressbar.horizontal trough GTK4.1 progressbar.horizontal > trough
GTK3.24 menuitem {padding: } GTK4.1 modelbutton {min-height:}
GTK4.1
button.close
button.maximize
button.minimize
On gtk3.24 these where titlebuttons.
on gt 4.1 a background image is not transferred to another state like :insensitive.
I’ve been busy trying to port one of my themes to GTK4 based on Adwaita. But it is hard to test it, when there is nothing to test it on.
Originally I figured that
windowcontrols button.close {
would be the code for the title-buttons.
Yet you use
button.close{
Has this changed?
And what do you mean with ‘a background image is not transferred to another state’?
And can you use SVG’s as title-buttons on GTK 4?
1 Like
It works atm. Did get the name while using GTK_DEBUG=interactive (formerly gtkparasite.)
For the state thing: am not english native speaker so lets try an simple example:
button {
background-image: linear-gradient(to bottom, blue, green);
&:hover{background-color:red}
}
On GTK3 button:hover is blue on top and green on bottom.
On GTK4 button appears red. Unless you define a bg image for button:hover.
To answer the svg question:
button.close{
color:rgba(0,0,0,0);
-gtk-icon-shadow:none;
border-style:none:
box-shadow:none;
background-position:center center;}
Then you might load the svg with bg_image url string. But don’t know how this affects hidpi scaling.
Alternative would be using -gtk-icon-source.
Well, in GTK 3 it is this:
headerbar button.titlebutton.close,
.titlebar button.titlebutton.close {
background-image: -gtk-scaled(url(“theme-graphics/title-buttons/titlebutton-close.svg”), url(“theme-graphics/title-buttons/titlebutton-close@2.svg”));
}
The second graph is for 200% scaling.
So, in GTK 4 it should be something like this?
button.close {
background-image: -gtk-scaled(url(“theme-graphics/title-buttons/titlebutton-close.svg”), url(“theme-graphics/title-buttons/titlebutton-close@2.svg”));
}
Which is basically simpler then before with GTK 3 …
Yeah, just remember to set the other values to none or transparent in gtk4.
Also don’t forget :hover etc.
I understand.
Basically background- color and background-image are on the same level. While it used to be background-image that overtakes background-color.
Thanks
On the same level background image is still preferred over background-color.
@etiennegnome
The window decoration is now included in gtk4 applications as csd. Its dofferent from gtk3. Some very new gtk3 apps had it too.
So, every new gtk4 app will have csd decoration. No more single title bars?
It doesn’ t need or accept decoration from a window manager anymore. All gtk4 apps would use csd. In fact there wont be something like gtk4-nocsd. Cause its dropping old outdated concepts from x11.
Default is nearly no borders and a transparent shadow for Windows in adwaita.
There will be a bunch of linux-diehards not happy about that 
1 Like
I don’t understand what you are saying.
Does this mean that GTK4 no longer handles (or at least differently) window decorations ?
Does this mean that the Gnome team is returning to the principles of the old GTK2 ? so the management of decorations is left to Gnome-shell, for example?
1 Like
To put it simply in GTK4 the application draws the window decoration itself. If you use xfwm, sawfish icewm or kde/kwin, pekwm the application has every time the same window border and decoration cause the GTK4 application draws it on its own. A dark theme app would mostly have a dark window decoration and a light mode a light decoration while using the same theme.
Basically, Etienne, everything on top will be a headerbar. No title bar.
If you look at the actual newer gtk3 version yes maybe. But now these decorations are a have to. In gtk3 you could use client side decoration or disable it woth gtk3-nocsd. Gtk4 its gotten mandatory and every window has it. Even those with menubar below these bars
