Edit - I found my mistake. I had the following in my .css
svg, svg * {
vector-effect: non-scaling-stroke !important;
pointer-events: all !important;
}
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
Having the same function messed things up, I deleted the second function and it’s back to normal.
Original post:
When I upgraded to the version 0.65 of HASS it seems like my animations have stopped working for my lights. I can still click on the icons to toggle the lights but the icon background colour doesn’t change anymore. It worked before the update and I haven’t changed anything. Still doesn’t work on 0.66.
In my floorplan.css:
* Lights */
@-webkit-keyframes light_blink {
from { fill: #ffffff; }
to { fill: #ffe582; }
}
@-webkit-keyframes room_fade_in {
0% { opacity: 0; }
100% { opacity: .2; }
}
@-webkit-keyframes room_fade_out {
0% { opacity: .2; }
100% { opacity: 0; }
}
.tvlight-off {
fill: #656565 !important;
opacity: .45 !important;
}
.tvlight-on {
fill: f4e032 !important;
stroke-width: 2 !important;
opacity: .75;
}
.light-on .light-circle {
stroke: #656565 !important;
fill: #ffe582 !important;
}
.light-on .light-strike {
opacity: 0.0 !important;
}
.light-on .light-room {
fill: #f4e032 !important;
-webkit-animation: room_fade_in 4s 1 forwards !important;
}
.light-on .light-icon {
stroke: #656565 !important;
fill: #656565 !important;
}
.light-on .light-detail {
-webkit-animation: light_blink 2s infinite alternate !important;
}
.light-on .light-icon-fill {
fill: #ffffff !important;
}
.light-off .light-circle {
stroke: #b1b1b1 !important;
}
.light-off .light-icon {
stroke: #b1b1b1 !important;
}
.light-off .light-icon-fill {
fill: #ffffff !important;
}
And in my floorplan.yaml:
groups:
- name: Lights
entities:
#- light.lamp
- light.hue_go_1
states:
- state: 'on'
class: 'light-on'
- state: 'off'
class: 'light-off'
action:
domain: homeassistant
service: toggle
Also, I can have the floorplan background change with the active theme using:
svg, svg * {
pointer-events: all !important;
background-color: var(--primary-background-color);
}
But when I try to set a specific background colour, it doesn’t work and shows the default white, any ideas?
svg, svg * {
pointer-events: all !important;
background-color: var(–variable-name, #37464f);
}
Any ideas?