Have a look at the wiki
If you need more help, create a post in the discussion and someone would be glad to help
ref. code below.
Which color variable should I use in order for the “box-shadow” animation part to replicate the same color as the icon (some kind of red on heat, blue on cool, etc.)
“var(–paper-item-icon-active-color)” doesn’t seem to work.
Thx
type: custom:mushroom-climate-card
entity: climate.2e_ac
icon: mdi:air-conditioner
fill_container: false
show_temperature_control: true
collapsible_controls: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% if is_state(config.entity, "cool") or is_state(config.entity, "heat") %}
--shape-animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
{% endif %}
}
@keyframes ping {
0% { box-shadow: 0 0 0 0 var(--paper-item-icon-active-color); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes blink {
100% {opacity: 1;}
}
.: |
ha-card {
border: none;
Dont know the exact color used for cooling as i dont have a climate entity with cooling. But i would do it something like this:
type: custom:mushroom-climate-card
entity: climate.bedroom_heating
icon: mdi:air-conditioner
fill_container: false
show_temperature_control: true
collapsible_controls: true
layout: horizontal
card_mod:
style:
mushroom-shape-icon$: >
.shape {
{% if is_state(config.entity, "heat") %}
--shape-animation: pingheat 1.5s infinite;
{% elif is_state(config.entity, "cool") %}
--shape-animation: pingcool 1.5s infinite;
{% endif %}
}
@keyframes pingheat {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-deep-orange),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes pingcool {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-blue),1); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
.: |
ha-card {
border: none;
}
Hi @dimitri.landerloos ,
Good to hear from you again. Please find below the code:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
border: none !important;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
cards:
- type: custom:mushroom-template-card
primary: Livingroom
icon: mdi:sofa-outline
badge_icon: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
mdi:check
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
mdi:exclamation-thick
{% else %}
mdi:adjust
{% endif %}
badge_color: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
green
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
red
{% else %}
green
{% endif %}
tap_action:
action: navigate
navigation_path: null
icon_color: cyan
multiline_secondary: true
card_mod:
style:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
border: none !important;
box-shadow: none !important;
}
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity, 'temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
border: none !important;
box-shadow: none !important;
}
.shape {
{% set mode = states(config.entity, 'temperature') %}
--shape-color: rgba(var(--rgb-
{%- if mode > '0' -%}
orange
{%- elif mode < '0' -%}
grey
{%- else -%}
grey
{% endif %}));
}
mushroom-state-info$: |
.primary:after {
content: " ";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: >
{% set temperature =
states('sensor.hue_motion_sensor_2_temperature_2') |
float %}
{% if temperature < 16 %}
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
{% endif %}
- type: custom:mini-graph-card
entities:
- entity: sensor.hue_motion_sensor_2_temperature_2
name: null
hours_to_show: 18
line_width: 2
font_size: 30
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: orange
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.hue_motion_sensor_2_temperature_2
icon: none
badge_icon: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
mdi:check
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
mdi:exclamation-thick
{% else %}
mdi:adjust
{% endif %}
badge_color: >
{% if states('sensor.hue_motion_sensor_2_temperature_2') |
float > 16 %}
blue
{% elif states('sensor.hue_motion_sensor_2_temperature_2')
| float < 16 %}
red
{% else %}
green
{% endif %}
primary_info: none
secondary_info: none
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
mushroom-shape-icon$: |
.shape:after {
content: "{{ states(config.entity, 'temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
border: none !important;
box-shadow: none !important;
}
.shape {
{% set mode = states(config.entity, 'temperature') %}
--shape-color: rgba(var(--rgb-
{%- if mode > '0' -%}
orange
{%- elif mode < '0' -%}
grey
{%- else -%}
grey
{% endif %}));
}
mushroom-state-info$: |
.primary:after {
content: "{{ states('sensor.hue_motion_sensor_2_temperature_2') }}";
color: rgb(var(--card-background-color));
font-style: bold;
font-size: 10px
}
.: >
{% set temperature =
states('sensor.hue_motion_sensor_2_temperature_2') |
float %}
{% if temperature < 16 %}
mushroom-badge-icon {
animation: pulse 1s infinite;
}
@keyframes pulse {
50% { opacity: 0;}
}
{% else %} mushroom-badge-icon:after {
content: "{{ states('sensor.hue_motion_sensor_2_temperature_2') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
} ha-card {
border: none !important;
} {% endif %}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: >-
{%if expand(area_entities('woonkamer')) | selectattr (
'domain' , 'eq' , 'light' ) | selectattr ( 'state' , 'eq'
, 'on' ) | list | count > 0 %} amber {% else %} grey {%
endif %}
entity: group.living_lights
badge_icon: none
tap_action:
action: more-info
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('woonkamer')) | selectattr ( 'domain' , 'eq' , 'light' ) | 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);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:monitor
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
entity: switch.smart_plug_8
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.power_26') | float > 200 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
tap_action:
action: toggle
- type: custom:mushroom-template-card
primary: null
icon: >-
{{ 'mdi:curtains' if is_state(entity, 'open') else
'mdi:curtains-closed' }}
icon_color: '{{ ''blue'' if is_state(entity,''open'') else ''green'' }}'
entity: group.living_covers
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: >-
{{ 'mdi:window-shutter-open' if is_state(entity, 'open')
else 'mdi:window-shutter' }}
icon_color: '{{ ''blue'' if is_state(entity,''open'') else ''green'' }}'
entity: cover.roller_shutter_3
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
border: none !important;
box-shadow: none !important;
}
Many thanks to the author!
I learned a lot!
I want to share my solutions
Maybe someone will be interested in this)
type: custom:stack-in-card
cards:
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: menu
- type: template
icon: mdi:cog
icon_color: cyan
card_mod:
style: |
ha-card {
animation: rotation 3s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
- type: template
icon: mdi:restart
icon_color: green
tap_action:
confirmation:
text: Reboot server?
action: call-service
service: homeassistant.restart
service_data:
transition: 5
target:
entity_id: scene.idle
card_mod:
style: |
ha-card {
animation: reset 1.5s infinite;
}
@keyframes reset {
100% {
transform: rotate(360deg);
}
}
- type: template
icon: mdi:power-standby
icon_color: red
hold_action:
action: none
tap_action:
confirmation:
text: Shut down server?
action: call-service
service: homeassistant.stop
service_data: {}
target: {}
card_mod:
style: |
ha-card {
animation: power 1.5s infinite;
}
.shape {
--shape-color: none;
}
@keyframes power {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0 0, 42% 0, 42% 58%, 58% 58%, 58% 0, 100% 0, 100% 100%, 0 100%); }
}
- type: alarm-control-panel
entity: alarm_control_panel.alarm_ed
content_info: none
icon: mdi:shield-home-outline
- type: template
entity: light.ves_svet
icon: mdi:lightbulb-group-outline
icon_color: yellow
content_info: none
tap_action:
action: call-service
confirmation:
text: Turn off all the lights?
service: script.all_light_off
card_mod:
style: |
ha-card {
animation: ping 1.5s infinite, blink 1.5s ease-in-out infinite;
}
@keyframes blink {
100% {opacity: 0;}
}
}
- type: entity
entity: sensor.total_load
icon_color: red
card_mod:
style: |
ha-card {
position: relative;
overflow: hidden;
}
ha-card::before {
content: "";
info_color: red;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
box-shadow: 0 0 5px red, 0 0 10px red, 0 0 15px red;
animation: runningFire 2s linear infinite;
}
@keyframes runningFire {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100%);
}
}
6 Likes
Hello Dimitri…
I’m using this card, but don’t show badge_icon… could you help me?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
}
cards:
- type: custom:mushroom-template-card
primary: Sala
icon: mdi:sofa
tap_action:
action: navigate
navigation_path: /lovelace/2
icon_color: |-
{% if is_state('light.luci_sala', 'on') %}
yellow
{% endif %}
badge_icon: mdi:video
badge_color: |-
{% if is_state('camera.192_168_178_195', 'streaming') %}
red
{% endif %}
grey
multiline_secondary: true
card_mod:
style: |
ha-card {
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
z-index: 1;
}
:host {
--mush-icon-border-radius: 12px;
}
- type: custom:mini-graph-card
entities:
- entity: climate.calorifero_sala
attribute: current_temperature
name: null
hours_to_show: 24
line_width: 3
font_size: 50
points_per_hour: 2
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
color: yellow
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 25%, transparent);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-climate-card
entity: climate.calorifero_sala
icon: none
show_temperature_control: false
primary_info: null
secondary_info: null
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ state_attr(config.entity, 'current_temperature')|replace('.', ',') }}°";
font-size: 14px;
font-weight: bolder;
color: white;
position: absolute;
}
.shape {
{% set mode = state_attr(config.entity, 'hvac_action') %}
--shape-color: rgba(var(--rgb-
{%- if mode == 'heating' -%}
orange
{%- elif mode == 'cooling' -%}
blue
{%- else -%}
grey
{% endif %}));
}
mushroom-badge-icon$: |
.badge {
{{ 'display: none !important;' if state_attr(config.entity, 'hvac_action') == 'idle' }}
}
.: |
mushroom-badge-icon:after {
content: "{{ states('climate.calorifero_sala') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-green));
color: rgb(var(--rgb-white));
border-radius: 50%;
border-width: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 0.7em;
}
ha-card {
border: none !important;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:lightbulb
icon_color: |-
{% if is_state('light.luci_sala', 'on') %}
amber
{% endif %}
entity: light.luci_sala
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(states.light.luci_sala) | 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);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-template-card
primary: null
icon: mdi:window-shutter-open
icon_color: >-
{%if expand(area_entities('soggiorno')) | selectattr ( 'domain' ,
'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list |
count > 0 %} blue {% else %} grey {% endif %}
entity: cover.tapparelle_sala
badge_icon: none
badge_color: transparent
card_mod:
style: |
mushroom-badge-icon:after {
content: "{{ expand(area_entities('soggiorno')) | selectattr ( 'domain' , 'eq' , 'cover' ) | selectattr ( 'state' , 'eq' , 'open' ) | list | count}}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
ha-card {
--ha-card-border-width: 0;
}
1 Like
Awesome, have you figure out how to get the Cog working to start the dashboard editing? 
I have been working on my room card.
chips at the bottom left are conditional and scrollable
chips bottom right are thermostat (cycle through off-auto-heat), light group show ing number of lights on, and any other lights on (toggle function)
I would like to add:
- brightness ring to the light chips
- upper right icon when clicked open a popup with more details for the room
- I want to use this for many rooms, I would be happy if someone can help with simplifying the card by adding variables ??, or any other way so I don’t have to repeat code…
type: custom:vertical-stack-in-card
cards:
- square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: 'Bedroom 1 '
secondary: >
{{relative_time(states.light.bedroom_1_all_lights.last_changed) }} ago
@ {{ states.light.bedroom_1_all_lights.last_changed.timestamp() |
timestamp_custom('%I:%M %p', true) }}
entity: binary_sensor.area_bedroom_1
icon: ''
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: rgba(255, 255, 255, 1);
--card-primary-font-weight: 600;
--card-primary-font-size: 18px;
--secondary-text-color: rgba(255, 255, 255, 0.8);
--card-secondary-font-size: 14px;
--card-secondary-font-weight: 400;
--card-secondary-line-height: 16px;
padding-left: 18px !important;
background: none !important;
box-shadow: none !important;
width: max-content;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.area_bedroom_1
content_info: none
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: none !important;
border-style: none !important;
--chip-height: 67px;
--chip-width: 67px;
--chip-border-radius: 50%;
--chip-icon-size: 42px;
--chip-background: transparent !important;
}
alignment: end
view_layout:
grid-area: icon
card_mod:
style: |
ha-card {
margin-bottom: 0px !important;
--primary-text-color: white;
}
columns: 2
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
tap_action:
action: none
layout: horizontal
multiline_secondary: true
secondary: >
{{state_attr(entity,'current_humidity')}}% | {{ states(entity) }} |
set to {{state_attr(entity, 'temperature')}}°
primary: '{{state_attr(entity, ''current_temperature'')}}°'
entity: climate.thermostat_bedroom_1
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--primary-text-color: rgba(255, 255, 255, 1);
--card-primary-font-weight: 400;
--card-primary-font-size: 24px;
--secondary-text-color: rgba(255, 255, 255, 0.8);
--card-secondary-font-size: 14px;
--card-secondary-font-weight: 400;
--card-secondary-line-height: 12px;
margin-top: 12px !important;
padding-left: 16px !important;
padding-bottom: 8px !important;
background: none !important;
box-shadow: none !important;
width: max-content;
#height: 66px;
}
- type: custom:mod-card
card_mod:
style:
layout-card$:
grid-layout$: |
#root {
margin: 0px !important;
background-color: none;
padding: 0px !important;
margin: 0px!important;
}
:host {
--layout-margin: 0px 0px 0px 0px;
--layout-padding: 0px;
--card-margin: 0px;
}
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.madir
content_info: false
icon_color: white
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'home') %} home {% elif is_state(config.entity,'not_home') %} directions_walk {% elif is_state(config.entity,'unknown') %} question_mark {% else %} {% endif %}';
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
font-family: 'Material Icons';
{% if states(config.entity) == 'home' %}
background-color: green !important;
{% elif states(config.entity) == 'away' %}
background-color: #00bfff !important;
{% else %}
background-color: #ff0000 !important;
{% endif %}
border-radius: 50%;
}
- type: entity
entity: person.letizia
content_info: false
icon_color: white
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'home') %} home {% elif is_state(config.entity,'not_home') %} directions_walk {% elif is_state(config.entity,'unknown') %} question_mark {% else %} {% endif %}';
position: absolute;
top: -10%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
font-family: 'Material Icons';
{% if states(config.entity) == 'home' %}
background-color: green !important;
{% elif states(config.entity) == 'away' %}
background-color: red !important;
{% else %}
background-color: #ff0000 !important;
{% endif %}
border-radius: 50%;
}
- type: conditional
conditions:
- entity: binary_sensor.area_window_bedroom_1
state: 'on'
chip:
type: template
entity: binary_sensor.area_window_bedroom_1
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:window-open
{% else %}
mdi:window-closed
{% endif %}
icon_color: |-
{% if is_state(config.entity,'on') %}
red
{% else %}
red
{% endif %}
tap_action:
action: call-service
service: climate.turn_off
target:
entity_id: climate.area_climate_bedroom_1
data: {}
hold_action:
action: none
double_tap_action:
action: none
content_info: state
card_mod:
style: |
ha-card {
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'on') %} question_mark {% else %} {% endif %}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
font-family: 'Material Icons';
{% if states(config.entity) == 'off' %}
background-color: rgba(var(--rgb-red), 1) !important;
{% else %}
background-color: rgba(var(--rgb-red), 1) !important;
{% endif %}
border-radius: 50%;
}
- type: conditional
conditions:
- entity: binary_sensor.bedroom_1_battery_state
state: low
chip:
type: entity
entity: binary_sensor.bedroom_1_battery_state
use_entity_picture: false
content_info: none
icon: mdi:battery-20
icon_color: red
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'low') %}
background: white !important;
{% endif %}
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'low') %} question_mark {% else %} {% endif %}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
font-family: 'Material Icons';
background-color: rgba(var(--rgb-red), 1) !important;
border-radius: 50%;
}
alignment: start
card_mod:
style: |
ha-card {
background: none !important;
height: 60px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: ltr;
margin: 0px !important;
padding-left: 12px;
padding-bottom: 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:fire
icon_color: |-
{% if is_state(config.entity,'auto') %}
green
{% elif is_state(config.entity,'heat') %}
red
{% elif is_state(config.entity,'off') %}
grey
{% endif %}
entity: climate.thermostat_bedroom_1
tap_action:
action: call-service
service: script.climate_off_auto_heat_bedroom_1
target: {}
hold_action:
action: more-info
double_tap_action:
action: none
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'auto') %}
background: rgb(223, 242, 223) !important;
{% elif is_state(config.entity,'heat') %}
background: rgb(237, 204, 204) !important;
{% endif %}
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'auto') %} autorenew {% elif is_state(config.entity,'heat') %} local_fire_department {% else %} power_settings_new {% endif %}';
position: absolute;
top: -11%;
right: -10%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
border-radius: 50%;
font-family: 'Material Icons';
{% if is_state(config.entity,'auto') %}
background-color: #008000 !important; #green
{% elif is_state(config.entity,'heat') %}
background-color: #ff0000 !important; #red
{% elif is_state(config.entity,'off') %}
background-color: #808080 !important; #grey
{% else %}
background-color: #808080 !important; #grey
{% endif %}
}
- type: template
entity: light.bedroom_1_all_lights
hold_action:
action: more-info
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:lightbulb-multiple
{% else %}
mdi:lightbulb-multiple-off
{% endif %}
icon_color: |-
{% if is_state(config.entity,'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
background: rgb(245, 228, 198) !important;
{% endif %}
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{{ expand(states.light.bedroom_1_all_lights) |selectattr('state', 'eq', 'on') |selectattr('entity_id', 'in', area_entities('Bedroom 1')) |rejectattr('entity_id', 'search', 'master') |map(attribute='entity_id') |list | count }}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
{% if states(config.entity) == 'on' %}
background-color: #ffa500 !important;
{% else %}
background-color: #808080 !important;
{% endif %}
border-radius: 50%;
}
- type: template
entity: light.bedroom_1_hanging_lamp
hold_action:
action: more-info
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light
{% endif %}
icon_color: |-
{% if is_state(config.entity,'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
background: rgb(245, 228, 198) !important;
{% endif %}
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'unavailable') %} question_mark {% else %} {% endif %}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
font-family: 'Material Icons';
{% if states(config.entity) == 'on' %}
background-color: none !important;
{% elif states(config.entity) == 'off' %}
background-color: none !important;
{% else %}
background-color: #ff0000 !important;
{% endif %}
border-radius: 50%;
}
- type: template
entity: light.bedroom_1_standing_lamp
hold_action:
action: more-info
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:desk-lamp
{% else %}
mdi:desk-lamp
{% endif %}
icon_color: |-
{% if is_state(config.entity,'on') %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
{% if is_state(config.entity,'on') %}
background: rgb(245, 228, 198) !important;
{% endif %}
--chip-avatar-padding: 1px;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.5) !important;
}
ha-card::after {
content: '{% if is_state(config.entity,'unavailable') %} question_mark {% else %} {% endif %}';
position: absolute;
top: -11%;
right: -11%;
display: flex;
justify-content: center;
align-items: center;
width: 15px;
height: 15px;
font-size: 10px;
font-weight: 500;
color: white;
font-family: 'Material Icons';
{% if states(config.entity) == 'on' %}
background-color: none !important;
{% elif states(config.entity) == 'off' %}
background-color: none !important;
{% else %}
background-color: rgba(var(--rgb-red), 1) !important;
{% endif %}
border-radius: 50%;
}
- type: spacer
alignment: end
card_mod:
style: |
ha-card {
background: none !important;
height: 60px;
flex-wrap: nowrap;
width: max-content;
align-items: center;
display: flex;
}
:host {
overflow-x: scroll;
overflow-y: hidden;
direction: rtl;
margin: 0px !important;
padding-right: 6px;
padding-bottom: 0px;
}
layout:
grid-template-columns: 45% 55%
grid-template-rows: min-content;
max_cols: 2
card_mod:
style: |
ha-card {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 30%,rgba(0,0,0,0.6) 100%), url('/local/images/bedroom_1.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
7 Likes
That’s is great card!
This is what I was looking for.
Thaks for sharing it with us.
Ok thank you,
just thought there was a variable tracking icon active color which could be reused instead of trying to guess colors.
Any way to validate what are the actual defaults colors for each mode?
Otherwise I’ll just change the icon colors as well.
what card typ do you folks using for temp?
Is your climate device in either heating or cooling mode? It doesnt show the badge when the device is idle.
With regard to Activated animations here → Mushroom Card Active Animations
Is there a way to make the animations last longer or to slow them down to last 2-3 seconds?
THanks
in auto mode…i set auto in my code, but dont show the badge… i will try again thank you
Yes, just change the transition time.
i tried that, but the only way the transition runs properly is if i hold down on the button.
if i tap the button, the transition starts and stops before completion.
Tell me, is it possible to make this object in the form of a card as in the second picture? Can you help?
Yes. Unfortunately that is how browsers register mobile taps. You could try and change :active to :hover instead and that Might work better for your usecase.
