Context Menus

[mangini210]

Excellent theme! The only difference I notice are context menus. Can something be done about it?

[lassekongo83]

Unfortunately not. GTK3 and GTK4 are different when it comes to menus. Trying to mimic it would most likely cause breakage in various apps.

[mangini210]

Just to let you know I modified the context menus to look like libadwaita and I haven't seen any breaking yet.

[davidphilipbarr]

Do you have a diff or PR for this I'd like to test it out, thanks.

[mangini210]

Sorry I'm new to this stuff. I only replaced the whole menus section in the gtk.css file with the one from the Orchis theme, lol. I then did some minor tweaks: increasing padding and border radius from menu items.

[davidphilipbarr]

Ok I can see it in orchis i'll check libadwaita values see if i can create a pr if testing goes ok.

[davidphilipbarr]

I'm struggling a little a little to get the menu borders rounded with the shadows but i have this working in my .config/gtk.css

    menu, .menu, .context-menu { margin: 4px; padding: 6px 6px; }
    .csd menu, .csd .menu, .csd .context-menu { border: none; border-radius: 6px; }
    menu menuitem, .menu menuitem, .context-menu menuitem {margin: 0;border-radius: 6px;padding: 7px 6px;}
    menu separator {margin: 3px 0}

i'll try and integrate it into the sass and build at some point, but native gtk apps seem ok, electron apps not so much.

[mangini210]

Try this for the shadows:

.csd.popup decoration {
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12); }

What do you mean with electron apps? Can they be themed?

[mangini210]

I think this would be the whole thing:

menu, 
.menu, 
.context-menu { 
  margin: 4px; 
  padding: 6px 6px; 
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.csd menu, 
.csd .menu, 
.csd .context-menu { 
  border: none; 
  border-radius: 12px; 
}

menu menuitem, 
.menu menuitem, 
.context-menu 
menuitem {
  margin: 0;
  border-radius: 6px;
  padding: 7px 6px;}

menu separator { margin: 6px; }

.csd.popup decoration {
  border-radius: 12px; 
  box-shadow: 0 2px 2.4px -1px rgba(0, 0, 0, 0.2), 0 4px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 6px 0 rgba(0, 0, 0, 0.12);
}

[davidphilipbarr]

cool looks like i was missing the popup decoration.

I'm just using global overrides, so i'll deal with the colours when i merge locally and create a pr see if that helps get this un-wonted ;) i think your separator margin is more accurate also.

the electron apps like chrome and visual studio look like this:

compared to this (gtk3 left, 4 right)

I'm sure there is a way to target electron apps. I think the menus looks more consistent and don't cause and issues outside of electron apps, so would consider it an improvement?

[davidphilipbarr]

https://github.com/davidphilipbarr/adw-gtk3/tree/context-menu