jnsh / arc-theme

A flat theme with transparent elements (actively maintained fork)
GNU General Public License v3.0
900 stars 77 forks source link

How to change window box-shadow for apps like Rythmbox? #161

Closed ghost closed 2 years ago

ghost commented 2 years ago

Hi there,

I built the theme a couple of months ago so I cannot be sure my issue hasn't already been fixed... I am reluctant to update due to making a few modifications, but I will if that's the best course of action.

Basically, I use Librewolf and I have made my own userChrome to make it slightly more consistent with the theme (which I am happy to provide - but I am no coder that is for sure.) I noticed that Librewolf's window shadow didn't match the gtk3 apps such as (terminal, gedit, nautilus etc.)

So I managed to extract the css, and relink the resources to the gresource document and I made the shadows for the gtk3 apps match those of Librewolf and other apps like Rythmbox for example. I'm fairly happy with it, but looking around I don't believe Horst the original creator of the theme would be too happy with the darker, tighter shadows...

My problem is the gtk3 apps show a shadow when tiled (and they did before I made any modifications too,) whereas other apps like Librewolf/Rhythmbox don't show this shadow unless it is the only app that is tiled.

I'm happy to make some edits to my own personal theme files - but I have zero idea which files affect Librewolf/Rhythmbox's shadows (i.e is it metacity? or gtk2 or something else?) It looks like the shadow is there it just doesn't display over the other tiled window when in focus.

If this is the wrong place for my post, or I'm using the issues section not as it was intended, please accept my apologies. Below are some picture.

Thanks Rob

rhythmbox focused no shadow shown gtk3 with shadow (I modifed the look) Rhythmbox Shadow is there when no app is next to it

jnsh commented 2 years ago

First of all, did you ensure (as the issue template asked you to) that this doesn't happen when using the default (Adwaita) GTK and Shell/WM themes? If this is not an issue when using those, I can try to fix this in Arc.

If you're merely looking for a general assistance on editing themes, this is not the right place.

ghost commented 2 years ago

Hi Jnsh, Thanks for the reply, to be honest I didn't check against the Adwaita theme (sorry.) I did compare it against the Matcha theme that come with Manjaro (but obviously that's not the default.)

I've just had a look at Adwaita, when in split screen shows no shadow for GTK3 apps whatsoever, it does show a shadow for the other apps like Rhythmbox, eg the bottom picture just with Adwaita, but not when another window is tiled next to it.

Coincidentally the Matcha theme does show a shadow for Rhythmbox when tiled and focused.

Thanks, Rob

jnsh commented 2 years ago

Thank you for testing.

I attempt to keep things in sync with Adwaita (unless that somehow conflicts the original visual style), so I'm going to update GTK3 to follow its behavior for the tiled shadows (i.e. no shadows for tiled windows). Refactoring the GTK3 theme against current Adwaita is already planned for some time in the future, but it's possible that I can take a look at the shadows even before that.

For the Rhythmbox/Librewolf situation: The shadows can derive from three sources:

  1. GTK (or other toolkit), drawing it's own decorations including the drop shadow. This is the case for client-side decorated GTK applications, such as Nautilus.
  2. The decorations drawn by the shell/compositor/window manager. In GNOME they come from mutter, only for applications without client-side-decorations. The styling for it (including shadows) comes from the GTK3 theme (GTK4 in the future).
  3. The application asks for no decorations from the WM, and draws the shadow by itself, individually from any GTK theming. I think chromium is one example.

With Adwaita GTK theme in GNOME Shell, any misbehaving application should be the third case. However, Rhythmbox seems to be using window decorations from mutter, and therefore it should be drawing the shadows correctly.

On my system, the mutter decorations seem to be working correctly (no shadow on tiled windows) with Adwaita, when testing with Transmission and Gimp 2.99. Also, Firefox 94 has no shadow for tiled windows with Adwaita on my system, so I'm not sure what Librewolf is doing differently.

ghost commented 2 years ago

Thanks for your comment.

To emulate the other apps' shadows, I changed my css to: decoration { border-radius: 4px 4px 0 0; border-width: 0px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 2px 5px 2px rgba(0, 0, 0, 0.35); margin: 10px; } decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.11), 0 2px 5px 2px transparent, 0 1px 4px 1px rgba(0, 0, 0, 0.18); transition: 200ms ease-out; } I doubt that's a design decision you'll want to follow up. But you can have a look and make up your own mind.

Hopefully, to make your life a little easier to make arc follow Adwaita, I added (I changed the shadows back to how the theme would normally handle them - without my edit above): ` .tiled decoration { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 transparent; }

/ EDIT: this bit is irrelevant sorry.
.tiled decoration:backdrop { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 8px 0 transparent, 0 5px 5px 0 transparent; transition: 200ms ease-out; }
/`

I'm sure there is a more elegant way but this worked find for me, I also noticed other themes used .tiled-left, .tiled-right etc. but again the above seems to work just fine.

With the second code everything works like adwaita... I just wish there was a way to specify a shadow for the apps such as nautilus when the app is tiled but isn't tiled against another app.

Screenshot from 2021-11-11 12-16-04 I just think it looks a bit goofy - obviously that's not your fault!

I actually don't mind the shadows being shown when nautilus for example is tiled against any other app with focus - for me it's just a question of making them all work (or look like they work) like one. I'll have think and if I can come with a solution I'll let you know but I think it's probably easier to just let it follow adwaita as you say.

Thanks again, Rob

jnsh commented 2 years ago

With the second code everything works like adwaita... I just wish there was a way to specify a shadow for the apps such as nautilus when the app is tiled but isn't tiled against another app.

I don't think this is possible when the application is drawing it's own shadows, since there's no way for it to know whether there's an tiled application next to it. You could add a feature request for this to upstream GTK, but it would probably be complicated to implement, since it'd require for the window manager to signal the application about tiled window next to it, and I'm not 100% sure if that's even possible in practice.

As a side note, since you mentioned extracting CSS files from the gresource to edit the GTK theme. Generally, it's best to edit the theme source files, and then recompile the theme. This way you can save your changes to a git commit, and still update changes from upstream. However, with GTK3 and GTK4 you can simply inject your CSS changes via ~/.config/gtk-3.0/gtk.css and ~/.config/gtk-4.0/gtk.css, therefore making no modifications to the actual theme.

jnsh commented 2 years ago

So I have removed shadows from tiled windows in GTK 3 as well with https://github.com/jnsh/arc-theme/commit/928b8856c04bea3c3c27e5c02dd83d089e324d4d, so they are now consistent with GTK 4.

Again, no shadows on tiled windows is what default GTK themes does, so it makes sense to do the same. Apparently removing drop shadows should improve performance as well. If anyone wants the shadows back, they can be reapplied with CSS injections, as explained in the above post.

I don't think there's much else that could be done in regards of this issue so I'm closing this.