Numix-based themes and mate-dock-applet

[cellularlupus]

In versions of oomox newer than 1.6.0, the mate-dock-applet uses the background color for windows rather than the mate-panel background color when using numix-based themes.

Here's a screenshot of the mate-dock-applet with a numix-based theme exported from oomox 1.6.0

and here's a screenshot of the mate-dock-applet with a numix-based theme exported from oomox 1.6.2

I've tried enabling the "change panel color to match wallpaper" and "change color of dock's panel only" settings in the mate-dock-applet's preferences to see if that makes a difference, but the background remains the same.

mate-dock-applet is version 0.87 mate-desktop is version 1.20.3 i'm using ubuntu 18.10

[actionless]

could you please bisect on which version/commit that behavior got changed?

[actionless]

and also usually panels using the same color as CSD/menu while on your screenshot i see you're changing window background color

[cellularlupus]

i went through each commit between 1.6.1 and 1.6.2 and the behavior started with this commit https://github.com/themix-project/oomox/commit/32ea1029b762afe3a15b27ec2242871e7d0f189f

[actionless]

please try setting Menu and Text backgrounds to Red and Blue colors accordingly in your theme and see what will happen

[cellularlupus]

[actionless]

yeah, it looks as intended, on other DE's panel is also themed the same as menubar/CSD

[actionless]

hint: you can generate separate theme just for mate-panel and run mate-panel as GTK_THEME=theme_name mate-panel

[actionless]

or your point was not about panel itself but about the area at the left side of the panel, with some icons?

[actionless]

could you get with gtk inspector to that part of the panel to see what is it's layout? because in the commit you are pointing the only meaningful change was restyling of GtkViewport (and the result on your screenshot looks related to this change)

but it's quite unusual to put it on some panel since it's usually used for some scrollable areas

so what i gonna do in order to solve this issue, to add a style definition for case when GtkViewport is on the panel, so for that i need to know the widget layout of the panel

[cellularlupus]

the widget that's showing this behavior is the mate-dock-applet which can be found here https://github.com/robint99/mate-dock-applet

i've tried using gtk inspector but i think mate's panel works different than other desktop environments. when running the panel with the gtk inspector, the only parts of the panel i can select are separators, launcher icons, and areas of the panel with no widgets.

i ran mate-panel with the GTK_THEME variable set to a dark theme with a dark grey menu/toolbar background, and with my system theme set to the one in my last comment and here's what it looks like:

[actionless]

and if you selecting some, let's say, separator on the panel and go to CSS nodes what it the top level node?

[actionless]

i also came up with alternative approach, instead of adding exception i made selector for viewport more specific

please check if it helps

[actionless]

oomox_1.7.2.3-8-gc6f3e342_18.10+.deb.gz

[cellularlupus]

here's css nodes in gtk inspector when selecting a separator

i tried the new version but the behavior is still happening

[actionless]

on CSS tab of inspector try adding:

    #PanelApplet viewport {
background-color: #00ff00;
}

[cellularlupus]

doing that doesnt seem to have an effect on anything

[actionless]

MatePanelAppletFrameDBus viewport {
background-color: #00ff00;
}

?

[cellularlupus]

still nothing

[actionless]

PanelToplevel viewport {
background-color: #00ff00;
}
``` ?

[cellularlupus]

also nothing

i've tried substituting a bunch of other css nodes, but nothing seems to make any visual difference.

[actionless]

weird, mb try pause and unpause css override?

[cellularlupus]

i've also tried that

[actionless]

and if you add all those snippets to ~/.config/gtk-3.0/gtk.css instead of inspector? it seems gtk inspector works somehow weirdly with that panel

[nana-4]

I can reproduce this. Here's CSS Selector in my GTK+ Inspector when selecting the white background:

(Actually viewport has the background-color, not grid.)

As you can see from the screenshot, 85bbd12d71cb85ae0e7a45a4af6c0a75ecc6f940 does not fix this, unfortunately.

FYI, most other themes (including Numix, Adwaita, Materia, Arc, etc.) don't have background-color in viewport. I wonder if you can remove that definition from the theme.

[actionless]

@nana-4

and if applying

#PanelApplet viewport {
background-color: #00ff00;
}

or

PanelApplet viewport {
background-color: #00ff00;
}

makes any difference?

[actionless]

@nana-4 about background-color: i've double checked against Arc and Adwaita -- you right, instead of styling viewport itself they styling viewport frame

i'll change it in the same way then

btw Materia is not styling it and idk if it's purposely or not

[actionless]

please check now:

oomox_1.7.2.3-11-g10088793_17.04+.deb.gz

oomox_1.7.2.3-11-g10088793_18.10+.deb.gz

[cellularlupus]

that fixed it, thanks

[actionless]

:fireworks:

[nana-4]

@actionless

makes any difference?

Yeah, both of them change the background-color as expected.

btw Materia is not styling it and idk if it's purposely or not

Actually Materia also has that style as well as Adwaita and Arc :wink:

FYI, all those themes are only styling border-style: none in viewport.frame, but not having background-color, color and border styles.

Just out of curiosity, for what did you style background-color, etc. in viewport? Perhaps there is more appropriate styling than 9034c4236b8cf48203749cdb11ff442fc7ac22b2.

[actionless]

as an example you can open gradio app and compare it across the named themes

[nana-4]

I see. It seems gradio app has .content-view style class to change the background-color. This is why Adwaita and Arc change the background-color and Materia doesn't.

I'd recommend you style those colors with .content-view instead of 9034c42. Since notebook scrolledwindow viewport, :not(notebook) scrolledwindow viewport frame are still quite common, other unexpected styles may happen with another apps/components.

[actionless]

sure thing, thanks for your investigation!