Weird Problem with Styles Not Displaying

Third party integrations Floorplan
1

I’ve run into a weird issue and I’m hoping someone with more knowledge can help me understand it, or point me in the right direction to learn how to understand it.

I’m creating a remote control type interface for a camera and so far have pan, mic, and light buttons that function well. I ‘buttonised’ the buttons in Inkscape and then removed the colours so that I can use a stylesheet to dynamically set them. This has worked on every HA-Floorplan view that Ive created and it works with the mic and light buttons on this one.

However the pan buttons will not take the fill colour at all. Here’s the weird part, using dev tools the element shows the styles as having been applied but it does not display.

The CSS is:

#remote_button_mic,
#remote_button_light,
#remote_buttons_pan {
    fill: rgb(58, 55, 64) !important;
    stroke-width: 0.5 !important;
    stroke: black !important;
}

In dev tools you can see it as being applied correctly but only displaying results on the mic and light buttons:

dev-tools-view
dev-tools-view2220×1465 367 KB

Yet in Inkscape setting colour to the same element works:

inkscape-view
inkscape-view1422×990 147 KB

Any and all help greatly appreciated, thanks.

Edit: If I set the colour for the one element in inkscape and bring it into ha-floorplan it displays as expected, but that defeats the point of dynamically loading via stylesheet. Still can’t get the css to work as expected.

2

Figured it out.

I noticed when I set the colour in Inkscape and brought that into ha-floorplan that in dev tools the inline style still seemed to be over writen by the css but it was working.

I had to ‘unset’ the colours from every element beneath the target element and give the target element no colour. Inkscape can be a little odd in how it applies colours in children elements.

I experimented a bit and it definitely seems inconsistant… or I’m failing to understand the rules.