CSS fill doesn't work

Hi to everybody. I’m not able anymore to change the fill color of the SVG object. I’m able via CSS to modify the visibility and the opacity but noway for the color.

Here is the CSS part:

.light-on {
  fill: red !important;
}

.light-off {
  fill: white !important;
}

and the YAML part:

    - entities:
        - switch.twinkly
        - light.wled
      state_action:
        action: call-service
        service: floorplan.class_set
        service_data: '${(entity.state === "on") ? "light-on" : "light-off" }'
      tap_action:
        action: call-service
        service: homeassistant.toggle

The YAML part is correct and object are well named infact , changing the CSS to:

.light-on {
  opacity: 1 !important;
}

.light-off {
  opacity: 0.2 !important;
}

it works correctly.

Any suggestion on how to solve it?

[OzGav]

I know this has been closed but just talking to Petar this is a change to the underlying way floorplan works. For those in the future that find this you can try changing your CSS from what might have been something like:

.lamp-off {
  stroke: #000000 !important;
  opacity: 0.5 !important;
  stroke-opacity: 0 !important;
}

.lamp-on {
  stroke: #03A9F4 !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

to

.lamp-off, .lamp-off *  {
  stroke: #000000 !important;
  opacity: 0.5 !important;
  stroke-opacity: 0 !important;
}

.lamp-on, .lamp-on * {
  stroke: #03A9F4 !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

note the extra in the first line which will apply the style to all nested elements.

[pkozul]

Thanks @OzGav

Yep, the old version of Floorplan automatically ‘drilled down’ into nested elements and applied the specified CSS styles. We thought this would not always be desirable for all users / cases, so the new version no longer does this.

As Gav mentioned, you can use selectors in your CSS rules to control exactly which nested elements get which styles applied to them.