Hi
Is there any reason why this does not work please ? I have a animated bulb and the badge that you added yesterday. They both work fine individually but not together ?
Thanks
Martyn
type: custom:mushroom-template-card
primary: ''
icon: |2
{% set state=expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count %}
{% if state > 0 %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb
{% endif %}
icon_color: |2-
{% set state=expand(states.light.all_lights) | selectattr( 'state', 'eq', 'on') | list | count %}
{% if state > 0 %}
green
{% else %}
grey
{% endif %}
badge_icon: none
badge_color: transparent
entity: light.all_lights
fill_container: false
layout: vertical
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: /mobile-lighting
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1s linear infinite;' if is_state('light.all_lights','on') }}
}
@keyframes clip {
0% {
clip-path: polygon(43% 19%, 67% 23%, 81% 41%, 70% 98%, 32% 98%, 22% 65%, 20% 35%);
}
100% {
clip-path: inset(0 0 0 0);
}
}
mushroom-badge-icon$: |
after {
content: "{{ expand(states.light.all_lights) | 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: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
I have been playing again and looking to improve this.
I keep trying all sorts of formatting for the templating, but end up with
UndefinedError: 'input_datetime' is undefined
{%- set event = as_timestamp(states.entity.state) %}
{%- set now = as_timestamp(now()) %}
{% if (now) > (event) %}
days overdue
{% elif (now) > (event) %}
days remaining
{% endif%}
Im trying to incorporate these two as the secondary text to replace Days Due and Overdue
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }} days remaining
{{ (states(entity) | as_datetime | as_local - now()).days + 1 }} days overdue```
Well that’s absolutely amazing!
Once again thanks for all your support @rhysb
Is there any way to get that orange badge number on a single chips card?
I see you proposed something over here? But that’s not working for me.
Does anyone have a “template” for a room with chips?
in a style with minimalistics room card
ps. kind of hard to search foor “room” xD
My initial response was “Don’t be silly, Chips can’t have Badges!” but then I thought “Why not?”.
Mushroom Chip Badge:
type: custom:mushroom-chips-card
chips:
- type: template
entity: group.all_lights
icon: mdi:lightbulb
icon_color: amber
card_mod:
style: |
ha-card:after {
content: "{{ expand(states.group.all_lights) | 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: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
You are missing the selector before :after.
Should be:
mushroom-badge-icon$: |
ha-icon:after {
Did you ever figure this out? I also see that weird highlight on android
Omg you are a hero! Working like a charm and rocking as hell 
Once again many thanks for your support 
Try like this:
secondary: >-
{{ ((states(entity) | as_datetime | as_local - now() | as_local).days + 1) | abs }}
{% set due = (states(entity) | as_datetime | as_local) %}
{% set current = (now() | as_local) %}
{% if current > due %}
days overdue
{% else %}
days remaining
{% endif %}
That was brilliant, thank you and working brilliant now 
This is my theme that fixes that for me, the webkit-tap-highlight transparent I would think would make sense as a default on the card for mushroom, but this works everywhere when I add to my theme
Mushroom Custom:
card-mod-theme: "Mushroom Custom"
card-mod-card: |
ha-card:active {
transform: scale(0.975);
transition: 0s;
-webkit-tap-highlight-color: transparent;
}
modes:
light: {}
dark: {}
Still new to CSS but wanted to try recreating this minimalist room card, if anyone sees any improvements that can be made let me know
Minimalist Room Card
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:door
icon_color: green
primary: Hallway
secondary: '{{ states(''sensor.hallway_temperature'') }} °F'
layout: horizontal
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
position: relative;
top: -60px;
left: -195px;
overflow: visible !important;
}
.secondary {
position: relative;
overflow: visible !important;
top: -62px;
left: -195px;
}
mushroom-shape-icon$: |
.shape {
position: relative;
left: -50px;
top: 80px;
--icon-color: rgb(128, 199, 149) !important;
--shape-color: rgba(128, 199, 149, 0.2) !important;
}
.: |
ha-card {
--primary-text-color: rgb(128,199,149);
--secondary-text-color: rgba(128,199,149,0.5);
background: none;
}
:host {
--mush-icon-size: 186px;
}
- type: custom:mushroom-template-card
primary: none
icon_color: disabled
icon: mdi:lightbulb-group
secondary: none
entity: light.andrews_room
tap_action:
action: call-service
service: light.toggle
data: {}
target:
entity_id: light.andrews_room
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
{% if is_state(config.entity, 'on') %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
{% endif %}
}
.: |
ha-card {
width: 66px;
margin-left: 72%;
top: -205px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
icon_color: |-
{% if is_state(entity, 'on') %}
green
{%else%}
disabled
{% endif %}
icon: mdi:fan
secondary: none
entity: fan.andrew_s_fan
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 72%;
top: -215px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
icon_color: none
icon: none
secondary: none
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 72%;
top: -225px;
background: none;
}
- type: custom:mushroom-template-card
primary: none
icon_color: none
icon: none
secondary: none
card_mod:
style: |
ha-card {
width: 66px;
margin-left: 72%;
top: -235px;
background: none;
}
card_mod:
style: |
ha-card {
height: 240px !important;
}
Maybe it could be a bit smaller?
To be able to have more cards viewable at the same time 
@rhysb thanks for the additional icons. With previous icons I have them setup ie:
{{ '--icon-animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite;' if states('sensor.diskad_dishwasher_power_local') | float > 1 }}
transform-origin: 50% 75%;
}
How would I do this with the new microwave icon?
EDIT: figured it out, was as simply as placing the ha-icon:before inside an if statement
love it!
@rhysb Hi, love your work! Do you think is it possible to animate a badge icon? (for exemple for a blinking battery alert). Thanks in advance.
please share your configuration!!!
Can someone kindly help me with reducing the white space at the bottom of my card? It appears to be caused by a before pseudo element - setting a padding-bottom of 184.5px - which is a child of div#root in the grid card. Am i able to mod the CSS? I’ve tried without success.
My card yaml is:
type: custom:stack-in-card
cards:
- type: custom:mushroom-title-card
title: Media
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.bedroom_currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
card_mod:
style: |
ha-card {
{% if not is_state('media_player.bedroom_currently_playing', 'off') and not is_state('media_player.bedroom_currently_playing', 'idle') %}
background: url( '{{ state_attr("media_player.bedroom_currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.bedroom_currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
- square: true
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
icon: phu:nvidia-shield
entity: switch.bedroom_hub_tv
tap_action:
action: toggle
icon_color: '{{ "green" if is_state(entity, "on") else "disabled" }}'
layout: vertical
- type: custom:mushroom-template-card
icon: phu:firetv
entity: switch.bedroom_hub_fire_tv
tap_action:
action: toggle
icon_color: '{{ "green" if is_state(entity, "on") else "disabled" }}'
layout: vertical
Thanks in advance for any assistance
Is it possible to centre the chip in the middle?
Code:
type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ now().strftime(''%H:%M %a, %d %b'') }}'
- type: light
entity: light.living_all_lights
content_info: none
use_light_color: true
tap_action:
action: toggle
- type: template
content: '{{ states(''sensor.outdoor_temperature}} °C'
show_conditions: true
show_temperature: true
tap_action:
action: navigate
navigation_path: weather
alignment: justify