Question about customizing the color of panel icons

[aaoaa]

I want to make each icon a different color.
We targeted the clipboard because it has a unique class compared to the other icons.
The problem is with the sound and network icons.
The battery icon was also targeted with this code:
panel .panel-button .power-status .system-status-icon,

panel .panel-button .system-status-icon.power-status {
color: #ff4444 !important;
}
And the new color was applied.
The problem is with the remaining icons, the sound and network icons.
What are their unique classes?
Does Zorin have a different structure than gnome-shell?
Note that the inspection tool's locking class feature doesn't work; instead, it selects all three icons under the class system-status-icon.

[aaoaa]

I couldn't find any solution that worked.

[drdrummie]

Hello!
As I know, there is a heavy JS used in Zorin taskbar..
Most of styles are set through extension code (stage / etc)..
In example:

• border radius of taskbar
• or floating mode (margin)
• icons hoover state (border radius)

Maybe you just need to "increase css specificity" by adding "more rules" to your css, in my case was like:

Specificity Calculation:

• Inline styles: 1000 points
• ID selectors: 100 points
• Class/attribute/pseudo-class selectors: 10 points
• Element selectors: 1 point
• !important overrides everything (but specificity still matters for multiple !important rules)

So as example:

Selector	Specificity	Points
.quick-toggle	0-0-1-0	10
.quick-settings-grid .quick-toggle	0-0-2-0	20
.quick-toggle:hover	0-0-2-0	20
#panel .quick-toggle	0-1-1-0	110
.quick-settings .quick-toggle !important	0-0-2-0	20 + ∞

So:

• If theme uses .quick-settings-grid .quick-toggle { border-radius: 12px !important; } -> (specificity 20 + ∞)
• My css uses .quick-toggle { border-radius: 16px !important; }** (specificity 10 + ∞)
• Theme wins because both have !important, and theme has higher base specificity!

Hope it is helpful!
Cheers!