style.css in waybar creating unreadable indicators for running apps

[FrostByghte]

When looking at the themes included for waybar, the majority appear to create some type of bar type indicator for nm-applet selections, all of them.

This results in every toggle appearing as if it is enabled. All the VPN's look active. Almost every single style.css for waybar does this with the exception of [Colorful] Aurora Blossom.css. With Aurora Blossom the style for these selectors is a check box with appropriate checks selected when a VPN connection is active.

So my question is, what class/style should I be looking to modify on the other style sheets that might change these lines/indicators that every single selection has to checkboxes or perhaps how can I make things actually visible so I can tell what is selected? Thank you.

[FrostByghte]

Took a bit to find this, I'm rather new with css and styling. It appears the issue was the:

min-height: 0;

This value turned all my apps configuration indicators in the systray to bars. I hope this might help someone else new to this. Thank you.

[JaKooLit]

Hi. Sorry for the late reply. Been busy... so what is the recommended value that you have found out about this?

Thanks for sharing btw

[FrostByghte]

I ended up going with min-height: 7px; after some trial and error. You can see the toggles and things don't get too out of control spacing wise.

My main focus is working with the nm-applet and being able to see the toggles there. I feel higher values were spacing the popup out too much. Supposedly, we can use nm-applet --indicator and style it someplace but I haven't figured that part out yet.