#Holy shit that is sick!
split magnet
XD
frosty cliff
Here's one of mine. Note, the ring around the icon. (It flashes 5 times then stops.)
frosty cliff
The syntax is a little different because it is two "CSS sections" (I don't know what they're called.)```yaml
- type: custom:mushroom-template-card
entity: light.living_room_lights
primary: '{{state_attr(entity, "friendly_name")}}'
secondary: '{{ states(entity) }}'
icon: '{{ is_state(entity, ''on'') | iif(''mdi:lightbulb-on'', ''mdi:lightbulb'') }}'
icon_color: '{{ is_state(entity, "on") | iif(''yellow'', ''gray'') }}'
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set entity = 'light.living_room_lights' %}
{% set last_updated = ((as_timestamp(now()) - as_timestamp(states[entity].last_updated)) | int) %}
{% if states(entity) == 'on' and last_updated <= 60 %}
--shape-animation: ping 2s 5;
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0.7); }
79% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-state-icon {
{% if states('light.living_room_lights') == 'on' %}
animation: scan 2s infinite;
color: yellow;
{%- else -%}
color: gray;
{%- endif %}
}
@keyframes illumination {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}```
Also, it will only show the ring animation if the entity has been turned on within the last 60 seconds. (So not every time you view the dashboard.)
The illumination keyframe if you want to use that instead of the can.
frosty cliff
If you're trying to drop it into a card by itself, remove the - at the beginning.
frosty cliff
type: custom:mushroom-template-card
