structuring like this does the trick for me
card_mod:
style:
mushroom-state-info$: |
.primary{
....
}
.: |
ha-card {
....
}
Ok I’m back in business, I had to change the :host entries to just be ha-card and then I also had to add !important; onto every background image settings. I just need to sort out the chips spacing issue then should be all back to how it was on 2024.6.4
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kitchen
secondary: >-
{{ states('sensor.kitchen_temperature') | round (1) }}°C - {{
states('sensor.kitchen_humidity') }}%
icon: mdi:tree
entity: light.kitchen_lights
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: /home-v2/kitchen
icon_color: '{{ "orange" if is_state("light.kitchen_lights", "on") else "disabled" }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 350;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
margin-left: -40px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 350;
margin-top: -2px;
margin-left: -40px;
}
.: |
ha-card {
background: url('/local/images/areas/kitchen.jpg') center !important;
background-size: cover !important;
background-blend-mode: overlay !important;
height: 220px !important;
margin-left: -15px !important;
margin-top: -70px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: lock.back_door
state: unlocked
chip:
type: template
entity: lock.back_door
icon_color: red
icon: mdi:lock-open-variant
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.back_door
state: 'on'
chip:
type: template
entity: binary_sensor.back_door
icon_color: red
icon: mdi:door-open
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.kitchen_echo
state: playing
chip:
type: template
entity: media_player.kitchen_echo
icon_color: grey
icon: mdi:music
tap_action:
action: more-info
- type: template
entity: light.kitchen_lights
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('Kitchen')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_kitchen = expand(area_entities('Kitchen')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_kitchen | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('kitchen')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: kitchen
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -5px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
}
Is there a way to get a “space” in the mushroom-template-card secondrary ?
Hello
I have some issues after updating HA and Mushroom Themes.
Cards gotten bigger like other users here are reporting, and my scrollable chips aint working either.
Here is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Benjamin
secondary: |-
{{ states('sensor.verisure_rv_benjamin_temp') }}°C |
{{ states('sensor.verisure_rv_benjamin_fukt') }} %
icon: mdi:face-man
entity: light.lysg_benja_tak
icon_color: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: navigate
navigation_path: /lovelace-panel/benja
multiline_secondary: false
card_mod:
style: |
ha-state-icon::after {
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 9px;
font-weight: 700;
}
{% if states('binary_sensor.aqara_motion_benja_1') == 'on' %}
ha-state-icon::before {
content: 'directions_walk';
position: absolute;
font-family: 'Material Icons';
top: -11%;
left: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 11px;
background: rgba(var(--rgb-disabled), 0.5);
color: rgba(var(--rgb-red), 1);
border-radius: 50%;
animation: blink 1s linear infinite;
}
{% endif %}
@keyframes blink {
50% {opacity: 0;}
}
layout: horizontal
fill_container: false
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.mill_benja
icon: |-
{% if is_state('climate.mill_benja', 'heat') %}
mdi:radiator
{% else %}
mdi:radiator-off
{% endif %}
icon_color: |-
{% if is_state('climate.mill_benja', 'heat') %}
red
{% else %}
blue
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: light.lysg_benja_tak
icon: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state('light.lysg_benja_tak', 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: light
entity: light.lys_benja_led_tak_1
use_light_color: true
icon: mdi:led-strip-variant
content_info: none
tap_action:
action: toggle
card_mod:
style:
mushroom-light-chip:nth-child(1)$: |
ha-state-icon {
{% if states('light.lys_benja_led_tak_1') == 'off' %}
color: grey;
{% endif %}
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 0.8em
}
- type: template
entity: input_boolean.benjamin_nattlys_10
icon: |-
{% if is_state('input_boolean.benjamin_nattlys_10', 'on') %}
mdi:weather-night
{% else %}
mdi:weather-night
{% endif %}
icon_color: >-
{% if is_state('input_boolean.benjamin_nattlys_10', 'on') %} purple {%
else %} grey {% endif %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.boolean_benja_tv_auto
icon: |-
{% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
mdi:television
{% else %}
mdi:television-off
{% endif %}
icon_color: |-
{% if is_state('input_boolean.boolean_benja_tv_auto', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
icon_color: blue
icon: mdi:remote-tv
hold_action:
action: false
tap_action:
action: call-service
service: script.1708632757993
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: input_boolean.benjamin_auto
icon: |-
{% if is_state('input_boolean.benjamin_auto', 'on') %}
mdi:lightbulb-auto
{% else %}
mdi:lightbulb-auto-outline
{% endif %}
icon_color: |-
{% if is_state('input_boolean.benjamin_auto', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: switch.aqara_kontakt_benja_1
icon: |-
{% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
mdi:power-plug
{% else %}
mdi:power-plug-off
{% endif %}
icon_color: |-
{% if is_state('switch.aqara_kontakt_benja_1', 'on') %}
green
{% else %}
grey
{% endif %}
hold_action:
action: false
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
alignment: end
card_mod:
style: |
ha-card {
background: none !important;
height: 40px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: 10px;
padding-bottom: 0px;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: ltr;
margin: 0px !important;
padding-left: 12px;
padding-bottom: 0px;
margin-top: 10px;
}
Thats amazing, thanks a lot 
Can you help me a bit with:
1.) Get a bit more padding left of the headline and subheadline?
2.) Get the circle around the bottom icons away?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} °C • {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
height: 40px;
}
1 Like
you can add some right margin to the icon shape
card_mod:
style:
mushroom-shape-icon$: |
.shape {
margin-right: 10px;
}
--chip-box-shadow: none;
I have an orange line around the template card. Can this be disabled ?
type: custom:mushroom-template-card
primary: Alles uit
icon: mdi:lightbulb
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
You are great thanks a lot for the code snippet
Unfortunately, for me it is not working - can you quickly help me please where to place it?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} °C • {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
--chip-box-shadow: none;
}
mushroom-shape-icon$: |
.shape {
margin-right: 50px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
height: 40px;
}
i found a post a while ago that helped me with the card-mod code blocks.
it might work like this:
style:
mushroom-shape-icon$: |
.shape {
margin-right: 50px;
}
.: |
ha-card {
background: rgba(var(--rgb-primary-background-color), 0.3);
left: -20px;
top: -20px;
width: 500px;
--spacing: 10px 10px 0px 12px;
--icon-size: 70px;
--ha-card-border-width: 0;
--chip-box-shadow: none;
}
Amazing, that does the trick, thanks a lot 
Hello,
i also have the issue after updating HA with my card:
Before Update:
After Update:
Code
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kinderzimmer
secondary: >-
🌡️ {{ states('sensor.kinderzimmer_raumthermostat_temperature') | round(1)
}} °C
icon: mdi:teddy-bear
entity: light.kinderzimmer
tap_action:
action: navigate
navigation_path: kinderzimmer
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
margin-bottom: -10px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.kinderzimmer_bewegungsmelder_occupancy
state: 'on'
chip:
type: template
icon_color: blue
icon: mdi:motion-sensor
entity: binary_sensor.kinderzimmer_bewegungsmelder_occupancy
tap_action:
action: more-info
- type: conditional
conditions:
- entity: binary_sensor.heizung_kinderzimmer
state_not: 'off'
chip:
type: template
entity: climate.kinderzimmer_thermostat
icon: |-
{% if is_state(entity, 'heat') %}
mdi:fire
{% endif %}
icon_color: red
- type: conditional
conditions:
- entity: binary_sensor.kinderzimmer_balkontur
state: 'on'
chip:
type: template
icon_color: amber
icon: mdi:door-open
entity: binary_sensor.kinderzimmer_balkontur
tap_action:
action: more-info
- type: light
entity: light.kinderzimmer
content_info: none
use_light_color: true
icon: mdi:lightbulb
tap_action:
action: toggle
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('light.kinderzimmer', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
Can anyone help here?
still no idea what changed, but it seems the negative values aren’t accepted with margin-xxxx values.
I managed to fix mine somehow by changing and playing with other values INSTEAD of the margin-xxxx - like i posted here
I try to get the amount of battery emptier than 30% into a mushroom chip card.
In Template (Developer Tools) it is working but not in this template.
May some one know a solution.
THX!
type: template
content: |-
{% set ignore_entities = [] %}
{{ states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count
}}
icon_color: orange
icon: |-
{% set ignore_entities = [] %}
{% if states.sensor
| selectattr('attributes.device_class', 'eq', 'battery')
| rejectattr('entity_id', 'in', ignore_entities)
| map(attribute='state')
| reject('in', ['unknown', 'unavailable'])
| map('int', -1) | select('le', 30)
| select('ge', 0)
| list | count = 0
%}
mdi:battery-check
{% else %}
mdi:battery-alert
{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/battery
hold_action:
action: none
double_tap_action:
action: none
Check my posts just a few posts above. The old way of resizing / moving items does not work anymore. I found a new that does work.
1 Like
Can’t seem to get this fix to work on mine. It looks fine in the editor but losing its styling when I save it. Can you see anything that would fix it?
card_mod:
style: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
}
I did try this but it didn’t help:
card_mod:
style:
.: |
ha-card {
--chip-font-size: 0.3em;
--chip-icon-size: 0.6em;
--chip-border-width: 0;
--chip-box-shadow: none;
--chip-background: none;
--chip-border: none;
--chip-spacing: none;
--chip-font-weight: normal;
}
Same here… doesn‘t work for me. I like to add some space between icon and text.
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2) !important;
}
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025) !important;
height: 55px;
width: 500px;
position: relative;
left: -18px;
top: -18px;
--spacing: 12px 10px 0 12px;
--icon-size: 76px;
--ha-card-border-width: 0;
What card are you applying this to?
How can I make the OK button the size of the ja, nee. and how can I make it centered ?
this is what I have now in the card_mod
card_mod:
style:
mushroom-state-info$: |
.container {
margin: -10px;
text-align: center !important;
.: |
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
}
i was thinking adding width but that does not work
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}})
width: 50px;
}
edit : solution
ha-card {
background-color: rgb({{ states("input_text.kleur_iconen")}}) !important;
width: 100px;
margin-left: 65px;
}
Hi all. Some amazing work in here, but I’ve had a bit of search and wasn’t able to find help for this exact scenario.
I have a Mushroom chip with animation based on an entity’s state that’s working fine as is, but I’d love to change it to add additional functionality. I would love if it could be tied into two entities instead of one. I.e. Currently when the dog needs feeding and input boolean is turned on and the icon colours and is animated.
I’d like to change the colour and animation if a second input boolean’s state is on. I’m not exactly sure how it would function if they were both on at the same time, but for these purposes it probably doesn’t matter which is showing. Is that possible?
Here’s my code for the existing working chip, followed by the additional animation frames I intend to include for the second input boolean:
type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
icon: mdi:dog
icon_color: |-
{% set state=states('input_boolean.edie_needs_feeding') %}
{% if state=='off' %}
grey
{% else %}
brown
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
entity: input_boolean.edie_needs_feeding
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
{% if is_state('input_boolean.edie_needs_feeding','on') %}
animation: huh 4s ease infinite; transform-origin: 50% 60%;
{% else %}
{% endif %}
}
@keyframes huh {
0%, 10%, 75%, 100% { transform: rotate(0deg); }
15% { transform: rotate(-25deg); }
30%, 35% { transform: rotate(-40deg); }
50% { transform: rotate(12deg); }
65% { transform: rotate(-8deg); }
}
‘Surprise’ animation
mushroom-shape-icon$: |
ha-icon {
--icon-animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
Hi, i am trying to animate an icon but it seems that i am missing something, the mdi:fan is working perfectly, but i am not able to pulse the mdi:pi-hole icon, cand anyone halp me please. Thanks
type: vertical-stack
cards:
- type: custom:button-card
icon: mdi:cog-outline
tap_action:
action: navigate
navigation_path: /dashboard-mushroom/net
entity: sensor.cpu_temperature
show_state: true
name: ' '
custom_fields:
btn:
card:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: toggle
icon: mdi:pi-hole
entity: input_boolean.pi_hole_timer
card_mod:
style: |
ha-card {
--chip-background: transparent;
padding: 5px !important;
border-radius: 100px !important;
color: yellow !important;
border: none !important;
{% if is_state('input_boolean.pi_hole_timer', 'on') %}
opacity: 1 !important;
animation: pulse 2s infinite !important;
{% else %}
opacity: 0.4 !important;
animation: none !important;
{% endif %}
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
- type: template
tap_action:
action: toggle
icon: mdi:fan
entity: sensor.argon_one_addon_fan_speed
card_mod:
style: |
ha-card {
--chip-background: transparent;
padding: 5px!important;
border-radius: 100px!important;
color: yellow!important;
border: none!important;
{% set fan_speed = states('sensor.argon_one_addon_fan_speed') %}
{% if fan_speed != 'unknown' and fan_speed | int > 0 %}
opacity: 1 !important;
animation: spin 1s linear infinite !important;
{% else %}
opacity: 0.4 !important;
animation: none !important;
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
card_mod:
style: |
ha-card {
background: linear-gradient(135deg, rgba(220, 20, 60, 1) 0%, rgba(0, 0, 0, 1) 100%);
border: transparent!important;
color: white;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
padding: 20px;
}
styles:
grid:
- grid-template-areas: '"n btn" "s btn" "i btn"'
- grid-template-columns: 1fr min-content
- grid-template-rows: min-content min-content 1fr
card:
- padding: 10px 2px 91px 10px
img_cell:
- justify-content: start
- position: absolute
- width: 150px
- height: 150px
- left: 0
- bottom: 0
- margin: 0 0 -30px -30px
- background: transparent;
- border-radius: 500px
icon:
- width: 60px
- color: black
- opacity: 1
custom_fields:
btn:
- justify-content: end
- align-self: start
name:
- justify-self: start
- align-self: start
- font-size: 18px
- font-weight: 500
- color: white
state:
- min-height: 80px
- justify-self: start
- align-self: start
- font-size: 14px
- opacity: 0.7
columns: 3