Yaru: Mate: OSD level scale invisible

[geckolinux]

Hi there, first of all, thanks for this very nice theme.

I'm using Yaru 20.04 on openSUSE Tumbleweed and Leap 15.2 with Mate 1.24.0. There is a problem where the OSD horizontal fine-grained level/scale is invisible. Maybe some code could be borrowed from Numix, as it looks perfect under Numix.

---

Yaru (light and normal all behave the same):

---

Numix:

[clobrano]

Hi @geckolinux,

this doesn't seem to be our OSD level. Consider that OSD belongs to the gnome-shell, while it seems you are selecting the Gtk theme only

[geckolinux]

@clobrano Thanks a lot for the fast reply.

Hmm, I'm not exactly sure where the OSD comes from then? These are the only Gnome packages I have installed:

gnome-bluetooth gnome-disk-utility gnome-icon-theme gnome-keyring gnome-packagekit libgck-modules-gnome-keyring libgnome-bluetooth13 libgnome-desktop-3-19 libgnome-desktop-3_0-common libgnome-keyring0 patterns-gnome-gnome_yast patterns-gnome-sw_management_gnome

As far as I know, Mate just ignores any themes in the gnome-shell subdirectory of a theme.

The OSD speaker icon does appear to be the same between Numix and Yaru, but I assumed the visibility problem was just due to a transparency definition in Yaru, because it does change style by just switching the GTK theme.

[Feichtmeier]

I guess mate is somehow looking into gtk.css
There we have styling for .osd style class elements, which are in gtk3 mostly stuff like tooltips or button.osd in gnome videos.
I think that numix is optimized for the mate... shell?... and thus includes a styling for those "osd progress bars".
Currently we do not include any mate specific style classes. See

970

[geckolinux]

@Feichtmeier Thanks a lot for the response.

I took a look at the Numix CSS hoping to copy some CSS from there. But there was osd scattered all throughout the file in so many places that I wasn't sure which if any would apply to Yaru. I wonder if there's a simple block of code that I could pull from there and place in my ~/.config/gtk-3.0/gtk.css ?

[Feichtmeier]

@geckolinux I really don't know the hierarchy of those OSD's in mate. Let's see what's in numix

https://github.com/numixproject/numix-gtk-theme/blob/15923f76331e71fbffbfd605458ea6fec5aca109/src/gtk-3.20/scss/widgets/_osd.scss#L55-L73

Maybe we could just add this to _apss.scss :thinking:

[geckolinux]

Hi @Feichtmeier thanks very much for looking into this!

For what it's worth, I tried adding that block of code to my ~/.config/gtk-3.0/gtk.css but it made no difference. Or could I test something by adding that directly to my Yaru theme's CSS?

[Feichtmeier]

This code is scss. You need to convert it to css to put it into gtk.css

[Feichtmeier]

Like

progressbar.osd {
margin: 2px;
min-height: 2px;
min-width: 2px;
}
progressbar.osd trough {
border-style: none;
border-radius: 0;
background-image: none;
background-color: transparent;
}

progressbar.osd progress {
border-style: none;
border-radius: 0;
background-color: white;
background-image: none;
}

[geckolinux]

Ah, I see. OK, I tried that block of CSS in my ~/.config/gtk-3.0/gtk.css as well as at the top of the Yaru gtk.css in /usr/share/themes and it doesn't make any difference. Anything else I could try?
Thanks a lot!

[Feichtmeier]

Well we need to know the hierarchy of that osd popup in mate. Maybe @flexiondotorg knows

[Feichtmeier]

Fixed with https://github.com/ubuntu/yaru/commit/6bb5b74e256abde3551bc73c7ecf70026285e0a6

[geckolinux]

@ Feichtmeier Excellent thank you very much!

[Feichtmeier]

@ Feichtmeier Excellent thank you very much!

Np, we're all pushing much stuff into this branch so a yaru mate theme will be available very soon.
You are welcome to try the branch already and report bugs :)