nana-4 / materia-theme

A Material Design theme for GNOME/GTK based desktop environments
GNU General Public License v2.0
3.42k stars 255 forks source link

Global-search results in Builder has a poor visibility #442

Closed monday15 closed 4 years ago

monday15 commented 4 years ago

Hey, @nana-4, please note, that I dont use Builder or Materia - I also maintain a theme with light selection background. I couldn't find a legit solution, may be you have an idea how to fix this. This is like very low priority bug. And thanks for a well-maintained/documented theme!

Here is how Global search in Builder 3.34 looks (flatpak).
b1

Text color is hardcoded somewhere in builder, I could only found out that this is revealer row.activatable:selected - search "thing" is not clickable/visible with Inspector. Also, this revealer is not a part of 'window'. Ended up with adding a style for revealer row.activatable and right after then overriding it with window revealer row.activatable (so it doesn't affect other apps [i hope so], for example, fractal's sidebar). It should be a cleaner solution for the issue.

Also, noticed two minor issues: with regular Materia search icon in headerbar is invisble; key combination color in tooltip looks wierd. b4

nana-4 commented 4 years ago

Thanks for your report and investigation!

Text color is hardcoded somewhere in builder

Yeah, I found the CSS in libdazzle repo :)

Ended up with adding a style for revealer row.activatable and right after then overriding it with window revealer row.activatable (so it doesn't affect other apps [i hope so], for example, fractal's sidebar).

Since the color is (unnecessarily) hard-coded, I think overriding it doesn't work in gtk.css (i.e. themes), even if it works in the Inspector. Instead we can style a darker background-color for it, though.

with regular Materia search icon in headerbar is invisble

I'll try to add a workaround. (But maybe it should be fixed in the upstream, because that white background doesn't look great even with Adwaita IMO...)

key combination color in tooltip looks wierd.

Thanks, I'll fix that :)

monday15 commented 4 years ago

Since the color is (unnecessarily) hard-coded, I think overriding it doesn't work in gtk.css (i.e. themes), even if it works in the Inspector. Instead we can style a darker background-color for it, though.

Yep, changing color doesn't work, I've changed background-color.

I'll try to add a workaround. (But maybe it should be fixed in the upstream, because that white background doesn't look great even with Adwaita IMO...)

I read (somewhere in commit messages) that developers want to make this button more entry-like, that's why it has weird look/style.

Many thanks for libdazzle link with that widget "address"! Exactly what I was looking)

p.s.: One more thing - Polari app has similar behaviour in sidebar - color is hardcoded and background-color comes from row:selected style. Since Materia doesn't have a style for Polari, consider adding it - something like code below (it was made for 3.30, i didn't test it after).

.polari-room-list row,
.polari-room-list row * {
  &:selected {
    background-color: $selected_bg_color;
    color: $selected_fg_color;

    label, label:selected { color: $selected_fg_color; }

    &:hover { background-color: darken($selected_bg_color, 5%); }

    &.has-open-popup { background-color: $selected_bg_color; }
  }
}
nana-4 commented 4 years ago

Thanks. I also added a workaround for Polari as well.

monday15 commented 4 years ago

Workaround for Builder (dzlsuggestionpopover > revealer row.activatable:selected) should also have separate background-color for hover state (iirc, otherwise it will inherit it from regular row:selected:hover).

nana-4 commented 4 years ago

The hover style is already set in other place with box-shadow: inset 0 0 0 9999px alpha(currentColor, 0.08) as an overlay :)

builder

monday15 commented 4 years ago

Ahhh, ok)