Opera-style mouseover effects in GTK theme?

[taprobane99]

Hi,

Is it possible to get the nice red rectangle on mouseover of the close button that Opera has on Linux, for the GTK theme?

I would like Firefox to have the same window decoration style as Opera.

[Zren]

I've been wondering why the GTK assets in ~/.config/gtk-3.0/assets/ do not draw the red bg fill on hover like Qt app decorations. Seems there's some extra magic in the gtk svg renderer:

• https://invent.kde.org/plasma/kde-gtk-config/-/merge_requests/2/diffs#2477f19a27c954bf8ac0d02c4d850f85b6422ff9_0_52
• https://invent.kde.org/plasma/kde-gtk-config/-/blob/master/kded/kwin_bridge/dummydecorationbridge.cpp#L35

Looks like there's special cases for Breeze and Oxygen to disable the animations, however since Material uses a different config file, it is not getting disabled before rendering. I'll need to check if gtk rendering when setting the button animation property in Button.cc. Gotta reboot to restart the kded5 process to test.

[Zren]

So uh, it doesn't look that good (which I expected).

[taprobane99]

Is it possible to fix it, or even have a different kind of mouseover effect? It's a bit sad when there's absolutely no reaction on close, minimise. Although strangely, the maximise button does react.

(speaking about Firefox, other apps may be different)

[Zren]

• I'm tempted to try drawing a 2nd thicker line underneath in the red color to give the white icons an "outline". That might be the easiest solution that looks good.
• There isn't enough room to add a circular fill/outline without making the icons smaller.
• I could colorize the icons on hover. Perhaps using SierraBreezeEnhanced colors as a base. Yellow for minimize. Green for minimize/maximize. Red for Close.
  

[Zren]

For Firefox specifically, I use a userChrome.css to get it looking nice. I still need to update it for Firefox v89 though. It uses the close buttons bundled with firefox for when the window is fullscreen.

• https://userbase.kde.org/Plasma/Tips#Firefox_.28userChrome.css.29
• https://gist.github.com/Zren/37bed9ed257347d97233273f32287707
• https://old.reddit.com/r/FirefoxCSS/

[taprobane99]

the SBE solution does look nice but then I don't think it would match with all the other windows using Qt Material decorations.

I think red should only be used for the close icon, and perhaps a light gray for the others? Maybe changing the colour of each of the symbols on mouseover rather than resizing or fill effects.

[Zren]

Using the SierraBreezeColors worked okay, except for minimize. The yellow has terrible contrast with the normal gray/white color.

[taprobane99]

For me it's not such a great solution as I don't like yellow/red/green in general. Unfortunately I don't have any other ideas at the moment.

[taprobane99]

I have this old program running on Windows which uses gray highlights. Maybe gray,gray,red could be an elegant solution?

Although, the problem is that a gray headerbar is also part of the Breeze look!

[taprobane99]

So this code in gtk.css gives me nice large circular buttons on mouse hover, using the default theme which is Adwaita. So usability is similar to Opera as it's easy to hit the buttons.

However, the non-hover graphics are still tiny, which does look a little odd!

Perhaps there's something in the Adwaita theme and this code which helps you?

button.titlebutton.close {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
min-height: 40px;
min-width: 40px;
}
button.titlebutton.maximize {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
min-height: 40px;
min-width: 40px;
}

button.titlebutton.minimize {
padding-top: 0px;
padding-bottom: 0px;
padding-right: 0px;
padding-left: 0px;
min-height: 40px;
min-width: 40px;
}

[trmdi]

For Firefox specifically, I use a userChrome.css to get it looking nice. I still need to update it for Firefox v89 though. It uses the close buttons bundled with firefox for when the window is fullscreen.

* https://userbase.kde.org/Plasma/Tips#Firefox_.28userChrome.css.29

* https://gist.github.com/Zren/37bed9ed257347d97233273f32287707

* https://old.reddit.com/r/FirefoxCSS/

Do you know why Material decoration is not applied to Firefox on Wayland? Is it a known bug?
Edit: https://bugs.kde.org/show_bug.cgi?id=438898