Skip to content

Instantly share code, notes, and snippets.

@sw1ftc0d3r

sw1ftc0d3r/bubble

Created February 18, 2026 21:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sw1ftc0d3r/8034b39199a3bb9b1c44058f7630b5db to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sw1ftc0d3r/8034b39199a3bb9b1c44058f7630b5db to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bubble
button_card_templates:
header_temperature_graph_bubble:
card:
type: custom:mini-graph-card
entities:
- entity: '[[entity]]'
color_thresholds:
- value: 14
color: '#CCE5FF'
- value: 16
color: '#66B2FF'
- value: 18
color: '#0080FF'
- value: 20
color: '#87c087'
- value: 22
color: '#389638'
- value: 24
color: '#FF9932'
- value: 26
color: '#FF8000'
- value: 30
color: '#ff0000'
hours_to_show: 24
hour24: true
animate: true
update_interval: 30
aggregate_func: avg
line_width: 1
bar_spacing: 10
height: 42
group: true
show:
labels: false
fill: true
state: false
name: false
icon: false
card_mod:
style: |
ha-card {
height: 84px;
position: absolute;
box-shadow: none;
background: none;
border-radius: 40px;
border-color: black;
opacity: 1;
margin-bottom: -65px;
margin-left: 0em;
margin-right: 0em;
}
picture_button:
aspect_ratio: 4/3
color_type: icon
hold_action:
action: none
layout: vertical
show_entity_picture: true
show_icon: false
show_label: false
show_name: false
show_state: false
styles:
card:
- border-radius: 0px
- border: none
- box-shadow: none
- padding: 6px 6px
- margin: 0px 0px
- '--ha-card-background': rgba(0, 0, 0, 0)
entity_picture:
- width: 100%
- height: 100%
- object-fit: contain
tap_action:
action: call-service
title: ''
views:
- type: sections
max_columns: 3
title: Hello
path: Panel
sections:
- type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.mariusz
state: home
chip:
type: entity
entity: person.mariusz
content_info: Mariusz
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin: 0px;
margin-left: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.sylwia
state: home
chip:
type: entity
entity: person.sylwia
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.tymek
state: home
chip:
type: entity
entity: person.tymek
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.mama
state: home
chip:
type: entity
entity: person.mama
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.4);
margin-top: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.mariusz
state_not: home
chip:
type: entity
entity: person.mariusz
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.mariusz', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.mariusz', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.sylwia
state_not: home
chip:
type: entity
entity: person.sylwia
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.sylwia', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.sylwia', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.tymek
state_not: home
chip:
type: entity
entity: person.tymek
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.tymek', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.tymek', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.mama
state_not: home
chip:
type: entity
entity: person.mama
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.mama', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.mama', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 0px;
margin-bottom: 0px;
}
- type: template
icon: mdi:home-thermometer
icon_color: blue
entity: sensor.temperatura_w_domu
content: >-
{{ states(entity) | float | round(1) }}°C 💧{{
states('sensor.wilgotnosc_w_domu') | float | round(0) }}%
tap_action:
action: navigate
navigation_path: '#temperatury'
double_tap_action:
action: none
hold_action:
action: none
- type: entity
entity: sensor.hue_motion_sensor_4_temperatura
icon_color: teal
icon: mdi:shower-head
name: Łazienka
tap_action:
action: navigate
navigation_path: '#lazienka'
double_tap_action:
action: none
hold_action:
action: none
- type: template
icon: mdi:wifi-arrow-up-down
tap_action:
action: navigate
navigation_path: '#wifi'
double_tap_action:
action: none
hold_action:
action: none
icon_color: purple
entity: sensor.router_wan_rx
content: >-
DL {{ states(entity) | float | round(0) }} / {{
states('sensor.router_wan_tx') | float | round(0) }} Mbit
- type: template
icon: mdi:power
tap_action:
action: navigate
navigation_path: '#power'
double_tap_action:
action: none
hold_action:
action: none
icon_color: pink
content: ''
- type: template
icon: mdi:food-apple
content: >-
{% set start = state_attr('calendar.smieci_bio','start_time')
| default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 0 %}dzisiaj{% elif days == 1 %}jutro{% else %}{{ days }}{% endif %}
{% else %}--{% endif %}
card_mod:
style: >
ha-card { --color: rgb(var(--rgb-lime)); --text-color:
rgb(var(--primary-text-color)); }
{% set start =
state_attr('calendar.smieci_bio','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 7 %}
ha-card { --chip-background: rgb(var(--rgb-lime));
--text-color: rgb(var(--rgb-black)); --color:
rgb(var(--rgb-black)); }
{% endif %}
{% if days == 1 %}
ha-card { animation: blink 3s linear infinite; }
{% endif %}
{% endif %} @keyframes blink { 50% {opacity: 0.7;} }
- type: template
icon: mdi:trash-can-outline
content: >-
{% set start =
state_attr('calendar.smieci_zmieszane','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 0 %}dzisiaj{% elif days == 1 %}jutro{% else %}{{ days }}{% endif %}
{% else %}--{% endif %}
card_mod:
style: >
ha-card { --color: rgb(var(--rgb-cyan)); --text-color:
rgb(var(--primary-text-color)); }
{% set start =
state_attr('calendar.smieci_zmieszane','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 7 %}
ha-card { --chip-background: rgb(var(--rgb-cyan));
--text-color: rgb(var(--rgb-black)); --color:
rgb(var(--rgb-black)); }
{% endif %}
{% if days == 1 %}
ha-card { animation: blink 3s linear infinite; }
{% endif %}
{% endif %} @keyframes blink { 50% {opacity: 0.7;} }
- type: template
icon: phu:garbage-plastic
content: >-
{% set start =
state_attr('calendar.smieci_papier','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 0 %}dzisiaj{% elif days == 1 %}jutro{% else %}{{ days }}{% endif %}
{% else %}--{% endif %}
card_mod:
style: >
ha-card { --color: rgb(var(--rgb-pink)); --text-color:
rgb(var(--primary-text-color)); }
{% set start =
state_attr('calendar.smieci_papier','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 7 %}
ha-card { --chip-background: rgb(var(--rgb-pink));
--text-color: rgb(var(--rgb-black)); --color:
rgb(var(--rgb-black)); }
{% endif %}
{% if days == 1 %}
ha-card { animation: blink 3s linear infinite; }
{% endif %}
{% endif %} @keyframes blink { 50% {opacity: 0.7;} }
- type: template
icon: mdi:truck
content: >-
{% set start =
state_attr('calendar.smieci_wielkogabaryty','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 0 %}dzisiaj{% elif days == 1 %}jutro{% else %}{{ days }}{% endif %}
{% else %}--{% endif %}
card_mod:
style: >
ha-card { --color: rgb(var(--rgb-purple)); --text-color:
rgb(var(--primary-text-color)); }
{% set start =
state_attr('calendar.smieci_wielkogabaryty','start_time') |
default(0,true) %} {% if start != 0 %}
{% set ev = start | as_datetime | as_local %}
{% set adj_now = (now() + timedelta(days=1)) if (ev.date() == now().date() and now().hour >= 12) else now() %}
{% set ev_mid = as_timestamp(ev.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set now_mid = as_timestamp(adj_now.replace(hour=0, minute=0, second=0, microsecond=0)) %}
{% set days = ((ev_mid - now_mid) / 86400) | round(0,'floor') | int %}
{% if days <= 7 %}
ha-card { --chip-background: rgb(var(--rgb-purple));
--text-color: rgb(var(--rgb-black)); --color:
rgb(var(--rgb-black)); }
{% endif %}
{% if days == 1 %}
ha-card { animation: blink 3s linear infinite; }
{% endif %}
{% endif %} @keyframes blink { 50% {opacity: 0.7;} }
- type: conditional
conditions:
- entity: sensor.bme280_czujnik2_pm_2_5_m_weight_concentration
condition: numeric_state
above: 10
below: 25
- entity: sensor.bme280_czujnik2_pm_1_m_weight_concentration
condition: numeric_state
above: 10
below: 25
chip:
type: template
content: Pyłki u Mamy
icon_color: amber
icon: mdi:molecule
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.bme280_czujnik2_pm_2_5_m_weight_concentration
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.bme280_czujnik2_pm_2_5_m_weight_concentration
condition: numeric_state
above: 25
- entity: sensor.bme280_czujnik2_pm_1_m_weight_concentration
condition: numeric_state
above: 25
chip:
type: template
content: Groźny poziom pyłków u Mamy
icon_color: red
icon: mdi:molecule
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.bme280_czujnik2_pm_2_5_m_weight_concentration
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_dwutlenek_wegla
condition: numeric_state
above: 800
below: 1000
chip:
type: template
content: Wpuść trochę powietrza w salonie
icon_color: amber
icon: mdi:molecule-co2
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_dwutlenek_wegla
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_dwutlenek_wegla
condition: numeric_state
above: 1000
below: 1500
chip:
type: template
content: Konieczna wentylacja w salonie
icon_color: orange
icon: mdi:molecule-co2
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_dwutlenek_wegla
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_dwutlenek_wegla
condition: numeric_state
above: 1500
chip:
type: template
content: Salon niezdatny do przebywania
icon_color: red
icon: mdi:molecule-co2
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_dwutlenek_wegla
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_pm1
condition: numeric_state
above: 10
below: 25
- entity: sensor.view_plus_pm2_5
condition: numeric_state
above: 10
below: 25
chip:
type: template
content: Pyłki w salonie
icon_color: amber
icon: mdi:molecule
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_pm2_5
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_pm1
condition: numeric_state
above: 25
- entity: sensor.view_plus_pm2_5
condition: numeric_state
above: 25
chip:
type: template
content: Groźny poziom pyłków w salonie
icon_color: red
icon: mdi:molecule
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_pm2_5
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_volatile_organic_compounds_parts
condition: numeric_state
above: 250
below: 2000
chip:
type: template
content: Lotne związki w salonie
icon_color: amber
icon: mdi:molecule
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_volatile_organic_compounds_parts
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_volatile_organic_compounds_parts
condition: numeric_state
above: 2000
chip:
type: template
content: Groźne LZO w salonie
icon_color: red
icon: mdi:molecule
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_volatile_organic_compounds_parts
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_radon
condition: numeric_state
above: 100
below: 150
chip:
type: template
content: Wykryto Radon
icon_color: pink
icon: mdi:radioactive
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_radon
card_mod:
style: |
ha-card {
--chip-background: rgb(var(--rgb-orange));
--text-color: rgb(var(--rgb-black));
--color: rgb(var(--rgb-black));
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.view_plus_radon
condition: numeric_state
above: 150
chip:
type: template
content: Niebezpieczeństwo! Radon
icon_color: pink
icon: mdi:radioactive
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.view_plus_radon
card_mod:
style: |
ha-card {
--chip-background: rgb(var(--rgb-white));
--text-color: rgb(var(--rgb-black));
--color: rgb(var(--rgb-black));
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.bme280_czujnik2_air_quality_index
state: Zła jakość powietrza
chip:
type: template
content: Zła jakość powietrza u Mamy
icon_color: orange
icon: mdi:air-filter
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.bme280_czujnik2_air_quality_index
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.czujnik_gazu_ziemnego_piwnica_gas
state: 'on'
chip:
type: template
content: Ulatnianie gazu ziemnego
icon_color: red
icon: mdi:gas-burner
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: binary_sensor.czujnik_gazu_ziemnego_piwnica_gas
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
condition: numeric_state
above: 1000
below: 1500
chip:
type: template
content: Nadmiar CO₂ w pinwnicy
icon_color: amber
icon: mdi:molecule-co2
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
condition: numeric_state
above: 1500
below: 2000
chip:
type: template
content: Konieczna wentylacja piwnicy
icon_color: orange
icon: mdi:molecule-co2
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
condition: numeric_state
above: 2000
chip:
type: template
content: Ryzyko zakażenia wirusami w piwnicy
icon_color: red
icon: mdi:molecule-co2
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.czujnik_deszczu_water_leak
state: 'on'
chip:
type: entity
entity: binary_sensor.czujnik_deszczu_water_leak
content_info: name
name: Wykryto opady
icon_color: blue
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_ostrzezenie_burza
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_ostrzezenie_burza
content_info: name
name: Burza
icon_color: purple
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_ostrzezenie_mroz
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_ostrzezenie_mroz
content_info: name
name: Mróz
icon_color: purple
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_ostrzezenie_opad
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_ostrzezenie_opad
content_info: name
name: Opady
icon_color: blue
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_ostrzezenie_traba
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_ostrzezenie_traba
content_info: name
name: Trąba pow.
icon_color: red
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_ostrzezenie_upal
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_ostrzezenie_upal
content_info: name
name: Upał
icon_color: red
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_ostrzezenie_wiatr
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_ostrzezenie_wiatr
content_info: name
name: Wiatr
icon_color: amber
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.burze_dzis_net_wyladowania_w_poblizu
state: 'on'
chip:
type: entity
entity: binary_sensor.burze_dzis_net_wyladowania_w_poblizu
content_info: name
name: Wyładow. atm.
icon_color: amber
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- condition: state
entity: sensor.dom_lightning_azimuth
state_not: unknown
chip:
type: template
entity: sensor.dom_lightning_azimuth
content: |
Azymut: {{ states('sensor.dom_lightning_azimuth') }}
- type: conditional
conditions:
- entity: sensor.dom_lightning_counter
state_not: '0'
chip:
type: template
entity: sensor.dom_lightning_counter
content: |
Ilość: {{ states('sensor.dom_lightning_counter') }}
- type: conditional
conditions:
- condition: state
entity: sensor.dom_lightning_distance
state_not: unknown
chip:
type: template
entity: sensor.dom_lightning_distance
content: |
Burza: {{ states('sensor.dom_lightning_distance') }}
- type: conditional
conditions:
- condition: state
entity: sensor.dom_lightning_distance
state_not: unknown
chip:
type: template
entity: sensor.dom_lightning_distance
content: |
Burza: {{ states('sensor.dom_lightning_distance') }}
card_mod:
style: |
mushroom-template-chip,
mushroom-conditional-chip,
mushroom-entity-chip,
mushroom-weather-chip,
mushroom-light-chip,
mushroom-menu-chip,
mushroom-spacer-chip,
mushroom-chips {
border-radius: 16px;
}
.chip-container {
margin-top: -10px !important;
margin-bottom: -2px !important;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main:
- entity: sensor.czujnik_obecnosci_zewnatrz_humidity
fill_width: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
state_background: false
show_background: false
show_name: false
show_state: true
- entity: >-
sensor.czujnik_ruchu_zewnatrz_poprawna_temperatura_temperature
show_attribute: false
show_background: true
icon: mdi:thermometer
scrolling_effect: false
tap_action:
action: navigate
navigation_path: '#pogoda'
double_tap_action:
action: navigate
navigation_path: '#pogoda'
hold_action:
action: navigate
navigation_path: '#pogoda'
show_name: false
show_state: true
bottom: []
main_layout: rows
modules:
- weather_forecast
weather_forecast:
type: daily
max_days: 6
disable_animations: false
disable_dynamic_background: false
card_layout: default
entity: weather.openweathermap
button_action:
tap_action:
action: navigate
navigation_path: '#pogoda'
hold_action:
action: navigate
navigation_path: '#pogoda'
double_tap_action:
action: navigate
navigation_path: '#pogoda'
show_state: true
show_last_changed: false
show_attribute: true
force_icon: false
show_icon: true
scrolling_effect: true
name: Pogoda
animated_weather_icon:
weather_entity: weather.openweathermap
show_name: false
tap_action:
action: navigate
navigation_path: '#pogoda'
hold_action:
action: navigate
navigation_path: '#pogoda'
double_tap_action:
action: navigate
navigation_path: '#pogoda'
styles: |-
.bc-weather {
bottom: 50px;
}
.bubble-main-icon-container{
background: none;
background-color: var(--primary-background-color) !important;
margin-left: 25px !important;
}
.bubble-sub-button-2 {
background-color: rgba(180,255,0,0.3);
margin-right: 20px;
}
.large .bubble-container {
height: 250px;
}
- type: custom:waterfall-history-card
title: ' '
hours: 24
show_min_max: true
height: 10
digits: 1
gradient: true
entities:
- entity: >-
sensor.czujnik_ruchu_zewnatrz_poprawna_temperatura_temperature
name: ' '
hours: 24
show_current: false
show_icons: false
show_labels: true
thresholds:
- value: -10
color: '#e8a8cb'
- value: -5
color: '#d564a0'
- value: 0
color: '#7f90e7'
- value: 10
color: '#4bb9dd'
- value: 20
color: '#8cd995'
- value: 30
color: '#f6e272'
- value: 35
color: '#f48770'
card_mod:
style: |
:host .card-header {
display: none !important;
}
:host {
background-color: rgba(0,0,0,0) !important;
box-shadow: none !important;
border: none !important;
}
:host .min-max-label {
margin-bottom: -18px !important;
margin-top: -18px !important;
}
:host {
margin-top: -75px !important;
border-radius: 0px !important;
margin-left: 15px;
margin-right: 15px;
}
- entities:
- entity: calendar.swieta
label: ✨
color: ''
- entity: calendar.imieniny
label: 📇
- entity: calendar.dobrze_wiedziec
label: 💡
days_to_show: 7
compact_days_to_show: 1
compact_events_complete_days: true
date_vertical_alignment: top
show_month: false
show_time: false
show_location: false
weather:
position: event
date:
show_conditions: false
show_high_temp: true
show_low_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
event:
show_conditions: false
show_temp: false
icon_size: 14px
font_size: 12px
color: var(--primary-text-color)
tap_action:
action: expand
hold_action:
action: expand
type: custom:calendar-card-pro
card_mod:
style: |
:host, ha-card, hui-card, .calendar-card-pro {
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
margin-top: -5px;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Dom
icon: mdi:home
tap_action:
action: navigate
navigation_path: '#dom'
color: cyan
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--cyan-color);
--bg-panel-button-opacity: 0.3;
--bg-panel-button-circle-1: circle at 90% 50%;
--bg-panel-button-circle-2: circle at 60% 50%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 0deg;
--bg-panel-button-angel-end: 360deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(15px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
_disabled_animation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Światła
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: '#swiatla'
color: amber
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--amber-color);
--bg-panel-button-opacity: 0.2;
--bg-panel-button-circle-1: circle at 25% 45%;
--bg-panel-button-circle-2: circle at 45% 85%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 30deg;
--bg-panel-button-angel-end: 390deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(15px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Temperatury
icon: mdi:thermometer
tap_action:
action: navigate
navigation_path: '#temperatury'
color: red
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--red-color);
--bg-panel-button-opacity: 0.3;
--bg-panel-button-circle-1: circle at 75% 55%;
--bg-panel-button-circle-2: circle at 55% 15%; --bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 120deg;
--bg-panel-button-angel-end: 480deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(15px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Media
icon: mdi:speaker
tap_action:
action: navigate
navigation_path: '#media'
color: purple
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--purple-color);
--bg-panel-button-opacity: 0.3;
--bg-panel-button-circle-1: circle at 10% 50%;
--bg-panel-button-circle-2: circle at 40% 50%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 60deg;
--bg-panel-button-angel-end: 420deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(15px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Dom
icon: mdi:home
tap_action:
action: navigate
navigation_path: '#dom'
color: cyan
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--cyan-color);
--bg-panel-button-opacity: 0.2;
--bg-panel-button-circle-1: circle at 90% 90%;
--bg-panel-button-circle-2: circle at 60% 99%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 0deg;
--bg-panel-button-angel-end: 360deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(3px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Światła
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: '#swiatla'
color: amber
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--amber-color);
--bg-panel-button-opacity: 0.2;
--bg-panel-button-circle-1: circle at 75% 85%;
--bg-panel-button-circle-2: circle at 35% 85%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 30deg;
--bg-panel-button-angel-end: 390deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(3px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Ambilight
icon: mdi:television-ambient-light
tap_action:
action: toggle
color: >
{% if is_state('switch.sync_box_synchronizacja_swiatla',
'on') %}
lime
{% else %}
grey
{% endif %}
vertical: true
features_position: bottom
entity: switch.sync_box_synchronizacja_swiatla
card_mod:
style: >
{% if is_state('switch.sync_box_synchronizacja_swiatla',
'on') %}
ha-tile-icon {
animation: blink 3s linear infinite;
}
@keyframes blink {
50% {opacity: 0.5;}
}
:host {
--bg-panel-button-color: var(--lime-color);
}
{% else %}
:host {
--bg-panel-button-color: var(--grey-color);
}
{% endif %}
:host {
/* Set bg button color here */
--wbg-panel-button-color: var(--lime-color);
--bg-panel-button-opacity: 0.2;
--bg-panel-button-circle-1: circle at 10% 90%;
--bg-panel-button-circle-2: circle at 40% 99%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 150deg;
--bg-panel-button-angel-end: 510deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(3px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Pogoda
icon: >-
{% set icons = { 'clear-night': 'mdi:weather-night',
'cloudy': 'mdi:weather-cloudy', 'exceptional':
'mdi:weather-cloudy-alert', 'fog': 'mdi:weather-fog',
'hail': 'mdi:weather-hail', 'lightning':
'mdi:weather-lightning', 'lightning-rainy':
'mdi:weather-lightning-rainy', 'partlycloudy':
'mdi:weather-partly-cloudy' if is_state('sun.sun',
'above_horizon') else 'mdi:weather-night-partly-cloudy',
'pouring': 'mdi:weather-pouring', 'rainy':
'mdi:weather-rainy', 'snowy': 'mdi:weather-snowy',
'snowy-rainy': 'mdi:weather-snowy-rainy', 'sunny':
'mdi:weather-sunny', 'windy': 'mdi:weather-windy',
'windy-variant': 'mdi:weather-windy-variant' } %}
{{ icons.get(states('sensor.openweathermap_condition'),
'mdi:help-circle') }}
color: >-
{% set colors = { 'clear-night': 'amber', 'cloudy':
'var(--primary-color)', 'exceptional': 'red', 'fog':
'var(--primary-color)', 'hail': 'var(--primary-color)',
'lightning': 'var(--primary-color)', 'lightning-rainy':
'var(--primary-color)', 'partlycloudy': 'orange',
'pouring': 'blue', 'rainy': 'light-blue', 'snowy':
'var(--primary-color)', 'snowy-rainy':
'var(--primary-color)', 'sunny': 'amber', 'windy':
'light-blue', 'windy-variant': 'cyan' } %}
{{ colors.get(states('sensor.openweathermap_condition'),
'white') }}
tap_action:
action: navigate
navigation_path: '#pogoda'
features_position: bottom
vertical: true
card_mod:
style: >
ha-state-icon {
{% set condition =
states('sensor.openweathermap_condition') %}
{% if condition == 'clear-night' %}
animation: moon 5s linear infinite, stars 5s linear infinite;
{% elif condition == 'cloudy' %}
animation: cloudy 5s ease-in-out infinite;
{% elif condition == 'exceptional' %}
animation: exceptional 400ms ease-in-out infinite;
{% elif condition == 'fog' %}
animation: cloudy 5s ease-in-out infinite, fog 4s infinite;
{% elif condition == 'hail' %}
animation: cloudy 5s ease-in-out infinite, hail 2s infinite;
{% elif condition == 'lightning' %}
animation: cloudy 5s ease-in-out infinite, lightning 4s infinite;
{% elif condition == 'lightning-rainy' %}
animation: cloudy 5s ease-in-out infinite, lightning-rainy 4s infinite;
{% elif condition == 'partlycloudy' %}
{% if is_state('sun.sun', 'above_horizon') %}
animation: cloudy 5s ease-in-out infinite, sun-partly 2s infinite;
{% else %}
position: relative;
z-index: 1;
animation: cloudy 5s ease-in-out infinite;
/* animation: cloudy 5s ease-in-out infinite, moon-partly 10s linear infinite; */
{% endif %}
{% elif condition == 'pouring' %}
animation: cloudy 5s ease-in-out infinite, pouring 1s infinite;
{% elif condition == 'rainy' %}
animation: cloudy 5s ease-in-out infinite, rainy 1.5s infinite;
{% elif condition == 'snowy' %}
animation: cloudy 5s ease-in-out infinite, snowy 4s infinite;
{% elif condition == 'snowy-rainy' %}
animation: cloudy 5s ease-in-out infinite, snowy-rainy 4s infinite;
{% elif condition == 'sunny' %}
animation: sunny 8s ease-in-out infinite alternate;
{% elif condition == 'windy' %}
animation: windy 5s ease-in-out infinite;
transform-origin: 15% 50%
{% elif condition == 'windy-variant' %}
animation: cloudy 5s ease-in-out infinite, windy-variant 5s infinite;
{% endif %}
}
/* do i need this ? delete me later | transparency issue
*/
ha-state-icon::after
{
content: "";
position: absolute;
inset: 0;
clip-path: polygon(0 58%, 27% 58%, 34% 47%, 44% 42%, 55% 42%, 69% 47%, 74% 64%, 100% 67%, 100% 0, 0 0);
opacity: 1;
z-index: 2;
pointer-events: none;
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
/* not used because transparency issue */
@keyframes moon-partly {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38%, 34%, 36% 0); }
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes exceptional {
0%, 100% { transform: translate(0, 0)}
20% { transform: translate(0px, -0.3px)}
40% { transform: translate(0px, 0.3px)}
60% { transform: translate(0px, 0.3px)}
80% { transform: translate(0px, -0.3px)}
}
@keyframes fog {
0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%,100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%);}
}
@keyframes hail {
0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
}
@keyframes lightning {
0%, 10%, 12.1%, 15%, 18.1%, 20%, 100% { color: rgb(var(--rgb-dark-grey)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 72% 71%, 61% 34%, 41% 35%, 29% 87%, 0% 100%);}
10.1%, 12%, 15.1%, 18% { color: rgb(var(--rgb-white)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
}
@keyframes lightning-rainy {
0%, 10%, 12.1%, 15%, 18.1%, 20%, 49.9% { color: rgb(var(--rgb-dark-grey)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 73% 62%, 77% 54%, 60% 36%, 38% 36%, 20% 51%, 23% 63%, 0% 100%);}
10.1%, 12%, 15.1%, 18% { color: rgb(var(--rgb-white)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 73% 62%, 77% 54%, 60% 36%, 38% 36%, 61% 44%, 47% 100%, 0% 100%); }
50%, 100%{ color: rgb(var(--rgb-dark-grey)); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 40% 99%, 58% 47%, 60% 36%, 38% 36%, 20% 51%, 23% 63%, 0% 100%); }
}
@keyframes sun-partly {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
@keyframes pouring {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%,
54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
}
@keyframes rainy {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes snowy {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
51% { clip-path: inset(0 0 0 0); }
}
@keyframes snowy-rainy {
0%, 32%, 100% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 79% 100%, 77% 71%, 70% 44%, 26% 43%, 13% 67%, 14% 100%, 0% 100%); }
33%, 65.9% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 59% 100%, 56% 75%, 70% 44%, 26% 43%, 13% 67%, 14% 100%, 0% 100%); }
66%, 99.9% { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 79% 100%, 77% 71%, 70% 44%, 45% 39%, 62% 59%, 51% 100%, 0% 100%); }
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes windy {
0%, 100% { transform: scaleX(1.2); }
30% { transform: scaleX(0.9); }
45% { transform: scaleX(1.1); }
75% { transform: scaleX(0.8); }
}
@keyframes windy-variant {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: inset(0 0 37% 0); }
}
{% set colors = { 'clear-night': 'amber', 'cloudy':
'primary',
'exceptional': 'red', 'fog': 'primary', 'hail':
'white', 'lightning': 'primary',
'lightning-rainy': 'primary', 'partlycloudy':
'orange',
'pouring': 'blue', 'rainy': 'light-blue', 'snowy':
'primary',
'snowy-rainy': 'primary', 'sunny': 'amber', 'windy':
'light-blue', 'windy-variant': 'cyan' } %}
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--{{ colors.get(states('sensor.openweathermap_condition'), 'white') }}-color);
--bg-panel-button-opacity: 0.3;
--bg-panel-button-circle-1: circle at 90% 10%;
--bg-panel-button-circle-2: circle at 60% 1%; --bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 180deg;
--bg-panel-button-angel-end: 540deg;
} ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
} ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(3px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
} /* Animation */ @keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
} ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Temperatury
icon: mdi:thermometer
tap_action:
action: navigate
navigation_path: '#temperatury'
color: red
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--red-color);
--bg-panel-button-opacity: 0.2;
--bg-panel-button-circle-1: circle at 75% 15%;
--bg-panel-button-circle-2: circle at 35% 1%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 120deg;
--bg-panel-button-angel-end: 480deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(3px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-template-card
primary: ''
secondary: Media
icon: mdi:speaker
tap_action:
action: navigate
navigation_path: '#media'
color: purple
vertical: true
features_position: bottom
card_mod:
style: |
:host {
/* Set bg button color here */
--bg-panel-button-color: var(--purple-color);
--bg-panel-button-opacity: 0.2;
--bg-panel-button-circle-1: circle at 10% 10%;
--bg-panel-button-circle-2: circle at 40% 1%;
--bg-panel-button-speed: 25s;
--bg-panel-button-angel-start: 60deg;
--bg-panel-button-angel-end: 420deg;
}
ha-card {
background: var(--card-background-color);
width: auto;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* required: clip-path for animation in ::before */
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
text-shadow: var(--primary-background-color) 0 1px 0px;
}
ha-card::before {
content: "";
position: absolute;
width: 100%; height: 100%;
z-index: 0;
left: 0px;
top: 0%;
pointer-events: none;
/* Two radial gradients in one element */
background-image:
radial-gradient(var(--bg-panel-button-circle-1), var(--bg-panel-button-color) 0%, transparent 50%),
radial-gradient(var(--bg-panel-button-circle-2), var(--bg-panel-button-color) 0%, transparent 50%);
filter: blur(3px);
mix-blend-mode: screen;
opacity: var(--bg-panel-button-opacity);
wanimation: rotate-light var(--bg-panel-button-speed) linear infinite;
}
/* Animation */
@keyframes rotate-light {
0% { transform: rotate(var(--bg-panel-button-angel-start)); }
100% { transform: rotate(var(--bg-panel-button-angel-end)); }
}
ha-tile-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
column_span: 1
- type: grid
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: separator
sub_button:
main:
- name: Kwiaty
icon: mdi:flower
tap_action:
action: navigate
navigation_path: '#kwiaty'
double_tap_action:
action: none
hold_action:
action: none
bottom: []
name: Ochrona i porządki
icon: mdi:calendar-cursor
- type: horizontal-stack
cards:
- show_state: false
show_name: false
camera_view: live
fit_mode: fill
type: picture-entity
camera_image: camera.go2rtc_camera_1_wjazd_mobile
entity: camera.go2rtc_camera_1_wjazd_mobile
grid_options:
columns: 3
rows: 1
tap_action:
action: navigate
navigation_path: '#alarm'
card_mod:
style: |
ha-card {
min-height: 50px !important;
height: 70px !important;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
}
- show_state: false
show_name: false
camera_view: live
fit_mode: fill
type: picture-entity
grid_options:
columns: 3
rows: 1
camera_image: camera.go2rtc_camera_3_domofon_sd
entity: camera.go2rtc_camera_3_domofon_sd
card_mod:
style: |
ha-card {
min-height: 50px !important;
height: 70px !important;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
}
tap_action:
action: navigate
navigation_path: '#alarm'
- show_state: false
show_name: false
camera_view: live
fit_mode: fill
type: picture-entity
grid_options:
columns: 3
rows: 1
camera_image: camera.go2rtc_camera_4_test_mobile
entity: camera.go2rtc_camera_4_test_mobile
card_mod:
style: |
ha-card {
min-height: 50px !important;
height: 70px !important;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
}
tap_action:
action: navigate
navigation_path: '#alarm'
- show_state: false
show_name: false
camera_view: live
fit_mode: fill
type: picture-entity
grid_options:
columns: 3
rows: 1
camera_image: camera.go2rtc_camera_5_test_mobile
entity: camera.go2rtc_camera_5_test_mobile
card_mod:
style: |
ha-card {
min-height: 50px !important;
height: 70px !important;
border-radius: var(--ha-card-border-radius,var(--ha-border-radius-lg));
}
tap_action:
action: navigate
navigation_path: '#alarm'
- type: horizontal-stack
cards:
- type: custom:mushroom-cover-card
entity: cover.brama_extended_wjazdowa
fill_container: true
name: Brama
show_buttons_control: true
show_position_control: false
show_tilt_position_control: false
layout: horizontal
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: >
.shape {
{% set status = states(config.entity) %}
{% set state_entity = 'binary_sensor.czujnik_bramy_zamknieta_contact' %}
{% if status == 'closed' %}
/* SECURE: Green */
--main-color: var(--rgb-green);
--effect-anim: liquid-sheen 6s ease-in-out infinite;
--ring-display: none;
--icon-anim: none;
{% elif status == 'open' %}
/* OPEN: Red */
--main-color: var(--rgb-red);
--effect-anim: soft-heartbeat 3s ease-in-out infinite;
--ring-display: block;
/* NEW: Icon breathes when open */
--icon-anim: icon-alert-pulse 3s ease-in-out infinite;
{% else %}
/* MOVING: Orange */
--main-color: var(--rgb-orange);
--effect-anim: smooth-flow 2s linear infinite;
--ring-display: none;
/* Icon moves up/down */
--icon-anim: nudge-icon 1s ease-in-out infinite;
{% endif %}
/* --- BASE STYLING --- */
background-color: rgba(var(--main-color), 0.20) !important;
--icon-color: var(--main-color) !important;
--icon-color-disabled: var(--main-color) !important;
--shape-color: transparent !important;
color: rgb(var(--main-color)) !important;
box-shadow: 0 0 20px rgba(var(--main-color), 0.2);
border-radius: 28px !important;
position: relative;
overflow: visible !important;
transition: background-color 0.5s ease, box-shadow 0.5s ease;
/* Apply the background shape animation */
animation: var(--effect-anim);
}
/* --- INNER EFFECT (Sheen / Stripes) --- */
.shape::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.2) 50%, transparent 80%);
background-size: 200% 100%;
opacity: 0;
animation: inherit;
}
/* --- OUTER EFFECT (Soft Ripple for Open) --- */
.shape::after {
content: '';
display: var(--ring-display);
position: absolute;
inset: 0;
border-radius: inherit;
background: rgba(var(--main-color), 0.8);
z-index: -1;
animation: soft-ripple 1s infinite ease-out;
}
/* --- ANIMATIONS --- */
/* CLOSED: Liquid Sheen */
@keyframes liquid-sheen {
0%, 100% { background-position: 150% 0; box-shadow: 0 0 15px rgba(var(--main-color), 0.1); opacity: 1; }
50% { background-position: -50% 0; box-shadow: 0 0 25px rgba(var(--main-color), 0.3); opacity: 1; }
}
.shape[style*="liquid-sheen"]::before { opacity: 1;
animation:
liquid-sheen 6s ease-in-out infinite; }
/* OPEN: Background Heartbeat */
@keyframes soft-heartbeat {
0% { transform: scale(1); box-shadow: 0 0 10px rgba(var(--main-color), 0.2); }
50% { transform: scale(1.03); box-shadow: 0 0 25px rgba(var(--main-color), 0.5); }
100% { transform: scale(1); box-shadow: 0 0 10px rgba(var(--main-color), 0.2); }
}
/* OPEN: Icon Alert Pulse (The Icon itself scales) */
@keyframes icon-alert-pulse {
0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--main-color), 0)); }
50% { transform: scale(1.2); filter: drop-shadow(0 0 8px rgba(var(--main-color), 0.6)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(var(--main-color), 0)); }
}
/* OPEN: Fading Ripple */
@keyframes soft-ripple {
0% { transform: scale(1); opacity: 0.6; }
100% { transform: scale(1.8); opacity: 0; }
}
/* MOVING: Smooth Flow Background */
@keyframes smooth-flow {
0% { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px); background-position: 0 0; opacity: 1; }
100% { background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.1) 10px, rgba(255,255,255,0.1) 20px); background-position: 28px 0; opacity: 1; }
}
/* MOVING: Gentle Icon Nudge */
@keyframes nudge-icon {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
.: |
mushroom-shape-icon {
display: flex;
z-index: 1;
/* APPLY ICON ANIMATION HERE */
animation: var(--icon-anim);
}
ha-card {
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states: []
fill_container: true
tap_action:
action: navigate
navigation_path: '#alarm'
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary_info: none
name: Alarm
primary_info: none
card_mod:
style:
mushroom-shape-icon$: >
.shape {
/* --- LOGIC BLOCK --- */
{% set status = states(config.entity) %}
{% if status == 'disarmed' %}
/* --- DISARMED --- */
--main-color: var(--rgb-green);
/* Shape: Floating effect */
--bg-anim: shield-float 3s ease-in-out infinite;
/* Inner: Light sheen scan */
--inner-style: linear-gradient(to bottom, transparent 0%, transparent 20%, rgba(45,160,40,0.5) 40%, rgba(88,204,0,0.5) 42%, rgba(0,255,0,0.1) 43%, transparent 60%);
--inner-anim: sheen-scan 3s ease-in-out infinite;
/* Outer: None */
--outer-display: none;
/* ICON: Slow, calm breathing */
--icon-anim: breathe-slow 3s ease-in-out infinite;
wmix-blend: color-dodge !important;
{% elif status == 'triggered' %}
/* --- TRIGGERED --- */
--main-color: var(--rgb-deep-orange);
/* Shape: Strobe */
--bg-anim: panic-strobe 0.5s steps(2) infinite;
/* Inner: None */
--inner-style: none;
--inner-anim: none;
/* Outer: Shockwave */
--outer-display: block;
--outer-anim: shockwave 0.5s linear infinite;
/* ICON: Violent shake */
--icon-anim: violent-shake 0.1s linear infinite;
{% elif 'armed' in status %}
/* --- ARMED --- */
--main-color: var(--rgb-red);
/* Shape: Static */
--bg-anim: none;
/* Inner: Radar sweep gradient */
--inner-style: conic-gradient(from 0deg, transparent 0%, rgba(var(--main-color), 0.6) 20%, transparent 40%);
--inner-anim: radar-spin 2s linear infinite;
/* Outer: Sonar expansion */
--outer-display: block;
--outer-anim: sonar-expand 2s ease-out infinite;
/* ICON: Alert pulse */
--icon-anim: breathe-fast 2s ease-in-out infinite;
{% elif status == 'pending' %}
/* --- PENDING --- */
--main-color: var(--rgb-orange);
/* Shape: Breathing */
--bg-anim: arming-breathe 1s ease-in-out infinite;
/* Inner/Outer: None */
--inner-style: none;
--inner-anim: none;
--outer-display: none;
/* ICON: Medium pulse */
--icon-anim: breathe-medium 2s ease-in-out infinite;
{% else %}
/* UNKNOWN */
--main-color: var(--rgb-grey);
--bg-anim: none; --inner-style: none; --inner-anim: none; --outer-display: none; --icon-anim: none;
{% endif %}
/* --- SHAPE CONTAINER STYLING --- */
background-color: rgba(var(--main-color), 0.15) !important;
--icon-color: var(--main-color) !important;
color: rgb(var(--main-color)) !important;
__disabled_box-shadow: 0 0 25px rgba(var(--main-color), 0.3), inset 0 0 10px rgba(var(--main-color), 0.1) !important;
border: 3px solid rgba(var(--main-color), 0.5);
box-shadow: 0 1px 0px rgba(0,0,0,0.1), inset 0 2px 2px var(--card-background-color) !important;
border-radius: 50% !important;
position: relative;
overflow: visible !important;
transition: all 0.5s ease;
animation: var(--bg-anim);
}
/* INNER EFFECT (Sheen or Radar Sweep) */
.shape::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--inner-style);
background-size: 100% 200%;
animation: var(--inner-anim); z-index: 1;
}
/* OUTER EFFECT (Sonar Ring or Shockwave) */
.shape::after {
content: '';
display: var(--outer-display);
position: absolute; inset: -2px;
border-radius: 50%;
border: 2px solid rgba(var(--main-color), 0.6);
animation: var(--outer-anim); z-index: -1;
}
/* ICON ANIMATION (Applied directly to the icon) */
ha-icon {
position: relative; z-index: 2;
animation: var(--icon-anim); transform-origin: center;
}
/* --- SHAPE & ICON ANIMATIONS --- */
@keyframes shield-float { 0%, 100% { transform:
translateY(0); } 50% { transform: translateY(-3px); }
}
@keyframes sheen-scan { 0% { background-position: 0%
150%; opacity: 0; } 20%, 80% { opacity: 1; } 100% {
background-position: 0% -50%; opacity: 0; } }
@keyframes radar-spin { 0% { transform: rotate(0deg);
} 100% { transform: rotate(360deg); } }
@keyframes sonar-expand { 0% { transform: scale(1);
opacity: 0.8; border-width: 2px; } 100% { transform:
scale(2.5); opacity: 0; border-width: 0px; } }
@keyframes panic-strobe { 0% { background-color:
rgba(var(--main-color), 0.2); box-shadow: 0 0 10px
rgba(var(--main-color), 1); } 100% { background-color:
rgba(var(--main-color), 0.6); box-shadow: 0 0 50px
rgba(var(--main-color), 1); } }
@keyframes violent-shake { 0% { transform:
translate(0, 0) rotate(0deg); } 25% { transform:
translate(-3px, 3px) rotate(-5deg); } 50% { transform:
translate(3px, -3px) rotate(5deg); } 75% { transform:
translate(-3px, -3px) rotate(-5deg); } 100% {
transform: translate(0, 0) rotate(0deg); } }
@keyframes shockwave { 0% { transform: scale(1);
opacity: 1; } 100% { transform: scale(1.5); opacity:
0; } }
@keyframes arming-breathe { 0%, 100% { box-shadow: 0 0
10px rgba(var(--main-color), 0.5); } 50% { box-shadow:
0 0 30px rgba(var(--main-color), 1); } }
/* Icon Breathing Animations */
@keyframes breathe-slow { 0%, 100% { transform:
scale(1); opacity: 0.8; } 50% { transform:
scale(1.05); opacity: 1; } }
@keyframes breathe-medium { 0%, 100% { transform:
scale(1); } 50% { transform: scale(1.1); } }
@keyframes breathe-fast { 0%, 100% { transform:
scale(1); } 50% { transform: scale(1.15); } }
mushroom-alarm-control-panel-buttons-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-primary-text-color), 0.05) !important;
--button-color: rgb(var(--rgb-primary-text-color)) !important;
transition: all 0.2s ease;
}
mushroom-button:active {
background-color: rgba(var(--rgb-primary-color), 0.2) !important;
}
.: |
ha-card {
background: var(--card-background-color);
_disabled-box-shadow:
rgba(255,255,255,0.05) 1px 1px 0.5px 0 inset,
rgba(0,0,0,0.05) -1px -1px 0px inset;
width: auto;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* --- LOGIC FOR CARD GLOW --- */
{% set status = states(config.entity) %}
{% if status == 'disarmed' %}
/* DISARMED: Green Glow */
--card-glow-color: var(--rgb-green);
--card-anim-speed: 2s; /* Slow & Calm */
{% elif status == 'triggered' %}
/* TRIGGERED: Deep Orange/Red Strobe */
--card-glow-color: var(--rgb-deep-orange);
--card-anim-speed: 0.5s;
{% elif status == 'pending' %}
/* PENDING: Orange */
--card-glow-color: var(--rgb-orange);
--card-anim-speed: 2s;
{% else %}
/* ARMED (Any mode): Red Glow */
--card-glow-color: var(--rgb-red);
--card-anim-speed: 2s;
{% endif %}
--card-fill-anim: card-fill-pulse var(--card-anim-speed) ease-in-out infinite alternate;
/* Base Card Styling */
/* background: linear-gradient(145deg, rgba(30,30,30,0.9) 0%, rgba(20,20,20,1) 100%); */
/* background-image: linear-gradient(0deg, rgba(30,30,30,0.2) 0%, var(--card-background-color) 100%); */
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
position: relative;
overflow: hidden; /* Important to contain the glow */
}
/* THE CARD-FILLING GLOW LAYER */
ha-card::before {
content: '';
position: absolute;
inset: 0;
/* A large radial gradient that expands to fill the card */
background: radial-gradient(circle at center, rgba(var(--card-glow-color),0.7) 0%, transparent 70%);
opacity: 0;
pointer-events: none;
mix-blend-mode: color-dodge;
animation: var(--card-fill-anim);
z-index: 0; /* Behind content but in front of background */
}
/* Animation for the card glow */
@keyframes card-fill-pulse {
0% { opacity: 0.1; transform: scale(0.8); }
100% { opacity: 0.6; transform: scale(1.5); }
}
/* Center the main icon */
mushroom-shape-icon {
--icon-size: 36px !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1; /* Keep icon above the card glow */
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: horizontal-stack
cards:
- type: custom:mushroom-vacuum-card
entity: vacuum.xiaomi_de_1140711099_d109gl
commands:
- start_pause
- clean_spot
- return_home
- on_off
- stop
fill_container: true
icon_animation: true
card_mod:
style: |
ha-card {
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
}
- type: custom:mushroom-fan-card
entity: fan.zhimi_mb5_5bb7_air_purifier_2
show_percentage_control: true
show_oscillate_control: false
show_direction_control: false
collapsible_controls: false
icon_animation: true
fill_container: true
name: Oczyszczacz
hold_action:
action: more-info
card_mod:
style: |
ha-card {
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
}
- type: custom:bubble-card
card_type: separator
name: Parametry
icon: phu:air-filter
sub_button:
main:
- entity: fan.zhimi_mb5_5bb7_air_purifier_2
sub_button_type: slider
show_icon: true
state_background: true
show_background: true
tap_to_slide: false
relative_slide: false
read_only_slider: false
always_visible: true
step: 33
icon: mdi:fan
scrolling_effect: false
name: ''
show_state: false
show_name: false
bottom: []
modules:
- '!default'
- previous_accent_color
bubble_badges:
badges:
- name: Bateria
target: main_icon
sub_button_index: 1
icon: mdi:battery-charging
entity: sensor.xiaomi_de_1140711099_d109gl_battery_level_p_3_1
animation: pulse
- square: true
type: grid
cards:
- clock_style: analog
clock_size: small
show_seconds: true
no_background: true
border: false
ticks: hour
face_style: markers
type: clock
seconds_motion: continuous
card_mod:
style: |
ha-card {
scale: 0.8;
}
- type: custom:ring-tile
entity: sensor.view_plus_cisnienie_atmosferyczne
ring_entity: sensor.openweathermap_cisnienie
marker: sensor.view_plus_cisnienie_atmosferyczne
name: Ciśnienie
scale: ticks
icon: phu:air-presure
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
top_element: icon
middle_element: value_with_unit
bottom_element: ring_value_with_unit
min: 965
max: 1055
- type: custom:ring-tile
top_element: icon
entity: sensor.openweathermap_predkosc_wiatru
ring_type: compass_n
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
marker: sensor.openweathermap_kierunek_wiatru
card_mod:
style:
rt-ring-svg $: |
g.marker path {
fill: hsl(
{{ 0 + 210 * (100 - states("sensor.openweathermap_predkosc_wiatru")|float) / 100 }}
, 40%, 44%)
}
- type: custom:ring-tile
entity: sensor.temperatura_w_domu
name: Dom
bottom_element: name
min: 10
max: 40
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
colour:
'10': ha_blue
'22': ha_green
'32': ha_yellow
'40': ha_red
columns: 4
- square: true
type: grid
cards:
- type: custom:ring-tile
entity: sensor.view_plus_pm2_5
marker: sensor.view_plus_pm1
name: Pyły
top_element: icon
middle_element: value_with_unit
bottom_element: name
min: 0
max: 40
indicator: dot
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
colour:
'0': var(--cyan-color)
'3': var(--green-color)
'8': var(--lime-color)
'10': var(--yellow-color)
'13': var(--amber-color)
'25': var(--pink-color)
'28': var(--deep-orange-color)
'40': var(--purple-color)
card_mod:
style: |
ha-card {
margin-top: -10px;
}
- type: custom:ring-tile
entity: sensor.view_plus_volatile_organic_compounds_parts
name: LZO
bottom_element: name
middle_element: value_with_unit
top_element: icon
min: 0
max: 2200
indicator: dot
ring_type: open
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
colour:
'200': var(--blue-color)
'250': var(--yellow-color)
'350': var(--amber-color)
'1000': var(--orange-color)
'1500': var(--deep-orange-color)
'1800': var(--red-color)
'2000': var(--pink-color)
'2500': var(--purple-color)
card_mod:
style: |
ha-card {
margin-top: -10px;
}
- type: custom:ring-tile
entity: sensor.view_plus_dwutlenek_wegla
name: Dwutlenek
min: 0
max: 1600
indicator: dot
ring_type: closed
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
top_element: icon
bottom_element: unit
colour:
'300': var(--cyan-color)
'800': var(--yellow-color)
'1000': var(--pink-color)
card_mod:
style: |
ha-card {
margin-top: -10px;
}
- type: custom:ring-tile
entity: sensor.view_plus_radon
icon: mdi:radioactive
indicator: dot
scale: ticks_with_labels
ring_type: open
ring_size: 2
ring_only: true
min_sig_figs: 3
tweaks:
transparent_tile: true
rt-ring-svg-size: 80px
bottom_element: min_max
middle_element: value_with_unit
top_element: icon
min: 0
max: 160
colour:
'0': ha_purple
'8': ha_blue
'17': ha_green
'100': ha_yellow
'130': ha_orange
'150': ha_red
card_mod:
style: |
ha-card {
margin-top: -10px;
}
columns: 4
card_mod:
style: |
ha-card {
margin-top: -20px;
}
- type: grid
cards:
- type: custom:bubble-card
card_type: separator
name: Pokoje
icon: phu:rooms-attic
sub_button:
main:
- entity: vacuum.xiaomi_d109gl_525b_robot_cleaner_2
show_name: false
show_state: false
- entity: fan.zhimi_mb5_5bb7_air_purifier_2
bottom: []
modules:
- previous_accent_color
bubble_badges:
badges:
- name: Bateria
target: main_icon
sub_button_index: 1
icon: mdi:battery-charging
entity: sensor.xiaomi_de_1140711099_d109gl_battery_level_p_3_1
animation: pulse
- type: custom:vertical-stack-in-card
cards:
- type: custom:bubble-card
card_type: separator
name: MAMA
icon: mdi:mother-heart
sub_button:
main:
- entity: binary_sensor.czujnik_obecnosci_mama_presence
icon: mdi:motion-sensor
state_background: true
show_background: true
show_state: false
- entity: light.mama_sypialnia
light_background: false
show_icon: true
tap_action:
action: toggle
icon: mdi:lightbulb
- icon: mdi:speaker
entity: media_player.telewizor_u_mamy
bottom: []
modules:
- icon_border_progress
icon_border_progress:
- button: sub-button-3
source: media_player.plex_plex_for_android_tv_shield_android_tv
card_mod:
style:
.: |
ha-card {
margin-top: 0px; padding: 5px 0px 5px 8px;
}
.bubble-line {
opacity:1; height: 2px !important;
background-color:
{% if is_state('binary_sensor.czujnik_obecnosci_mama_presence', 'on') %}
var(--primary-color);
{% elif is_state('binary_sensor.czujnik_obecnosci_mama_presence', 'unknown') %}
red;
{% else %}
{% endif %};
}
.bubble-icon{
margin-right: 15px
}
- type: custom:mushroom-light-card
layout: horizontal
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
name: Światło
double_tap_action:
action: more-info
icon: hue:wall-shade
entity: light.mama_sypialnia
card_mod:
style:
.: |
ha-card{
background: none;
}
- square: false
type: grid
cards:
- type: custom:ring-tile
entity:
entity: sensor.czujnik_temperatury_mamasypialnia_temperature
device_class: temperature
name: Temperatura
ring_type: arc
indicator: arc
min: 0
max: 45
colour:
'0': ha_purple
'8': ha_blue
'17': ha_green
'21': ha_yellow
'28': ha_orange
'30': ha_red
card_mod:
style:
.: |
ha-card{
background: none; border-top: none;padding-top: 10px;
}
- type: custom:ring-tile
entity:
entity: sensor.czujnik_temperatury_mamasypialnia_humidity
device_class: humidity
ring_type: open
indicator: arc
colour: ha_blue
name: Wilgotność
card_mod:
style:
.: |
ha-card{
background: none; border-top: none;padding-top: 10px;
}
- type: custom:ring-tile
entity:
entity: sensor.bme280_czujnik2_pm_2_5_m_weight_concentration
colour:
'0': var(--cyan-color)
'3': var(--green-color)
'8': var(--lime-color)
'10': var(--yellow-color)
'13': var(--amber-color)
'25': var(--pink-color)
'28': var(--deep-orange-color)
'40': var(--purple-color)
name: Pyki
min: 0
max: 15
card_mod:
style:
.: |
ha-card {
background: none; border-top: none; padding-top: 10px;
}
columns: 3
card_mod:
style:
.: |
ha-card{
margin: 0px 0; position: relative;
padding: 15px;
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
}
ha-card:before{
position: absolute; content: ""; width: 100%;
height: 100%;top: 0; left: 0;
background: url("https://images.unsplash.com/photo-1579103826013-8ce4ed7c140e?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
opacity: 0.1;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:bubble-card
card_type: separator
name: SALON
icon: mdi:sofa
sub_button:
- entity: binary_sensor.czujnik_obecnosci_salon_presence
icon: mdi:motion-sensor
state_background: true
show_background: true
show_state: false
- entity: light.salon_ambient
light_background: false
show_icon: true
tap_action:
action: toggle
icon: mdi:led-off
- entity: media_player.plex_plex_for_android_tv_shield_android_tv
icon: mdi:speaker
modules:
- icon_border_progress
icon_border_progress:
- button: sub-button-3
source: media_player.plex_plex_for_android_tv_shield_android_tv
card_mod:
style:
.: |
ha-card {
margin-top: 0px; padding: 5px 0px 5px 8px;
}
.bubble-line {
opacity:1; height: 2px !important;
background-color:
{% if is_state('binary_sensor.czujnik_obecnosci_salon_presence', 'on') %}
var(--primary-color);
{% elif is_state('binary_sensor.czujnik_obecnosci_salon_presence', 'unknown') %}
red;
{% else %}
{% endif %};
}
.bubble-icon{
margin-right: 15px
}
- type: custom:mushroom-light-card
entity: light.salon
layout: horizontal
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
name: Światło
double_tap_action:
action: more-info
icon: hue:perifo-spot
card_mod:
style:
.: |
ha-card{
background: none;
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
}
- square: false
type: grid
cards:
- type: custom:ring-tile
entity:
entity: sensor.czujnik_obecnosci_salon_temperature
device_class: temperature
name: Temperatura
ring_type: arc
indicator: arc
min: 0
max: 45
colour:
'0': ha_purple
'8': ha_blue
'17': ha_green
'21': ha_yellow
'28': ha_orange
'30': ha_red
card_mod:
style:
.: |
ha-card{
background: none; border-top: none;padding-top: 10px;
}
- type: custom:ring-tile
entity:
entity: sensor.czujnik_obecnosci_salon_humidity
device_class: humidity
ring_type: open
indicator: arc
colour: ha_blue
name: Wilgotność
card_mod:
style:
.: |
ha-card{
background: none; border-top: none;padding-top: 10px;
}
- type: custom:ring-tile
entity:
entity: sensor.zhimi_de_874970050_mb5_pm2_5_density_p_3_4
colour:
'0': var(--cyan-color)
'3': var(--green-color)
'8': var(--lime-color)
'10': var(--yellow-color)
'13': var(--amber-color)
'25': var(--pink-color)
'28': var(--deep-orange-color)
'40': var(--purple-color)
name: Pyki
min: 0
max: 25
card_mod:
style:
.: |
ha-card{
background: none; border-top: none;padding-top: 10px;
}
columns: 3
card_mod:
style:
.: |
ha-card{
margin: 0px 0; position: relative;
padding: 15px;
background: none;
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
}
ha-card:before{
position: absolute; content: ""; width: 100%;
height: 100%;top: 0; left: 0;
background: url("https://images.unsplash.com/photo-1760170437237-a3654545ab4c?q=80&w=2006&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
background-size: cover;
opacity: 0.1;
}
- type: grid
cards:
- type: custom:bubble-card
card_type: horizontal-buttons-stack
auto_order: true
1_name: Mama
1_icon: mdi:mother-heart
1_link: '#mama'
1_entity: light.mama_sypialnia
1_pir_sensor: binary_sensor.czujnik_obecnosci_mama_presence
2_name: Salon
2_icon: mdi:theater
2_link: '#salon'
2_pir_sensor: binary_sensor.czujnik_obecnosci_salon_presence
2_entity: light.salon_cala_strefa
3_name: Łazienka
3_icon: mdi:shower-head
3_link: '#lazienka'
3_entity: light.lazienka
3_pir_sensor: binary_sensor.czujnik_obecnosci_lazienka_glowny_presence
4_link: '#zewnatrz'
4_name: Zewnątrz
4_icon: mdi:home
4_entity: light.swiatla_na_zewnatrz
4_pir_sensor: binary_sensor.czujniki_ruchu_w_ogrodzie
highlight_current_view: true
margin: 7px
hide_gradient: false
rows: ''
styles: |
.card-content {
bottom: 40px; /* Or the value you want */
}
.bubble-background-color {
#border: 1px solid var(--primary-text-color);
#border-color: var(--background-color-2) !important;
#box-shadow: 0px 5px 0px 0px #00000046;
box-shadow: 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.4) inset, -0.5px -0.5px 1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
5_name: Ostrzeżenia
5_icon: mdi:alert
5_link: '#burze'
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#salon-tv-pilot'
button_type: name
sub_button:
main: []
bottom: []
show_header: true
bg_opacity: '0'
bg_blur: '0'
backdrop_blur: '0'
width_desktop: 320px
bg_color: '#ffffff'
hide_backdrop: true
modules:
- simple-popup-header
- type: custom:firemote-card
entity: media_player.shield_adb
device_family: nvidia-shield
device_type: shield-tv-2019
compatibility_mode: default
android_tv_remote_entity: remote.shield
defaultRemoteStyle_override: ON2
app_launch_1: plex
app_launch_2: sparkle-tv
app_launch_3: smart-tube-next
name_position: hidden
app_launch_4: spotify
app_launcher_relative_size: 0
dpad_style: apple-tv-silver
scale: '110'
grid_options:
columns: 12
rows: 8
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#mama-tv-pilot'
button_type: name
sub_button:
main: []
bottom: []
show_header: true
bg_opacity: '0'
bg_blur: '0'
backdrop_blur: '0'
width_desktop: 320px
modules:
- simple-popup-header
hide_backdrop: true
bg_color: '#ffffff'
shadow_opacity: '0'
name: ''
- type: custom:firemote-card
entity: media_player.telewizor_u_mamy
device_family: chromecast
device_type: chromecast-4k
compatibility_mode: default
defaultRemoteStyle_override: ON2
app_launcher_relative_size: 0
visible_name_text: ''
name_position: hidden
scale: '110'
grid_options:
columns: 12
rows: 8
android_tv_remote_entity: remote.telewizor_w_sypialni_mamy
app_launch_1: plex
app_launch_2: youtube
app_launch_3: sparkle-tv
app_launch_4: youtubekids
app_launch_5: ''
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#media'
button_type: name
name: Włącz muzykę
icon: mdi:speaker
sub_button:
main: []
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
bg_color: ''
- type: custom:bubble-card
card_type: separator
name: Salon
icon: mdi:theater
- type: custom:bubble-card
card_type: media-player
sub_button:
main:
- entity: media_player.telewizor_w_salonie_js
sub_button_type: select
select_attribute: source_list
icon: cil:hdmi-source
name: Źródło
bottom: []
main_layout: inline
entity: media_player.65oled909_12_2
icon: mdi:youtube-tv
name: Telewizor
hide:
next_button: true
previous_button: true
show_attribute: true
show_state: false
- type: custom:bubble-card
card_type: media-player
entity: media_player.salon
name: Amplituner
icon: mdi:audio-video
hide:
power_button: false
next_button: true
previous_button: true
cover_background: true
sub_button:
main:
- entity: media_player.salon
sub_button_type: select
select_attribute: source_list
icon: cil:hdmi-source
name: Źródło
hide_when_parent_unavailable: false
bottom: []
show_name: true
force_icon: false
- type: entities
entities:
- card_type: horizontal-stack
cards:
- entity: script.streamuj_rmf_fm
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/RMF_FM_logo.svg/640px-RMF_FM_logo.svg.png
tap_action:
service: script.streamuj_rmf_fm
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Logo_Radia_Eska.svg/640px-Logo_Radia_Eska.svg.png
tap_action:
service: script.streamuj_radio_eska
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska_2
entity_picture: >-
https://files.qnap.net.pl/ha_assets/logo_radio_Eska2.png
tap_action:
service: script.streamuj_radio_eska_2
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_rmf_maxx
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Logo_RMF_MAXX.png/640px-Logo_RMF_MAXX.png
tap_action:
service: script.streamuj_radio_rmf_maxx
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
type: custom:hui-element
card_mod:
style: |
ha-card {
background: none;
}
- type: custom:bubble-card
card_type: separator
name: Ogród
icon: hue:room-outdoors
- type: custom:bubble-card
card_type: media-player
entity: media_player.nest_w_ogrodzie
name: ''
- type: entities
entities:
- card_type: horizontal-stack
cards:
- entity: script.streamuj_rmf_fm_w_ogrodzie
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/RMF_FM_logo.svg/640px-RMF_FM_logo.svg.png
tap_action:
service: script.streamuj_rmf_fm_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska_w_ogrodzie
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Logo_Radia_Eska.svg/640px-Logo_Radia_Eska.svg.png
tap_action:
service: script.streamuj_radio_eska_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska_2_w_ogrodzie
entity_picture: >-
https://files.qnap.net.pl/ha_assets/logo_radio_Eska2.png
tap_action:
service: script.streamuj_radio_eska_2_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_rmf_maxx_w_ogrodzie
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Logo_RMF_MAXX.png/640px-Logo_RMF_MAXX.png
tap_action:
service: script.streamuj_radio_rmf_maxx_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
type: custom:hui-element
card_mod:
style: |
ha-card {
background: none;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#swiatla'
name: Światła
icon: phu:bulb-group-classic-hung-3
sub_button:
main: []
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
show_header: true
button_action: {}
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: light.festavia
state: 'on'
- condition: state
entity: light.festavia
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
sub_button:
main:
- entity: switch.gniazdko_swiatla_uliczne_swiateczne
name: ''
icon: phu:light-string
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: toggle
bottom: []
name: Dekoracja świąteczna
icon: noto-v1:santa-claus
modules: []
subbutton_colors:
subbutton1:
color: grey
condition:
- condition: state
entity_id: switch.gniazdko_swiatla_uliczne_swiateczne
state:
- 'off'
styles: |-
.background-off {
background-color: var(--secondary-background-color);
}
- type: custom:bubble-card
card_type: button
button_type: slider
icon: roentgen:christmas-tree
name: Choinka
scrolling_effect: false
show_icon: true
button_action:
double_tap_action:
action: more-info
tap_action:
action: toggle
double_tap_action:
action: more-info
tap_action:
action: toggle
sub_button:
main:
- entity: scene.salon_choinka_red_blink
icon: mdi:candle
name: Red Blink
tap_action:
action: toggle
- entity: scene.salon_choinka_lesna_przygoda
icon: mdi:forest
name: Leśna przygoda
tap_action:
action: toggle
- entity: scene.salon_choinka_nowa_aranzacja
icon: mdi:flash-triangle
name: Nowa aranżacja
tap_action:
action: toggle
- entity: scene.salon_choinka_soho_2
name: Soho 2
icon: mdi:square-opacity
tap_action:
action: toggle
- entity: scene.salon_choinka_cancun
icon: mdi:cupcake
name: Cancun
tap_action:
action: toggle
bottom: []
entity: light.festavia
rows: ''
force_icon: false
show_name: true
- type: custom:bubble-card
card_type: separator
sub_button:
main: []
bottom: []
icon: mdi:theater
name: Salon
- type: custom:expander-card
title: Expander Card
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom:
- entity: light.salon
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: phu:ceiling-fugato-four-alt
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_color_lamp_4
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:tree
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_color_lamp_5
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:sprout
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_omniglow_striplight_1
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:dresser
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_play_wall_washer_1
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:border-left
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_play_wall_washer_2
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:border-right
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_color_lamp_16
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:arrow-bottom-left-thin
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.signe_gradient_floor_1
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: phu:signe-gradient-floor
sub_button_type: slider
allow_light_slider_to_0: true
entity: input_boolean.override_manual_on_ambient
name: Ambient - ręczne sterowanie
icon: mdi:gesture-double-tap
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
rows: '1.8'
title-card:
type: custom:bubble-card
card_type: button
hash: '#swiatla'
button_type: slider
entity: light.salon_cala_strefa
icon: mdi:theater
show_header: true
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
name: Salon
sub_button:
- entity: scene.salon_koncentracja
name: Koncentracja
tap_action:
action: toggle
icon: phu:scene-concentrate
- entity: scene.salon_czytanie
name: Czytanie
icon: phu:scene-read
tap_action:
action: toggle
- entity: scene.salon_odpoczynek
name: Odpoczynek
icon: hue:scene-rest
tap_action:
action: toggle
- entity: scene.salon_lampka_nocna
icon: phu:scene-nightlight
name: Lampka nocna
tap_action:
action: toggle
clear: true
clear-children: true
animation: true
padding: '0'
child-margin-top: 14px
title-card-button-overlay: false
- type: custom:bubble-card
card_type: separator
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
button_type: switch
name: Mama
sub_button: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
name: Mama
entity: light.mama_sypialnia
show_state: false
show_last_changed: false
show_last_updated: false
show_attribute: false
slider_live_update: false
allow_light_slider_to_0: false
button_action:
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
tap_action:
action: toggle
double_tap_action:
action: more-info
hold_action:
action: none
icon: mdi:mother-heart
sub_button:
- entity: scene.mama_sypialnia_koncentracja
name: Koncentracja
tap_action:
action: toggle
icon: hue:scene-concentrate
- entity: scene.mama_sypialnia_czytanie
name: Czytanie
icon: phu:scene-read
tap_action:
action: toggle
- entity: scene.mama_sypialnia_odpoczynek
name: Odpoczynek
icon: hue:scene-rest
tap_action:
action: toggle
- entity: scene.mama_sypialnia_lampka_nocna
icon: phu:scene-nightlight
name: Lampka nocna
tap_action:
action: toggle
scrolling_effect: false
- type: custom:bubble-card
card_type: separator
button_type: switch
name: Tymek
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.tymek
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
icon: mdi:teddy-bear
sub_button:
- entity: scene.tymek_koncentracja
name: Koncentracja
tap_action:
action: toggle
icon: phu:scene-concentrate
- entity: scene.tymek_czytanie
name: Czytanie
icon: phu:scene-read
tap_action:
action: toggle
- name: Odpoczynek
icon: hue:scene-rest
tap_action:
action: toggle
entity: scene.tymek_odpoczynek
- entity: scene.tymek_relaks
icon: phu:scene-relax
name: Lampka nocna
tap_action:
action: toggle
use_accent_color: false
scrolling_effect: false
- type: custom:bubble-card
card_type: separator
button_type: switch
name: Sypialnia dół / Biuro
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.hue_color_lamp_1_5
name: Biurko
icon: hue:desk-lamp
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
sub_button: []
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.wled
name: Komputer
icon: mdi:television-ambient-light
slider_live_update: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
sub_button: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.sypialnia_dol
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
icon: mdi:bed
sub_button:
- name: Koncentracja
tap_action:
action: toggle
icon: phu:scene-concentrate
entity: scene.sypialnia_dol_koncentracja
- name: Czytanie
icon: phu:scene-read
tap_action:
action: toggle
entity: scene.sypialnia_dol_czytanie
- name: Odpoczynek
icon: hue:scene-rest
tap_action:
action: toggle
entity: scene.sypialnia_dol_odpoczynek
- icon: phu:scene-relax
name: Lampka nocna
tap_action:
action: toggle
entity: scene.sypialnia_dol_lampka_nocna
use_accent_color: false
scrolling_effect: false
- type: custom:bubble-card
card_type: separator
name: Dom
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.wejscie
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
icon: mdi:shoe-print
scrolling_effect: true
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.lazienka
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
icon: mdi:shower-head
scrolling_effect: true
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.przedpokoj
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
icon: hue:room-stairs
scrolling_effect: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_schody
name: Schody
icon: mdi:stairs-up
show_state: false
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: none
double_tap_action:
action: none
scrolling_effect: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: light.schody_gora
name: Schody
icon: phu:upstairs-1
show_state: false
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: none
double_tap_action:
action: none
scrolling_effect: true
sub_button:
main:
- entity: switch.gniazdko_schody
fill_width: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
state_background: false
show_background: true
show_name: false
show_state: false
name: ''
icon: mdi:stairs-box
scrolling_effect: false
show_attribute: false
bottom: []
- type: custom:bubble-card
card_type: separator
name: Zewnątrz i ogród
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.wyjscie
icon: mdi:home-lightbulb-outline
show_last_changed: false
show_attribute: false
show_state: false
name: Zewnątrz
slider_live_update: false
use_accent_color: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
scrolling_effect: false
- type: custom:bubble-card
card_type: button
button_type: slider
entity: light.zewnatrz_domu_2
icon: phu:garden
name: Zachód
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: more-info
tap_action:
action: toggle
scrolling_effect: false
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#trash'
button_type: name
name: Odpady
icon: mdi:delete-empty
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: BIO odpady
secondary: |2-
{% set t = now() %}
{% set midnight = today_at() %}
{% set event = state_attr('calendar.bioodpady', 'start_time') | as_datetime | as_local %}
{% set delta = event - midnight %}
{% if delta.days == 0 %}
Dziś
{% elif delta.days == 1 %}
Jutro
{% elif delta.days == 2 %}
Pojutrze
{% else %}
Za {{ delta.days }} dni
{% endif %}
|
{{ as_timestamp(strptime(state_attr('calendar.bioodpady', 'start_time'), '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%d-%m-%Y') }}
icon: mdi:bio
entity: calendar.bioodpady
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
icon_color: >-
{{ 'green' if is_state('calendar.bioodpady','on') else ''
}}
- type: custom:mushroom-template-card
primary: Mieszane
secondary: |2-
{% set t = now() %}
{% set midnight = today_at() %}
{% set event = state_attr('calendar.odpady_zmieszane', 'start_time') | as_datetime | as_local %}
{% set delta = event - midnight %}
{% if delta.days == 0 %}
Dziś
{% elif delta.days == 1 %}
Jutro
{% elif delta.days == 2 %}
Pojutrze
{% else %}
Za {{ delta.days }} dni
{% endif %}
|
{{ as_timestamp(strptime(state_attr('calendar.odpady_zmieszane', 'start_time'), '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%d-%m-%Y') }}
icon: mdi:delete
entity: calendar.odpady_zmieszane
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
icon_color: >-
{{ 'green' if is_state('calendar.odpady_zmieszane','on')
else '' }}
- type: custom:mushroom-template-card
primary: Plastik/Metal/Szkło
secondary: |2-
{% set t = now() %}
{% set midnight = today_at() %}
{% set event = state_attr('calendar.odpady_papier_plastik_i_szklo', 'start_time') | as_datetime | as_local %}
{% set delta = event - midnight %}
{% if delta.days == 0 %}
Dziś
{% elif delta.days == 1 %}
Jutro
{% elif delta.days == 2 %}
Pojutrze
{% else %}
Za {{ delta.days }} dni
{% endif %}
|
{{ as_timestamp(strptime(state_attr('calendar.odpady_papier_plastik_i_szklo', 'start_time'), '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%d-%m-%Y') }}
icon: mdi:recycle
entity: calendar.odpady_papier_plastik_i_szklo
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
icon_color: >-
{{ 'green' if
is_state('calendar.odpady_papier_plastik_i_szklo','on')
else '' }}
- type: custom:mushroom-template-card
primary: Wielkogabarytowe
secondary: |2-
{% set t = now() %}
{% set midnight = today_at() %}
{% set event = state_attr('calendar.odpady_wielkogabarytowe', 'start_time') | as_datetime | as_local %}
{% set delta = event - midnight %}
{% if delta.days == 0 %}
Dziś
{% elif delta.days == 1 %}
Jutro
{% elif delta.days == 2 %}
Pojutrze
{% else %}
Za {{ delta.days }} dni
{% endif %}
|
{{ as_timestamp(strptime(state_attr('calendar.odpady_wielkogabarytowe', 'start_time'), '%Y-%m-%d %H:%M:%S')) | timestamp_custom('%d-%m-%Y') }}
icon: mdi:truck-alert-outline
entity: calendar.odpady_wielkogabarytowe
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: more-info
icon_color: >-
{{ 'green' if
is_state('calendar.odpady_wielkogabarytowe','on') else ''
}}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#salon-ambilight'
name: Ambilight
icon: mdi:television-ambient-light
sub_button:
main: []
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
show_header: true
button_action: {}
- type: custom:expander-card
title: Expander Card
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.sync_box_synchronizacja_swiatla
name: Sync
icon: mdi:television-ambient-light
modules:
- icon_animations
icon_animations:
animation_type: fade
animation_speed_main: '0.5'
animate_when:
- condition: state
entity_id: switch.sync_box_synchronizacja_swiatla
state:
- 'on'
show_name: true
show_last_changed: false
show_state: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
button_action: {}
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_intensywnosc
name: Intensywnosc
icon: hue:sync-intense
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
ha-card {
--bubble-select-list-item-accent-color: oklch(1 0 0 / 0.1%) !important;
}
${(() => {
const card = this;
if (!card.shadowRoot) return;
if (card.__menuSurfaceStyled) return;
card.shadowRoot.querySelectorAll("ha-select").forEach(haSelect => {
const haMenu = haSelect.shadowRoot?.querySelector("ha-menu");
if (!haMenu) return;
const mwcMenu = haMenu.shadowRoot?.querySelector("mwc-menu-surface");
if (!mwcMenu) return;
const surface = mwcMenu.shadowRoot?.querySelector("div.mdc-menu-surface");
if (!surface) return;
surface.style.backdropFilter = "blur(8px) saturate(1.2)";
surface.style.backgroundColor = "oklch(1 0 0 / 0.1%)";
surface.style.boxShadow = "var(--shadow-s)";
card.__menuSurfaceStyled = true;
});
return;
})()}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_tryb_synchronizacji
name: Tryb
icon: mdi:multimedia
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_obszar_rozrywki
name: Obszar
icon: hue:entertainment-area
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
title-card:
type: custom:bubble-card
card_type: button
button_type: slider
entity: number.sync_box_jasnosc
icon: mdi:television-ambient-light
show_header: true
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: perform-action
perform_action: huesyncbox.set_sync_state
target:
entity_id: switch.sync_box_synchronizacja_swiatla
data:
sync: true
power: true
name: Ambilight
sub_button:
- entity: select.sync_box_wejscia_hdmi
icon: phu:sync-box
show_arrow: false
show_attribute: false
show_state: true
show_icon: true
state_background: true
- entity: media_player.philips_google_tv_ta5_television
select_attribute: source_list
show_state: false
show_background: true
show_last_changed: false
show_last_updated: false
show_attribute: true
show_arrow: false
icon: mdi:video-input-hdmi
name: ''
show_name: false
show_icon: true
- entity: switch.sync_box_synchronizacja_swiatla
icon: mdi:television-ambient-light
show_state: false
show_icon: false
scrolling_effect: false
clear: true
clear-children: true
animation: true
padding: '0'
child-margin-top: 14px
title-card-button-overlay: false
- type: custom:bubble-card
card_type: button
button_type: slider
entity: number.sync_box_jasnosc
icon: mdi:television-ambient-light
show_header: true
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: perform-action
perform_action: huesyncbox.set_sync_state
target:
entity_id: switch.sync_box_synchronizacja_swiatla
data:
sync: true
power: true
name: Ambilight
sub_button:
main:
- entity: select.sync_box_wejscia_hdmi
icon: phu:sync-box
show_arrow: false
show_attribute: false
show_state: true
show_icon: true
state_background: true
sub_button_type: select
- entity: media_player.philips_google_tv_ta5_television
select_attribute: source_list
show_state: false
show_background: true
show_last_changed: false
show_last_updated: false
show_attribute: true
show_arrow: false
icon: mdi:video-input-hdmi
name: ''
show_name: false
show_icon: true
sub_button_type: select
- entity: switch.sync_box_synchronizacja_swiatla
icon: mdi:television-ambient-light
bottom: []
show_state: false
show_icon: false
scrolling_effect: false
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.sync_box_synchronizacja_swiatla
name: Sync
icon: mdi:television-ambient-light
modules:
- icon_animations
icon_animations:
animation_type: fade
animation_speed_main: '0.5'
animate_when:
- condition: state
entity_id: switch.sync_box_synchronizacja_swiatla
state:
- 'on'
show_name: true
show_last_changed: false
show_state: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
button_action: {}
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_intensywnosc
name: Intensywnosc
icon: hue:sync-intense
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
ha-card {
--bubble-select-list-item-accent-color: oklch(1 0 0 / 0.1%) !important;
}
${(() => {
const card = this;
if (!card.shadowRoot) return;
if (card.__menuSurfaceStyled) return;
card.shadowRoot.querySelectorAll("ha-select").forEach(haSelect => {
const haMenu = haSelect.shadowRoot?.querySelector("ha-menu");
if (!haMenu) return;
const mwcMenu = haMenu.shadowRoot?.querySelector("mwc-menu-surface");
if (!mwcMenu) return;
const surface = mwcMenu.shadowRoot?.querySelector("div.mdc-menu-surface");
if (!surface) return;
surface.style.backdropFilter = "blur(8px) saturate(1.2)";
surface.style.backgroundColor = "oklch(1 0 0 / 0.1%)";
surface.style.boxShadow = "var(--shadow-s)";
card.__menuSurfaceStyled = true;
});
return;
})()}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_tryb_synchronizacji
name: Tryb
icon: mdi:multimedia
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_obszar_rozrywki
name: Obszar
icon: hue:entertainment-area
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#temperatury'
name: Temperatury
icon: mdi:home-thermometer
scrolling_effect: false
show_header: true
sub_button:
main:
- entity: sensor.czujnik_obecnosci_zewnatrz_humidity
state_background: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- entity: >-
sensor.czujnik_ruchu_zewnatrz_poprawna_temperatura_temperature
show_state: true
show_attribute: false
double_tap_action:
action: none
hold_action:
action: none
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
- type: custom:bubble-card
card_type: button
button_type: state
hash: '#temperatury'
name: Temperatura w salonie
icon: mdi:theater
entity: sensor.zhimi_de_874970050_mb5_relative_humidity_p_3_1
scrolling_effect: false
show_header: true
sub_button:
- entity: sensor.zhimi_de_874970050_mb5_temperature_p_3_7
show_background: true
show_icon: true
show_name: false
show_state: true
- type: custom:waterfall-history-card
title: ' '
hours: 24
show_min_max: true
height: 10
digits: 1
gradient: true
compact: true
entities:
- entity: sensor.zhimi_de_874970050_mb5_pm2_5_density_p_3_4
name: Jakość powietrza w salonie (24h)
show_icons: false
thresholds:
- value: 5
color: '#4FC3F7'
- value: 10
color: '#81C784'
- value: 15
color: '#FFB74D'
- value: 25
color: '#FF8A65'
card_mod:
style: |
:host .card-header {
display: none;
}
:host .min-max-label {
margin-bottom: 0px;
margin-top: -18px;
}
:host {
background: none;
box-shadow: none;
border-radius: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
- type: custom:bubble-card
card_type: button
button_type: slider
entity: fan.zhimi_de_874970050_mb5_s_2_air_purifier
sub_button:
- entity: sensor.zhimi_de_874970050_mb5_average_aqi_p_11_2
show_name: false
show_state: true
name: Jakość
show_icon: true
icon: mdi:air-purifier
show_attribute: false
- entity: sensor.bme280_czujnik2_pressure
show_name: false
show_state: true
name: Ciśnienie
modules:
- icon_animations
subbutton_colors:
subbutton1:
color: |
[[[
var aqi = parseFloat(sensor.zhimi_de_874970050_mb5_average_aqi_p_11_2);
if (aqi <= 50) return 'red'; // Green
if (aqi <= 100) return '#FFEB3B'; // Yellow
if (aqi <= 150) return '#FF9800'; // Orange
if (aqi <= 200) return '#F44336'; // Red
if (aqi <= 300) return '#9C27B0'; // Purple
if (aqi > 300) return '#79000F'; // Maroon
return 'green'; // Default grey
]]]
icon_animations:
animation_type: rotate
animate_when:
- condition: state
entity_id: fan.zhimi_de_874970050_mb5_s_2_air_purifier
state:
- 'on'
name: Odświeżacz
show_name: true
- type: custom:bubble-card
card_type: separator
name: Pokoje
icon: mdi:human-female-female-child
sub_button: []
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_temperatury_mamasypialnia_humidity
icon: mdi:mother-heart
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
name: Mama
scrolling_effect: false
sub_button:
- entity: sensor.czujnik_temperatury_mamasypialnia_temperature
show_background: true
show_icon: true
show_name: false
show_state: true
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
- type: custom:bubble-card
card_type: separator
button_type: switch
name: Dom
icon: phu:rooms-storage
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_obecnosci_lazienka_glowny_humidity
icon: mdi:shower-head
allow_light_slider_to_0: false
slider_live_update: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
name: Łazienka
show_icon: true
scrolling_effect: false
sub_button:
- entity: sensor.czujnik_obecnosci_lazienka_glowny_temperature
show_icon: true
show_name: false
show_state: true
show_attribute: false
- type: custom:waterfall-history-card
title: ' '
hours: 24
show_min_max: true
height: 10
digits: 1
gradient: true
entities:
- entity: sensor.czujnik_obecnosci_lazienka_glowny_temperature
name: ' '
hours: 24
show_current: false
show_icons: false
show_labels: true
thresholds:
- value: 14
color: '#ed1818'
- value: 10
color: '#de2f95'
- value: 16
color: '#9e55e1'
- value: 17
color: '#4444fa'
- value: 18
color: '#448dfa'
- value: 19
color: '#4FC3F7'
- value: 22
color: '#81C784'
- value: 25
color: '#FFB74D'
- value: 28
color: '#FF8A65'
card_mod:
style: |
:host .card-header {
display: none;
}
:host .min-max-label {
margin-bottom: 0px;
margin-top: -18px;
}
:host {
background: none;
box-shadow: none;
border-radius: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.hue_motion_sensor_1_temperatura
slider_live_update: false
allow_light_slider_to_0: false
button_action:
double_tap_action:
action: none
hold_action:
action: none
sub_button: []
name: Hol wejściowy
icon: mdi:shoe-print
scrolling_effect: false
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_obecnosci_przedpokoj_temperature
icon: phu:rooms-staircase
allow_light_slider_to_0: false
slider_live_update: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
name: Przedpokóój
show_icon: true
scrolling_effect: false
sub_button: []
show_attribute: false
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_temperatury_piwnica_spizarnia_humidity
name: Spiżarnia
icon: mdi:warehouse
show_state: true
hold_action:
action: none
button_action:
hold_action:
action: none
double_tap_action:
action: none
double_tap_action:
action: none
show_last_changed: false
show_attribute: false
scrolling_effect: false
sub_button:
- entity: sensor.czujnik_temperatury_piwnica_spizarnia_temperature
state_background: true
show_background: true
show_icon: true
show_name: false
show_state: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_jakosci_powietrza_piwnica_humidity
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
name: Piwnica
icon: hue:room-stairs
scrolling_effect: false
sub_button:
- entity: sensor.czujnik_jakosci_powietrza_piwnica_temperature
show_icon: true
state_background: true
show_background: true
show_name: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-entity-card
entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
tap_action:
action: more-info
icon: mdi:molecule-co2
name: Piwnica CO2 (ppm)
primary_info: state
secondary_info: name
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== CONFIG ========== #}
{% set co2 = states('sensor.czujnik_jakosci_powietrza_piwnica_co2') | float(0) %}
{# ------------------------------------------- #}
{# CO2 → COLOR + EFFECT PRESETS #}
{# ------------------------------------------- #}
{# DEFAULTS (will be overridden by ranges) #}
{% set rgb = '40,200,120' %}
{% set anim = 'co2-fresh-breathe' %}
{% 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 anim = 'co2-fresh-breathe' %}
{% 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 anim = 'co2-good-wave' %}
{% 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 anim = 'co2-ok-breathe' %}
{% 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 anim = 'co2-high-pulse' %}
{% 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 anim = 'co2-bad-shimmer' %}
{% set glow_anim = 'co2-bad-glow' %}
{% set halo_anim = 'co2-bad-halo' %}
{% set duration = 2.0 %}
{% set intensity = 1.0 %}
{% endif %}
{# Apply variables #}
--co2-rgb: {{ rgb }};
--co2-intensity: {{ intensity }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--co2-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--co2-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
opacity: 1;
/* Icon color follows CO2 level */
--icon-color: rgba({{ rgb }}, 1);
/* Shape neutral base */
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);
}
/* Glow layers */
.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;
}
/* ========== FRESH ========== */
@keyframes co2-fresh-breathe {
0% { transform: scale(0.96); }
50% { transform: scale(1.03); }
100% { transform: scale(0.96); }
}
@keyframes co2-fresh-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--co2-rgb), 0.55),
0 0 34px 6 rgba(var(--co2-rgb), 0.5);
}
50% {
box-shadow:
0 0 30px 4 rgba(var(--co2-rgb), 0.9),
0 0 50px 10px rgba(var(--co2-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--co2-rgb), 0.55),
0 0 34px 6 rgba(var(--co2-rgb), 0.5);
}
}
@keyframes co2-fresh-halo {
0% {
box-shadow:
0 0 80px 20px rgba(var(--co2-rgb), 0.28),
0 -20px 80px -14px rgba(200, 255, 230, 0.45);
}
50% {
box-shadow:
0 0 130px 36px rgba(var(--co2-rgb), 0.42),
0 -34px 100px -8px rgba(220, 255, 240, 0.65);
}
100% {
box-shadow:
0 0 80px 20px rgba(var(--co2-rgb), 0.28),
0 -20px 80px -14px rgba(200, 255, 230, 0.45);
}
}
/* ========== GOOD ========== */
@keyframes co2-good-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes co2-good-glow {
0% {
box-shadow:
0 0 22px 0 rgba(var(--co2-rgb), 0.55),
0 0 34px 4 rgba(var(--co2-rgb), 0.6);
}
50% {
box-shadow:
0 0 28px 2 rgba(var(--co2-rgb), 0.9),
0 0 48px 12px rgba(var(--co2-rgb), 0.8);
}
100% {
box-shadow:
0 0 22px 0 rgba(var(--co2-rgb), 0.55),
0 0 34px 4 rgba(var(--co2-rgb), 0.6);
}
}
@keyframes co2-good-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--co2-rgb), 0.3),
0 18px 80px -12px rgba(120, 255, 160, 0.3);
}
50% {
box-shadow:
0 0 140px 42px rgba(var(--co2-rgb), 0.4),
0 30px 110px -10px rgba(140, 255, 180, 0.45);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--co2-rgb), 0.3),
0 18px 80px -12px rgba(120, 255, 160, 0.3);
}
}
/* ========== OK ========== */
@keyframes co2-ok-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.05); }
100% { transform: scale(0.98); }
}
@keyframes co2-ok-glow {
50% {
box-shadow:
0 0 26px 4 rgba(var(--co2-rgb), 0.85),
0 0 42px 10px rgba(var(--co2-rgb), 0.8);
}
}
@keyframes co2-ok-halo {
50% {
box-shadow:
0 0 120px 40px rgba(var(--co2-rgb), 0.42),
0 26px 80px -10px rgba(255, 245, 180, 0.5);
}
}
/* ========== HIGH ========== */
@keyframes co2-high-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes co2-high-glow {
50% {
box-shadow:
0 0 30px 4 rgba(var(--co2-rgb), 0.95),
0 0 54px 14px rgba(var(--co2-rgb), 0.9);
}
}
@keyframes co2-high-halo {
50% {
box-shadow:
0 0 140px 48px rgba(var(--co2-rgb), 0.52),
0 26px 100px -10px rgba(255, 210, 150, 0.5);
}
}
/* ========== BAD ========== */
@keyframes co2-bad-shimmer {
0% { transform: scale(1); filter: blur(0); }
50% { transform: scale(1.08); filter: blur(0.6px); }
100% { transform: scale(1); filter: blur(0); }
}
@keyframes co2-bad-glow {
50% {
box-shadow:
0 0 34px 6 rgba(var(--co2-rgb), 1),
0 0 62px 14px rgba(var(--co2-rgb), 0.95);
}
}
@keyframes co2-bad-halo {
50% {
box-shadow:
0 0 160px 60px rgba(var(--co2-rgb), 0.6),
0 34px 120px -12px rgba(255, 140, 120, 0.6);
}
}
.: |
mushroom-shape-icon {
--icon-size: 42px;
--icon-color: rgba(var(--co2-rgb),1) !important;
display: flex;
wmargin: -18px 0 10px -20px !important;
wpadding-right: 22px;
wpadding-bottom: 10px;
margin-left: -3px;
}
ha-card {
height: 56px !important;
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
/* FONT SIZE & SPACING SETTINGS */
--card-primary-font-size: 1rem !important;
/* Increases vertical space between primary and secondary */
--card-primary-line-height: 1.3 !important;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_jakosci_powietrza_piwnica_formaldehyd
icon: mdi:home-heart
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
name: Formaldehyd
scrolling_effect: false
sub_button: []
show_state: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.sredni_poziom_formaldehydow
icon: ''
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
name: Średni poziom
scrolling_effect: false
sub_button: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_jakosci_powietrza_piwnica_co2
icon: mdi:molecule-co2
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
name: Ekwiwalent CO2
scrolling_effect: false
sub_button: []
show_state: true
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_jakosci_powietrza_piwnica_voc
icon: ''
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
name: Lotne zw. organicz
scrolling_effect: false
sub_button: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_gazu_ziemnego_piwnica_gas_value
icon: mdi:meter-gas
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
name: Poz. gazu ziemn
scrolling_effect: false
sub_button: []
show_state: true
tap_action:
action: more-info
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.czujnik_gazu_ziemnego_piwnica_gas
icon: ''
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
name: Ulatnianie gazu
scrolling_effect: false
sub_button: []
- type: custom:bubble-card
card_type: separator
name: Serwerownia
icon: mdi:server-security
- type: custom:bubble-card
card_type: button
entity: sensor.czujnik_temperatury_serwerownia_humidity
icon: mdi:domain
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
name: Serwerownia
scrolling_effect: false
sub_button:
- entity: sensor.czujnik_temperatury_serwerownia_temperature
show_name: false
show_state: true
show_background: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
button_type: state
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.czujnik_temperatury_szafa_rack_humidity
icon: mdi:server-network
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
name: Szafa rack
scrolling_effect: false
sub_button:
- entity: sensor.czujnik_temperatury_szafa_rack_temperature
show_name: false
show_state: true
show_background: true
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
- type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.nas_temperatura_systemu
icon: mdi:nas
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
name: Serwer
scrolling_effect: false
sub_button:
- entity: sensor.nas_uzycie_procesora
show_name: true
show_state: true
show_background: true
icon: mdi:cpu-64-bit
name: 'CPU '
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
state_background: false
- entity: sensor.nas_wykorzystanie_pamieci
name: RAM
icon: mdi:memory
state_background: false
show_background: false
show_state: true
show_name: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: more-info
modules:
- subbutton_colors
- subbutton_animations
subbutton_colors:
subbutton1:
color: red
subbutton2:
color: indigo
subbutton_animations:
subbutton1:
animation: bounce
subbutton2:
animation: spin
- type: custom:bubble-card
card_type: empty-column
button_type: switch
sub_button:
main: []
bottom: []
rows: '4'
- type: custom:bubble-card
card_type: empty-column
button_type: switch
sub_button:
main: []
bottom: []
rows: '4'
- type: custom:bubble-card
card_type: empty-column
button_type: switch
sub_button:
main: []
bottom: []
rows: '4'
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#burze'
button_type: name
name: Burze na dziś
icon: mdi:flash-alert
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
sub_button:
main: []
bottom: []
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_ostrzezenie_burza
name: Burza
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_ostrzezenie_mroz
name: Mróz
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_ostrzezenie_opad
name: Opady
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_ostrzezenie_traba
name: Trąba
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_ostrzezenie_upal
name: Upał
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_ostrzezenie_wiatr
name: Wiatr
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.burze_dzis_net_promieniowanie_gamma
name: Promieniowanie gamma
- type: custom:mushroom-entity-card
entity: binary_sensor.burze_dzis_net_wyladowania_w_poblizu
name: Wyładowania w pobliżu
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dom_lightning_azimuth
name: Azymut wyładowań
- type: custom:mushroom-entity-card
entity: sensor.dom_lightning_counter
name: Liczba wyładowań
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dom_lightning_distance
name: Odległość od burzy
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.kamienica_nowy_sacz_poziom_wody
name: Kamienica - poziom wody
- type: custom:mushroom-entity-card
entity: sensor.kamienica_nowy_sacz_przeplyw_wody
name: Kamienica - przepływ wody
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.dunajec_nowy_sacz_poziom_wody
name: Dunajec - poziom wody
- type: custom:mushroom-entity-card
entity: sensor.dunajec_nowy_sacz_przeplyw_wody
name: Dunajec - przepływ wody
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.lubinka_nowy_sacz_1_poziom_wody
name: Łubinka - poziom wody
- type: custom:mushroom-entity-card
entity: sensor.lubinka_nowy_sacz_1_przeplyw_wody
name: Łubinka - przepływ wody
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.kamienica_nowy_sacz_alert_hydrologiczny
name: 'Kamienica - alert:'
- type: custom:mushroom-entity-card
entity: sensor.lubinka_nowy_sacz_1_alert_hydrologiczny
name: 'Łubinka - alert:'
- type: custom:mushroom-entity-card
entity: sensor.dunajec_nowy_sacz_alert_hydrologiczny
name: 'Dunajec - alert:'
- type: custom:blitzortung-lightning-card
distance_entity: sensor.dom_lightning_distance
counter_entity: sensor.dom_lightning_counter
azimuth_entity: sensor.dom_lightning_azimuth
lightning_detection_radius: 100
period: 1h
grid_color: var(--primary-text-color)
strike_color: var(--error-color)
location_zone_entity: zone.home
title: Wyładowania atmosferyczne
card_section_order:
- compass_radar
- history_chart
- map
- type: custom:bubble-card
card_type: empty-column
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#lazienka'
button_type: name
name: Łazienka
icon: mdi:shower-head
scrolling_effect: false
sub_button:
main:
- entity: sensor.czujnik_obecnosci_lazienka_glowny_humidity
state_background: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- entity: sensor.czujnik_obecnosci_lazienka_glowny_temperature
show_state: true
show_attribute: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
icon_border_progress: []
- type: custom:mini-graph-card
entities:
- entity: sensor.czujnik_obecnosci_lazienka_glowny_temperature
- entity: sensor.czujnik_obecnosci_lazienka_glowny_humidity
name: Wilgotność
show_graph: false
show_state: true
show_points: false
- color: gray
entity: sensor.nightstate
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
line_width: 3
font_size: 90
animate: true
color_thresholds:
- value: -5
color: '#eb4d54'
- value: 0
color: '#1db954'
- value: 3
color: '#3a8df7'
hours_to_show: 48
hour24: true
icon: mdi:sofa
points_per_hour: 0.5
show:
extrema: true
fill: fade
name: false
icon: false
labels: true
state: false
legend: true
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
--bubble-border: solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
- type: custom:waterfall-history-card
title: ' '
hours: 24
show_min_max: true
height: 10
digits: 1
gradient: true
entities:
- entity: sensor.czujnik_obecnosci_lazienka_glowny_temperature
name: ' '
hours: 24
show_current: false
show_icons: false
show_labels: true
thresholds:
- value: 14
color: '#ed1818'
- value: 10
color: '#de2f95'
- value: 16
color: '#9e55e1'
- value: 17
color: '#4444fa'
- value: 18
color: '#448dfa'
- value: 19
color: '#4FC3F7'
- value: 22
color: '#81C784'
- value: 25
color: '#FFB74D'
- value: 28
color: '#FF8A65'
card_mod:
style: |
:host .card-header {
display: none;
}
:host .min-max-label {
margin-bottom: -18px;
margin-top: -18px;
}
:host {
border-radius: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color: rgba(0, 0, 0, 0.1) !important;
--bubble-border: solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
- type: custom:bubble-card
card_type: separator
sub_button:
main: []
bottom: []
name: Światła
icon: hue:bulb-candle-hung
- type: custom:bubble-card
card_type: button
button_type: slider
sub_button:
main:
- entity: input_boolean.override_manual_on_girlanda
name: Ręczne sterowanie
show_name: true
bottom:
- entity: light.lazienka
sub_button_type: slider
light_slider_type: white_temp
fill_width: true
always_visible: true
show_attribute: false
show_state: false
show_last_updated: false
bottom_layout: rows
entity: light.lazienka
name: Światło
icon: mdi:vanity-light
use_accent_color: true
rows: '1.9'
styles: |-
.bubble-button,
.bubble-sub-button {
background-color: rgba(0, 0, 0, 0.1) !important;
}
.bubble-icon-container {
background-color: rgba(0, 0, 0, 0.1) !important;
}
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#dom'
button_type: name
name: Dom
icon: mdi:home-circle
scrolling_effect: false
sub_button:
main:
- entity: sensor.wilgotnosc_w_domu
state_background: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- entity: sensor.temperatura_w_domu
show_state: true
show_attribute: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
icon_border_progress: []
background_update: true
close_by_clicking_outside: false
- type: custom:mini-graph-card
entities:
- entity: sensor.temperatura_w_domu
- entity: sensor.wilgotnosc_w_domu
name: Wilgotność
show_graph: false
show_state: true
show_points: false
- color: gray
entity: sensor.nightstate
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
line_width: 3
font_size: 90
animate: true
color_thresholds:
- value: -5
color: '#eb4d54'
- value: 0
color: '#1db954'
- value: 3
color: '#3a8df7'
hours_to_show: 48
hour24: true
icon: mdi:sofa
points_per_hour: 0.5
show:
extrema: true
fill: fade
name: false
icon: false
labels: true
state: false
legend: true
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 0px 1px var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
--bubble-border: solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
- type: custom:waterfall-history-card
title: ' '
hours: 24
show_min_max: true
height: 10
digits: 1
gradient: true
entities:
- entity: sensor.temperatura_w_domu
name: ' '
hours: 24
show_current: false
show_icons: false
show_labels: true
thresholds:
- value: 14
color: '#ed1818'
- value: 10
color: '#de2f95'
- value: 16
color: '#9e55e1'
- value: 17
color: '#4444fa'
- value: 18
color: '#448dfa'
- value: 19
color: '#4FC3F7'
- value: 22
color: '#81C784'
- value: 25
color: '#FFB74D'
- value: 28
color: '#FF8A65'
card_mod:
style: |
:host .card-header {
display: none;
}
:host .min-max-label {
margin-bottom: -4px;
margin-top: -18px;
}
:host {
border-radius: 0px;
padding-top: 0px;
padding-bottom: 0px;
border-width: 0px !important;
background-color: rgba(0, 0, 0, 0.1) !important;
box-shadow: 0px 0px 0px 1px var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
--bubble-border: solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
- type: custom:bubble-card
card_type: separator
sub_button:
main: []
bottom: []
name: Kalendarz
icon: mdi:calendar-clock-outline
- initial_view: listWeek
type: calendar
entities:
- calendar.dobrze_wiedziec
- calendar.swieta
- calendar.imieniny
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#mama'
button_type: name
name: Mama
icon: mdi:mother-heart
sub_button:
main:
- entity: sensor.czujnik_temperatury_mamasypialnia_humidity
state_background: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- entity: sensor.czujnik_temperatury_mamasypialnia_temperature
show_state: true
show_attribute: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
- type: custom:mini-graph-card
entities:
- entity: sensor.czujnik_temperatury_mamasypialnia_temperature
- entity: sensor.czujnik_temperatury_mamasypialnia_humidity
name: Wilgotność
show_graph: false
show_state: true
show_points: false
- color: gray
entity: sensor.nightstate
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
line_width: 3
font_size: 90
animate: true
color_thresholds:
- value: -5
color: '#eb4d54'
- value: 0
color: '#1db954'
- value: 3
color: '#3a8df7'
hours_to_show: 48
hour24: true
icon: mdi:sofa
points_per_hour: 0.5
show:
extrema: true
fill: fade
name: false
icon: false
labels: true
state: false
legend: true
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.4) inset, -0.5px -0.5px 1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
- type: custom:bubble-card
card_type: button
button_type: slider
sub_button:
main: []
bottom:
- entity: light.mama_sypialnia
sub_button_type: slider
light_slider_type: white_temp
fill_width: true
always_visible: true
show_attribute: false
show_state: false
show_last_updated: false
bottom_layout: rows
entity: light.mama_sypialnia
name: Światło
icon: mdi:wall-sconce-outline
use_accent_color: true
rows: '1.9'
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Koncentracja
color: accent
icon: hue:scene-concentrate
tap_action:
action: toggle
entity: scene.mama_sypialnia_koncentracja
vertical: true
features_position: bottom
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-card:hover, ha-card:active {
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
primary: ''
secondary: Relaks
icon: hue:scene-relax
tap_action:
action: toggle
entity: scene.mama_sypialnia_relaks
color: orange
vertical: true
features_position: bottom
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-card:hover, ha-card:active {
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lampka
icon: hue:scene-nightlight
tap_action:
action: toggle
entity: scene.mama_sypialnia_lampka_nocna
vertical: true
features_position: bottom
color: brown
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-card:hover, ha-card:active {
background: var(--card-background-color);
}
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Energia
icon: hue:scene-energize
tap_action:
action: toggle
entity: scene.mama_sypialnia_energia
color: cyan
vertical: true
features_position: bottom
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-card:hover, ha-card:active {
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
primary: ''
secondary: Czytanie
icon: hue:scene-read
tap_action:
action: toggle
entity: scene.mama_sypialnia_czytanie
color: light-blue
vertical: true
features_position: bottom
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-card:hover, ha-card:active {
background: var(--card-background-color);
}
- type: custom:mushroom-template-card
primary: ''
secondary: Przyćmione
icon: hue:scene-dimmed
tap_action:
action: toggle
entity: scene.mama_sypialnia_przycmione
color: purple
vertical: true
features_position: bottom
card_mod:
style: |
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
border: var(--ha-card-border-width, 1px) solid var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
}
ha-card:hover, ha-card:active {
background: var(--card-background-color);
}
- type: custom:bubble-card
card_type: media-player
entity: media_player.telewizor_u_mamy
icon: mdi:youtube-tv
name: Telewizor
hide:
volume_button: true
next_button: true
previous_button: true
play_pause_button: true
sub_button:
main:
- name: Pilot
icon: mdi:remote-tv
show_name: true
tap_action:
action: navigate
navigation_path: '#mama-tv-pilot'
bottom: []
cover_background: true
modules:
- subbutton_animations
- subbutton_colors
accent_color_picker:
accent_color: primary
subbutton_colors:
subbutton1:
color: purple
subbutton_animations:
subbutton1:
animation: bounce
- type: custom:mini-media-player
entity: media_player.vuduo4k
icon: mdi:satellite-uplink
artwork: full-cover
hide:
volume: false
source: false
power_state: false
source: full
sound_mode: full
info: short
replace_mute: next
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#zewnatrz'
button_type: name
name: Zewnątrz
icon: mdi:home-thermometer
sub_button:
main:
- entity: sensor.czujnik_obecnosci_zewnatrz_humidity
state_background: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- entity: sensor.czujnik_obecnosci_zewnatrz_temperature
show_state: true
show_attribute: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
- type: custom:mini-graph-card
entities:
- entity: sensor.czujnik_temperatury_na_zewnatrz_temperature
- entity: sensor.czujnik_temperatury_na_zewnatrz_humidity
name: Wilgotność
show_graph: false
show_state: true
show_points: false
- color: gray
entity: sensor.nightstate
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
line_width: 3
font_size: 90
animate: true
color_thresholds:
- value: -5
color: '#eb4d54'
- value: 0
color: '#1db954'
- value: 3
color: '#3a8df7'
hours_to_show: 48
hour24: true
icon: mdi:sofa
points_per_hour: 0.5
show:
extrema: true
fill: fade
name: false
icon: false
labels: true
state: false
legend: true
card_mod:
style: |
ha-card {
background-color: rgba(0, 0, 0, 0.1);
box-shadow: none;
}
- type: custom:bubble-card
card_type: separator
sub_button:
main: []
bottom: []
name: 'Światła '
icon: fa6-solid:lightbulb
- type: custom:bubble-card
card_type: button
button_type: slider
sub_button:
main:
- entity: light.swiatla_na_zewnatrz
sub_button_type: slider
light_slider_type: white_temp
fill_width: true
always_visible: true
- entity: light.swiatla_na_zewnatrz
sub_button_type: slider
light_slider_type: hue
fill_width: false
always_visible: true
show_attribute: false
show_state: false
show_last_updated: false
bottom: []
bottom_layout: inline
entity: light.swiatla_na_zewnatrz
name: Światło
icon: hue:wall-flood
use_accent_color: false
rows: ''
force_icon: false
tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
sub_button:
main: []
bottom: []
name: Muzyka
icon: mdi:music
- type: custom:bubble-card
card_type: media-player
entity: media_player.nest_w_ogrodzie
name: ''
- type: entities
entities:
- card_type: horizontal-stack
cards:
- entity: script.streamuj_rmf_fm_w_ogrodzie
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/RMF_FM_logo.svg/640px-RMF_FM_logo.svg.png
tap_action:
service: script.streamuj_rmf_fm_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska_w_ogrodzie
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Logo_Radia_Eska.svg/640px-Logo_Radia_Eska.svg.png
tap_action:
service: script.streamuj_radio_eska_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska_2_w_ogrodzie
entity_picture: >-
https://files.qnap.net.pl/ha_assets/logo_radio_Eska2.png
tap_action:
service: script.streamuj_radio_eska_2_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_rmf_maxx_w_ogrodzie
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Logo_RMF_MAXX.png/640px-Logo_RMF_MAXX.png
tap_action:
service: script.streamuj_radio_rmf_maxx_w_ogrodzie
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
type: custom:hui-element
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#kwiaty2'
button_type: name
name: Kwiaty i ogród
icon: mdi:flower
scrolling_effect: false
sub_button:
main: []
bottom: []
show_header: false
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
- type: custom:bubble-card
card_type: button
card_layout: large
button_type: name
show_icon: false
show_name: false
sub_button:
- name: Mute
icon: mdi:volume-off
tap_action:
action: toggle
service: input_boolean.toggle
entity: input_boolean.silent_mode
- name: Covers
entity: cover.all_group
show_background: false
tap_action:
action: navigate
navigation_path: '#cover'
- name: Shopping list
icon: mdi:cart-outline
show_background: false
tap_action:
action: navigate
navigation_path: '#shopping-list'
- name: Security
icon: mdi:video-outline
show_background: false
tap_action:
action: navigate
navigation_path: '#security'
- name: Settings
icon: mdi:cog
show_background: false
tap_action:
action: navigate
navigation_path: '#configuration'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
background: none;
border: none;
}
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
- type: custom:flower-card
entity: plant.monstera
battery_sensor: sensor.czujnik_gleby_kwiat_monstera_battery
show_bars:
- moisture
- temperature
- illuminance
- humidity
- dli
display_type: full
card_mod:
style: |
.card-margin-top {
margin-top: 0px;
}
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
}
.header img {
width: 52px !important;
height: 52px !important;
margin-top: 8px !important;
border-radius: 9px !important;
}
- type: custom:flower-card
entity: plant.cytryna
battery_sensor: sensor.czujnik_gleby_cytryna_battery
show_bars:
- moisture
- temperature
- illuminance
- humidity
- dli
display_type: full
card_mod:
style: |
.card-margin-top {
margin-top: 0px;
}
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
}
.header img {
width: 52px !important;
height: 52px !important;
margin-top: 8px !important;
border-radius: 9px !important;
}
- type: custom:bubble-card
card_type: empty-column
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#alarm'
name: Alarm
icon: mdi:shield-lock
scrolling_effect: false
show_header: true
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
sub_button:
main: []
bottom: []
more_info_popup:
center: true
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states: []
fill_container: true
tap_action:
action: navigate
navigation_path: '#alarm'
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
secondary_info: none
name: Alarm
primary_info: none
card_mod:
style:
mushroom-shape-icon$: >
.shape {
/* --- LOGIC BLOCK --- */
{% set status = states(config.entity) %}
{% if status == 'disarmed' %}
/* --- DISARMED --- */
--main-color: var(--rgb-green);
/* Shape: Floating effect */
--bg-anim: shield-float 3s ease-in-out infinite;
/* Inner: Light sheen scan */
--inner-style: linear-gradient(to bottom, transparent 0%, transparent 20%, rgba(45,160,40,0.5) 40%, rgba(88,204,0,0.5) 42%, rgba(0,255,0,0.1) 43%, transparent 60%);
--inner-anim: sheen-scan 3s ease-in-out infinite;
/* Outer: None */
--outer-display: none;
/* ICON: Slow, calm breathing */
--icon-anim: breathe-slow 3s ease-in-out infinite;
wmix-blend: color-dodge !important;
{% elif status == 'triggered' %}
/* --- TRIGGERED --- */
--main-color: var(--rgb-deep-orange);
/* Shape: Strobe */
--bg-anim: panic-strobe 0.5s steps(2) infinite;
/* Inner: None */
--inner-style: none;
--inner-anim: none;
/* Outer: Shockwave */
--outer-display: block;
--outer-anim: shockwave 0.5s linear infinite;
/* ICON: Violent shake */
--icon-anim: violent-shake 0.1s linear infinite;
{% elif 'armed' in status %}
/* --- ARMED --- */
--main-color: var(--rgb-red);
/* Shape: Static */
--bg-anim: none;
/* Inner: Radar sweep gradient */
--inner-style: conic-gradient(from 0deg, transparent 0%, rgba(var(--main-color), 0.6) 20%, transparent 40%);
--inner-anim: radar-spin 2s linear infinite;
/* Outer: Sonar expansion */
--outer-display: block;
--outer-anim: sonar-expand 2s ease-out infinite;
/* ICON: Alert pulse */
--icon-anim: breathe-fast 2s ease-in-out infinite;
{% elif status == 'pending' %}
/* --- PENDING --- */
--main-color: var(--rgb-orange);
/* Shape: Breathing */
--bg-anim: arming-breathe 1s ease-in-out infinite;
/* Inner/Outer: None */
--inner-style: none;
--inner-anim: none;
--outer-display: none;
/* ICON: Medium pulse */
--icon-anim: breathe-medium 2s ease-in-out infinite;
{% else %}
/* UNKNOWN */
--main-color: var(--rgb-grey);
--bg-anim: none; --inner-style: none; --inner-anim: none; --outer-display: none; --icon-anim: none;
{% endif %}
/* --- SHAPE CONTAINER STYLING --- */
background-color: rgba(var(--main-color), 0.15) !important;
--icon-color: var(--main-color) !important;
color: rgb(var(--main-color)) !important;
__disabled_box-shadow: 0 0 25px rgba(var(--main-color), 0.3), inset 0 0 10px rgba(var(--main-color), 0.1) !important;
border: 3px solid rgba(var(--main-color), 0.5);
box-shadow: 0 1px 0px rgba(0,0,0,0.1), inset 0 2px 2px var(--card-background-color) !important;
border-radius: 50% !important;
position: relative;
overflow: visible !important;
transition: all 0.5s ease;
animation: var(--bg-anim);
}
/* INNER EFFECT (Sheen or Radar Sweep) */
.shape::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--inner-style);
background-size: 100% 200%;
animation: var(--inner-anim); z-index: 1;
}
/* OUTER EFFECT (Sonar Ring or Shockwave) */
.shape::after {
content: '';
display: var(--outer-display);
position: absolute; inset: -2px;
border-radius: 50%;
border: 2px solid rgba(var(--main-color), 0.6);
animation: var(--outer-anim); z-index: -1;
}
/* ICON ANIMATION (Applied directly to the icon) */
ha-icon {
position: relative; z-index: 2;
animation: var(--icon-anim); transform-origin: center;
}
/* --- SHAPE & ICON ANIMATIONS --- */
@keyframes shield-float { 0%, 100% { transform:
translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sheen-scan { 0% { background-position: 0% 150%;
opacity: 0; } 20%, 80% { opacity: 1; } 100% {
background-position: 0% -50%; opacity: 0; } }
@keyframes radar-spin { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
@keyframes sonar-expand { 0% { transform: scale(1);
opacity: 0.8; border-width: 2px; } 100% { transform:
scale(2.5); opacity: 0; border-width: 0px; } }
@keyframes panic-strobe { 0% { background-color:
rgba(var(--main-color), 0.2); box-shadow: 0 0 10px
rgba(var(--main-color), 1); } 100% { background-color:
rgba(var(--main-color), 0.6); box-shadow: 0 0 50px
rgba(var(--main-color), 1); } }
@keyframes violent-shake { 0% { transform: translate(0, 0)
rotate(0deg); } 25% { transform: translate(-3px, 3px)
rotate(-5deg); } 50% { transform: translate(3px, -3px)
rotate(5deg); } 75% { transform: translate(-3px, -3px)
rotate(-5deg); } 100% { transform: translate(0, 0)
rotate(0deg); } }
@keyframes shockwave { 0% { transform: scale(1); opacity:
1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes arming-breathe { 0%, 100% { box-shadow: 0 0
10px rgba(var(--main-color), 0.5); } 50% { box-shadow: 0 0
30px rgba(var(--main-color), 1); } }
/* Icon Breathing Animations */
@keyframes breathe-slow { 0%, 100% { transform: scale(1);
opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1;
} }
@keyframes breathe-medium { 0%, 100% { transform:
scale(1); } 50% { transform: scale(1.1); } }
@keyframes breathe-fast { 0%, 100% { transform: scale(1);
} 50% { transform: scale(1.15); } }
mushroom-alarm-control-panel-buttons-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-primary-text-color), 0.05) !important;
--button-color: rgb(var(--rgb-primary-text-color)) !important;
transition: all 0.2s ease;
}
mushroom-button:active {
background-color: rgba(var(--rgb-primary-color), 0.2) !important;
}
.: |
ha-card {
background: var(--card-background-color);
_disabled-box-shadow:
rgba(255,255,255,0.05) 1px 1px 0.5px 0 inset,
rgba(0,0,0,0.05) -1px -1px 0px inset;
width: auto;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
/* --- LOGIC FOR CARD GLOW --- */
{% set status = states(config.entity) %}
{% if status == 'disarmed' %}
/* DISARMED: Green Glow */
--card-glow-color: var(--rgb-green);
--card-anim-speed: 2s; /* Slow & Calm */
{% elif status == 'triggered' %}
/* TRIGGERED: Deep Orange/Red Strobe */
--card-glow-color: var(--rgb-deep-orange);
--card-anim-speed: 0.5s;
{% elif status == 'pending' %}
/* PENDING: Orange */
--card-glow-color: var(--rgb-orange);
--card-anim-speed: 2s;
{% else %}
/* ARMED (Any mode): Red Glow */
--card-glow-color: var(--rgb-red);
--card-anim-speed: 2s;
{% endif %}
--card-fill-anim: card-fill-pulse var(--card-anim-speed) ease-in-out infinite alternate;
/* Base Card Styling */
/* background: linear-gradient(145deg, rgba(30,30,30,0.9) 0%, rgba(20,20,20,1) 100%); */
/* background-image: linear-gradient(0deg, rgba(30,30,30,0.2) 0%, var(--card-background-color) 100%); */
--ha-card-border-radius: 40px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 30px));
border-radius: var(--ha-card-border-radius, 30px);
position: relative;
overflow: hidden; /* Important to contain the glow */
}
/* THE CARD-FILLING GLOW LAYER */
ha-card::before {
content: '';
position: absolute;
inset: 0;
/* A large radial gradient that expands to fill the card */
background: radial-gradient(circle at center, rgba(var(--card-glow-color),0.7) 0%, transparent 70%);
opacity: 0;
pointer-events: none;
mix-blend-mode: color-dodge;
animation: var(--card-fill-anim);
z-index: 0; /* Behind content but in front of background */
}
/* Animation for the card glow */
@keyframes card-fill-pulse {
0% { opacity: 0.1; transform: scale(0.8); }
100% { opacity: 0.6; transform: scale(1.5); }
}
/* Center the main icon */
mushroom-shape-icon {
--icon-size: 36px !important;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1; /* Keep icon above the card glow */
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
- armed_away
fill_container: true
primary_info: name
secondary_info: state
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
icon_type: none
name: Alarm
card_mod:
style:
mushroom-shape-icon$: >
.shape {
/* --- LOGIC BLOCK --- */
{% set status = states(config.entity) %}
{% if status == 'disarmed' %}
/* --- DISARMED --- */
--main-color: var(--rgb-green);
/* Shape: Floating effect */
--bg-anim: shield-float 3s ease-in-out infinite;
/* Inner: Light sheen scan */
--inner-style: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4), transparent);
--inner-anim: sheen-scan 3s ease-in-out infinite;
/* Outer: None */
--outer-display: none;
/* ICON: Slow, calm breathing */
--icon-anim: breathe-slow 3s ease-in-out infinite;
{% elif status == 'triggered' %}
/* --- TRIGGERED --- */
--main-color: var(--rgb-deep-orange);
/* Shape: Strobe */
--bg-anim: panic-strobe 0.5s steps(2) infinite;
/* Inner: None */
--inner-style: none;
--inner-anim: none;
/* Outer: Shockwave */
--outer-display: block;
--outer-anim: shockwave 0.5s linear infinite;
/* ICON: Violent shake */
--icon-anim: violent-shake 0.1s linear infinite;
{% elif 'armed' in status %}
/* --- ARMED --- */
--main-color: var(--rgb-red);
/* Shape: Static */
--bg-anim: none;
/* Inner: Radar sweep gradient */
--inner-style: conic-gradient(from 0deg, transparent 0%, rgba(var(--main-color), 0.6) 20%, transparent 40%);
--inner-anim: radar-spin 2s linear infinite;
/* Outer: Sonar expansion */
--outer-display: block;
--outer-anim: sonar-expand 2s ease-out infinite;
/* ICON: Alert pulse */
--icon-anim: breathe-fast 2s ease-in-out infinite;
{% elif status == 'pending' %}
/* --- PENDING --- */
--main-color: var(--rgb-orange);
/* Shape: Breathing */
--bg-anim: arming-breathe 1s ease-in-out infinite;
/* Inner/Outer: None */
--inner-style: none;
--inner-anim: none;
--outer-display: none;
/* ICON: Medium pulse */
--icon-anim: breathe-medium 2s ease-in-out infinite;
{% else %}
/* UNKNOWN */
--main-color: var(--rgb-grey);
--bg-anim: none; --inner-style: none; --inner-anim: none; --outer-display: none; --icon-anim: none;
{% endif %}
/* --- SHAPE CONTAINER STYLING --- */
background-color: rgba(var(--main-color), 0.15) !important;
--icon-color: var(--main-color) !important;
color: rgb(var(--main-color)) !important;
box-shadow: 0 0 25px rgba(var(--main-color), 0.3), inset 0 0 10px rgba(var(--main-color), 0.1);
border: 4px solid rgba(var(--main-color), 0.3);
border-radius: 50% !important;
position: relative;
overflow: visible !important;
transition: all 0.5s ease;
animation: var(--bg-anim);
}
/* INNER EFFECT (Sheen or Radar Sweep) */
.shape::before {
content: ''; position: absolute; inset: 0; border-radius: 50%;
background: var(--inner-style); background-size: 100% 200%;
animation: var(--inner-anim); z-index: 1;
}
/* OUTER EFFECT (Sonar Ring or Shockwave) */
.shape::after {
content: ''; display: var(--outer-display); position: absolute; inset: -2px; border-radius: 50%;
border: 2px solid rgba(var(--main-color), 0.6);
animation: var(--outer-anim); z-index: -1;
}
/* ICON ANIMATION (Applied directly to the icon) */
ha-icon {
position: relative; z-index: 2;
animation: var(--icon-anim); transform-origin: center;
}
/* --- SHAPE & ICON ANIMATIONS --- */
@keyframes shield-float { 0%, 100% { transform:
translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sheen-scan { 0% { background-position: 0% 150%;
opacity: 0; } 20%, 80% { opacity: 1; } 100% {
background-position: 0% -50%; opacity: 0; } }
@keyframes radar-spin { 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
@keyframes sonar-expand { 0% { transform: scale(1);
opacity: 0.8; border-width: 2px; } 100% { transform:
scale(2.5); opacity: 0; border-width: 0px; } }
@keyframes panic-strobe { 0% { background-color:
rgba(var(--main-color), 0.2); box-shadow: 0 0 10px
rgba(var(--main-color), 1); } 100% { background-color:
rgba(var(--main-color), 0.6); box-shadow: 0 0 50px
rgba(var(--main-color), 1); } }
@keyframes violent-shake { 0% { transform: translate(0, 0)
rotate(0deg); } 25% { transform: translate(-3px, 3px)
rotate(-5deg); } 50% { transform: translate(3px, -3px)
rotate(5deg); } 75% { transform: translate(-3px, -3px)
rotate(-5deg); } 100% { transform: translate(0, 0)
rotate(0deg); } }
@keyframes shockwave { 0% { transform: scale(1); opacity:
1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes arming-breathe { 0%, 100% { box-shadow: 0 0
10px rgba(var(--main-color), 0.5); } 50% { box-shadow: 0 0
30px rgba(var(--main-color), 1); } }
/* Icon Breathing Animations */
@keyframes breathe-slow { 0%, 100% { transform: scale(1);
opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1;
} }
@keyframes breathe-medium { 0%, 100% { transform:
scale(1); } 50% { transform: scale(1.1); } }
@keyframes breathe-fast { 0%, 100% { transform: scale(1);
} 50% { transform: scale(1.15); } }
mushroom-alarm-control-panel-buttons-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-primary-text-color), 0.05) !important;
--button-color: rgb(var(--rgb-primary-text-color)) !important;
transition: all 0.2s ease;
}
mushroom-button:active {
background-color: rgba(var(--rgb-primary-color), 0.2) !important;
}
.: |
ha-card {
/* --- LOGIC FOR CARD GLOW --- */
{% set status = states(config.entity) %}
{% if status == 'disarmed' %}
/* DISARMED: Green Glow */
--card-glow-color: var(--rgb-green);
--card-anim-speed: 2s; /* Slow & Calm */
{% elif status == 'triggered' %}
/* TRIGGERED: Deep Orange/Red Strobe */
--card-glow-color: var(--rgb-deep-orange);
--card-anim-speed: 0.5s;
{% elif status == 'pending' %}
/* PENDING: Orange */
--card-glow-color: var(--rgb-orange);
--card-anim-speed: 2s;
{% else %}
/* ARMED (Any mode): Red Glow */
--card-glow-color: var(--rgb-red);
--card-anim-speed: 2s;
{% endif %}
--card-fill-anim: card-fill-pulse var(--card-anim-speed) ease-in-out infinite alternate;
/* Base Card Styling */
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(145deg, rgba(30,30,30,0.9) 0%, rgba(20,20,20,1) 100%);
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
position: relative;
overflow: hidden; /* Important to contain the glow */
}
/* THE CARD-FILLING GLOW LAYER */
ha-card::before {
content: '';
position: absolute;
inset: 0;
/* A large radial gradient that expands to fill the card */
background: radial-gradient(circle at center, rgba(var(--card-glow-color), 0.4) 0%, transparent 70%);
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
animation: var(--card-fill-anim);
z-index: 0; /* Behind content but in front of background */
}
/* Animation for the card glow */
@keyframes card-fill-pulse {
0% { opacity: 0.1; transform: scale(0.8); }
100% { opacity: 0.6; transform: scale(1.5); }
}
/* Center the main icon */
mushroom-shape-icon {
--icon-size: 80px !important;
display: flex; justify-content: center; align-items: center;
margin: 20px 0 30px 0 !important;
position: relative; z-index: 1; /* Keep icon above the card glow */
}
- camera_view: live
fit_mode: fill
type: picture-glance
title: Wjazd
entities: []
camera_image: camera.go2rtc_camera_1_wjazd_hd
entity: camera.go2rtc_camera_1_wjazd_hd
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#wifi'
name: Szybkie połączenie WiFi
icon: mdi:wifi-lock
scrolling_effect: false
show_header: true
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: picture-elements
elements: []
image: https://files.qnap.net.pl/ha_assets/qrcode.png
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: '{{ states.sensor.router_wan_rx.state|round|int }} Mbps'
secondary: Download
icon: mdi:progress-download
entity: sensor.router_wan_rx
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: /lovelace-admin/download
color: cyan
features_position: bottom
- type: custom:mushroom-template-card
primary: '{{ states.sensor.router_wan_tx.state|round|int}} Mbps'
secondary: Upload
icon: mdi:progress-upload
entity: sensor.router_wan_tx
tap_action:
action: more-info
hold_action:
action: navigate
navigation_path: /lovelace-admin/mi-wifi
color: purple
features_position: bottom
- type: custom:pi-hole
device_id: 9bd59f9a9ca191bbaf40b5f9a26d04ab
features:
- disable_group_pausing
chart: {}
exclude_sections:
- actions
- footer
title: Blokowanie reklam
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#pogoda'
button_type: name
name: Pogoda
icon: mdi:weather-cloudy
scrolling_effect: false
sub_button:
main: []
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
- type: custom:weather-chart-card
entity: weather.openweathermap
show_main: false
show_temperature: true
show_current_condition: true
show_attributes: true
show_time: false
show_time_seconds: false
show_day: false
show_date: false
show_humidity: true
show_pressure: true
show_wind_direction: true
show_wind_speed: true
show_sun: true
show_feels_like: true
show_dew_point: false
show_wind_gust_speed: false
show_visibility: false
show_last_changed: false
use_12hour_format: false
icons_size: 25
animated_icons: true
icon_style: style1
autoscroll: true
forecast:
precipitation_type: rainfall
show_probability: false
labels_font_size: '11'
precip_bar_size: '100'
style: style1
show_wind_forecast: true
condition_icons: true
round_temp: false
type: daily
number_of_forecasts: '0'
disable_animation: false
units:
speed: ''
card_mod:
style: |
ha-card {
background: transparent;
border: none;
box-shadow: none;
padding: 0px;
}
.card {
padding: 0px;
}
- type: custom:bubble-card
card_type: separator
icon: mdi:creation
name: Gwiazdy
sub_button:
main: []
bottom: []
- type: custom:horizon-card
moon: true
refresh_period: 60
fields:
moonrise: true
moonset: true
moon_phase: true
card_mod:
style: |
ha-card {
background: transparent;
border: none;
box-shadow: none;
padding: 0px;
}
- type: custom:lunar-phase-card
entity: ''
12hr_format: false
calendar_modal: false
compact_view: false
default_card: calendar
hide_buttons: false
mile_unit: false
moon_position: left
number_decimals: 2
selected_language: pl
show_background: true
southern_hemisphere: false
use_custom: false
use_default: true
use_entity: false
graph_config:
graph_type: default
y_ticks: false
x_ticks: false
show_time: true
show_current: true
show_highest: true
y_ticks_position: left
y_ticks_step_size: 30
time_step_size: 30
font_customize:
header_font_size: x-large
header_font_style: capitalize
header_font_color: ''
label_font_size: auto
label_font_style: none
label_font_color: ''
hide_label: false
latitude: 49.58645517402537
longitude: 20.6975930929184
location:
city: Nowy Sącz
country: Polska
theme:
selected_theme: default
- type: custom:lunar-phase-card
entity: ''
12hr_format: false
calendar_modal: false
compact_view: false
default_card: horizon
hide_buttons: true
mile_unit: false
moon_position: left
number_decimals: 2
selected_language: pl
show_background: true
southern_hemisphere: false
use_custom: false
use_default: true
use_entity: false
graph_config:
graph_type: dynamic
y_ticks: false
x_ticks: false
show_time: true
show_current: true
show_highest: true
y_ticks_position: left
y_ticks_step_size: 30
time_step_size: 30
font_customize:
header_font_size: x-large
header_font_style: capitalize
header_font_color: ''
label_font_size: auto
label_font_style: none
label_font_color: ''
hide_label: false
latitude: 49.58647432882609
longitude: 20.697590410709385
location:
city: Nowy Sącz
country: Polska
theme:
selected_theme: default
custom_background: >-
https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_3.png
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#kwiaty'
button_type: name
name: Kwiaty
icon: mdi:flower
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
show_header: true
sub_button:
main: []
bottom: []
- type: custom:flower-card
entity: plant.monstera
battery_sensor: sensor.czujnik_gleby_kwiat_monstera_battery
show_bars:
- moisture
- temperature
- illuminance
- humidity
- dli
display_type: full
card_mod:
style: |
.card-margin-top {
margin-top: 0px !important;
}
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
}
.header img {
width: 52px !important;
height: 52px !important;
margin-top: 8px !important;
border-radius: 9px !important;
}
- type: custom:flower-card
entity: plant.cytryna
battery_sensor: sensor.czujnik_gleby_cytryna_battery
show_bars:
- moisture
- temperature
- illuminance
- humidity
- dli
display_type: full
card_mod:
style: |
.card-margin-top {
margin-top: 0px !important;
}
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
}
.header img {
width: 52px !important;
height: 52px !important;
margin-top: 8px !important;
border-radius: 9px !important;
}
- type: custom:flower-card
entity: plant.skrzydlokwiat
battery_sensor: sensor.czujnik_gleby_kwiat_skrzydlokwiat_battery_state
show_bars:
- moisture
- temperature
- illuminance
- humidity
- dli
display_type: full
card_mod:
style: |
.card-margin-top {
margin-top: 0px !important;
}
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
}
.header img {
width: 52px !important;
height: 52px !important;
margin-top: 8px !important;
border-radius: 9px !important;
}
- type: custom:flower-card
entity: plant.bonsai
battery_sensor: sensor.czujnik_gleby_bonsai_battery_state
show_bars:
- moisture
- temperature
- illuminance
- humidity
- dli
display_type: full
card_mod:
style: |
.card-margin-top {
margin-top: 0px !important;
}
ha-card {
background: color-mix(in srgb, var(--card-background-color) 70%, var(--primary-background-color)) !important;
}
.header img {
width: 52px !important;
height: 52px !important;
margin-top: 8px !important;
border-radius: 9px !important;
}
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#salon'
button_type: name
name: Salon
icon: mdi:theater
sub_button:
main:
- entity: sensor.zhimi_de_874970050_mb5_temperature_p_3_7
state_background: false
show_state: true
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- entity: sensor.zhimi_de_874970050_mb5_relative_humidity_p_3_1
show_state: true
show_attribute: false
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
- type: custom:mini-graph-card
entities:
- entity: sensor.zhimi_de_874970050_mb5_temperature_p_3_7
- entity: sensor.zhimi_de_874970050_mb5_relative_humidity_p_3_1
name: Wilgotność
show_graph: false
show_state: true
show_points: false
- color: gray
entity: sensor.nightstate
name: Night
show_legend: false
show_line: false
show_points: false
y_axis: secondary
line_width: 3
font_size: 90
animate: true
color_thresholds:
- value: -5
color: '#eb4d54'
- value: 0
color: '#1db954'
- value: 3
color: '#3a8df7'
hours_to_show: 48
hour24: true
icon: mdi:sofa
points_per_hour: 0.5
show:
extrema: true
fill: fade
name: false
icon: false
labels: true
state: false
legend: true
card_mod:
style: |
ha-card {
background: rgba (255,255,255,0.1);
box-shadow: 0px 0px 0px 1px var(--ha-card-border-color, var(--divider-color, #e0e0e0)) !important;
--bubble-border: solid var(--ha-card-border-color, var(--divider-color, #e0e0e0));
}
- type: custom:waterfall-history-card
title: ' '
hours: 24
show_min_max: true
height: 10
digits: 1
gradient: true
compact: true
entities:
- entity: sensor.zhimi_de_874970050_mb5_pm2_5_density_p_3_4
name: Jakość powietrza w salonie (24h)
show_icons: false
thresholds:
- value: 5
color: '#4FC3F7'
- value: 10
color: '#81C784'
- value: 15
color: '#FFB74D'
- value: 25
color: '#FF8A65'
card_mod:
style: |
:host .card-header {
display: none;
}
:host .min-max-label {
margin-bottom: -4px;
margin-top: -18px;
}
:host {
background: rgba (255,255,255,0.1);
box-shadow: 0.5px 0.5px 0.5px 0px rgba(255,255,255,0.4) inset,-0.5px -0.5px 1px 0px rgba(255,255,255,0.1) inset,0px 1px 2px 0px rgba(0,0,0,0.1);
border-radius: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
- type: custom:bubble-card
card_type: separator
name: Media
icon: mdi:music
sub_button:
main: []
bottom: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: media-player
entity: media_player.salon
name: Amplituner
icon: mdi:audio-video
hide:
power_button: false
next_button: true
previous_button: true
cover_background: true
sub_button:
main:
- entity: media_player.salon
sub_button_type: select
select_attribute: source_list
icon: cil:hdmi-source
name: Źródło
hide_when_parent_unavailable: false
show_background: false
state_background: false
show_arrow: false
bottom: []
show_name: true
force_icon: false
modules:
- rmn_conditional_media_player_coloring
accent_color_picker:
accent_color: primary
subbutton_animations:
subbutton2:
animation: bounce
main_buttons_position: bottom
rows: '2.8'
- type: custom:bubble-card
card_type: media-player
sub_button:
main:
- entity: media_player.telewizor_w_salonie_js
sub_button_type: select
select_attribute: source_list
icon: cil:hdmi-source
name: Źródło
show_background: false
show_arrow: false
- name: Pilot
icon: mdi:remote-tv
show_name: true
tap_action:
action: navigate
navigation_path: '#mama-tv-pilot'
bottom: []
entity: media_player.shield_adb
icon: mdi:youtube-tv
name: Telewizor
hide:
next_button: true
previous_button: true
show_attribute: true
show_state: false
cover_background: true
rows: '2.8'
show_name: true
force_icon: false
modules:
- subbutton_animations
- subbutton_colors
- rmn_conditional_media_player_coloring
accent_color_picker:
accent_color: primary
subbutton_animations:
subbutton2:
animation: bounce
main_buttons_position: bottom
subbutton_colors:
subbutton2:
color: primary
styles: |
.bubble-backgroubnd {
background: linear-gradient(145deg, rgba(30,30,30,0.9) 0%, rgba(20,20,20,1) 100%);
mix-blend-mode: screen;
}
- type: entities
entities:
- card_type: horizontal-stack
cards:
- entity: script.streamuj_rmf_fm
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/RMF_FM_logo.svg/640px-RMF_FM_logo.svg.png
tap_action:
service: script.streamuj_rmf_fm
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Logo_Radia_Eska.svg/640px-Logo_Radia_Eska.svg.png
tap_action:
service: script.streamuj_radio_eska
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_eska_2
entity_picture: >-
https://files.qnap.net.pl/ha_assets/logo_radio_Eska2.png
tap_action:
service: script.streamuj_radio_eska_2
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
- entity: script.streamuj_radio_rmf_maxx
entity_picture: >-
https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Logo_RMF_MAXX.png/640px-Logo_RMF_MAXX.png
tap_action:
service: script.streamuj_radio_rmf_maxx
template: picture_button
type: custom:button-card
card_mod:
style: |
ha-card {
border:0 !important;
}
type: custom:hui-element
card_mod:
style: |
ha-card {
background: none;
}
- type: conditional
conditions:
- condition: or
conditions:
- condition: state
entity: light.festavia
state: 'on'
- condition: state
entity: light.festavia
state: 'off'
card:
type: vertical-stack
cards:
- type: custom:bubble-card
card_type: separator
sub_button:
main:
- entity: switch.gniazdko_swiatla_uliczne_swiateczne
name: ''
icon: phu:light-string
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: toggle
bottom: []
name: Dekoracja świąteczna
icon: noto-v1:santa-claus
modules: []
subbutton_colors:
subbutton1:
color: grey
condition:
- condition: state
entity_id: switch.gniazdko_swiatla_uliczne_swiateczne
state:
- 'off'
styles: |-
.background-off {
background-color: var(--secondary-background-color);
}
- type: custom:bubble-card
card_type: button
button_type: slider
icon: roentgen:christmas-tree
name: Choinka
scrolling_effect: false
show_icon: true
button_action:
double_tap_action:
action: more-info
tap_action:
action: toggle
double_tap_action:
action: more-info
tap_action:
action: toggle
sub_button:
main:
- entity: scene.salon_choinka_red_blink
icon: mdi:candle
name: Red Blink
tap_action:
action: toggle
- entity: scene.salon_choinka_lesna_przygoda
icon: mdi:forest
name: Leśna przygoda
tap_action:
action: toggle
- entity: scene.salon_choinka_nowa_aranzacja
icon: mdi:flash-triangle
name: Nowa aranżacja
tap_action:
action: toggle
- entity: scene.salon_choinka_soho_2
name: Soho 2
icon: mdi:square-opacity
tap_action:
action: toggle
- entity: scene.salon_choinka_cancun
icon: mdi:cupcake
name: Cancun
tap_action:
action: toggle
bottom: []
entity: light.festavia
rows: ''
force_icon: false
show_name: true
- type: custom:bubble-card
card_type: sub-buttons
sub_button:
main: []
bottom:
- entity: light.festavia
sub_button_type: slider
light_slider_type: hue
fill_width: true
always_visible: true
show_attribute: false
show_state: false
show_last_updated: false
hide_when_parent_unavailable: false
visibility:
- condition: state
entity: light.festavia
state: 'on'
- type: custom:bubble-card
card_type: separator
sub_button:
main: []
bottom: []
name: Światło
icon: hue:floor-spot-group
- type: custom:bubble-card
card_type: button
button_type: slider
sub_button:
main:
- entity: scene.salon_koncentracja
name: Koncentracja
tap_action:
action: toggle
icon: phu:scene-concentrate
- entity: scene.salon_czytanie
name: Czytanie
icon: phu:scene-read
tap_action:
action: toggle
- entity: scene.salon_odpoczynek
name: Odpoczynek
icon: hue:scene-rest
tap_action:
action: toggle
- entity: scene.salon_lampka_nocna
icon: phu:scene-nightlight
name: Lampka nocna
tap_action:
action: toggle
bottom:
- entity: light.swiatla_na_zewnatrz
sub_button_type: slider
light_slider_type: white_temp
fill_width: true
always_visible: true
- entity: light.swiatla_na_zewnatrz
sub_button_type: slider
light_slider_type: hue
fill_width: false
always_visible: true
show_attribute: false
show_state: false
show_last_updated: false
bottom_layout: inline
entity: light.salon_cala_strefa
name: Światło
icon: mdi:theater
use_accent_color: false
rows: '1.9'
force_icon: false
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom:
- entity: light.salon
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: phu:ceiling-fugato-four-alt
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_color_lamp_4
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:tree
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_color_lamp_5
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:sprout
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_omniglow_striplight_1
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:dresser
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.signe_gradient_floor_1
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: phu:signe-gradient-floor
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_play_wall_washer_1
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:border-left
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_play_wall_washer_2
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:border-right
sub_button_type: slider
allow_light_slider_to_0: true
- entity: light.hue_color_lamp_16
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: more-info
icon: mdi:arrow-bottom-left-thin
sub_button_type: slider
allow_light_slider_to_0: true
entity: input_boolean.override_manual_on_ambient
name: Ambient - ręczne sterowanie
icon: mdi:gesture-double-tap
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
rows: 1.875
- type: custom:bubble-card
card_type: separator
name: Ambilight
icon: mdi:television-ambient-light
sub_button:
main:
- entity: select.sync_box_wejscia_hdmi
icon: phu:sync-box
show_arrow: false
show_attribute: false
show_state: true
show_icon: true
state_background: true
sub_button_type: select
- entity: media_player.philips_google_tv_ta5_television
select_attribute: source_list
show_state: false
show_background: true
show_last_changed: false
show_last_updated: false
show_attribute: true
show_arrow: false
icon: mdi:video-input-hdmi
name: ''
show_name: false
show_icon: true
sub_button_type: select
bottom: []
- type: custom:bubble-card
card_type: button
button_type: slider
entity: number.sync_box_jasnosc
icon: mdi:television-ambient-light
show_header: true
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: toggle
name: Jasność
sub_button:
main:
- entity: switch.sync_box_synchronizacja_swiatla
show_icon: false
state_background: false
show_background: false
scrolling_effect: false
tap_action:
action: toggle
double_tap_action:
action: toggle
name: On/Off
show_name: false
show_state: true
bottom: []
show_state: false
show_icon: false
scrolling_effect: false
modules:
- sub_toggle_switch
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_intensywnosc
name: Intensywnosc
icon: hue:sync-intense
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_tryb_synchronizacji
name: Tryb
icon: mdi:multimedia
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: select
button_type: switch
entity: select.sync_box_obszar_rozrywki
name: Obszar
icon: hue:entertainment-area
show_name: false
show_state: true
scrolling_effect: false
sub_button:
main: []
bottom: []
styles: |-
.bubble-state {
font-size: 13px;
}
- type: custom:bubble-card
card_type: button
button_type: switch
sub_button:
main: []
bottom: []
entity: switch.sync_box_zasilanie
name: Power On/Off
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: custom:bubble-card
card_type: empty-column
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#power'
name: Sterowanie zasilaniem
icon: mdi:power
scrolling_effect: false
show_header: true
sub_button:
main: []
bottom: []
modules:
- silas-style-fix
- previous_accent_color
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
icon_color:
color: red
cover_gradient_background_indicator:
color: blue-grey
colorless_closed: false
highlight_closed: true
inverted: false
advanced_color: '#4BBE5E'
backdrop_blur: '0'
shadow_opacity: '0'
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: input_boolean.awtrix_pokaz_temperature_na_zewnatrz
slider_live_update: false
allow_light_slider_to_0: false
button_action:
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: toggle
name: Pokaż temperature
icon: ''
scrolling_effect: false
show_name: true
show_state: false
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_salon
name: Lewe
icon: mdi:television-box
show_state: false
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
double_tap_action:
action: toggle
show_last_changed: false
show_attribute: false
scrolling_effect: false
show_icon: true
show_name: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_salon_prawe
icon: mdi:power-socket-fr
show_icon: true
scrolling_effect: false
force_icon: false
name: Prawe
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
name: Pokoje
icon: mdi:human-female-female-child
sub_button: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_tymek_lewe
name: Tymek
icon: mdi:teddy-bear
show_state: false
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
double_tap_action:
action: toggle
show_last_changed: false
show_attribute: false
scrolling_effect: false
show_icon: true
show_name: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_mama_telewizor
icon: mdi:mother-heart
show_icon: true
scrolling_effect: false
force_icon: false
name: Mama
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
button_type: switch
name: Dom
icon: phu:rooms-storage
- type: custom:bubble-card
card_type: button
button_type: switch
name: Biuro
icon: phu:rooms-office
show_state: true
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
double_tap_action:
action: toggle
show_last_changed: false
show_attribute: false
scrolling_effect: false
sub_button: []
entity: switch.gniazdko_biuro
- type: custom:bubble-card
card_type: separator
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
name: Ogród
icon: hue:room-outdoors
sub_button: []
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.tasmota_206
icon: mdi:grass
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
name: Podlewanie wody
scrolling_effect: false
sub_button: []
- type: custom:bubble-card
card_type: separator
name: Serwerownia
icon: mdi:server-security
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_serwer_wentylatory
slider_live_update: false
allow_light_slider_to_0: false
button_action:
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: toggle
name: Chłodzenie
icon: mdi:air-conditioner
scrolling_effect: false
show_name: true
show_state: false
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
- type: custom:bubble-card
card_type: empty-column
rows: '2'
- type: custom:bubble-card
card_type: empty-column
rows: '2'
cards: []
header:
layout: responsive
badges_position: top
badges_wrap: wrap
badges: []
subview: false
icon: mdi:flower-tulip
dense_section_placement: false
background:
opacity: 33
alignment: center
size: cover
repeat: repeat
attachment: fixed
top_margin: false
- type: sections
max_columns: 4
title: Kamery
path: kamery
icon: mdi:cctv
subview: true
sections:
- type: grid
cards:
- type: custom:navbar-card
routes:
- url: /lovelace/hello
icon: mdi:home
label: Dom
selected_color: '#E57373'
- icon: mdi:mother-heart
label: Mama
url: /lovelace/hello#mama
selected_color: '#FBC02D'
- icon: mdi:theater
label: Salon
url: /lovelace/hello#salon
selected_color: '#81C784'
- url: /lovelace/kamery
selected_color: '#64B5F6'
icon: mdi:webcam
label: Kamery
- icon: mdi:flower
label: Kwiaty i ogród
url: /lovelace/hello#kwiaty
- icon: mdi:dots-horizontal
selected_color: '#BA68C8'
label: More
tap_action:
action: open-popup
popup:
- icon: mdi:cog
url: /config/dashboard
- icon: mdi:hammer
url: /developer-tools/yaml
- icon: mdi:power
tap_action:
action: call-service
service: homeassistant.restart
service_data: {}
confirmation:
text: Are you sure you want to restart Home Assistant?
styles: |
.navbar-card {
--navbar-border-radius: 36px;
border: none;
}
.navbar-card.mobile {
.icon {
--mdc-icon-size: 26px;
}
margin-bottom: 40px !important;
}
.route {
height: 60px;
width: 70px;
}
.button {
height: 100%;
border-radius: 22px;
}
media_player:
album_cover_background: false
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
show: '[[[return false]]]'
mobile:
mode: floating
layout:
auto_padding:
enabled: true
- type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarm
keep_keypad_visible: false
use_clear_icon: false
button_scale_actions: 1.5
button_scale_keypad: 1
states: {}
show_messages: true
show_ready_indicator: true
show_bypassed_sensors: true
use_code_dialog: false
hide_keypad: false
card_mod:
style: |
ha-card {
border: none;
box-shadow: none !important;
background: none !important;
}
- type: grid
cards:
- type: custom:advanced-camera-card
cameras:
- live_provider: webrtc-card
webrtc_card:
url: camera.1_wjazd_sd
capabilities:
disable_except: []
disable: []
dimensions:
layout:
fit: fill
aspect_ratio: '16:9'
triggers:
motion: true
entities:
- binary_sensor.onvif_wjazd_motion_alarm
- binary_sensor.czujnik_wjazd_motion
events:
- events
- clips
- snapshots
title: Wjazd
image:
url: /local/snapshots/wjazd.jpg
mode: url
- live_provider: webrtc-card
webrtc_card:
url: camera.3_domofon_sd
triggers:
motion: true
entities:
- binary_sensor.czujnik_wjazd_motion
events:
- events
- clips
- snapshots
title: Domofon
dimensions:
layout:
fit: fill
aspect_ratio: '4:3'
- live_provider: webrtc-card
go2rtc:
modes: []
webrtc_card:
url: camera.2_ogrod_sd
capabilities:
disable_except:
- live
disable: []
title: Ogród
triggers:
motion: true
entities:
- binary_sensor.ogrod_motion_alarm
events:
- events
- clips
- snapshots
dimensions:
layout:
fit: fill
aspect_ratio: '16:9'
image:
mode: url
profiles: []
view:
theme:
themes: []
triggers:
show_trigger_status: false
actions:
trigger: media
untrigger: default
interaction_mode: all
untrigger_seconds: 10
filter_selected_camera: true
default_cycle_camera: false
interaction_seconds: 10
default_reset:
after_interaction: true
entities:
- binary_sensor.onvif_wjazd_motion_alarm
- binary_sensor.czujnik_wjazd_motion
menu:
buttons:
cameras:
enabled: false
substreams:
permanent: false
enabled: false
priority: 50
live:
enabled: false
folders:
enabled: false
camera_ui:
enabled: false
expand:
enabled: false
timeline:
enabled: false
microphone:
enabled: true
permanent: true
display_mode:
enabled: false
permanent: false
ptz_controls:
enabled: false
ptz_home:
enabled: false
fullscreen:
permanent: true
enabled: false
media_player:
enabled: false
play:
enabled: false
mute:
enabled: true
permanent: true
screenshot:
enabled: false
clips:
enabled: false
download:
enabled: false
iris:
enabled: false
style: none
status_bar:
items:
title:
enabled: true
style: none
live:
controls:
builtin: false
microphone:
always_connected: true
display:
grid_selected_position: first
mode: grid
grid_columns: 1
preload: true
draggable: true
lazy_load: true
auto_unmute: []
show_image_during_load: true
zoomable: false
auto_mute: []
transition_effect: none
dimensions: {}
performance:
style:
border_radius: false
box_shadow: false
features:
card_loading_indicator: false
animated_progress_indicator: false
image:
mode: url
url: /local/snapshots/wjazd.jpg
card_mod:
style: |
ha-card {
border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px;
}
- type: sections
max_columns: 4
path: includes
icon: mdi:code-json
title: Includes
sections:
- type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
button_type: name
hash: '#power2'
name: Sterowanie zasilaniem
icon: mdi:power
scrolling_effect: false
show_header: true
sub_button:
main: []
bottom: []
modules:
- silas-style-fix
- previous_accent_color
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
border_radius: 40
icon_color:
color: red
cover_gradient_background_indicator:
color: blue-grey
colorless_closed: false
highlight_closed: true
inverted: false
advanced_color: '#4BBE5E'
backdrop_blur: '0'
shadow_opacity: '0'
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: input_boolean.awtrix_pokaz_temperature_na_zewnatrz
slider_live_update: false
allow_light_slider_to_0: false
button_action:
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: toggle
name: Pokaż temperature
icon: ''
scrolling_effect: false
show_name: true
show_state: false
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_salon
name: Lewe
icon: mdi:television-box
show_state: false
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
double_tap_action:
action: toggle
show_last_changed: false
show_attribute: false
scrolling_effect: false
show_icon: true
show_name: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_salon_prawe
icon: mdi:power-socket-fr
show_icon: true
scrolling_effect: false
force_icon: false
name: Prawe
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
name: Pokoje
icon: mdi:human-female-female-child
sub_button: []
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_tymek_lewe
name: Tymek
icon: mdi:teddy-bear
show_state: false
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
double_tap_action:
action: toggle
show_last_changed: false
show_attribute: false
scrolling_effect: false
show_icon: true
show_name: true
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_mama_telewizor
icon: mdi:mother-heart
show_icon: true
scrolling_effect: false
force_icon: false
name: Mama
tap_action:
action: toggle
button_action:
tap_action:
action: toggle
double_tap_action:
action: toggle
hold_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
- type: custom:bubble-card
card_type: separator
button_type: switch
name: Dom
icon: phu:rooms-storage
- type: custom:bubble-card
card_type: button
button_type: switch
name: Biuro
icon: phu:rooms-office
show_state: true
tap_action:
action: toggle
hold_action:
action: toggle
button_action:
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: toggle
double_tap_action:
action: toggle
show_last_changed: false
show_attribute: false
scrolling_effect: false
sub_button: []
entity: switch.gniazdko_biuro
- type: custom:bubble-card
card_type: separator
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
name: Ogród
icon: hue:room-outdoors
sub_button: []
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.tasmota_206
icon: mdi:grass
slider_live_update: false
allow_light_slider_to_0: false
button_action:
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
name: Podlewanie wody
scrolling_effect: false
sub_button: []
- type: custom:bubble-card
card_type: separator
name: Serwerownia
icon: mdi:server-security
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: switch
entity: switch.gniazdko_serwer_wentylatory
slider_live_update: false
allow_light_slider_to_0: false
button_action:
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: toggle
name: Chłodzenie
icon: mdi:air-conditioner
scrolling_effect: false
show_name: true
show_state: false
hold_action:
action: toggle
double_tap_action:
action: none
tap_action:
action: toggle
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: '#pogoda'
button_type: name
name: Pogoda
icon: mdi:weather-cloudy
scrolling_effect: false
sub_button:
main: []
bottom: []
modules:
- previous_accent_color
- silas-style-fix
frosted_glass:
main_icon_color_boolean: icon_theme_color
icon_background: theme
main_shadow: true
sub_shadow: true
icon_shadow: true
opacity: 0.5
- type: custom:bubble-card
card_type: button
sub_button:
main: []
bottom:
- name: Temperatury
icon: mdi:home-thermometer
tap_action:
action: navigate
navigation_path: '#temperatury'
show_name: true
double_tap_action:
action: navigate
navigation_path: '#temperatury'
- name: Pogoda
icon: mdi:cloud-question
show_name: true
tap_action:
action: navigate
navigation_path: '#pogoda'
double_tap_action:
action: navigate
navigation_path: '#pogoda'
styles: |
.card-content {
width: 100%;
margin: 0 !important;
}
.bubble-button-card-container {
border: none;
background: none;
}
.bubble-sub-button {
height: 46px !important;
width: 46px !important;
background-color: rgba (255,255,255,0.1);
background-color: #006dca;
box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 0px inset,
rgba(0, 0, 0, 0.2) 0px 4px 4px,
rgba(0, 0, 0, 0.3) 0px 5px 5px -3px,
rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
box-shadow:
rgba(255,255,255,0.4) 1px 1px 0.5px 0 inset,
rgba(255,255,255,0.05) -1px -1px 0px 0px inset,
rgba(0,0,0,0.1) 0px 3px 0px 0px;
border: 2px solid var(--primary-background-color);
text-shadow: 0px 1px 1px var(--primary-background-color);
}
.show-icon {
filter: drop-shadow(0px 1px 1px var(--primary-background-color));
}
.bubble-sub-button-2 {
background-color: var(--accent-color);
}
.bubble-sub-button-1 {
background-color: rgba(255,255,255,0.1);
}
.bubble-sub-button-container {
display: flex !important;
width: 100%;
justify-content: space-between !important;
}
.bubble-sub-button-icon {
--mdc-icon-size: inherit !important;
}
.bubble-name-container {
margin-right: 0px !important;
}
event_action:
tap_action:
action: more-info
double_tap_action:
action: none
hold_action:
action: none
button_type: name
rows: '1'
- type: custom:weather-forecast-extended-card
entity: weather.openweathermap
header_attributes: []
show_header: true
hourly_forecast: true
daily_forecast: true
orientation: vertical
use_night_header_backgrounds: true
header_chips:
- type: template
template: '{{ now().strftime(''%H:%M'') }}'
- type: attribute
attribute: ''
- type: attribute
attribute: ''
header_temperature_entity: sensor.czujnik_obecnosci_zewnatrz_temperature
show_sun_times: true
card_mod:
style:
.: |
ha-card {
border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px;
box-shadow: 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.4) inset, -0.5px -0.5px 1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
.weather.header-only {
border-radius: var(--ha-card-border-radius, 12px) var(--ha-card-border-radius, 12px) 0px 0px;
box-shadow: 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.4) inset, -0.5px -0.5px 1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.attribute-chip,
.header-main .condition,
.header-main .temp {
box-shadow: 0.5px 0.5px 1px 0px rgba(255, 255, 255, 0.4) inset, -0.5px -0.5px 1px 0px rgba(255, 255, 255, 0.1) inset, 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.weather .attribute-chip:first-child {
font-size: var(--ha-font-size-2xl);
line-height: calc(10px + var(--ha-font-size-2xl));
background-color: rgba(0, 0, 0, 0.3);
border-radius: 100px;
width: fit-content;
padding: 2px 17px;
font-weight: bold;
}
}
- type: custom:weather-chart-card
entity: weather.openweathermap
show_main: false
show_temperature: true
show_current_condition: true
show_attributes: true
show_time: false
show_time_seconds: false
show_day: false
show_date: false
show_humidity: true
show_pressure: true
show_wind_direction: true
show_wind_speed: true
show_sun: true
show_feels_like: true
show_dew_point: false
show_wind_gust_speed: false
show_visibility: false
show_last_changed: false
use_12hour_format: false
icons_size: 25
animated_icons: true
icon_style: style1
autoscroll: true
forecast:
precipitation_type: rainfall
show_probability: false
labels_font_size: '11'
precip_bar_size: '100'
style: style1
show_wind_forecast: true
condition_icons: true
round_temp: false
type: daily
number_of_forecasts: '0'
disable_animation: false
units:
speed: ''
card_mod:
style: |
ha-card {
background: transparent;
border: none;
box-shadow: none;
padding: 0px;
}
.card {
padding: 0px;
}
- type: custom:bubble-card
card_type: separator
icon: mdi:creation
name: Gwiazdy
sub_button:
main: []
bottom: []
- type: custom:horizon-card
moon: true
refresh_period: 60
fields:
moonrise: true
moonset: true
moon_phase: true
card_mod:
style: |
ha-card {
background: transparent;
border: none;
box-shadow: none;
padding: 0px;
}
- type: custom:lunar-phase-card
entity: ''
12hr_format: false
calendar_modal: false
compact_view: false
default_card: calendar
hide_buttons: false
mile_unit: false
moon_position: left
number_decimals: 2
selected_language: pl
show_background: true
southern_hemisphere: false
use_custom: false
use_default: true
use_entity: false
graph_config:
graph_type: default
y_ticks: false
x_ticks: false
show_time: true
show_current: true
show_highest: true
y_ticks_position: left
y_ticks_step_size: 30
time_step_size: 30
font_customize:
header_font_size: x-large
header_font_style: capitalize
header_font_color: ''
label_font_size: auto
label_font_style: none
label_font_color: ''
hide_label: false
latitude: 49.58645517402537
longitude: 20.6975930929184
location:
city: Nowy Sącz
country: Polska
theme:
selected_theme: default
- type: custom:lunar-phase-card
entity: ''
12hr_format: false
calendar_modal: false
compact_view: false
default_card: horizon
hide_buttons: true
mile_unit: false
moon_position: left
number_decimals: 2
selected_language: pl
show_background: true
southern_hemisphere: false
use_custom: false
use_default: true
use_entity: false
graph_config:
graph_type: dynamic
y_ticks: false
x_ticks: false
show_time: true
show_current: true
show_highest: true
y_ticks_position: left
y_ticks_step_size: 30
time_step_size: 30
font_customize:
header_font_size: x-large
header_font_style: capitalize
header_font_color: ''
label_font_size: auto
label_font_style: none
label_font_color: ''
hide_label: false
latitude: 49.58647432882609
longitude: 20.697590410709385
location:
city: Nowy Sącz
country: Polska
theme:
selected_theme: default
custom_background: >-
https://cdn.jsdelivr.net/gh/ngocjohn/lunar-phase-card@1.7.3/background/moon_bg_3.png
- type: iframe
url: >-
https://embed.windy.com/embed2.html?lat=49.519&lon=20.693&detailLat=49.119&detailLon=20.693&width=650&height=450&zoom=8&level=surface&overlay=wind&product=ecmwf&menu=&message=true&marker=&calendar=now&pressure=&type=map&location=coordinates&detail=&metricWind=km%2Fh&metricTemp=%C2%B0C&radarRange=-1
aspect_ratio: 50%
- type: custom:astroweather-card
details: true
current: true
deepskydetails: true
forecast: true
graph: true
graph_condition: true
graph_cloudless: true
graph_seeing: true
graph_transparency: true
graph_calm: true
graph_li: true
graph_precip: true
graph_fog: true
number_of_forecasts: '5'
line_color_condition: '#f07178'
line_color_condition_night: '#eeffff'
line_color_cloudless: '#c3e88d'
line_color_seeing: '#ffcb6b'
line_color_transparency: '#82aaff'
line_color_calm: '#ff5370'
line_color_li: '#89ddff'
line_color_precip: '#82aaff'
line_color_fog: '#dde8ff'
entity: weather.astroweather_backyard
- type: custom:bubble-card
card_type: empty-column
rows: '2'
subview: true
cards: []
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment