Harmonizing tooltips and jgmenu themes

johnraff · 2023-09-13 08:13:19

This is mostly for @hhh I guess.
I've done what I can on these nitty-gritty GTK things, but I think I've just about run out of steam. Those 7600 line gtk.css files that oomox produces are not easy to work with. Try a search on some promising name or colour value and you either get 800 places to check out, or zero.

Anyway:

1) tooltips
The dark theme is OK, but in the aqua-light theme the tint2 tooltips are dark - same as in the dark tint2s you made - but the GTK tooltips that the systray puts up are almost white, with a 1px pinkish border. Thinking they should be harmonized, I spent some time ferreting around that nice gtk file, and eventually found this section:

/***********
 ! Tooltip *
************/
.tooltip.background, .tooltip.background.csd,
tooltip.background,
tooltip.background.csd {
  background-color: #fff0ed;
  background-clip: padding-box;
  border: 1px solid #ff9e8b;
  border-radius: 5px;
  color: #222222; }
.tooltip *,
tooltip * {
  background-color: transparent;
  color: inherit; }

That seems to be controlling the systray tooltips, so I tried setting tint2 to match:

# Background 7: Tooltip
rounded = 0
border_width = 1
border_sides = TBLR
border_content_tint_weight = 0
background_content_tint_weight = 0
background_color = #fff0ed 100
border_color = #ff9e8b 100
background_color_hover = #000000 0
border_color_hover = #000000 0
background_color_pressed = #000000 0
border_color_pressed = #000000 0

#-------------------------------------
# Tooltip
tooltip_show_timeout = 0
tooltip_hide_timeout = 0
tooltip_padding = 8 8
tooltip_background_id = 7
tooltip_font_color = #222222 100
tooltip_font = Sans normal 10

At the same time, since picom is already handling the round corners, and tint2's rounding won't work without composition anyway, I set rounded = 0 for tint2, and later took it out of the GTK too. Although it worked without picom I didn't think it looked that pretty, especially when the tooltip came over a light-coloured area, so I propose setting border-radius: 0 in gtk.css too.

I've been checking the results in the 32bit system, with picom installed, and switching composition on and off to compare. The picom round corners look nice, but I think that if it's not available, then it's better to stick with plain square.

But the whitish tooltips didn't appeal all that much, so taking a hint from the dark-themed lightdm login box we're using, I tried going in the other direction - keeping the dark tint2 tooltips as you had set them and changing the GTK to match. I think that looks better to be honest, even in the light aqua theme. So:

/***********
 ! Tooltip *
************/
.tooltip.background, .tooltip.background.csd,
tooltip.background,
tooltip.background.csd {
  background-color: #292D31;
  background-clip: padding-box;
  border: 0px solid #ff9e8b;
  border-radius: 0;
  color: #d3dae3; }
.tooltip *,
tooltip * {
  background-color: transparent;
  color: inherit; }

What do you think?

EDIT: what I didn't think of at the time, is that changing the GTK like that affects all tooltips, not just the systray. So eg geany's tooltips are now dark too, even on that light theme. So it needs thinking about...

2) jgmenu
Sorry I'm out of time so that will have to be tomorrow.

Last edited by johnraff (2023-09-14 08:06:08)

hhh · 2023-09-14 01:16:44

Hey John, sorry I've been offline. My mom's husband (both 81, in wheelchairs and diapers) had surgery this week, been helpong them as much as I can.

Will take a look ASAP. Cheers, as much as I can muster!

Huh, just looked up several sources, and the Brits took 'cheers' from the old French word 'chiere', where it means "face", meaning let's face one another and acknowledge the company. The toast didn't mean 'happiness' until the 1700s.

Last edited by hhh (2023-09-14 01:17:41)

johnraff · 2023-09-14 01:50:16

^Hey, I'm sorry to hear that. Hope post-op turns out well.

I'll continue to post the jgmenu stuff I had (once I've checked it over again) but reply when you have the time.

