Need some CSS help for issues with latest SVG node release

Dashboard
3

Mister @hotNipi,
You have no clue how much I appreciate your css for dummies explanation...
Thanks !!! Very illuminating!!

Now my shrinken brain needs to digest it slowly...
After reading your feedback, there are a couple of things that I don't understand now:

  1. You apply a fill style color yellow, which seems to be more specific than all other styles, so the path becomes yellow. However in our original issue at the time being, our fill color style on the path element was overridden by the dashboard :exploding_head:. So that is another behaviour as in your example...
    Does that make sense to you?

  2. Steve and Dave solved it (at the time being) by following workaround:

    • added class ui-svg to the parent div of the svg
    • added a local <style> element to override some style settings:
    div.ui-svg svg{
    color: var(--nr-dashboard-widgetColor);
    fill: currentColor !important;
}
div.ui-svg path {
    fill: inherit !important;
}

    So if I understand correctly: when no fill style color is applied to the path by the user then the fill color value will be inherited from the div style. And the div style will in turn use the currentColor (I assume that is something from the dashboard) as color. Is that a bit correct? And that solves the problem from step 1 since this rule is more specific, compared to the dashboard rule (since we target specifically only on the div.ui-svg class), so this rule wins? Correct?

  3. The solution from step 2 has worked for a long time. To have scoped css , I applied that postcss-prefix-selector to all the rules in the CSS tabsheet. So the default content:

    image

    Will become this:

    image
    image907×272 23.5 KB

    That way the styles are only applied to this SVG drawing only. Which works fine, as you can see in this simple example.

    But it seems that my prefixes have corrupted the solution from Steve and Dave somehow. However I don't understand why, because my prefixes make the style much more selective compared to the dashboard styles? But seems not :exploding_head:

    And when the users remove the important! keywords, then suddenly everything works again...

My wife always tells me I need to search a more relaxing hobby...
I am getting an idea of what she means :wink:

Really appreciate your help!! And (most...) SVG node users also!!