From c8cf264092bc44687d5f8ae4277421bd6d0963a9 Mon Sep 17 00:00:00 2001
From: AnasHost <41167157+Anashost@users.noreply.github.com>
Date: Tue, 15 Sep 2026 17:26:33 +0200
Subject: [PATCH] Create env_with_graph_v2.md
---
env_with_graph_v2.md | 2152 ++++++++++++++++++++++++++++++++++++++++++
1 file changed, 2152 insertions(+)
create mode 100644 env_with_graph_v2.md
diff --git a/env_with_graph_v2.md b/env_with_graph_v2.md
new file mode 100644
index 0000000..f304eb7
--- /dev/null
+++ b/env_with_graph_v2.md
@@ -0,0 +1,2152 @@
+
+[![Revolut.Me][revolut_me_shield]][revolut_me]
+[![PayPal.Me][paypal_me_shield]][paypal_me]
+[![ko_fi][ko_fi_shield]][ko_fi_me]
+[![buymecoffee][buy_me_coffee_shield]][buy_me_coffee_me]
+[![patreon][patreon_shield]][patreon_me]
+
+
+
+
+
+# (Updated Recently) Home Assistant Animated Environment cards with graph.
+
+This [YouTube Video](https://youtu.be/avAg9CR9TRc) explains how to do it.
+
+## Preview
+
+
+ 
+
+
+
+
+> [!NOTE]
+> If you are using the **Sections** view type, you may need to set `rows` to around `1.5` for the card,
+> otherwise the card may appear compressed.
+> (USE THIS ONLY IF YOU HAVE ISSUES)
+>
+> ```yaml
+> grid_options:
+> rows: 1.5
+> ```
+
+
+
+# Cards:
+
+1 - Temperature (C)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_temperature
+ tap_action:
+ action: more-info
+ icon: mdi:thermometer
+ name: Temp
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ======= CONFIG ======= #}
+ {% set temp = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '0,140,255' %}
+ {% set glow_anim = 'temp-cold-glow' %}
+ {% set halo_anim = 'temp-cold-halo' %}
+ {% set duration = 4.0 %}
+ {% set intensity = 0.5 %}
+
+ {# RANGES / COLORS #}
+ {# You can change temp numbers below if needed #}
+
+ {% if temp < 18 %}
+ {# BLUE #}
+ {% set rgb = '0,140,255' %}
+ {% set glow_anim = 'temp-cold-glow' %}
+ {% set halo_anim = 'temp-cold-halo' %}
+ {% set duration = 4.4 %}
+ {% set intensity = 0.4 %}
+ {% elif temp < 20 %}
+ {# YELLOW #}
+ {% set rgb = '255,210,40' %}
+ {% set glow_anim = 'temp-cool-glow' %}
+ {% set halo_anim = 'temp-cool-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+ {% elif temp < 22 %}
+ {# ORANGE #}
+ {% set rgb = '255,150,40' %}
+ {% set glow_anim = 'temp-comfy-glow' %}
+ {% set halo_anim = 'temp-comfy-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.6 %}
+ {% elif temp < 23 %}
+ {# DARK ORANGE #}
+ {% set rgb = '255,115,20' %}
+ {% set glow_anim = 'temp-warm-glow' %}
+ {% set halo_anim = 'temp-warm-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.8 %}
+ {% else %}
+ {# RED #}
+ {% set rgb = '255,40,40' %}
+ {% set glow_anim = 'temp-hot-glow' %}
+ {% set halo_anim = 'temp-hot-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --temp-rgb: {{ rgb }};
+ --temp-intensity: {{ intensity }};
+ --temp-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --temp-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77,0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--temp-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--temp-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes temp-cold-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-cold-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-cool-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-cool-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-comfy-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-comfy-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-warm-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-warm-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-hot-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-hot-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--hum-rgb),1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_temperature
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: blue
+ - value: 16
+ color: lightblue
+ - value: 18
+ color: orange
+ - value: 21
+ color: red
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+2 - Humidity
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_humidity
+ tap_action:
+ action: more-info
+ icon: mdi:water-percent
+ name: Humidity
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set hum = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '120,210,255' %}
+ {% set glow_anim = 'hum-good-glow' %}
+ {% set halo_anim = 'hum-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+
+ {# RANGES
+ < 40 -> BAD (dark blue)
+ 40-60 -> GOOD (light blue)
+ > 60 -> MIDDLE / humid (medium blue)
+ #}
+
+ {% if hum < 40 %}
+ {# BAD - dry - dark blue #}
+ {% set rgb = '0,80,200' %}
+ {% set glow_anim = 'hum-bad-glow' %}
+ {% set halo_anim = 'hum-bad-halo' %}
+ {% set duration = 2.8 %}
+ {% set intensity = 0.4 %}
+ {% elif hum <= 60 %}
+ {# GOOD - light blue #}
+ {% set rgb = '120,210,255' %}
+ {% set glow_anim = 'hum-good-glow' %}
+ {% set halo_anim = 'hum-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+ {% else %}
+ {# MIDDLE / humid - medium blue #}
+ {% set rgb = '40,140,255' %}
+ {% set glow_anim = 'hum-mid-glow' %}
+ {% set halo_anim = 'hum-mid-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.6 %}
+ {% endif %}
+
+ --hum-rgb: {{ rgb }};
+ --hum-intensity: {{ intensity }};
+ --hum-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --hum-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--hum-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--hum-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes hum-bad-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--hum-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--hum-rgb), 0.35); }
+ }
+ @keyframes hum-bad-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--hum-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--hum-rgb), 0.2); }
+ }
+
+ @keyframes hum-good-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--hum-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--hum-rgb), 0.35); }
+ }
+ @keyframes hum-good-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--hum-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--hum-rgb), 0.2); }
+ }
+
+ @keyframes hum-mid-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--hum-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--hum-rgb), 0.35); }
+ }
+ @keyframes hum-mid-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--hum-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--hum-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--hum-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_humidity
+ hours_to_show: 24
+ line_width: 5
+ line_color: lightblue
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+3 - Airquility (US)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_air_quality
+ tap_action:
+ action: more-info
+ icon: mdi:air-filter
+ name: Air quality (US)
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set aqi = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '40,190,100' %}
+ {% set glow_anim = 'aq-good-glow' %}
+ {% set halo_anim = 'aq-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+ {% if aqi <= 50 %}
+ {# GOOD - GREEN #}
+ {% set rgb = '40,190,100' %}
+ {% set glow_anim = 'aq-good-glow' %}
+ {% set halo_anim = 'aq-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+ {% elif aqi <= 100 %}
+ {# MODERATE - YELLOW #}
+ {% set rgb = '255,215,70' %}
+ {% set glow_anim = 'aq-moderate-glow' %}
+ {% set halo_anim = 'aq-moderate-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.6 %}
+ {% elif aqi <= 150 %}
+ {# UNHEALTHY FOR SENSITIVE PPL - ORANGE #}
+ {% set rgb = '255,170,60' %}
+ {% set glow_anim = 'aq-usg-glow' %}
+ {% set halo_anim = 'aq-usg-halo' %}
+ {% set duration = 2.8 %}
+ {% set intensity = 0.7 %}
+ {% elif aqi <= 200 %}
+ {# UNHEALTHY - RED #}
+ {% set rgb = '230,60,60' %}
+ {% set glow_anim = 'aq-unhealthy-glow' %}
+ {% set halo_anim = 'aq-unhealthy-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.85 %}
+ {% elif aqi <= 300 %}
+ {# VERY UNHEALTHY - PURPLE #}
+ {% set rgb = '170,60,180' %}
+ {% set glow_anim = 'aq-veryunhealthy-glow' %}
+ {% set halo_anim = 'aq-veryunhealthy-halo' %}
+ {% set duration = 2.2 %}
+ {% set intensity = 0.95 %}
+ {% else %}
+ {# HAZARDOUS - DARK MAROON #}
+ {% set rgb = '120,0,70' %}
+ {% set glow_anim = 'aq-hazard-glow' %}
+ {% set halo_anim = 'aq-hazard-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --aq-rgb: {{ rgb }};
+ --aq-intensity: {{ intensity }};
+ --aq-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --aq-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--aq-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--aq-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes aq-good-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-good-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-moderate-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-moderate-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-usg-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-usg-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-unhealthy-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-unhealthy-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-veryunhealthy-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-veryunhealthy-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-hazard-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-hazard-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--aq-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_air_quality
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(40,190,100)
+ - value: 51
+ color: rgb(255,215,70)
+ - value: 101
+ color: rgb(255,170,60)
+ - value: 151
+ color: rgb(230,60,60)
+ - value: 201
+ color: rgb(170,60,180)
+ - value: 301
+ color: rgb(120,0,70)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+4 - Temperature (F)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_temperature_fah
+ tap_action:
+ action: more-info
+ icon: mdi:thermometer
+ name: Living room temp (F)
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set temp = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '0,140,255' %}
+ {% set glow_anim = 'temp-cold-glow' %}
+ {% set halo_anim = 'temp-cold-halo' %}
+ {% set duration = 4.0 %}
+ {% set intensity = 0.5 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+ {% if temp < 64 %}
+ {# BLUE - COLD #}
+ {% set rgb = '0,140,255' %}
+ {% set glow_anim = 'temp-cold-glow' %}
+ {% set halo_anim = 'temp-cold-halo' %}
+ {% set duration = 4.4 %}
+ {% set intensity = 0.4 %}
+ {% elif temp < 68 %}
+ {# YELLOW - COOL #}
+ {% set rgb = '255,210,40' %}
+ {% set glow_anim = 'temp-cool-glow' %}
+ {% set halo_anim = 'temp-cool-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+ {% elif temp < 72 %}
+ {# ORANGE - COMFY #}
+ {% set rgb = '255,150,40' %}
+ {% set glow_anim = 'temp-comfy-glow' %}
+ {% set halo_anim = 'temp-comfy-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.6 %}
+ {% elif temp < 76 %}
+ {# DARK ORANGE - WARM #}
+ {% set rgb = '255,115,20' %}
+ {% set glow_anim = 'temp-warm-glow' %}
+ {% set halo_anim = 'temp-warm-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.8 %}
+ {% else %}
+ {# RED - HOT #}
+ {% set rgb = '255,40,40' %}
+ {% set glow_anim = 'temp-hot-glow' %}
+ {% set halo_anim = 'temp-hot-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --temp-rgb: {{ rgb }};
+ --temp-intensity: {{ intensity }};
+ --temp-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --temp-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--temp-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--temp-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes temp-cold-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-cold-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-cool-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-cool-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-comfy-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-comfy-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-warm-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-warm-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+
+ @keyframes temp-hot-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--temp-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--temp-rgb), 0.35); }
+ }
+ @keyframes temp-hot-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--temp-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--temp-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--temp-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_temperature_fah
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(0,140,255)
+ - value: 64
+ color: rgb(255,210,40)
+ - value: 68
+ color: rgb(255,150,40)
+ - value: 72
+ color: rgb(255,115,20)
+ - value: 76
+ color: rgb(255,40,40)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+5 - Air quality (VOC)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_air_quality_voc
+ tap_action:
+ action: more-info
+ icon: mdi:air-filter
+ name: Living room VOC
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set voc = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '40,200,120' %}
+ {% set glow_anim = 'voc-clean-glow' %}
+ {% set halo_anim = 'voc-clean-halo' %}
+ {% set duration = 4.0 %}
+ {% set intensity = 0.5 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+
+ {% if voc < 100 %}
+ {# GREEN #}
+ {% set rgb = '40,200,120' %}
+ {% set glow_anim = 'voc-clean-glow' %}
+ {% set halo_anim = 'voc-clean-halo' %}
+ {% set duration = 4.4 %}
+ {% set intensity = 0.45 %}
+ {% elif voc < 200 %}
+ {# YELLOW-GREEN #}
+ {% set rgb = '140,220,80' %}
+ {% set glow_anim = 'voc-good-glow' %}
+ {% set halo_anim = 'voc-good-halo' %}
+ {% set duration = 3.6 %}
+ {% set intensity = 0.55 %}
+ {% elif voc < 300 %}
+ {# YELLOW #}
+ {% set rgb = '255,210,40' %}
+ {% set glow_anim = 'voc-fair-glow' %}
+ {% set halo_anim = 'voc-fair-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.7 %}
+ {% elif voc < 400 %}
+ {# ORANGE #}
+ {% set rgb = '255,140,40' %}
+ {% set glow_anim = 'voc-poor-glow' %}
+ {% set halo_anim = 'voc-poor-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.9 %}
+ {% else %}
+ {# RED #}
+ {% set rgb = '255,50,50' %}
+ {% set glow_anim = 'voc-bad-glow' %}
+ {% set halo_anim = 'voc-bad-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --voc-rgb: {{ rgb }};
+ --voc-intensity: {{ intensity }};
+ --voc-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --voc-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--voc-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--voc-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes voc-clean-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--voc-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--voc-rgb), 0.35); }
+ }
+ @keyframes voc-clean-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--voc-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--voc-rgb), 0.2); }
+ }
+
+ @keyframes voc-good-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--voc-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--voc-rgb), 0.35); }
+ }
+ @keyframes voc-good-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--voc-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--voc-rgb), 0.2); }
+ }
+
+ @keyframes voc-fair-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--voc-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--voc-rgb), 0.35); }
+ }
+ @keyframes voc-fair-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--voc-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--voc-rgb), 0.2); }
+ }
+
+ @keyframes voc-poor-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--voc-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--voc-rgb), 0.35); }
+ }
+ @keyframes voc-poor-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--voc-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--voc-rgb), 0.2); }
+ }
+
+ @keyframes voc-bad-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--voc-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--voc-rgb), 0.35); }
+ }
+ @keyframes voc-bad-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--voc-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--voc-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--voc-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_air_quality_voc
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(40,200,120)
+ - value: 100
+ color: rgb(140,220,80)
+ - value: 200
+ color: rgb(255,210,40)
+ - value: 300
+ color: rgb(255,140,40)
+ - value: 400
+ color: rgb(255,50,50)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+6 - Air quality (PM2.5)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: air_quality.demo_air_quality_home
+ tap_action:
+ action: more-info
+ icon: mdi:air-filter
+ name: Air quality Home
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set aqi = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '40,190,100' %}
+ {% set glow_anim = 'aq-good-glow' %}
+ {% set halo_anim = 'aq-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+
+ {% if aqi <= 5 %}
+ {# GOOD - GREEN #}
+ {% set rgb = '40,190,100' %}
+ {% set glow_anim = 'aq-good-glow' %}
+ {% set halo_anim = 'aq-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+ {% elif aqi <= 15 %}
+ {# FAIR - LIGHT GREEN #}
+ {% set rgb = '140,220,140' %}
+ {% set glow_anim = 'aq-fair-glow' %}
+ {% set halo_anim = 'aq-fair-halo' %}
+ {% set duration = 3.2 %}
+ {% set intensity = 0.6 %}
+ {% elif aqi <= 50 %}
+ {# MODERATE - YELLOW #}
+ {% set rgb = '255,215,70' %}
+ {% set glow_anim = 'aq-moderate-glow' %}
+ {% set halo_anim = 'aq-moderate-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.7 %}
+ {% elif aqi <= 90 %}
+ {# POOR - ORANGE #}
+ {% set rgb = '255,170,60' %}
+ {% set glow_anim = 'aq-poor-glow' %}
+ {% set halo_anim = 'aq-poor-halo' %}
+ {% set duration = 2.8 %}
+ {% set intensity = 0.8 %}
+ {% elif aqi <= 140 %}
+ {# VERY POOR - RED #}
+ {% set rgb = '230,60,60' %}
+ {% set glow_anim = 'aq-verypoor-glow' %}
+ {% set halo_anim = 'aq-verypoor-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.9 %}
+ {% else %}
+ {# EXTREMELY POOR - DARK MAROON #}
+ {% set rgb = '120,0,70' %}
+ {% set glow_anim = 'aq-extreme-glow' %}
+ {% set halo_anim = 'aq-extreme-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --aq-rgb: {{ rgb }};
+ --aq-intensity: {{ intensity }};
+ --aq-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --aq-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--aq-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--aq-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes aq-good-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-good-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-fair-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-fair-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-moderate-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-moderate-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-poor-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-poor-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-verypoor-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-verypoor-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-extreme-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-extreme-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--aq-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - air_quality.demo_air_quality_home
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(40,190,100)
+ - value: 6
+ color: rgb(140,220,140)
+ - value: 16
+ color: rgb(255,215,70)
+ - value: 51
+ color: rgb(255,170,60)
+ - value: 91
+ color: rgb(230,60,60)
+ - value: 141
+ color: rgb(120,0,70)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+7 - Air quality (EU)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_air_quality_eu
+ tap_action:
+ action: more-info
+ icon: mdi:air-filter
+ name: Air quality Amsterdam
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set aqi = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '40,190,100' %}
+ {% set glow_anim = 'aq-good-glow' %}
+ {% set halo_anim = 'aq-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+
+ {% if aqi <= 5 %}
+ {# GOOD - GREEN #}
+ {% set rgb = '40,190,100' %}
+ {% set glow_anim = 'aq-good-glow' %}
+ {% set halo_anim = 'aq-good-halo' %}
+ {% set duration = 3.4 %}
+ {% set intensity = 0.55 %}
+ {% elif aqi <= 15 %}
+ {# FAIR - LIGHT GREEN #}
+ {% set rgb = '140,220,140' %}
+ {% set glow_anim = 'aq-fair-glow' %}
+ {% set halo_anim = 'aq-fair-halo' %}
+ {% set duration = 3.2 %}
+ {% set intensity = 0.6 %}
+ {% elif aqi <= 50 %}
+ {# MODERATE - YELLOW #}
+ {% set rgb = '255,215,70' %}
+ {% set glow_anim = 'aq-moderate-glow' %}
+ {% set halo_anim = 'aq-moderate-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.7 %}
+ {% elif aqi <= 90 %}
+ {# POOR - ORANGE #}
+ {% set rgb = '255,170,60' %}
+ {% set glow_anim = 'aq-poor-glow' %}
+ {% set halo_anim = 'aq-poor-halo' %}
+ {% set duration = 2.8 %}
+ {% set intensity = 0.8 %}
+ {% elif aqi <= 140 %}
+ {# VERY POOR - RED #}
+ {% set rgb = '230,60,60' %}
+ {% set glow_anim = 'aq-verypoor-glow' %}
+ {% set halo_anim = 'aq-verypoor-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.9 %}
+ {% else %}
+ {# EXTREMELY POOR - DARK MAROON #}
+ {% set rgb = '120,0,70' %}
+ {% set glow_anim = 'aq-extreme-glow' %}
+ {% set halo_anim = 'aq-extreme-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --aq-rgb: {{ rgb }};
+ --aq-intensity: {{ intensity }};
+ --aq-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --aq-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--aq-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--aq-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes aq-good-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-good-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-fair-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-fair-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-moderate-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-moderate-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-poor-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-poor-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-verypoor-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-verypoor-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+
+ @keyframes aq-extreme-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--aq-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--aq-rgb), 0.35); }
+ }
+ @keyframes aq-extreme-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--aq-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--aq-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--aq-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_air_quality_eu
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(40,190,100)
+ - value: 6
+ color: rgb(140,220,140)
+ - value: 16
+ color: rgb(255,215,70)
+ - value: 51
+ color: rgb(255,170,60)
+ - value: 91
+ color: rgb(230,60,60)
+ - value: 141
+ color: rgb(120,0,70)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+8 - illuminance (LUX)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_illuminance
+ tap_action:
+ action: more-info
+ icon: mdi:brightness-5
+ name: Living room light (lux)
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set lux = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '40,80,255' %}
+ {% set glow_anim = 'lux-dark-glow' %}
+ {% set halo_anim = 'lux-dark-halo' %}
+ {% set duration = 4.0 %}
+ {% set intensity = 0.5 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+ {% if lux < 10 %}
+ {# DEEP BLUE - VERY DARK #}
+ {% set rgb = '40,80,255' %}
+ {% set glow_anim = 'lux-dark-glow' %}
+ {% set halo_anim = 'lux-dark-halo' %}
+ {% set duration = 4.4 %}
+ {% set intensity = 0.4 %}
+ {% elif lux < 50 %}
+ {# PURPLE - DIM #}
+ {% set rgb = '140,80,220' %}
+ {% set glow_anim = 'lux-dim-glow' %}
+ {% set halo_anim = 'lux-dim-halo' %}
+ {% set duration = 3.6 %}
+ {% set intensity = 0.55 %}
+ {% elif lux < 200 %}
+ {# SOFT YELLOW - COMFY #}
+ {% set rgb = '255,210,80' %}
+ {% set glow_anim = 'lux-comfy-glow' %}
+ {% set halo_anim = 'lux-comfy-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.6 %}
+ {% elif lux < 500 %}
+ {# WARM ORANGE - BRIGHT #}
+ {% set rgb = '255,160,60' %}
+ {% set glow_anim = 'lux-bright-glow' %}
+ {% set halo_anim = 'lux-bright-halo' %}
+ {% set duration = 2.6 %}
+ {% set intensity = 0.8 %}
+ {% else %}
+ {# NEAR WHITE - VERY BRIGHT #}
+ {% set rgb = '255,250,230' %}
+ {% set glow_anim = 'lux-sun-glow' %}
+ {% set halo_anim = 'lux-sun-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --lux-rgb: {{ rgb }};
+ --lux-intensity: {{ intensity }};
+ --lux-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --lux-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255, 255, 255, 0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--lux-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--lux-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes lux-dark-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--lux-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--lux-rgb), 0.35); }
+ }
+ @keyframes lux-dark-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--lux-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--lux-rgb), 0.2); }
+ }
+
+ @keyframes lux-dim-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--lux-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--lux-rgb), 0.35); }
+ }
+ @keyframes lux-dim-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--lux-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--lux-rgb), 0.2); }
+ }
+
+ @keyframes lux-comfy-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--lux-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--lux-rgb), 0.35); }
+ }
+ @keyframes lux-comfy-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--lux-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--lux-rgb), 0.2); }
+ }
+
+ @keyframes lux-bright-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--lux-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--lux-rgb), 0.35); }
+ }
+ @keyframes lux-bright-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--lux-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--lux-rgb), 0.2); }
+ }
+
+ @keyframes lux-sun-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--lux-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--lux-rgb), 0.35); }
+ }
+ @keyframes lux-sun-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--lux-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--lux-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--lux-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_illuminance
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(40,80,255)
+ - value: 10
+ color: rgb(140,80,220)
+ - value: 50
+ color: rgb(255,210,80)
+ - value: 200
+ color: rgb(255,160,60)
+ - value: 500
+ color: rgb(255,250,230)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+9 - CO2
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_co2_ppm
+ tap_action:
+ action: more-info
+ icon: mdi:molecule-co2
+ name: Living room CO2 (ppm)
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set co2 = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '40,200,120' %}
+ {% set glow_anim = 'co2-fresh-glow' %}
+ {% set halo_anim = 'co2-fresh-halo' %}
+ {% set duration = 4.0 %}
+ {% set intensity = 0.5 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+
+ {% if co2 < 600 %}
+ {# FRESH GREEN #}
+ {% set rgb = '40,200,120' %}
+ {% set glow_anim = 'co2-fresh-glow' %}
+ {% set halo_anim = 'co2-fresh-halo' %}
+ {% set duration = 4.4 %}
+ {% set intensity = 0.45 %}
+ {% elif co2 < 800 %}
+ {# SOFT GREEN #}
+ {% set rgb = '120,220,120' %}
+ {% set glow_anim = 'co2-good-glow' %}
+ {% set halo_anim = 'co2-good-halo' %}
+ {% set duration = 3.6 %}
+ {% set intensity = 0.55 %}
+ {% elif co2 < 1000 %}
+ {# YELLOW #}
+ {% set rgb = '255,210,40' %}
+ {% set glow_anim = 'co2-ok-glow' %}
+ {% set halo_anim = 'co2-ok-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.65 %}
+ {% elif co2 < 1400 %}
+ {# ORANGE #}
+ {% set rgb = '255,140,40' %}
+ {% set glow_anim = 'co2-high-glow' %}
+ {% set halo_anim = 'co2-high-halo' %}
+ {% set duration = 2.4 %}
+ {% set intensity = 0.85 %}
+ {% else %}
+ {# RED #}
+ {% set rgb = '255,50,50' %}
+ {% set glow_anim = 'co2-bad-glow' %}
+ {% set halo_anim = 'co2-bad-halo' %}
+ {% set duration = 2.0 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --co2-rgb: {{ rgb }};
+ --co2-intensity: {{ intensity }};
+ --co2-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --co2-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--co2-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--co2-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes co2-fresh-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--co2-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--co2-rgb), 0.35); }
+ }
+ @keyframes co2-fresh-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--co2-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--co2-rgb), 0.2); }
+ }
+
+ @keyframes co2-good-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--co2-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--co2-rgb), 0.35); }
+ }
+ @keyframes co2-good-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--co2-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--co2-rgb), 0.2); }
+ }
+
+ @keyframes co2-ok-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--co2-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--co2-rgb), 0.35); }
+ }
+ @keyframes co2-ok-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--co2-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--co2-rgb), 0.2); }
+ }
+
+ @keyframes co2-high-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--co2-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--co2-rgb), 0.35); }
+ }
+ @keyframes co2-high-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--co2-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--co2-rgb), 0.2); }
+ }
+
+ @keyframes co2-bad-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--co2-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--co2-rgb), 0.35); }
+ }
+ @keyframes co2-bad-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--co2-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--co2-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--co2-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_co2_ppm
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(40,200,120)
+ - value: 600
+ color: rgb(120,220,120)
+ - value: 800
+ color: rgb(255,210,40)
+ - value: 1000
+ color: rgb(255,140,40)
+ - value: 1400
+ color: rgb(255,50,50)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+
+10 - Pressure (mbar)
+
+```yaml
+type: custom:vertical-stack-in-card
+cards:
+ - type: custom:mushroom-entity-card
+ entity: sensor.livingroom_pressure_mbar
+ tap_action:
+ action: more-info
+ icon: mdi:gauge
+ name: Living room pressure (mbar)
+ primary_info: state
+ secondary_info: name
+ card_mod:
+ style:
+ mushroom-shape-icon$: |
+ .shape {
+ {# ========== CONFIG ========== #}
+ {% set p = states(config.entity) | float(0) %}
+
+ {# DEFAULTS #}
+ {% set rgb = '120,220,120' %}
+ {% set glow_anim = 'pres-normal-glow' %}
+ {% set halo_anim = 'pres-normal-halo' %}
+ {% set duration = 3.6 %}
+ {% set intensity = 0.55 %}
+
+ {# RANGES / COLORS #}
+ {# You can change numbers below if needed #}
+
+ {% if p < 990 %}
+ {# BLUE - LOW #}
+ {% set rgb = '0,140,255' %}
+ {% set glow_anim = 'pres-low-glow' %}
+ {% set halo_anim = 'pres-low-halo' %}
+ {% set duration = 4.4 %}
+ {% set intensity = 0.45 %}
+ {% elif p < 1005 %}
+ {# TEAL - SOFT #}
+ {% set rgb = '60,190,200' %}
+ {% set glow_anim = 'pres-soft-glow' %}
+ {% set halo_anim = 'pres-soft-halo' %}
+ {% set duration = 3.6 %}
+ {% set intensity = 0.55 %}
+ {% elif p < 1020 %}
+ {# GREEN - NORMAL #}
+ {% set rgb = '120,220,120' %}
+ {% set glow_anim = 'pres-normal-glow' %}
+ {% set halo_anim = 'pres-normal-halo' %}
+ {% set duration = 3.0 %}
+ {% set intensity = 0.6 %}
+ {% elif p < 1035 %}
+ {# YELLOW - HIGH #}
+ {% set rgb = '255,200,60' %}
+ {% set glow_anim = 'pres-high-glow' %}
+ {% set halo_anim = 'pres-high-halo' %}
+ {% set duration = 2.6 %}
+ {% set intensity = 0.8 %}
+ {% else %}
+ {# RED - VERY HIGH #}
+ {% set rgb = '255,80,60' %}
+ {% set glow_anim = 'pres-veryhigh-glow' %}
+ {% set halo_anim = 'pres-veryhigh-halo' %}
+ {% set duration = 2.1 %}
+ {% set intensity = 1.0 %}
+ {% endif %}
+
+ --pres-rgb: {{ rgb }};
+ --pres-intensity: {{ intensity }};
+ --pres-glow-animation: {{ glow_anim }} {{ duration }}s ease-in-out infinite;
+ --pres-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
+
+ opacity: 1;
+ --icon-color: rgba({{ rgb }}, 1);
+ background-color: rgba(77, 77, 77, 0.1) !important;
+ box-shadow: none !important;
+ border: 1px solid rgba(255,255,255,0.06);
+ position: relative;
+ }
+
+ .shape::before,
+ .shape::after {
+ content: '';
+ position: absolute;
+ border-radius: inherit;
+ pointer-events: none;
+ }
+
+ .shape::before {
+ inset: -8px;
+ animation: var(--pres-glow-animation);
+ }
+
+ .shape::after {
+ inset: -22px;
+ animation: var(--pres-halo-animation);
+ mix-blend-mode: screen;
+ }
+
+ @keyframes pres-low-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--pres-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--pres-rgb), 0.35); }
+ }
+ @keyframes pres-low-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--pres-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--pres-rgb), 0.2); }
+ }
+
+ @keyframes pres-soft-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--pres-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--pres-rgb), 0.35); }
+ }
+ @keyframes pres-soft-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--pres-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--pres-rgb), 0.2); }
+ }
+
+ @keyframes pres-normal-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--pres-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--pres-rgb), 0.35); }
+ }
+ @keyframes pres-normal-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--pres-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--pres-rgb), 0.2); }
+ }
+
+ @keyframes pres-high-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--pres-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--pres-rgb), 0.35); }
+ }
+ @keyframes pres-high-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--pres-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--pres-rgb), 0.2); }
+ }
+
+ @keyframes pres-veryhigh-glow {
+ 0%, 100% { box-shadow: 0 0 15px 0 rgba(var(--pres-rgb), 0.2); }
+ 50% { box-shadow: 0 0 20px 2 rgba(var(--pres-rgb), 0.35); }
+ }
+ @keyframes pres-veryhigh-halo {
+ 0%, 100% { box-shadow: 0 0 35px 10px rgba(var(--pres-rgb), 0.1); }
+ 50% { box-shadow: 0 0 45px 12px rgba(var(--pres-rgb), 0.2); }
+ }
+ .: |
+ mushroom-shape-icon {
+ --icon-size: 64px;
+ --icon-color: rgba(var(--pres-rgb), 1) !important;
+ display: flex;
+ margin: -18px 0 10px -20px !important;
+ padding-right: 22px;
+ padding-bottom: 25px;
+ }
+ ha-card {
+ clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
+ --card-primary-font-size: 1.3rem !important;
+ --card-primary-line-height: 1.3 !important;
+ }
+ - type: custom:mini-graph-card
+ entities:
+ - sensor.livingroom_pressure_mbar
+ hours_to_show: 24
+ line_width: 5
+ show:
+ name: false
+ icon: false
+ state: false
+ labels: false
+ legend: false
+ color_thresholds:
+ - value: 0
+ color: rgb(0,140,255)
+ - value: 990
+ color: rgb(60,190,200)
+ - value: 1005
+ color: rgb(120,220,120)
+ - value: 1020
+ color: rgb(255,200,60)
+ - value: 1035
+ color: rgb(255,80,60)
+ card_mod:
+ style: |
+ ha-card {
+ position: absolute !important;
+ inset: 0 !important;
+ margin: 0 !important;
+ padding: 0 !important;
+ z-index: 1 !important;
+ background: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ --ha-card-border-width: 0px !important;
+ --ha-card-background: transparent !important;
+ pointer-events: none;
+ opacity: 0.5;
+ mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 90%);
+ }
+ ha-card::before, ha-card::after { display: none !important; }
+card_mod:
+ style: |
+ ha-card {
+ overflow: hidden !important;
+ }
+
+```
+
+
+---
+
+[paypal_me_shield]: https://img.shields.io/badge/PayPal-00457C?style=for-the-badge&logo=paypal&logoColor=white
+
+[paypal_me]: https://paypal.me/anasboxsupport
+
+[revolut_me_shield]:
+https://img.shields.io/badge/revolut-FFFFFF?style=for-the-badge&logo=revolut&logoColor=black
+
+[revolut_me]: https://revolut.me/anas4e
+
+[ko_fi_shield]: https://img.shields.io/badge/Ko--fi-F16061?style=for-the-badge&logo=ko-fi&logoColor=white
+
+[ko_fi_me]: https://ko-fi.com/anasbox
+
+[buy_me_coffee_shield]:
+https://img.shields.io/badge/Buy%20Me%20Coffee-ffdd00?style=for-the-badge&logo=buy-me-a-coffee&logoColor=black
+
+[buy_me_coffee_me]: https://www.buymeacoffee.com/anasbox
+
+[patreon_shield]:
+https://img.shields.io/badge/patreon-404040?style=for-the-badge&logo=patreon&logoColor=white
+
+[patreon_me]: https://patreon.com/AnasBox
+
+