In fact, I might just go ahead and make the small guesswork-based edits I had in mind, and later when you have a space to check it, we can change anything you'd prefer different. As long as it's done by the official release (soonish, with any luck).

Last edited by johnraff (2023-09-14 04:54:03)

johnraff · 2023-09-14 06:52:30

2) jgmenu

On 10th July I pushed the current jgmenu colours to GitHub without any explanation, as part of a commit called jgmenurc: add 3px padding instead of border. The colours up to that point were the Beryllium ones, so I've no idea where the new jgmenu colours came from. Did you provide a jgmenurc in one of your theming uploads?

Anyway, this is the jgmenurc we have currently:

tint2_look          = 0
csv_cmd             = apps
position_mode       = pointer
menu_margin_x       = 6
menu_margin_y       = 36
stay_alive          = 1
menu_width          = 134
menu_padding_top    = 24
menu_padding_right  = 3
menu_padding_bottom = 3
menu_padding_left   = 3
menu_radius         = 1
sub_spacing         = 6
item_margin_x       = 1
item_margin_y       = 1
item_height         = 21
sep_height          = 4
sep_halign          = right
font                = Sans 10
icon_size           = 16
arrow_string        = ›
arrow_width         = 8
color_menu_bg       = #e5d8d4 100
color_menu_border   = #e5d8d4 0
color_norm_bg       = #c8cfcb 00
color_norm_fg       = #222222 100
color_sel_bg        = #53a0b3 100
color_sel_fg        = #ffffff 100
color_sel_border    = #3c4244 100
color_title_bg      = #e5d8d4 100
color_title_fg      = #222222 100
color_title_border  = #e5d8d4 100
color_sep_fg        = #2b3030 100
sep_markup =
hover_delay         = 30
csv_name_format     = %n
menu_border         = 0

The menu you see on either the alpha or beta iso OOTB comes from that, and basically I think it's fine. One problem though is when a user clicks "Sync theme with OpenBox" or "Sync theme with GTK". Then jgmenurc gets changed, and won't go back to the original unless User fetches it from /usr/share/bunsen/skel.

GTK sync is pretty crude and only affects certain colours to try to match the current theme. It's better than nothing, and the colours it sets are pretty much the same as the default jgmenurc. GTK sync doesn't touch things like border size or title alignment.

The Openbox sync from the current theme's openbox-3/themerc does a lot more. The themerc we currently have in Boron-light-aqua has a lighter background colour and puts the titles in the centre, not on the right.

I don't know exactly where in that long gtk.css file the GTK sync is coming from, but the colours seem OK so let's leave it alone. That leaves openbox-3/themerc. I'd suggest tweaking it so that, even after running "Sync theme with OpenBox", jgmenurc stays the same as the OOTB file we ship, or BLOB might restore. There's not too much to change in fact:

The big one: menu.items.bg.color: #FFF0ED -> #e5d8d4
and: menu.title.text.justify: Center -> Right

We're not using a menu border, so:
menu.border.color: #e5d8d4
menu.border.width: 0

I do have a tentative suggestion - there's a pale green #c8cfcb in jgmenurc (unused, for color_norm_bg) which I tried setting in jgmenurc as color_title_bg = #c8cfcb 100 for titles and thought it looked OK. That could go in themerc as:
menu.title.bg.color: #c8cfcb

Jgmenu does do rounded corners even without picom, but in that case if you open the menu over a light background you see black triangles on the corners, so let's let picom handle it, in jgmenurc:
menu_radius = 0
And when composition is off, just have sharp corners.

There's one tricky issue with jgmenu, when running without composition: if you open the menu near enough to the RHS that part way down a nest of subfolders (like User Settings > Tint2 > Edit Tint2s > Running Tint2s > tint2rc) it has to fold back to the left, then the folded over menu is very difficult to distinguish from what's underneath. A fix is to add a 1px black border, but that spoils the appearance when composition with round corners is switched on. bunsen-configs-lite does ship its own jgmenurc so we could in principle add the 1px border there, and let users who add picom switch it off, or just leave it as it is and post a hint somewhere for no-composition users to add the border...

