Created
January 12, 2026 14:56
-
-
Save jonamoer/06a01af7a7587595108014d881f141ae to your computer and use it in GitHub Desktop.
Yaml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| title: Thuis | |
| views: | |
| - title: Home_beta | |
| path: home | |
| sections: | |
| - type: grid | |
| cards: | |
| - type: custom:mushroom-title-card | |
| title: Thuis | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| entity: person.User1 | |
| button_type: state | |
| show_state: true | |
| styles: | | |
| .bubble-button-background { | |
| background-color: ${ | |
| { | |
| 'home': '#8AD926FF', | |
| 'Afwezig': '#1982C4FF', | |
| 'Werk User1': '#CDCA3AFF', | |
| }[state] ?? '#ff0000AA' | |
| }; | |
| } | |
| card_layout: large | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: state | |
| show_state: true | |
| styles: | | |
| .bubble-button-background { | |
| background-color: ${ | |
| { | |
| 'home': '#8AD926FF', | |
| 'Afwezig': '#1982C4FF', | |
| 'Werk User1': '#CDCA3AFF', | |
| }[state] ?? '#ff0000AA' | |
| }; | |
| } | |
| card_layout: large | |
| entity: person.User2 | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: state | |
| entity: sensor.pixel_9_battery_level | |
| styles: |- | |
| :host{ | |
| --color-ok-icon: green ; | |
| --color-warning-icon: orange ; | |
| --color-alert-icon: red ; | |
| --color-ok: #85A408AA ; | |
| --color-warning: #E77910AA ; | |
| --color-alert: #CA3333AA ; | |
| --color-bar: ${state > 40 ? 'var(--color-ok)' | |
| : state > 20 ? 'var(--color-warning)' | |
| : 'var(--color-alert)'} ; | |
| --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); | |
| --color-notification-bubble: red; | |
| } | |
| ha-icon { | |
| color: var(${ state > 40 ? '--color-ok-icon': | |
| state > 20 ? '--color-warning-icon' : | |
| '--color-alert-icon'}) | |
| !important; } | |
| .bubble-button-card-container { | |
| background: linear-gradient( | |
| to right, | |
| var(--color-bar) 0%, | |
| var(--color-bar) ${Math.round(state)}%, | |
| var(--color-background) ${Math.round(state)}%, | |
| var(--color-background) 100% | |
| ) !important; | |
| } | |
| ha-card::after { | |
| position: absolute; | |
| top: -10px; | |
| left: -10px; | |
| padding: 0 10px; | |
| border-radius: 999px; | |
| border: 0px solid black; | |
| color: #fff; | |
| content: "${Math.round(state) < 40 ? '!' : ''}"; | |
| background: var(--color-notification-bubble); | |
| display: block; | |
| } | |
| icon: '' | |
| name: Pixel 9 User1 | |
| sub_button: [] | |
| layout_options: | |
| grid_columns: 2 | |
| grid_rows: 1 | |
| card_layout: large | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: state | |
| styles: |- | |
| :host{ | |
| --color-ok-icon: green ; | |
| --color-warning-icon: orange ; | |
| --color-alert-icon: red ; | |
| --color-ok: #85A408AA ; | |
| --color-warning: #E77910AA ; | |
| --color-alert: #CA3333AA ; | |
| --color-bar: ${state > 40 ? 'var(--color-ok)' | |
| : state > 20 ? 'var(--color-warning)' | |
| : 'var(--color-alert)'} ; | |
| --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color)))); | |
| --color-notification-bubble: red; | |
| } | |
| ha-icon { | |
| color: var(${ state > 40 ? '--color-ok-icon': | |
| state > 20 ? '--color-warning-icon' : | |
| '--color-alert-icon'}) | |
| !important; } | |
| .bubble-button-card-container { | |
| background: linear-gradient( | |
| to right, | |
| var(--color-bar) 0%, | |
| var(--color-bar) ${Math.round(state)}%, | |
| var(--color-background) ${Math.round(state)}%, | |
| var(--color-background) 100% | |
| ) !important; | |
| } | |
| ha-card::after { | |
| position: absolute; | |
| top: -10px; | |
| left: -10px; | |
| padding: 0 10px; | |
| border-radius: 999px; | |
| border: 0px solid black; | |
| color: #fff; | |
| content: "${Math.round(state) < 40 ? '!' : ''}"; | |
| background: var(--color-notification-bubble); | |
| display: block; | |
| } | |
| icon: '' | |
| name: iPhone User2 | |
| sub_button: [] | |
| layout_options: | |
| grid_columns: 2 | |
| grid_rows: 1 | |
| card_layout: large | |
| entity: sensor.iphone_van_User2_battery_level | |
| - type: tile | |
| entity: binary_sensor.deursensor_voordeur_contact | |
| vertical: false | |
| hide_state: false | |
| show_entity_picture: false | |
| name: Voordeur | |
| - type: tile | |
| entity: binary_sensor.deursensor_schuifdeur_contact | |
| vertical: false | |
| hide_state: false | |
| show_entity_picture: false | |
| name: Schuifdeur | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: Buiten | |
| primary_info: state | |
| secondary_info: name | |
| entity: sensor.buitensensor_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.buitensensor_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| entity: sensor.buitensensor_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 ========== #} | |
| {# == Updated: entity auto generated == #} | |
| {% set hum = states(config.entity) | float(0) %} | |
| {# DEFAULTS #} | |
| {% set rgb = '120,210,255' %} | |
| {% set anim = 'hum-good-breathe' %} | |
| {% set glow_anim = 'hum-good-glow' %} | |
| {% set halo_anim = 'hum-good-halo' %} | |
| {% set duration = 3.2 %} | |
| {# 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 anim = 'hum-bad-pulse' %} | |
| {% set glow_anim = 'hum-bad-glow' %} | |
| {% set halo_anim = 'hum-bad-halo' %} | |
| {% set duration = 2.8 %} | |
| {% elif hum <= 60 %} | |
| {# GOOD - light blue #} | |
| {% set rgb = '120,210,255' %} | |
| {% set anim = 'hum-good-breathe' %} | |
| {% set glow_anim = 'hum-good-glow' %} | |
| {% set halo_anim = 'hum-good-halo' %} | |
| {% set duration = 3.4 %} | |
| {% else %} | |
| {# MIDDLE / humid - medium blue #} | |
| {% set rgb = '40,140,255' %} | |
| {% set anim = 'hum-mid-wave' %} | |
| {% set glow_anim = 'hum-mid-glow' %} | |
| {% set halo_anim = 'hum-mid-halo' %} | |
| {% set duration = 3.0 %} | |
| {% endif %} | |
| --hum-rgb: {{ rgb }}; | |
| --shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite; | |
| --hum-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite; | |
| --hum-halo-animation: {{ halo_anim }} {{ (duration * 1.1) | round(2) }}s ease-in-out infinite; | |
| /* Icon color follows humidity color */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutral pill so theme blue does not leak through */ | |
| background-color: rgba(77,77,77,0.2) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| opacity: 1; | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); | |
| } | |
| /* Glow layers */ | |
| .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; | |
| } | |
| /* ========== GOOD - light blue ========== */ | |
| @keyframes hum-good-breathe { | |
| 0% { transform: scale(0.98); } | |
| 50% { transform: scale(1.04); } | |
| 100% { transform: scale(0.98); } | |
| } | |
| @keyframes hum-good-glow { | |
| 0% { | |
| box-shadow: | |
| 0 0 18px 0 rgba(var(--hum-rgb), 0.55), | |
| 0 0 30px 4 rgba(var(--hum-rgb), 0.6); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 24px 4 rgba(var(--hum-rgb), 0.9), | |
| 0 0 44px 10px rgba(var(--hum-rgb), 0.85); | |
| } | |
| 100% { | |
| box-shadow: | |
| 0 0 18px 0 rgba(var(--hum-rgb), 0.55), | |
| 0 0 30px 4 rgba(var(--hum-rgb), 0.6); | |
| } | |
| } | |
| @keyframes hum-good-halo { | |
| 0% { | |
| box-shadow: | |
| 0 0 80px 24px rgba(var(--hum-rgb), 0.35), | |
| 0 18px 70px -12px rgba(180,230,255,0.3); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 120px 40px rgba(var(--hum-rgb), 0.45), | |
| 0 26px 90px -10px rgba(200,240,255,0.45); | |
| } | |
| 100% { | |
| box-shadow: | |
| 0 0 80px 24px rgba(var(--hum-rgb), 0.35), | |
| 0 18px 70px -12px rgba(180,230,255,0.3); | |
| } | |
| } | |
| /* ========== MIDDLE / humid - medium blue ========== */ | |
| @keyframes hum-mid-wave { | |
| 0% { transform: translateX(0); } | |
| 25% { transform: translateX(-1px); } | |
| 50% { transform: translateX(1px) translateY(-1px); } | |
| 75% { transform: translateX(-1px); } | |
| 100% { transform: translateX(0); } | |
| } | |
| @keyframes hum-mid-glow { | |
| 0% { | |
| box-shadow: | |
| 0 0 20px 0 rgba(var(--hum-rgb), 0.6), | |
| 0 0 32px 4 rgba(var(--hum-rgb), 0.7); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 28px 3 rgba(var(--hum-rgb), 0.95), | |
| 0 0 48px 10px rgba(var(--hum-rgb), 0.85); | |
| } | |
| 100% { | |
| box-shadow: | |
| 0 0 20px 0 rgba(var(--hum-rgb), 0.6), | |
| 0 0 32px 4 rgba(var(--hum-rgb), 0.7); | |
| } | |
| } | |
| @keyframes hum-mid-halo { | |
| 0% { | |
| box-shadow: | |
| 0 0 90px 26px rgba(var(--hum-rgb), 0.4), | |
| 0 18px 80px -12px rgba(80,190,255,0.35); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 135px 42px rgba(var(--hum-rgb), 0.5), | |
| 0 28px 105px -10px rgba(100,210,255,0.5); | |
| } | |
| 100% { | |
| box-shadow: | |
| 0 0 90px 26px rgba(var(--hum-rgb), 0.4), | |
| 0 18px 80px -12px rgba(80,190,255,0.35); | |
| } | |
| } | |
| /* ========== BAD - dry - dark blue ========== */ | |
| @keyframes hum-bad-pulse { | |
| 0% { transform: scale(0.97); } | |
| 40% { transform: scale(1.03); } | |
| 100% { transform: scale(0.97); } | |
| } | |
| @keyframes hum-bad-glow { | |
| 0% { | |
| box-shadow: | |
| 0 0 18px 0 rgba(var(--hum-rgb), 0.6), | |
| 0 0 28px 4 rgba(var(--hum-rgb), 0.7); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 26px 4 rgba(var(--hum-rgb), 0.95), | |
| 0 0 44px 12px rgba(var(--hum-rgb), 0.9); | |
| } | |
| 100% { | |
| box-shadow: | |
| 0 0 18px 0 rgba(var(--hum-rgb), 0.6), | |
| 0 0 28px 4 rgba(var(--hum-rgb), 0.7); | |
| } | |
| } | |
| @keyframes hum-bad-halo { | |
| 0% { | |
| box-shadow: | |
| 0 0 80px 22px rgba(var(--hum-rgb), 0.45), | |
| 0 18px 75px -10px rgba(0,70,160,0.5); | |
| } | |
| 50% { | |
| box-shadow: | |
| 0 0 130px 40px rgba(var(--hum-rgb), 0.6), | |
| 0 26px 100px -8px rgba(0,90,190,0.65); | |
| } | |
| 100% { | |
| box-shadow: | |
| 0 0 80px 22px rgba(var(--hum-rgb), 0.45), | |
| 0 18px 75px -10px rgba(0,70,160,0.5); | |
| } | |
| } | |
| .: | | |
| 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: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* FONT SIZE & SPACING SETTINGS */ | |
| --card-primary-font-size: 1.4rem !important; | |
| /* Increases vertical space between primary and secondary */ | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.buitensensor_humidity | |
| line_color: lightblue | |
| line_width: 5 | |
| hours_to_show: 24 | |
| show: | |
| name: false | |
| icon: false | |
| state: false | |
| labels: false | |
| legend: false | |
| card_mod: | |
| style: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: Keuken | |
| primary_info: state | |
| secondary_info: name | |
| entity: sensor.temperatuur_sensor_keuken_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.temperatuur_sensor_keuken_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: Slaapkamer | |
| primary_info: state | |
| secondary_info: name | |
| entity: sensor.0x00124b002fb7a8c6_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.0x00124b002fb7a8c6_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: User3 | |
| primary_info: state | |
| secondary_info: name | |
| entity: sensor.temperatuur_sensor_User3_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.temperatuur_sensor_User3_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: User4 | |
| primary_info: state | |
| secondary_info: name | |
| entity: >- | |
| sensor.temperatuur_sensor_slaapkamer_User4_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - >- | |
| sensor.temperatuur_sensor_slaapkamer_User4_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: Zolder | |
| primary_info: state | |
| secondary_info: name | |
| entity: sensor.temperatuur_sensor_zolder_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.temperatuur_sensor_zolder_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mushroom-entity-card | |
| tap_action: | |
| action: more-info | |
| icon: mdi:thermometer | |
| name: Badkamer | |
| primary_info: state | |
| secondary_info: name | |
| entity: sensor.badkamer_temperature | |
| card_mod: | |
| style: | |
| mushroom-shape-icon$: | | |
| .shape { | |
| /* =========================== | |
| Dynamische kleur op temperatuur | |
| Geen animatie (statisch) | |
| =========================== */ | |
| {# Lees huidige temperatuur #} | |
| {% set temp = states(config.entity) | float(0) %} | |
| {# Defaults #} | |
| {% set rgb = '0,140,255' %} | |
| {% set intensity = 0.6 %} | |
| {# Ranges en kleurselectie #} | |
| {% if temp < 16 %} | |
| {% set rgb = '0,140,255' %} {# Blauw #} | |
| {% set intensity = 0.45 %} | |
| {% elif temp < 18 %} | |
| {% set rgb = '255,210,40' %} {# Geel #} | |
| {% set intensity = 0.55 %} | |
| {% elif temp < 20 %} | |
| {% set rgb = '255,150,40' %} {# Oranje #} | |
| {% set intensity = 0.65 %} | |
| {% elif temp < 22 %} | |
| {% set rgb = '255,115,20' %} {# Donker oranje #} | |
| {% set intensity = 0.8 %} | |
| {% else %} | |
| {% set rgb = '255,40,40' %} {# Rood #} | |
| {% set intensity = 1.0 %} | |
| {% endif %} | |
| /* Variabelen toepassen */ | |
| --temp-rgb: {{ rgb }}; | |
| --temp-intensity: {{ intensity }}; | |
| /* Alle animaties uit (statisch) */ | |
| --shape-animation: none; | |
| --temp-glow-animation: none; | |
| --temp-halo-animation: none; | |
| opacity: 1; | |
| /* Icoon volgt de dynamische temperatuurkleur */ | |
| --icon-color: rgba({{ rgb }}, 1); | |
| /* Neutrale basis */ | |
| background-color: rgba(77, 77, 77, 0.1) !important; | |
| box-shadow: none !important; | |
| border: 1px solid rgba(255,255,255,0.06); | |
| position: relative; | |
| transform-origin: 50% 60%; | |
| animation: var(--shape-animation); /* = none */ | |
| } | |
| /* Glow-lagen (statisch, geen animatie) */ | |
| .shape::before, | |
| .shape::after { | |
| content: ''; | |
| position: absolute; | |
| border-radius: inherit; | |
| pointer-events: none; | |
| } | |
| /* Statische glow – kleur volgt --temp-rgb */ | |
| .shape::before { | |
| inset: -8px; | |
| /* animation: var(--temp-glow-animation); = none */ | |
| box-shadow: | |
| 0 0 28px 4 rgba(var(--temp-rgb), 0.85), | |
| 0 0 48px 10px rgba(var(--temp-rgb), 0.75); | |
| } | |
| /* Statische halo – kleur volgt --temp-rgb */ | |
| .shape::after { | |
| inset: -22px; | |
| /* animation: var(--temp-halo-animation); = none */ | |
| mix-blend-mode: screen; | |
| box-shadow: | |
| 0 0 140px 42px rgba(var(--temp-rgb), 0.45), | |
| 0 26px 100px -10px rgba(var(--temp-rgb), 0.35); | |
| } | |
| .: | | |
| mushroom-shape-icon { | |
| --icon-size: 64px; | |
| /* Voor de zekerheid ook hier dynamische kleur koppelen */ | |
| --icon-color: rgba(var(--temp-rgb),1) !important; | |
| display: flex; | |
| margin: -18px 0 10px -20px !important; | |
| padding-right: 22px; | |
| padding-bottom: 50px; | |
| } | |
| ha-card { | |
| clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px)); | |
| /* Lettertype & spacing */ | |
| --card-primary-font-size: 1.4rem !important; | |
| --card-primary-line-height: 1.3 !important; | |
| } | |
| - type: custom:vertical-stack-in-card | |
| cards: | |
| - type: custom:mini-graph-card | |
| entities: | |
| - sensor.badkamer_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 { | |
| background: none; | |
| box-shadow: none; | |
| opacity: 50%; | |
| border: none; | |
| width: 400px; | |
| mask-image: radial-gradient( | |
| ellipse at center, | |
| rgba(0,0,0,1) 0%, | |
| rgba(0,0,0,0) 90% | |
| ); | |
| } | |
| card_mod: | |
| style: | |
| .: | | |
| ha-card { | |
| background: none; | |
| box-shadow: none; | |
| border: none; | |
| margin: 8px 12px; | |
| position: absolute; | |
| bottom: -10px; | |
| right: -10px; | |
| } | |
| column_span: 1 | |
| visibility: | |
| - condition: screen | |
| media_query: '(min-width: 0px)' | |
| - type: grid | |
| cards: | |
| - type: custom:mushroom-title-card | |
| title: Energie | |
| - type: gauge | |
| needle: true | |
| name: Energieprijs | |
| max: 0.2 | |
| theme: Google Theme | |
| entity: sensor.frank_energie_prices_current_electricity_market_price | |
| severity: | |
| green: 0 | |
| yellow: 0.048 | |
| red: 0.12 | |
| grid_options: | |
| columns: 12 | |
| rows: auto | |
| min: -0.02 | |
| - type: custom:apexcharts-card | |
| graph_span: 24h | |
| span: | |
| start: day | |
| experimental: | |
| color_threshold: true | |
| apex_config: | |
| xaxis: | |
| type: datetime | |
| labels: | |
| datetimeUTC: false | |
| plotOptions: | |
| bar: | |
| columnWidth: 90% | |
| distributed: true | |
| yaxis: | |
| tickAmount: 5 | |
| decimalsInFloat: 4 | |
| forceNiceScale: true | |
| show: | |
| last_updated: true | |
| loading: false | |
| now: | |
| show: true | |
| label: Nu | |
| header: | |
| show: true | |
| title: Energieprijs per uur (€/kWh) | |
| series: | |
| - entity: sensor.frank_energie_prices_current_electricity_market_price | |
| type: column | |
| float_precision: 5 | |
| opacity: 1 | |
| offset: '-30min' | |
| show: | |
| legend_value: false | |
| color_threshold: | |
| - value: 0 | |
| color: '#43a047' | |
| - value: 0.048 | |
| color: '#ffa600' | |
| - value: 0.12 | |
| color: '#db4437' | |
| data_generator: | | |
| // gebruik het start-van-uur tijdstip uit de integratie | |
| return entity.attributes.prices.map((record) => { | |
| return [new Date(record.from).getTime(), record.price]; | |
| }); | |
| - type: gauge | |
| entity: sensor.inverter_battery | |
| name: Batterij | |
| min: 20 | |
| needle: true | |
| severity: | |
| green: 65 | |
| yellow: 30 | |
| red: 0 | |
| grid_options: | |
| columns: 12 | |
| rows: auto | |
| max: 100 | |
| - type: custom:power-flow-card-plus | |
| entities: | |
| grid: | |
| entity: sensor.p1_meter_power | |
| color_icon: true | |
| color_circle: true | |
| display_zero_tolerance: 0 | |
| display_state: two_way | |
| solar: | |
| entity: sensor.sb4_0_1av_41_158_pv_power | |
| display_zero_state: true | |
| color_value: false | |
| color_icon: false | |
| invert_state: false | |
| name: PV | |
| home: | |
| subtract_individual: true | |
| secondary_info: {} | |
| override_state: false | |
| battery: | |
| entity: sensor.inverter_power | |
| use_metadata: false | |
| invert_state: false | |
| state_of_charge_unit_white_space: false | |
| show_state_of_charge: true | |
| individual: | |
| - entity: sensor.power_meter_kast_1_channel_2_power | |
| secondary_info: {} | |
| name: Warmtepomp | |
| icon: mdi:heat-pump-outline | |
| calculate_flow_rate: true | |
| show_direction: false | |
| display_zero_tolerance: 0 | |
| display_zero_state: false | |
| clickable_entities: true | |
| display_zero_lines: | |
| mode: show | |
| transparency: 50 | |
| grey_color: | |
| - 189 | |
| - 189 | |
| - 189 | |
| use_new_flow_rate_model: true | |
| w_decimals: 0 | |
| kw_decimals: 1 | |
| min_flow_rate: 0.75 | |
| max_flow_rate: 6 | |
| max_expected_power: 3000 | |
| min_expected_power: 0.01 | |
| watt_threshold: 1000 | |
| transparency_zero_lines: 0 | |
| title: Verbruik | |
| - type: grid | |
| cards: | |
| - type: custom:mushroom-title-card | |
| title: Weer | |
| - type: custom:clock-weather-card | |
| entity: weather.buienradar | |
| sun_entity: sun.sun | |
| temperature_sensor: sensor.buitensensor_temperature | |
| weather_icon_type: line | |
| animated_icon: true | |
| forecast_rows: 5 | |
| time_pattern: HH:mm | |
| time_format: 24 | |
| date_pattern: cccc d-M-yyyy | |
| hide_today_section: false | |
| hide_forecast_section: false | |
| show_humidity: false | |
| hide_clock: false | |
| hide_date: false | |
| time_zone: null | |
| show_decimal: true | |
| - show_state: false | |
| show_name: false | |
| camera_view: auto | |
| type: picture-entity | |
| entity: camera.buienradar | |
| - type: tile | |
| entity: weather.buienradar | |
| layout_options: | |
| grid_columns: 2 | |
| grid_rows: 1 | |
| vertical: false | |
| - type: grid | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: horizontal-buttons-stack | |
| 1_link: '#Verwarming' | |
| 1_name: '' | |
| margin: 7px | |
| highlight_current_view: true | |
| 1_icon: mdi:home-thermometer | |
| 2_link: '#media' | |
| 2_name: '' | |
| 2_icon: mdi:play | |
| 3_link: '#lichten' | |
| 3_name: '' | |
| 3_icon: mdi:ceiling-light-multiple-outline | |
| 4_link: '#zonnewering' | |
| 4_name: '' | |
| grid_options: | |
| columns: full | |
| rows: 1.3 | |
| 4_icon: mdi:roller-shade | |
| auto_order: false | |
| hide_gradient: false | |
| column_span: 3 | |
| - type: grid | |
| cards: | |
| - type: vertical-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: pop-up | |
| name: Lichten - Alles uit knop | |
| icon: mdi:lightbulb | |
| hash: '#lichten' | |
| button_type: switch | |
| entity: button.basic_all_off_1 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: separator | |
| name: Beneden | |
| icon: mdi:home-floor-0 | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: switch | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Ledstrip keuken | |
| entity: light.ledstrip_aanrecht_keuken_d7 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: switch | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Eiland | |
| entity: light.lichtrail_keukeneiland_d12 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| show_last_changed: false | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: switch | |
| entity: light.lamp_eetruimte_d8 | |
| name: Tafel | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: switch | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Middengang | |
| entity: light.3_spots_traphall_d6 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: slider | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Living | |
| entity: light.lichtrail_zitruimte_d13 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: slider | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Zetel | |
| entity: light.lichtrail_zitruimte_d14 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Lamp TV | |
| button_type: switch | |
| entity: switch.geschakeld_stopcontact_zitruimte_tv_d3 | |
| icon: mdi:desk-lamp-on | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Stopcontact | |
| button_type: switch | |
| entity: switch.geschakeld_stopcontact_zitruimte_d4 | |
| icon: mdi:floor-lamp | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: separator | |
| name: Boven | |
| icon: mdi:home-floor-1 | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Trap | |
| button_type: switch | |
| icon: mdi:lightbulb | |
| entity: light.4_lampentrap_d5 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Nachthal | |
| button_type: switch | |
| icon: mdi:lightbulb | |
| entity: light.4_spots_nachthall_x2 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: separator | |
| name: Master Bedroom | |
| icon: mdi:bed-king | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Bed links | |
| button_type: switch | |
| icon: mdi:globe-light | |
| entity: light.lamp_bed_links_slaapkamer_1_e8_1 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Bed rechts | |
| button_type: switch | |
| icon: mdi:globe-light | |
| entity: light.lamp_bed_rechts_slaapkamer_1_e9 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Stalamp | |
| button_type: switch | |
| icon: mdi:floor-lamp | |
| entity: switch.geschakeld_stopcontact_slaapkamer_1_e7 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Slaapkamer | |
| button_type: switch | |
| icon: mdi:lightbulb | |
| entity: light.2_spots_slaapkamer_1_e6_2 | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: separator | |
| name: Zolder | |
| icon: mdi:lightbulb-outline | |
| - type: horizontal-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: switch | |
| show_state: false | |
| entity: light.2_lampen_zolder_x5 | |
| tap_action: | |
| action: toggle | |
| name: Zolder | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: switch | |
| entity: light.lamp_zolder_techniek_x6 | |
| show_state: false | |
| tap_action: | |
| action: toggle | |
| name: Techniek | |
| styles: | | |
| .bubble-button-background { | |
| opacity: 1 !important; | |
| background-color: ${state === 'on' ? '#ffd000' : '#282828'} !important; | |
| } | |
| .bubble-name { | |
| color: ${state === 'on' ? '#282828' : '#E1E1E1'} !important; | |
| } | |
| - type: vertical-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: pop-up | |
| hash: '#zonnewering' | |
| button_type: name | |
| name: Zonnewering | |
| scrolling_effect: true | |
| show_icon: false | |
| show_name: true | |
| - type: custom:bubble-card | |
| card_type: cover | |
| entity: cover.sunblind_keuken_rts8 | |
| name: Keuken | |
| - type: custom:bubble-card | |
| card_type: cover | |
| entity: cover.sunblind_zitruimte_rts_1 | |
| name: Living | |
| - type: custom:bubble-card | |
| card_type: cover | |
| entity: cover.sunblind_slaapkamer_3_rts_12 | |
| - type: custom:bubble-card | |
| card_type: cover | |
| entity: cover.sunblind_slaapkamer_2_rts_10 | |
| name: Slaapkamer User3 | |
| title: Zonnewering | |
| - type: vertical-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: pop-up | |
| hash: '#Verwarming' | |
| button_type: name | |
| name: Verwaming | |
| scrolling_effect: true | |
| show_icon: false | |
| show_name: true | |
| - type: custom:bubble-card | |
| card_type: climate | |
| sub_button: | |
| - name: HVAC modes menu | |
| select_attribute: hvac_modes | |
| state_background: false | |
| show_arrow: false | |
| entity: climate.thermostaat_User4 | |
| name: User4 | |
| hide_temperature: false | |
| state_color: false | |
| show_attribute: true | |
| attribute: current_temperature | |
| - type: custom:bubble-card | |
| card_type: climate | |
| entity: climate.thermostaat_slaapkamer_User3 | |
| sub_button: | |
| - name: HVAC modes menu | |
| select_attribute: hvac_modes | |
| state_background: false | |
| show_arrow: false | |
| name: User3 | |
| show_attribute: true | |
| attribute: current_temperature | |
| - type: custom:bubble-card | |
| card_type: climate | |
| entity: climate.airco_zolder | |
| sub_button: | |
| - name: HVAC modes menu | |
| select_attribute: hvac_modes | |
| state_background: false | |
| show_arrow: false | |
| show_attribute: true | |
| attribute: current_temperature | |
| show_last_changed: false | |
| show_last_updated: false | |
| show_state: false | |
| force_icon: false | |
| scrolling_effect: true | |
| show_icon: true | |
| - type: custom:bubble-card | |
| card_type: button | |
| button_type: slider | |
| entity: fan.ventilation | |
| show_state: true | |
| show_last_changed: false | |
| show_attribute: false | |
| attribute: percentage_step | |
| relative_slide: false | |
| read_only_slider: false | |
| slider_live_update: false | |
| show_name: true | |
| title: Test | |
| - type: vertical-stack | |
| cards: | |
| - type: custom:bubble-card | |
| card_type: pop-up | |
| hash: '#media' | |
| button_type: name | |
| name: Media | |
| show_icon: true | |
| show_name: true | |
| icon: mdi:play | |
| - type: custom:bubble-card | |
| card_type: media-player | |
| entity: media_player.nestaudio9278 | |
| - type: custom:bubble-card | |
| card_type: media-player | |
| entity: media_player.nestmini8701 | |
| - type: custom:bubble-card | |
| card_type: media-player | |
| entity: media_player.tv_in_woonkamer | |
| - type: heading | |
| heading: Nieuwe sectie | |
| column_span: 3 | |
| type: sections | |
| max_columns: 3 | |
| cards: [] | |
| icon: mdi:home | |
| header: | |
| card: | |
| type: markdown | |
| text_only: true | |
| content: >- | |
| <h2>Hallo {{ user }}</h2> | |
| 📅 Vandaag is het **{{ now().strftime('%d %B') }}** | |
| 💡 Er staan momenteel **{{ states.light | selectattr('state', | |
| 'equalto', 'on') | list | length }}** lichten aan. | |
| 🌡️ Binnen is het **{{ | |
| states('sensor.temperatuur_sensor_keuken_temperature') }} °C** en | |
| buiten **{{ states('sensor.buitensensor_temperature') }} °C** | |
| ⚡Het huis verbruikt **{{ states('sensor.inverter_load_power') }} | |
| Watt** | |
| ☀️De zon levert **{{ states('sensor.sb4_0_1av_41_158_pv_power') }} | |
| Watt** | |
| layout: center | |
| badges_position: top | |
| badges_wrap: wrap |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment