Can someone show me the way to the chip iconā¦??
this is my code
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: switch.all_power_strips_group
state: 'on'
chip:
type: template
entity: sensor.powerstrips_on_count
icon: mdi:lightbulb-on
icon_color: |
{% if is_state(entity, '0') %}
disabled
{% else %}
orange
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
.content {
background-color: red;
{{ 'animation: illumination 1.75s infinite;' if states('sensor.powerstrips_on_count') != '0' }}
}
@keyframes illumination {
0%, 100% { -webkit-clip-path: inset(0 0 0 0);}
80% { -webkit-clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%);}
}
ha-card:after {
content: '{{ states('sensor.powerstrips_on_count') }}';
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: -2px;
width: 17px;
height: 17px;
font-size: 13px;
}
- type: conditional
conditions:
- entity: switch.all_fans_group
state: 'on'
chip:
type: template
entity: sensor.fans_on_count
icon: mdi:fan
icon_color: |
{% if is_state(entity, '0') %}
disabled
{% else %}
teal
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
.content {
background-color: red;
{{ 'animation: spin 2s ease-in, spin 1.25s linear 2s infinite;' if states('sensor.fans_on_count') != '0' }}
}
@keyframes spin {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg); }
}
ha-card:after {
content: "{{ expand(states.switch.all_fans_group) | selectattr( 'state', 'eq', 'on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -7px;
right: -2px;
width: 17px;
height: 17px;
font-size: 13px;
}
I am trying to animate the two chips ā¦ I have done it before directly in chips cardsā¦ lots of examples posted by @rhysb and many others.
Now i am changing my chip arrangement and hiding the whole chip when the chip condition is false. I couldnt find any code before where a chip icon is animated when it is inside a conditional card.
I tried using the default code which has mushroom-template-chip:nth-child(x) but didnt work.
Then tried with
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip:nth-child(1)$: |
after many tries, i got it ot work, but it creates a big space at the bottom areaā¦ i tried to adjust margins and padding, but even though it gets corrected in the computer, in mobile, it becomes a mess.
So finally decided to add css on each individual chipā¦ and the spacing issues are solved. but the animation picking the correct element. Eventhough the fan icon in the button rotates, the nothing happens in bulb animation.
I believe finally i am half way thereā¦ but need that final pushā¦ i donāt know much of css to locate or manipulate exactly the chip icon.
NB: I have added an extra line in the animations ( to identify the correct element for trial and errors)
background-color: red;
Can someone help meā¦
Editā¦ Adding current state of the animation. This is picking the wrong item and adding aniimation
If the icon element is selected correctly, animation will look like this