I think that might be it.

hhh · 2023-09-15 04:20:14

You've looked into this a lot more than I have! I haven't noticed a difference syncing jgmenu to either GTK or Openbox, I'll have to look harder.

Great work, go with what you have for now and hopefully I can look at it over the weekend.

OT: Post-op is getting better, for now, though the end is near. The fact that they are, with my help, not in a nursing home yet is remarkable. I'm proud to say, their quality of life since I moved here during hurricane Ian last September/October has improved 100%. Hot water restored by me, dishwasher fixed by me, clothes dryer fixed by me, house de-pooped by me, pantry de-mothed and food from 2017 thrown out by me, dog fed and walked by me, air-conditioning repair was $700 USD instead of $7,000 thanks to me, property maintenance up to HOA specs by me, healthy food cooked by me (though they still want fast food every fucking day it seems), on-line ordering instead of going to the market, me, entertainment centers calibrated so they can hear and see their shows properly, me, wheel chair for Ed purchased by me (he refused to use one before)... the list goes on. All while working a paying job at least part time for the year I've been here. And they rent the house, I'm not getting a property inheritance when my mom passes. Like I said, a bit overwhelming.

The real bitch of it is that neither my sister nor her unemployed husband, who live a half hour away, nor the three of Ed's children, who live between a 3 to 8 hours car drive away, have said anything to me about the noticeable difference when they visit. I don't blame them, they just take after Ed and my mom, two of the most self-centered people I have ever know.

Thanks for the good wishes.

Also OT: I've been meaning to update my avatar to something less potentially offensive to thin-skinned forum members, I'll do that before I do anything. Probably Hannibal Lecter next.

Last edited by hhh (2023-09-15 04:40:19)

johnraff · 2023-09-16 09:51:20

You should be proud of yourself for enabling the old folk to spend their days at home, not in an institution. I'm sure they appreciate it, really.

---
I've finally covered most of the bits I wanted to mess with, and pushed the changes up to GitHub where you can check them over. But the easiest might be if I upload updated versions of bunsen-configs, bunsen-blob and bunsen-themes and if you upgrade your test system the result will be there to see. And comment on.

tooltips
On lite-aqua I went back to the whitish tooltips you had set in gtk.css, and tweaked tint2 to match. Maybe a liitle bit too white?? But with round corners and shadows they look nice. If you wanted to tweak the colours a bit, no problem.

jgmenu
I've been switching picom on and off, trying too make sure things look reasonable both with and without composition. With it off, I think jgmenu benefits from a 1px border, both light-aqua and darkred themes. But when composition is on, especially the light theme, the corners definitely look better without the 1px border. In the dark theme it's dark on dark so isn't so noticable. So I've set the 1px jgmenu border on in the bunsen-meta-lite settings that go in the 32bit iso, and off in the regular configs for amd64.

tint2
tint2 is difficult to work with and often a restart isn't enough to get a change registered - have to log out and back in, especially for anything to do with icons.

Also tint2 with round corners for tooltips has me baffled. At first it seemed to be giving them the full 10px radius set in picom.conf with tint2's background #7 set to: rounded = 1 or even rounded = 0
But yesterday the tooltips were always square until I set rounded = 10 to match picom.
Don't know what's happening there, but when picom is switched off tint2's rounded = 10 doesn't seem to cause any nasty artifacts, so let's leave it at 10 for now.

blob
Tried to get the presets in sync with what we have in the default configs. Keeps changing of course. Also had to fix a bug with restoring to a file which is a symlink, like tint2rc.

gtk themes
Along with gtk.css there's gtk-dark.css. After extracting it I found it's identical with gtk.css so I think we could make it a symlink to save having to edit two files.

