yeah found it in Hacs
You mind sharing - looks simple and awesome!
Hi thank your for sharing your code.
i tried to add this to my card including the animations that you recently provided. But somehow the animations don’t work. can you please tell me where i have to make changes in code ?
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.smart_ac_control_wr2991201792
hvac_modes:
- heat
- cool
- fan_only
show_temperature_control: true
layout: horizontal
name: Schlafzimmer Klima
icon: mdi:air-conditioner
double_tap_action:
action: more-info
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.wohnzimmer_temperature
name: Temperature
color: '#00bb33'
- entity: sensor.wohnzimmer_humidity
name: Humidity
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
labels: true
state: false
legend: false
fill: fade
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
12 Likes
You can reverse the Mushroom Card like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scaleX(-1);
text-align: right;
}
.: |
ha-card {
transform: scaleX(-1);
transition: 0s;
}
7 Likes
Is there a way to animate the icon in a mushroom-chips-card?
Sorry, couldn’t find the solution scrolling through the whole thread.
My code (thats’ currently not working):
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.solar_poweractueel
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rays 2s infinite;
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
You can place a border around the Mushroom Title Card like this:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: 🍄 Mushrooms
alignment: center
card_mod:
style: |
mushroom-title-card {
display: block;
border-radius: 14px;
border: solid rgba(var(--rgb-green), 0.5);
--title-padding: 14px;
}
5 Likes
Hi,
Try this animation: rays 2s infinite; instead of your code --icon-animation: rays 2s infinite;
Best regards
Thekholm
1 Like
I went through the previous posts and saw that animation works when the code is placed below the mushroom card and not stack in card. I changed in that way and it worked.
It would need to be applied to the Chips like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.solar_poweractueel
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: rays 2s infinite;
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 100%, 0% 100%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
2 Likes
Yes, added one for you:
1 Like
You can change the various aspects of the Mushroom Card, primary and secondary text, like this:
type: custom:mushroom-template-card
primary: Mushrooms
secondary: 42 Grown
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
--card-primary-font-size: 14px;
--card-primary-font-weight: bold;
--primary-text-color: rgb(var(--rgb-blue));
--card-secondary-font-size: 20px;
--card-secondary-font-weight: bolder;
--secondary-text-color: rgb(var(--rgb-green));
}
10 Likes
With the last updates now the border appears on this card (temperature, humidity entity etc)
how can i change it ?
Are you running core-2022.11 beta?
No currently im on 2022.10.4
Sure!
type: vertical-stack
cards:
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.stovsuger_area
name: Område
primary_info: state
hide_icon: true
layout: vertical
secondary_info: name
- type: custom:mushroom-entity-card
entity: sensor.stovsuger_batteri
layout: vertical
name: Batteri
hide_icon: true
primary_info: state
secondary_info: name
- type: custom:mushroom-entity-card
entity: sensor.stovsuger_cleaningtime
layout: vertical
hide_icon: true
primary_info: state
secondary_info: name
name: Tid
- type: custom:xiaomi-vacuum-map-card
map_source:
camera: camera.xiaomi_cloud_map_extractor
calibration_source:
camera: true
entity: vacuum.stovsuger
vacuum_platform: default
icons: []
tiles: []
map_modes:
- template: vacuum_clean_zone
- template: vacuum_goto
- template: vacuum_clean_segment
predefined_selections:
- id: '17'
icon:
name: mdi:broom
x: 22725
'y': 23775
label:
text: Stue
x: 22725
'y': 23775
offset_y: 35
outline:
- - 18000
- 20600
- - 27450
- 20600
- - 27450
- 26950
- - 18000
- 26950
- id: '16'
icon:
name: mdi:broom
x: 25750
'y': 21625
label:
text: Kontor
x: 25750
'y': 21625
offset_y: 35
outline:
- - 24050
- 20700
- - 27450
- 20700
- - 27450
- 22550
- - 24050
- 22550
- id: '18'
icon:
name: mdi:broom
x: 23925
'y': 25625
label:
text: Kjøkken
x: 23925
'y': 25625
offset_y: 35
outline:
- - 22250
- 24800
- - 25600
- 24800
- - 25600
- 26450
- - 22250
- 26450
map_locked: true
two_finger_pan: true
- type: custom:stack-in-card
cards:
- type: vertical-stack
cards:
- square: false
columns: 3
type: grid
cards:
- type: custom:mushroom-template-card
primary: Kjøkken
secondary: ''
icon: hue:room-kitchen
layout: horizontal
tap_action:
action: call-service
service: xiaomi_miio.vacuum_clean_segment
confirmation:
text: Støvsuge Kjøkkenet?
data:
segments: 18
target:
entity_id: vacuum.stovsuger
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Stue
secondary: ''
icon: hue:room-living
layout: horizontal
tap_action:
action: call-service
service: xiaomi_miio.vacuum_clean_segment
confirmation:
text: Støvsuge Stuen?
data:
segments: 17
target:
entity_id: vacuum.stovsuger
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Kontor
secondary: ''
icon: hue:room-office
layout: horizontal
tap_action:
action: call-service
service: xiaomi_miio.vacuum_clean_segment
confirmation:
text: Støvsuge Kontoret?
data:
segments: 16
target:
entity_id: vacuum.stovsuger
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-vacuum-card
entity: vacuum.stovsuger
layout: vertical
commands:
- start_pause
- return_home
- stop
fill_container: false
primary_info: state
secondary_info: none
icon_type: none
3 Likes
Thank you ! Just what I needed 
How did you get that mushrom icon in the title?
1 Like
It’s simply an emoji
1 Like
I would recommend creating a new Mushroom custom theme and adding your changes there.
1 Like