You are missing the selector before :after.
Should be:
mushroom-badge-icon$: |
ha-icon:after {
1 Like
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 
1 Like
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 %}
1 Like
That was brilliant, thank you and working brilliant now 
2 Likes
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: {}
2 Likes
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;
}
28 Likes
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
1 Like
love it!
10 Likes
@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.
1 Like
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
1 Like
Hi, there are options (margin, outer_padding) for the stack-in-card i think:
- type: custom:stack-in-card
mode: horizontal
keep:
box_shadow: true/false
margin: true/false
border_radius: true/false
background: true/false
outer_padding: true/false
A little messy but here are my chips
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:thermometer
content: >-
{{states('sensor.temperatur_lavest')|int}}-{{states('sensor.temperatur_hoyest')|int}}°
tap_action:
action: more-info
entity: sensor.temperatur_lavest
hold_action:
action: more-info
- type: template
entity: sensor.fuktighet_lavest
icon: mdi:water
icon_color: light-blue
content: '{{states(entity)| int}}-{{states(''sensor.fuktighet_hoyest'') | int}}%'
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.netatmo_innemodul_air_health
icon: mdi:weather-windy
icon_color: green
content: |+
{% set netatmo=states('sensor.netatmo_innemodul_air_health') %}
{% set p1=states('sensor.p1_air_health') %}
{% if netatmo == 'Farlig' or p1 == 'Farlig' %}
Farlig
{% elif netatmo == 'Veldig Dårlig' or p1 == 'Veldig Dårlig' %}
Veldig Dårlig
{% elif netatmo == 'Dårlig' or p1 == 'Dårlig' %}
Dårlig
{% elif netatmo == 'Ok' or p1 == 'Ok' %}
Ok
{% elif netatmo == 'Bra' or p1 == 'Bra' %}
Bra
{% elif netatmo == 'Utmerket' or p1 == 'Utmerket' %}
Utmerket
{% else %}
error
{% endif %}
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: more-info
- type: template
entity: sensor.eva_meter_reader_smartenergymetering
icon: mdi:lightning-bolt
icon_color: '{{''orange'' if ((states(entity)|int) > 3000) else ''amber'' }}'
content: '{{states(entity)}} W'
tap_action:
action: navigate
navigation_path: /lovelace/strom
hold_action:
action: navigate
navigation_path: /lovelace/strom
- type: conditional
conditions:
- entity: sensor.current_lights_on
state_not: '0'
chip:
type: template
icon: >-
{{ "mdi:lightbulb-group" if states(entity) | int > 1 else
"mdi:lightbulb" }}
double_tap_action:
action: none
entity: sensor.current_lights_on
icon_color: amber
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.current_lights_on') }}";
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;
}
- type: conditional
conditions:
- entity: sensor.current_speakers_playing
state_not: '0'
chip:
type: template
entity: sensor.current_speakers_playing
icon: '{{ state_attr(entity, ''icon'') }}'
icon_color: teal
tap_action:
action: more-info
hold_action:
action: more-info
card_mod:
style: |
ha-card:after {
content: "{{ states('sensor.current_speakers_playing') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-teal));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
- type: conditional
conditions:
- entity: switch.varmtvannsbereder
state: 'off'
chip:
type: template
double_tap_action:
action: none
entity: switch.varmtvannsbereder
tap_action:
action: navigate
navigation_path: /lovelace/varmtvann
hold_action:
action: none
icon: mdi:water-boiler
icon_color: grey
- type: conditional
conditions:
- entity: binary_sensor.foliestatus
state: 'on'
chip:
type: entity
entity: sensor.varmefolie_sanntid
icon: mdi:radiator
icon_color: orange
content_info: none
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_inngangspartidor
state: 'on'
chip:
type: entity
entity: binary_sensor.contactsensor_inngangspartidor
content_info: name
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_stuedor_kontaktsensor
state: 'on'
chip:
type: entity
entity: binary_sensor.contactsensor_stuedor_kontaktsensor
name: Altan
content_info: name
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_utebod_kontaktsensor_door
state: 'on'
chip:
type: entity
entity: binary_sensor.contactsensor_utebod_kontaktsensor_door
name: Utebod
content_info: name
- type: conditional
conditions:
- entity: binary_sensor.contactsensor_fryseboks
state: 'on'
chip:
type: template
double_tap_action:
action: more-info
entity: binary_sensor.contactsensor_fryseboks
icon: mdi:fridge-alert
icon_color: red
content: Fryseboks
tap_action:
action: more-info
hold_action:
action: more-info
- type: conditional
conditions:
- entity: switch.front_door_live_stream
state: 'on'
chip:
type: template
entity: switch.front_door_live_stream
icon: mdi:record-rec
icon_color: red
tap_action:
action: toggle
- type: conditional
conditions:
- entity: binary_sensor.leaf_lader
state: 'on'
chip:
type: template
icon: mdi:car-electric
icon_color: blue
tap_action:
action: navigate
navigation_path: leaf
alignment: center
4 Likes
Brilliant, works a charm, wish I could get my head round this templating and css.
1 Like
Change square: true to square: false.
1 Like
For those triggered by an off-center Chip 
, you can center it properly like this.
Mushroom Chip True Center:
type: custom:mushroom-chips-card
chips:
- type: template
content: '{{ now().strftime(''%H:%M %a, %d %b'') }}'
- type: light
entity: light.office_light
content_info: none
use_light_color: true
tap_action:
action: toggle
card_mod:
style: |
ha-card {
position: absolute;
left: calc(50% - (var(--chip-height) / 2));
}
- type: template
content: '{{ states(''sensor.weatherflow_feels_like_temperature'')}} °C'
show_conditions: true
show_temperature: true
tap_action:
action: navigate
navigation_path: weather
alignment: justify
6 Likes
Thanks for the suggestions. I tried them all without success; changing to a custom-layout card did the trick.