I've forgotten the other stuff but it's in the git commit messages.

I'm away a couple of days so I'll try to upload the tweaked packages tonight.

Last edited by johnraff (2023-09-16 09:56:42)

johnraff · 2023-09-16 12:27:31

Upgraded bunsen-themes, bunsen-configs and bunsen-blob.

hhh · 2023-09-18 08:51:19

nk you, John.

Really, typo? Thank you, John!

Last edited by hhh (2023-09-18 08:51:54)

johnraff · 2023-09-19 02:20:53

Yeah, nk you too.

hhh · 2023-09-24 16:40:59

Laugh out loud! From now on if I want to say "thanks" to you I'll just use "nks!" Pronounced "angks"? Similar to how "hhh" should be pronounced "https://www.youtube.com/watch?v=37697sWp2rQ&t=19s"

hhh · 2023-09-25 17:24:23

John, I just noticed a usibility issue with Boron-dark. In Thunar, open the context menu for a file that you can set to be executable and go to Properties>Permissions. If the checkbox for "Allow this file to run as a program" is unchecked, the box "disappears" as the outline color blends in with Thunar's background.

I haven't started digging into the theme to see if I can fix it, but I was wondering if you could take a look at your leisure since you recently worked with the themes. I'm a bit rusty!

I don't think it happens in the seven other themes, I'm going to double check now. I'll open aqua and dark in meld later today, maybe it's something obvious.

nks!

johnraff · 2023-09-26 06:42:48

^Good catch - I'll have a look.

If it's OK with you, I'd like to make Boron-darkred (and the darkred icons) the alternative theme to default Boron-lite-aqua.

Maybe we could even remove the other Boron themes to keep maintainance simpler?

chs!

johnraff · 2023-09-26 07:37:37

hhh wrote:

John, I just noticed a usibility issue with Boron-dark. In Thunar, open the context menu for a file that you can set to be executable and go to Properties>Permissions. If the checkbox for "Allow this file to run as a program" is unchecked, the box "disappears" as the outline color blends in with Thunar's background.

Confirmed.

With Boron-darkred or the other dark themes Boron-blue and Boron-aqua the box stays visible with and without checkmark. So some colour you changed when making Boron-blue and Boron-aqua from Boron-dark?

So if you compare Boron-dark with any of the other dark themes, or maybe compare two of the others with each other to see where the colour changes apply?

hhh · 2023-09-26 14:30:40

johnraff wrote:

If it's OK with you, I'd like to make Boron-darkred (and the darkred icons) the alternative theme to default Boron-lite-aqua.
Maybe we could even remove the other Boron themes to keep maintenance simpler?

What do you mean by the alternative theme? Boron-aqua will be the default, and you want to ship which other themes and drop which themes from the install? I'm not objecting, I've already stated that whatever you want to do in the end is fine by me. I'm just not clear on your vision here.

johnraff · 2023-09-27 01:42:41

^I just mean that I'm hoping the darkred theme with matching tint2, icons etc (full config set) will be available in BLOB and mentioned in the release notes so people can easily switch to dark-theme+horizontal-tint2+no-menu-icons to compare. And back to default Aqua when they decide they prefer the new look after all.

BLOB should even work in the live session and contains Boron-Darkred if you want to check nothing's too weird with it.

Last edited by johnraff (2023-09-28 07:13:58)

hhh · 2023-09-27 01:48:28

I see. Sounds good to me!

johnraff · 2023-09-28 07:13:27

hhh wrote:

John, I just noticed a usibility issue with Boron-dark. In Thunar, open the context menu for a file that you can set to be executable and go to Properties>Permissions. If the checkbox for "Allow this file to run as a program" is unchecked, the box "disappears" as the outline color blends in with Thunar's background.
I haven't started digging into the theme to see if I can fix it, but I was wondering if you could take a look at your leisure since you recently worked with the themes. I'm a bit rusty!
I don't think it happens in the seven other themes, I'm going to double check now. I'll open aqua and dark in meld later today, maybe it's something obvious.
nks!

