From 34838d21c146bcfc4cb92984a9fa131f9301c187 Mon Sep 17 00:00:00 2001
From: AnasHost <41167157+Anashost@users.noreply.github.com>
Date: Fri, 26 Dec 2025 05:15:32 +0100
Subject: [PATCH] Add Batch 4 with water boiler and tank cards
Added Batch 4 section with new water boiler and tank cards.
---
README.md | 518 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 518 insertions(+)
diff --git a/README.md b/README.md
index 5792df7..c58863e 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,10 @@ explains how to do it.
## Batch 3:
+## Batch 4:
+
+
+
# Cards:
@@ -10807,6 +10811,520 @@ card_mod:
```
+
+64 - Water Boiler (C)
+
+```yaml
+type: custom:mushroom-entity-card
+entity: sensor.water_boiler
+name: Water Boiler
+icon: mdi:water-boiler
+primary_info: state
+secondary_info: name
+tap_action:
+ action: more-info
+icon_color: white
+card_mod:
+ style: |
+ ha-card {
+ /* ====== CONFIG ====== */
+ {% set temp = states(config.entity) | float(0) %}
+
+ {% if temp < 30 %}
+ {% set level_pct = (temp / 29) * 39 %}
+ {% set rgb = '29, 130, 150' %} /* Blue */
+ {% set speed = '6s' %}
+
+ {% elif temp < 35 %}
+ {% set level_pct = 40 + ((temp - 30) / 5) * 39 %}
+ {% set rgb = '150, 109, 29' %} /* Orange */
+ {% set speed = '4s' %}
+
+ {% else %}
+ {% set raw_red = 80 + ((temp - 35) / 10) * 12 %}
+ /* Hard Cap at 96% temp exceeds 45C */
+ {% set level_pct = 96 if raw_red > 96 else raw_red %}
+ {% set rgb = '150, 29, 29' %} /* Red */
+ {% set speed = '2s' %}
+ {% endif %}
+
+ /* ===== VARIABLES ===== */
+ --liq-color: rgb({{ rgb }});
+ --liq-level: {{ level_pct }}%;
+ --wave-speed: {{ speed }};
+
+ /* ===== STYLING ===== */
+ # background-color: #1c1c1c !important;
+ border-radius: 12px;
+ position: relative;
+ overflow: hidden;
+ z-index: 0;
+ transition: all 0.5s ease;
+ }
+
+ /* Icon Styling */
+ mushroom-shape-icon {
+ --icon-size: 68px;
+ display: flex;
+ margin: -18px 0 10px -18px !important;
+ padding-right: 15px;
+ z-index: 2;
+ }
+
+ /* --- LIQUID Bar --- */
+ ha-card::before {
+ content: "";
+ position: absolute;
+ top: 0; left: 0; bottom: 0;
+ z-index: -1;
+
+ /* Width based on our calculated level */
+ width: calc(var(--liq-level) - 60px);
+
+ /* SOLID COLOR prevents the "Seam" issue */
+ background: var(--liq-color);
+
+ transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+ }
+
+ /* --- SPINNING WAVE --- */
+ ha-card::after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+
+ /* Only hide wave if empty (<= 0C) */
+ /* Removed the upper limit check so wave stays at high temp */
+ display: {{ 'none' if temp <= 0 else 'block' }};
+
+ width: 120px;
+ height: 120px;
+
+ background: var(--liq-color);
+ box-shadow: 0 0 25px rgba({{ rgb }}, 0.5);
+ border-radius: 40%;
+
+ /* Position Logic */
+ left: calc(var(--liq-level) - 120px);
+ top: calc(50% - 60px);
+
+ animation: spin-wave var(--wave-speed) linear infinite;
+ transition: left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+ }
+
+ /* --- CONTENT ON TOP --- */
+ .mushroom-state-item {
+ z-index: 2;
+ position: relative;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+ }
+
+ /* Force Icon White */
+ ha-state-icon {
+ color: white !important;
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
+ }
+
+ /* --- ANIMATIONZZ --- */
+ @keyframes spin-wave {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+```
+
+
+
+65 - Water Boiler (F)
+
+```yaml
+type: custom:mushroom-entity-card
+entity: sensor.water_boiler
+name: Water Boiler (F)
+icon: mdi:water-boiler
+primary_info: state
+secondary_info: name
+tap_action:
+ action: more-info
+icon_color: white
+card_mod:
+ style: |
+ ha-card {
+ /* ====== CONFIG ====== */
+ {% set temp = states(config.entity) | float(0) %}
+
+ {% if temp < 100 %}
+ {% set level_pct = (temp / 99) * 35 %}
+ {% set rgb = '29, 130, 150' %} /* Blue */
+ {% set speed = '6s' %}
+
+ {% elif temp < 150 %}
+ {% set level_pct = 36 + ((temp - 100) / 50) * 35 %}
+ {% set rgb = '150, 109, 29' %} /* Orange */
+ {% set speed = '4s' %}
+
+ {% else %}
+ {% set raw = 72 + ((temp - 150) / 40) * 24 %}
+ {% set level_pct = 96 if raw > 96 else raw %}
+ {% set rgb = '150, 29, 29' %} /* Red */
+ {% set speed = '2s' %}
+ {% endif %}
+
+ /* ===== VARIABLES ===== */
+ --liq-color: rgb({{ rgb }});
+ --liq-level: {{ level_pct }}%;
+ --wave-speed: {{ speed }};
+
+ /* ===== STYLING ===== */
+ border-radius: 12px;
+ position: relative;
+ overflow: hidden;
+ z-index: 0;
+ transition: all 0.5s ease;
+ }
+
+ mushroom-shape-icon {
+ --icon-size: 68px;
+ display: flex;
+ margin: -18px 0 10px -18px !important;
+ padding-right: 15px;
+ z-index: 2;
+ }
+
+ ha-card::before {
+ content: "";
+ position: absolute;
+ top: 0; left: 0; bottom: 0;
+ z-index: -1;
+ width: calc(var(--liq-level) - 60px);
+ background: var(--liq-color);
+ transition: width 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+ }
+
+ ha-card::after {
+ content: "";
+ position: absolute;
+ z-index: -1;
+ display: {{ 'none' if temp <= 40 else 'block' }};
+ width: 120px;
+ height: 120px;
+ background: var(--liq-color);
+ box-shadow: 0 0 25px rgba({{ rgb }}, 0.5);
+ border-radius: 40%;
+ left: calc(var(--liq-level) - 120px);
+ top: calc(50% - 60px);
+ animation: spin-wave var(--wave-speed) linear infinite;
+ transition: left 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+ }
+
+ .mushroom-state-item {
+ z-index: 2;
+ position: relative;
+ text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+ }
+
+ ha-state-icon {
+ color: white !important;
+ filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
+ }
+
+ @keyframes spin-wave {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+```
+
+
+
+66 - Water Tank
+
+```yaml
+type: custom:mushroom-entity-card
+entity: sensor.water_tank_level
+name: Water Tank
+tap_action:
+ action: more-info
+primary_info: state
+secondary_info: name
+icon: mdi:water
+layout: vertical
+icon_color: white
+card_mod:
+ style: |
+ ha-card {
+ /* ====== DIMENSIONS ====== */
+ height: 200px !important;
+ --custom-icon-size: 60px;
+ --custom-state-font-size: 20px; /* Size of the % number */
+ --custom-name-font-size: 14px;
+
+ /* ====== LOGIC ====== */
+ {% set level = states(config.entity) | float(0) %}
+
+ /* Colors */
+ {% if level <= 20 %}
+ {% set rgb = '150, 29, 29' %} /* Red */
+ {% else %}
+ {% set rgb = '29, 130, 150' %} /* Blue */
+ {% endif %}
+
+ --liq-color: rgb({{ rgb }});
+ --liq-color-light: rgba({{ rgb }}, 0.7);
+ --liq-level: {{ level }}%;
+
+ --card-primary-font-size: var(--custom-state-font-size) !important;
+ --card-secondary-font-size: var(--custom-name-font-size) !important;
+
+ /* Size of the small shapes */
+ --wave-size: 40px;
+
+ /* Gradient Body (Solid) */
+ background: linear-gradient(to top,
+ var(--liq-color) 0%,
+ var(--liq-color) var(--liq-level),
+ transparent var(--liq-level),
+ transparent 100%
+ ) !important;
+
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 0;
+
+ border: 1px solid rgba({{ rgb }}, 1);
+ }
+
+ /* --- Animation Layers --- */
+ ha-card::before, ha-card::after {
+ content: "";
+ position: absolute;
+ z-index: 1; /* Low Z-Index so content sits on top */
+
+ height: 30px;
+ width: 200%;
+ bottom: var(--liq-level);
+ left: 0;
+
+ background-image: radial-gradient(
+ circle at 50% 100%,
+ var(--liq-color) 65%,
+ transparent 66%
+ );
+
+ background-size: var(--wave-size) 40px;
+ background-repeat: repeat-x;
+ display: {{ 'none' if level <= 0 or level >= 100 else 'block' }};
+ pointer-events: none;
+ }
+
+ /* Front Wave */
+ ha-card::after {
+ background-image: radial-gradient(
+ circle at 50% 100%,
+ var(--liq-color) 65%,
+ transparent 66%
+ );
+ animation: scroll-left 10s linear infinite;
+ }
+
+ /* Back Wave */
+ ha-card::before {
+ background-image: radial-gradient(
+ circle at 50% 100%,
+ var(--liq-color-light) 65%,
+ transparent 66%
+ );
+ animation: scroll-right 3s linear infinite;
+ bottom: calc(var(--liq-level) + 5px);
+ }
+
+ /* content wrapper */
+ mushroom-card-content {
+ position: relative !important;
+ z-index: 10 !important;
+ }
+
+ /* Icon */
+ mushroom-shape-icon {
+ position: relative !important;
+ z-index: 11 !important; /* Higher than content wrapper */
+ --icon-size: var(--custom-icon-size) !important;
+ }
+
+ /* Text (Name ,, State) */
+ mushroom-state-info {
+ position: relative !important;
+ z-index: 11 !important;
+ text-shadow: 0px 1px 3px rgba(0,0,0,0.9);
+ }
+
+ /* icon color */
+ ha-state-icon {
+ color: white !important;
+ }
+
+ /* --- ANIMATIONS --- */
+ @keyframes scroll-left {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(calc(var(--wave-size) * -1)); }
+ }
+
+ @keyframes scroll-right {
+ 0% { transform: translateX(calc(var(--wave-size) * -1)); }
+ 100% { transform: translateX(0); }
+ }
+
+```
+
+
+
+67 - Fuel Tank
+
+```yaml
+type: custom:mushroom-entity-card
+entity: sensor.fuel_tank_level
+name: Fuel Tank
+tap_action:
+ action: more-info
+primary_info: state
+secondary_info: name
+icon: mdi:barrel
+layout: vertical
+icon_color: white
+card_mod:
+ style: |
+ ha-card {
+ /* ====== DIMENSIONS ====== */
+ height: 200px !important;
+ --custom-icon-size: 60px;
+ --custom-state-font-size: 20px; /* Size of the % number */
+ --custom-name-font-size: 14px;
+
+ /* ====== LOGIC ====== */
+ {% set level = states(config.entity) | float(0) %}
+
+ /* Colors */
+ {% if level <= 20 %}
+ {% set rgb = '150, 29, 29' %} /* Red */
+ {% else %}
+ {% set rgb = '150, 109, 29' %} /* Orange..ish */
+ {% endif %}
+
+ --liq-color: rgb({{ rgb }});
+ --liq-color-light: rgba({{ rgb }}, 0.7);
+ --liq-level: {{ level }}%;
+
+ --card-primary-font-size: var(--custom-state-font-size) !important;
+ --card-secondary-font-size: var(--custom-name-font-size) !important;
+
+ /* Size of the small shapes */
+ --wave-size: 40px;
+
+ /* Gradient Body (Solid) */
+ background: linear-gradient(to top,
+ var(--liq-color) 0%,
+ var(--liq-color) var(--liq-level),
+ transparent var(--liq-level),
+ transparent 100%
+ ) !important;
+
+ position: relative;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 0;
+
+ border: 1px solid rgba({{ rgb }}, 1);
+ }
+
+ /* --- Animation Layers --- */
+ ha-card::before, ha-card::after {
+ content: "";
+ position: absolute;
+ z-index: 1; /* Low Z-Index so content sits on top */
+
+ height: 30px;
+ width: 200%;
+ bottom: var(--liq-level);
+ left: 0;
+
+ background-image: radial-gradient(
+ circle at 50% 100%,
+ var(--liq-color) 65%,
+ transparent 66%
+ );
+
+ background-size: var(--wave-size) 40px;
+ background-repeat: repeat-x;
+ display: {{ 'none' if level <= 0 or level >= 100 else 'block' }};
+ pointer-events: none;
+ }
+
+ /* Front Wave */
+ ha-card::after {
+ background-image: radial-gradient(
+ circle at 50% 100%,
+ var(--liq-color) 65%,
+ transparent 66%
+ );
+ animation: scroll-left 10s linear infinite;
+ }
+
+ /* Back Wave */
+ ha-card::before {
+ background-image: radial-gradient(
+ circle at 50% 100%,
+ var(--liq-color-light) 65%,
+ transparent 66%
+ );
+ animation: scroll-right 3s linear infinite;
+ bottom: calc(var(--liq-level) + 5px);
+ }
+
+ /* content wrapper */
+ mushroom-card-content {
+ position: relative !important;
+ z-index: 10 !important;
+ }
+
+ /* Icon */
+ mushroom-shape-icon {
+ position: relative !important;
+ z-index: 11 !important; /* Higher than content wrapper */
+ --icon-size: var(--custom-icon-size) !important;
+ }
+
+ /* Text (Name ,, State) */
+ mushroom-state-info {
+ position: relative !important;
+ z-index: 11 !important;
+ text-shadow: 0px 1px 3px rgba(0,0,0,0.9);
+ }
+
+ /* icon color */
+ ha-state-icon {
+ color: white !important;
+ }
+
+ /* --- ANIMATIONS --- */
+ @keyframes scroll-left {
+ 0% { transform: translateX(0); }
+ 100% { transform: translateX(calc(var(--wave-size) * -1)); }
+ }
+
+ @keyframes scroll-right {
+ 0% { transform: translateX(calc(var(--wave-size) * -1)); }
+ 100% { transform: translateX(0); }
+ }
+
+```
+
---