Opera-style mouseover effects in GTK theme?

Zren / material-decoration

Material-ish window decoration theme for KWin, with LIM, based on zzag's original design.

GNU General Public License v2.0

197 stars 17 forks source link

Opera-style mouseover effects in GTK theme? #50

Open taprobane99 opened 3 years ago

taprobane99 commented 3 years ago

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 commented 3 years ago

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:

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 commented 3 years ago

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

2021-06-07___15-44-32

taprobane99 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.

2021-06-07___16-09-03

taprobane99 commented 3 years ago

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 commented 3 years ago

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

2021-06-08___13-24-51 2021-06-08___13-25-25 2021-06-08___13-25-39

taprobane99 commented 3 years ago

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 commented 3 years ago

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

IMG_20210608_201807

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

taprobane99 commented 3 years ago

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 commented 3 years ago

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