GTK3.24 -> GTK4.1 Theme migrating hints

#1

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.

Bildschirmfoto-aero
Bildschirmfoto-aero.png1680x949 195 KB
Bildschirmfoto-aero2
Bildschirmfoto-aero2.png1680x949 205 KB

#2

aero-print
aero-print.png1680x949 117 KB
Bildschirmfoto_2021-02-14_03-59-28
Bildschirmfoto_2021-02-14_03-59-28.png1680x949 191 KB

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:}

#3

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.

#4

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?

#5

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.

#6

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.

#7

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 ā€¦

#8

Yeah, just remember to set the other values to none or transparent in gtk4.
Also donā€™t forget :hover etc.

#9

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

#10

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.

#11

So, every new gtk4 app will have csd decoration. No more single title bars?

#12

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.

#13

Default is nearly no borders and a transparent shadow for Windows in adwaita.

#14

There will be a bunch of linux-diehards not happy about that :wink:

#15

Ok, I understand

#16

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?

#17

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.

#18

Basically, Etienne, everything on top will be a headerbar. No title bar.

#19

Ok, like in GTK3 ā€¦

#20

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