QQā¦this card looks niceā¦curiousā¦wha sort of helper & code did you use for the dropdown? I have been trying to do this on my setup, but cannot figure out how to do it?
May I ask how were you able to use the numbers card for a sensor percentage? Can i see your code?
Itās a toggle helper. Just create a new helper under Settings > Devices & services and select Toggle.
Itās just an input_boolean. Clicking the icon just toggles the boolean. Then the extra info is just under a conditional card referenced to that boolean.
I added some padding to the chip card. I would suggest the use of two icons, one for open blinds and one for closed. In addition, you can set a different color icon based on the status of the blinds.
Closed -tilt is 0
Open -tilt is 44
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto Brinquedos
secondary: >-
{{
states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:unicorn-variant
entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
tap_action:
action: navigate
navigation_path: quarto_brinquedos
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.quarto_brinquedos_390_0_391
icon: |
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
green
{% else %}
yellow
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.quarto_brinquedos_390_0_391','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
Thanks a lot it worked!
If I wanted to animate the large icon, for example when sensor.aeg_roupa_appliancestate is different than IDLE, icon mdi:washing-machine will wiggle like this code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: orange
primary: 'Washing Machine #2'
card_mod:
style: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
But this in the previous card.
Would that be too difficult?
Thanks.
Like this?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto Brinquedos
secondary: >-
{{
states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:unicorn-variant
entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
tap_action:
action: navigate
navigation_path: quarto_brinquedos
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
{% if is_state('sensor.aeg_roupa_appliancestate', 'on') %}
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.quarto_brinquedos_390_0_391
icon: |
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
green
{% else %}
yellow
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.quarto_brinquedos_390_0_391','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
This one I cannot get it to work, even when I change
{% if is_state('sensor.aeg_roupa_appliancestate', 'on') %}
to
{% if is_state('sensor.aeg_roupa_appliancestate', 'off') %}
or
{% if is_state('sensor.aeg_roupa_appliancestate', 'iddle') %}
The icon do not animate.
But thanks anyway for helping!
I tested with my own entities and it works
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto Brinquedos
secondary: |
{{states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:unicorn-variant
entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
tap_action:
action: navigate
navigation_path: quarto_brinquedos
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
{% if states('sensor.aeg_roupa_appliancestate') == 'off' or states('sensor.aeg_roupa_appliancestate') ==
'on' %}
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
{%else %}
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.quarto_brinquedos_390_0_391
icon: |
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{%- set jalousie = state_attr('cover.sonnenschutz_BEDROOM',
'current_position') | int %} {% if jalousie >= 2 %}
green
{% else %}
yellow
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.quarto_brinquedos_390_0_391','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
1 Like
Test this basic card if that doesnāt work
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto Brinquedos
secondary: |
{{states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:unicorn-variant
entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
tap_action:
action: navigate
navigation_path: quarto_brinquedos
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: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
1 Like
Is it possible to replicate this person card with mushroom and card-mod? As you can see in the pic, the badge icon has a cutout when it meets the entity icon. Thanks
The simpler one worked, but the inside of the icon disappeared 
Please post the code for those two cards combined
This are not combined, they are single cards that Iām using to test.
The two cards that will be combined to the laundry and living room will be these, but I want to animate the āLavandariaā icon when the machine is working 
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lavandaria
icon: mdi:washing-machine
entity: null
tap_action:
action: navigate
navigation_path: lavandaria
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.lavandaria_janela_lavandaria_17
icon: >
{%- set jalousie =
state_attr('cover.lavandaria_janela_lavandaria_17',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: >
{%- set jalousie =
state_attr('cover.lavandaria_janela_lavandaria_17',
'current_position') | int %} {% if jalousie >= 2 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.lavandaria_janela_lavandaria_17','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.NENHUMA', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sala de estar
secondary: >-
{{
states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:sofa
entity: light.escritorio_tras_interruptor_1
tap_action:
action: navigate
navigation_path: sala-de-estar
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.sala_portas_sala_varanda_15
icon: |
{%- set jalousie = state_attr('cover.sala_portas_sala_varanda_15',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{%- set jalousie = state_attr('cover.sala_portas_sala_varanda_15',
'current_position') | int %} {% if jalousie >= 2 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.sala_portas_sala_varanda_15','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.escritorio_tras_interruptor_1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
card_mod:
style: |
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
Yes like this or similar
type: custom:mushroom-person-card
entity: person.jay673
card_mod:
style: |
mushroom-badge-icon {
--badge-icon-size: 0px;
--badge-size: 15px;
outline: 3px solid white;
border-radius:50%;
}
1 Like
Iāll get back to you later today if no one answers you 
1 Like
Great, thank you!
Guys, can make the chip card animate?
I tried something like this but to no avail:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: binary_sensor.toilet_presence
content_info: none
icon: mdi:human
icon_color: |-
{% if is_state('binary_sensor.toilet_presence', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
upd: oh sorry, I see I had used badgeā¦
I see where the problem is, the animated washing machine have two cards stacked, the orange and the blue are two cardsā¦
I got it working on the small card, with this code, but I only want it to animate when sensor.aeg_roupa_appliancestate is not idle, now its animated all the time, because it donāt have the conditional.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Quarto Brinquedos
secondary: >
{{states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:washing-machine
entity: light.toys_room_tx_ultimate_toys_room_tx_ultimate_l1
tap_action:
action: navigate
navigation_path: quarto_brinquedos
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: |
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
width: 66px;
top: -66px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
card_mod:
style: |
ha-card {
height: 66px;
}
EDIT: I managed to put in the big icon also, but the blue part I donāt know how to resize it. In all off them I need the condition
Code for the last buttons:
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Lavandaria
icon: mdi:washing-machine
entity: null
tap_action:
action: navigate
navigation_path: lavandaria
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
ha-state-icon {
animation: shake 400ms ease-in-out infinite;
transform-origin: 50% 58%;
clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%,
65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0);
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
- type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: blue
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: none !important;
}
.: |
ha-card {
--mush-icon-size: 76px;
top: -62px;
border-width: 0px;
}
ha-state-icon {
animation: spin 1s linear infinite;
transform-origin: 50% 58%;
clip-path: circle(21.7% at 50% 58%);
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.lavandaria_janela_lavandaria_17
icon: >
{%- set jalousie =
state_attr('cover.lavandaria_janela_lavandaria_17',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: >
{%- set jalousie =
state_attr('cover.lavandaria_janela_lavandaria_17',
'current_position') | int %} {% if jalousie >= 2 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.lavandaria_janela_lavandaria_17','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.NENHUMA', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Sala de estar
secondary: >-
{{
states('sensor.sala_sala_sala_unknown_03_00_00_01_14_a4_temperature')
| round(0) }} Ā°C
icon: mdi:sofa
entity: light.escritorio_tras_interruptor_1
tap_action:
action: navigate
navigation_path: sala-de-estar
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: 60px;
margin-left: -20px !important;
}
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: cover.sala_portas_sala_varanda_15
icon: |
{%- set jalousie = state_attr('cover.sala_portas_sala_varanda_15',
'current_position') | int %} {% if jalousie >= 2 %}
mdi:window-shutter-open
{% else %}
mdi:window-shutter
{% endif %}
icon_color: |
{%- set jalousie = state_attr('cover.sala_portas_sala_varanda_15',
'current_position') | int %} {% if jalousie >= 2 %}
blue
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card:after {
content: "{{state_attr('cover.sala_portas_sala_varanda_15','current_tilt_position') }}";
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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
alignment: end
card_mod:
style: |
ha-card {
--chip-border-width: 0px;
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
padding: 0px 10px 0px 0px;
}
card_mod:
style: |
ha-card {
height: 102px;
border-width: 0px;
box-shadow: 0px 0px;
{% if is_state('light.escritorio_tras_interruptor_1', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
card_mod:
style: |
ha-card {
border-width: 0px;
box-shadow: 0px 0px;
}
Hope you can give me a hand here, my knowledge is not so great, I try and do what I can.
1 Like
Can anyone give me a hint if there is a way to make my crafts appear the same on both the desktop (expected option) and the mobile app (not expected option)?
Desktop:
App:
- type: custom:mushroom-template-card
primary: Airwick
icon: mdi:spray
icon_color: |-
{% if is_state('switch.toilet_airwick_valve', 'on') %}
red
{% else %}
teal
{% endif %}
layout: vertical
entity: switch.toilet_airwick_valve
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: 0px 0px;
}
ha-card:after {
content: "{{ states('counter.toilet_airwick_total') }}";
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: +10px;
right: +45px;
width: 21px;
height: 21px;
font-size: 11px;
}
:host {
--icon-size: 64px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}