I just compared Boron-dark with Boron-aqua but haven't been able to put my finger on it. Aren't the checkboxes drawn by the svg images in assets/? The unchecked box images in B-d and B-a look identical to me, but when using B-a the unchecked box is visible. I guess something in gtk.css is suppressing the unchecked (but not checked) image in Boron-dark?? Sorry not to be any more helpful.

hhh · 2023-09-28 12:50:00

No, you're exactly right, I discovered the same thing. The Thunar background in that popup window is the defined background color, #2c2c2c (iirc). There are nearly 200 instances of that hex in the gtk.css, plus dozens more in RGBA format, so finding that is unrealistic.

I tried recoloring the unmarked checkbox assets, which also have a bg color of #2c2c2c, but for whatever reason that did nothing. I just lightened them though, I didn't recolor them to red or something else highly visible, I should have, but I changed them enough that I should have seen a difference.

I think the easiest thing to do would be to drop the theme entirely (making maintenance easier, as you suggested) or else generate a new theme with a different shade of grey as the selected bg color. I'll wait for your input. nks!

johnraff · 2023-09-29 05:29:35

hhh wrote:

I think the easiest thing to do would be to drop the theme entirely (making maintenance easier, as you suggested)

To be honest, that's where I would lean. The new oomox(??) generated themes are big at ~10MB each and bulk up our bunsen-themes package. See: https://forums.bunsenlabs.org/viewtopic.php?id=8661

Would you be OK with shipping only Boron-light-aqua and Boron-darkred of the Boron themes in bunsen-themes? I suggested keeping Bunsen-dark too in the linked topic, but if it's giving us grief maybe leave it out for now? We should still have it in a repo somewhere though, along with the other variants.

hhh · 2023-09-29 08:41:37

OK, that sounds good. Keep the other themes in the git repo so they're available as extras?

So you're going with light-aqua as the default?

#1 2023-09-13 08:13:19

Harmonizing tooltips and jgmenu themes

#2 2023-09-14 01:16:44

Re: Harmonizing tooltips and jgmenu themes

#3 2023-09-14 01:50:16

Re: Harmonizing tooltips and jgmenu themes

#4 2023-09-14 06:52:30

Re: Harmonizing tooltips and jgmenu themes

#5 2023-09-15 04:20:14

Re: Harmonizing tooltips and jgmenu themes

#6 2023-09-16 09:51:20

Re: Harmonizing tooltips and jgmenu themes

#7 2023-09-16 12:27:31

Re: Harmonizing tooltips and jgmenu themes

#8 2023-09-18 08:51:19

Re: Harmonizing tooltips and jgmenu themes

#9 2023-09-19 02:20:53

Re: Harmonizing tooltips and jgmenu themes

#10 2023-09-24 16:40:59

Re: Harmonizing tooltips and jgmenu themes

#11 2023-09-25 17:24:23

Re: Harmonizing tooltips and jgmenu themes

#12 2023-09-26 06:42:48

Re: Harmonizing tooltips and jgmenu themes

#13 2023-09-26 07:37:37

Re: Harmonizing tooltips and jgmenu themes

#14 2023-09-26 14:30:40

Re: Harmonizing tooltips and jgmenu themes

#15 2023-09-27 01:42:41

Re: Harmonizing tooltips and jgmenu themes

#16 2023-09-27 01:48:28

Re: Harmonizing tooltips and jgmenu themes

#17 2023-09-28 07:13:27

Re: Harmonizing tooltips and jgmenu themes

#18 2023-09-28 12:50:00

Re: Harmonizing tooltips and jgmenu themes

#19 2023-09-29 05:29:35

Re: Harmonizing tooltips and jgmenu themes

#20 2023-09-29 08:41:37

Re: Harmonizing tooltips and jgmenu themes

Board footer