Last active
January 16, 2024 08:32
-
-
Save Mariusthvdb/9069c8c4dcad6324035a679244bbfdf1 to your computer and use it in GitHub Desktop.
Custom header theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
template: | |
- sensor: | |
- unique_id: custom_header_option_template | |
name: Custom header template | |
state: > | |
{% if is_state('input_boolean.menu_options_template','on') %} | |
{% if states('sensor.your_browsermod_id') not in ['unknown','unavailable'] %} /*replace with correct sensor id */ | |
{{state_attr('sensor.your_browsermod_id','path') | |
.split('/')[-1].replace('_',' ').capitalize()}} - {{states('sensor.temp_current')}} °C | |
{% else %} Initializing.... | |
{% endif %} | |
{% endif %} | |
availability: > | |
{% set x = ['unavailable','unknown'] %} | |
{{states('sensor.your_browsermod_id') not in x and | |
states('sensor.temp_current') not in x}} | |
- unique_id: custom_header_option_template_version_2 | |
name: Custom header template 2 | |
state: > | |
{% if is_state('input_boolean.menu_options_template','on') %} | |
{{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C | |
{% endif %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
########################################################################################## | |
# https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/419 | |
# My 'Custom header' card-mod theme, allowing to color individual view icons and have an | |
# optional replacement for the three-dots option menu | |
# Set left menu icons, animations and colors, and add a notification next to it | |
# set backgrounds to override the default background set in theme | |
# https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1070 | |
# most interface elements are now set using the new Kiosk-mode on | |
# https://github.com/NemesisRE/kiosk-mode | |
# last_update 20240108 using HA 2024.1.2 and card_mod 3.4.2 | |
########################################################################################## | |
theme-mods: | |
# card-mod-row: | | |
# :host { | |
# --card-mod-icon: | |
# {% set state = states(config.entity) %} | |
# {% if state_attr(config.entity,'device_class') == 'running' %} | |
# mdi:{{'checkbox-marked-circle' if state == 'on' else 'radiobox-blank'}}; | |
# {% endif %} | |
# } | |
# dont do this, as it slows down the Dashboard. Better set mods on the cards. | |
# :host { | |
# --paper-item-icon-color: | |
# {% if config.entity in | |
# states.sensor|selectattr('entity_id','search','illuminance') | |
# |map(attribute='entity_id')|list %} | |
# {% set state = states(config.entity)|int(-5) %} | |
# {% if state < 1 %} black | |
# {% elif state < 2 %} firebrick | |
# {% elif state < 10 %} orange | |
# {% elif state < 50 %} green | |
# {% elif state < 150 %} gold | |
# {% elif state < 350 %} teal | |
# {% elif state < 700 %} dodgerblue | |
# {% elif state < 2000 %} lighskyblue | |
# {% elif state < 10000 %} lightblue | |
# {% else %} lightcyan | |
# {% endif %}; | |
# } | |
# https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#classes | |
# card-mod-row: | | |
# :host(.class-row-red) { | |
# color: red; | |
# --paper-item-icon-color: red; | |
# } | |
# move to under -yaml, as per https://github.com/thomasloven/lovelace-card-mod/wiki/Theme-cookbook#first-section | |
# <<: &card-mod-card | |
# card-mod-card: | | |
# ha-card { | |
# transition: none !important; | |
# } | |
# - !include /config/dashboard/includes/include_christmas_footer.yaml | |
card-mod-glance: | | |
:host { | |
transition: none !important; | |
} | |
card-mod-sidebar-yaml: | | |
.: | | |
{% set kerst = states('input_select.theme') == 'Kerst' %} | |
{% set alerts = states('sensor.alerts_notifying')|int(default=0) > 0 %} | |
{% set netto = states('sensor.netto_verbruik')|int(default=0) >= 0 %} | |
{% set feest = is_state('binary_sensor.feest_alerts','on') %} | |
{% set vent = is_state('input_boolean.ventilate','on') %} | |
:host { | |
background: {{'url("/local/season/kerst_smurfen.png")' if kerst}}; | |
} | |
.menu .title { | |
color: {{states('sensor.presence_color')}}; | |
} | |
.menu .title:after { | |
content: "{%- set alerts = states('sensor.marquee_alerts')|int(default=0) %} | |
{%- set phrase = 'Alert: ' if alerts == 1 else 'Alerts:' -%} | |
{{'\A ' ~ phrase ~ alerts if alerts > 0 }}"; | |
white-space: pre; | |
font-size: 12px; | |
font-weight: bold; | |
display: block; | |
line-height: 4px; | |
color: var(--alert-color); | |
animation: marquee 4s alternate infinite | |
} | |
@keyframes marquee { | |
from {transform: translateX(0%);} | |
to {transform: translateX(50%);} | |
} | |
a[data-panel='ui-overzicht'] paper-icon-item ha-icon { | |
--card-mod-icon: {{'mdi:home-alert' if alerts else 'mdi:home'}}; | |
color: {{'var(--alert-color)' if alerts else 'green'}}; | |
} | |
a[data-panel='ui-overzicht'] paper-icon-item { | |
{% if is_state('binary_sensor.watermeter_leak_detected','on') %} | |
--sidebar-text-color: blue; | |
background-color: lightblue; | |
animation: blink 2.5s ease infinite; | |
{% endif %} | |
} | |
@keyframes blink { | |
50% {opacity: 0.2;} | |
} | |
@keyframes blinkhard { | |
0%,49% {opacity:0;} | |
50%,100% {opacity:1;} | |
} | |
a[data-panel='ui-overzicht'] paper-icon-item:after { | |
{%- set id = states('sensor.buienradar_temperature') %} | |
{% set x = ['unknown','unavailable'] %} | |
content: "{{id if id not in x else '?'}}"; | |
{%- set length = id|length %} | |
{%- set table = {1:44,2:48,3:52,4:52,5:60} %} | |
{%- set pix = table.get(length,42) %} | |
left: calc(var(--app-drawer-width,248px) - {{pix}}px); | |
position: absolute; | |
min-width: 20px; | |
box-sizing: border-box; | |
border-radius: 24px; | |
font-weight: 400; | |
font-size: 14px; | |
line-height: 20px; | |
text-align: center; | |
padding: 0px 6px; | |
background-color: {{states('sensor.temperature_color_name')}}; | |
color: {{'dimgray' if 5 < id|int(default=0) < 20 else 'ivory'}}; | |
} | |
a[data-panel='ui-data'] paper-icon-item ha-icon { | |
color: {{'saddlebrown' if netto else 'gold'}}; | |
/*background: {{'gold' if netto else 'saddlebrown'}};*/ | |
} | |
a[data-panel='ui-data'] paper-icon-item:after { | |
{%- set id = states('sensor.netto_verbruik')|default('?') %} | |
content: "{{id}}"; | |
{%- set length = id|length %} | |
{%- set table = {1:44,2:48,3:52,4:56,5:60} %} | |
{%- set pix = table.get(length,42) %} | |
left: calc(var(--app-drawer-width,248px) - {{pix}}px); | |
position: absolute; | |
min-width: 20px; | |
box-sizing: border-box; | |
border-radius: 24px; | |
font-weight: 400; | |
font-size: 14px; | |
line-height: 20px; | |
text-align: center; | |
padding: 0px 6px; | |
background-color: {{'saddlebrown' if id|int(default=0) >= 0 else 'gold'}}; | |
color: {{'ivory' if id|int(default=0) >= 0 else 'saddlebrown'}}; | |
} | |
a[data-panel='ui-instellingen'] paper-icon-item ha-icon { | |
color: {%- if vent %} var(--alert-color) | |
{%- elif is_state('switch.vijverpompen','on') %} lightseagreen | |
{%- endif %}; | |
animation: {{'spin 2s ease 0s infinite normal' if vent else 'none'}}; | |
} | |
@keyframes spin { | |
from {transform:rotate(0deg);} | |
to {transform:rotate(360deg);} | |
} | |
a[data-panel='ui-instellingen'] paper-icon-item:after { | |
{%- set check = states('binary_sensor.wekker_voor_morgen') %} | |
{%- set wekker = states('sensor.next_alarm') %} | |
{% set content = wekker if check != 'off' %} | |
content: "{{content}}"; | |
/*{%- set length = content|length %} | |
{%- set table = {1:44,2:48,3:52,4:56,5:56} %} | |
{%- set pix = table.get(length,42) %} | |
left: calc(var(--app-drawer-width,248px) - {{pix}}px);*/ | |
left: calc(var(--app-drawer-width,248px) - 56px); | |
position: absolute; | |
min-width: 20px; | |
box-sizing: border-box; | |
border-radius: 24px; | |
font-weight: 400; | |
font-size: 14px; | |
line-height: 20px; | |
text-align: center; | |
padding: 0px 6px; | |
background-color: {{'crimson' if check != 'off'}}; | |
color: ivory; | |
} | |
a[data-panel='ui-familie'] paper-icon-item ha-icon { | |
--card-mod-icon: {{'mdi:party-popper' if feest else | |
states('sensor.presence_icon')}}; | |
color: {{'orange' if feest else states('sensor.presence_color')}}; | |
animation: {{'blink 2s ease infinite' if feest else 'none'}}; | |
} | |
@keyframes blink { | |
50% {opacity: 0.2;} | |
} | |
a[data-panel='ui-familie'] paper-icon-item:after { | |
content: "{{states('sensor.familie_samenvatting')}}"; | |
left: calc(var(--app-drawer-width,248px) - 44px); | |
position: absolute; | |
min-width: 20px; | |
box-sizing: border-box; | |
border-radius: 24px; | |
font-weight: 400; | |
font-size: 14px; | |
line-height: 20px; | |
text-align: center; | |
padding: 0px 6px; | |
background-color: {{states('sensor.presence_color')}}; | |
color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' | |
else 'ivory'}}; | |
} | |
a[data-panel='ui-develop'] paper-icon-item ha-icon { | |
{% set core = is_state('update.home_assistant_core_update','on') %} | |
--card-mod-icon: {{'mdi:package-up' if core else 'mdi:home-assistant'}}; | |
color: {{'red' if states('sensor.memory_use_percent')|int(default=0) > 25 or | |
core else 'var(--ha-color)'}}; | |
} | |
a[data-panel='ui-develop'] paper-icon-item:after { | |
{%- set id = states('sensor.memory_use_percent') %} | |
content: "{{id}}"; | |
{%- set length = id|length %} | |
{%- set table = {1:44,2:48,3:52,4:52,5:60} %} | |
{%- set pix = table.get(length,42) %} | |
left: calc(var(--app-drawer-width,248px) - {{pix}}px); | |
position: absolute; | |
min-width: 20px; | |
box-sizing: border-box; | |
border-radius: 24px; | |
font-weight: 400; | |
font-size: 14px; | |
line-height: 20px; | |
text-align: center; | |
padding: 0px 6px; | |
background-color: {{'red' if id|int(default=0) > 25 else 'var(--ha-color)'}}; | |
color: ivory; | |
} | |
a[data-panel='ui-cctv'] paper-icon-item ha-icon { | |
color: {{'var(--alert-color)' if is_state('switch.poe_inside_cameras','on') | |
else 'var(--primary-color)'}}; | |
} | |
# not reliable, use config-template-card to set conditional Map dark_mode | |
# card-mod-row-yaml: | | |
# | |
# ha-card.map { | |
# {{'dark_mode: true' if states('input_select.theme') == 'Dark blue'}}; | |
# } | |
# | |
# set classes for card-headers, with and without margin (used for starting entities | |
# cards with fold-entity-rows) | |
<<: &card-mod-card-yaml | |
card-mod-card-yaml: | | |
hui-buttons-header-footer $ hui-buttons-base: | |
$ : | | |
.ha-scrollbar { | |
justify-content: space-evenly; | |
height: 50px; | |
align-content: center; | |
margin: -8px 0px 0px 0px; | |
} | |
hui-buttons-header-footer $ hui-buttons-base $: | | |
ha-assist-chip { | |
border: 1px solid var(--primary-color); | |
border-radius: var(--ha-card-border-radius); | |
/*--ha-assist-chip-filled-container-color: yellow;*/ | |
--secondary-text-color: var(--primary-color); | |
--primary-text-color: var(--primary-color); | |
--_label-text-weight: bold; | |
} | |
ha-assist-chip state-badge { | |
justify-content: space-between; | |
margin-left: 4px; | |
} | |
/*.mdc-chip__ripple { | |
border-radius: var(--ha-card-border-radius) !important; | |
}*/ | |
.: | | |
{% set kerst = states('input_select.theme') == 'Kerst' %} | |
ha-card.class-header-margin-no-color .card-header { | |
font-weight: 400; | |
font-size: 20px; | |
padding: 0px 12px; | |
margin: 0px 0px 16px 0px; | |
} | |
ha-card.class-header-margin .card-header { | |
background-color: var(--background-color-off); | |
font-weight: 400; | |
font-size: 20px; | |
color: var(--text-color-off); | |
padding: 0px 12px; | |
margin: 0px 0px 16px 0px; | |
} | |
ha-card.class-header-no-margin-no-color .card-header { | |
font-weight: 400; | |
font-size: 20px; | |
padding: 0px 12px; | |
} | |
ha-card.class-header-no-margin .card-header { | |
background-color: var(--background-color-off); | |
font-weight: 400; | |
font-size: 20px; | |
color: var(--text-color-off); | |
padding: 0px 12px; | |
} | |
ha-card { | |
transition: none !important; | |
overflow: {{'hidden' if is_state('input_boolean.hide_card_overflow','on')}}; | |
background: {{'repeat url("/local/season/kerst_smurfen.png")' if kerst}}; | |
} | |
{{ "ha-card::before | |
{ | |
content: ''; | |
background: top / contain no-repeat url('/local/season/snow.png'); | |
height: 16%; | |
position: absolute; | |
left: -1%; | |
width: 102%; | |
top: -30px; | |
}" | |
if kerst}} | |
# {{ "ha-card::after | |
# { | |
# content: ''; | |
# backdrop-filter: blur(20px); | |
# background: top / contain no-repeat url('/local/season/lightchain.png'); | |
# height: 24%; | |
# position: absolute; | |
# width: 100%; | |
# bottom: 48px; | |
# }" | |
# if kerst }} | |
########################################################################################## | |
# Set the animation of the currently selected tab icon, color and icon itself are/ | |
# set below the .: section to prevent background animation | |
# https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1094 | |
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/5174 | |
# https://github.com/thomasloven/lovelace-card-mod/issues/268 | |
########################################################################################## | |
card-mod-root-yaml: | | |
paper-tab[aria-label='Ventilatoren'] ha-icon$: | | |
ha-svg-icon { | |
animation: {%- if is_state('input_boolean.ventilate','on') %} | |
spin 1s infinite linear; | |
{%- elif is_state('switch.vijverpompen','on') %} | |
spin 3s infinite linear; | |
{%- else %} none; | |
{%- endif %} | |
} | |
@keyframes spin { | |
from {transform:rotate(0deg);} | |
to {transform:rotate(360deg);} | |
} | |
paper-tab[aria-label='Weer'] ha-icon$: | | |
ha-svg-icon { | |
animation: {{'blink 2s ease infinite' if | |
is_state('binary_sensor.meteoalarm_brabant','on') else 'none'}}; | |
} | |
@keyframes blink { | |
50% {opacity: 0.2;} | |
} | |
paper-tab[aria-label='Kalender'] ha-icon$: | | |
ha-svg-icon { | |
animation: {{'spin 3s infinite linear' if | |
is_state('binary_sensor.feest_alerts','on') else 'none'}}; | |
} | |
@keyframes spin { | |
from {transform:rotate(0deg);} | |
to {transform:rotate(360deg);} | |
} | |
paper-tab[aria-label='Feest'] ha-icon$: | | |
ha-svg-icon { | |
animation: {{'spin 3s infinite linear' if | |
is_state('binary_sensor.feest_alerts','on') else 'none'}}; | |
} | |
@keyframes spin { | |
from {transform:rotate(0deg);} | |
to {transform:rotate(360deg);} | |
} | |
paper-tab[aria-label='Water'] ha-icon$: | | |
ha-svg-icon { | |
animation: {{'spin 3s infinite linear' if | |
is_state('binary_sensor.watermeter_leak_detected','on') | |
else 'none'}}; | |
} | |
@keyframes spin { | |
from {transform:rotate(0deg);} | |
to {transform:rotate(360deg);} | |
} | |
paper-tab[aria-label='Summary'] ha-icon$: | | |
ha-svg-icon { | |
{%- if states('sensor.hubs_samenvatting')|int(default=-1) > 0 or | |
states('sensor.kritieke_schakelaars_samenvatting')|int(default=-1) > 0 %} | |
animation: pulse 2s ease 0s infinite normal none; | |
{%- endif %} | |
} | |
@keyframes pulse { | |
0% {opacity: 0.8;transform: scale(0.2);} | |
80% {opacity: 0;transform: scale(1.2);} | |
100% {opacity: 0;transform: scale(2.2);} | |
} | |
.: | | |
{% set kerst = states('input_select.theme') == 'Kerst' %} | |
{% set feest = is_state('binary_sensor.feest_alerts','on') %} | |
{% set lek = is_state('binary_sensor.watermeter_leak_detected','on') %} | |
{% set vent = is_state('input_boolean.ventilate','on') %} | |
{% set pomp = is_state('switch.vijverpompen','on') %} | |
{% set netto = states('sensor.netto_verbruik')|int(default=0) %} | |
{% set meteo = is_state('binary_sensor.meteoalarm_brabant','on') %} | |
{% set alerts = states('sensor.alerts_notifying')|int(default=0) > 0 %} | |
{% set motion = is_state('binary_sensor.motion_sensors_all','on') %} | |
{% set template = is_state('input_boolean.menu_options_template','on') %} | |
{% set temp = states('sensor.buienradar_temperature') %} | |
/* Set the three-dots transparency, to allow replacement template text. */ | |
ha-button-menu { | |
color: {{'transparent' if template}}; | |
} | |
/* Optionally set a replacement template text. */ | |
ha-button-menu::before { | |
content: "{%- set symbol = | |
states('sensor.buienradar_symbol')|truncate(21, False, '') %} | |
{%- if template %} | |
{{- symbol}} | {{temp}} °C | |
{%- endif %}"; | |
color: var(--app-header-text-color); | |
visibility: visible; | |
position: relative; | |
top: 24px; | |
white-space: nowrap; | |
} | |
/* Set the toolbar background. */ | |
.header, .toolbar { | |
background: {% if kerst %} url('/local/wallpapers/snow.mp4') | |
{% elif states('input_select.theme') | |
|regex_search('(ight|Dark|Matrix)') %} | |
radial-gradient(var(--primary-color),var(--card-background-color)) | |
{% else %} var(--primary-color) | |
{% endif %}; | |
color: var(--app-header-text-color)'; | |
} | |
/* Set the color of the currently selected tab indicator. */ | |
ha-tabs { | |
--paper-tabs-selection-bar-color: var(--text-primary-color); | |
} | |
/* Set the color of the currently selected tab indicator. | |
Set size of the currently selected tab icon*/ | |
paper-tab[aria-selected=true] { | |
color: var(--tab-active-color); | |
background-color: rgba(var(--primary),0.3); | |
--mdc-icon-size: {{states('input_number.active_icon_size')}}px; | |
} | |
/* This hides the help button when in edit mode*/ | |
a.menu-link[target="_blank"] { | |
{% if is_state('input_boolean.hide_edit_mode_help','on') %} | |
visibility: hidden; | |
margin-right: -30px; | |
{% endif %} | |
} | |
/* Dynamically set the color and icons of individual tabs. */ | |
paper-tab[aria-label='Wekker instellingen'] { | |
color: {{'green' if is_state('binary_sensor.wekker_voor_morgen','off') else | |
'crimson'}}; | |
} | |
paper-tab[aria-label='Welkom'] { | |
--card-mod-icon: {{'mdi:home-alert' if alerts }}; | |
color: {{'crimson' if alerts else 'green'}}; | |
} | |
paper-tab[aria-label='Summary'] { | |
{%- if states('sensor.hubs_samenvatting')|int(default=-1) > 0 or | |
states('sensor.kritieke_schakelaars_samenvatting')|int(default=-1) > 0 %} | |
--card-mod-icon: mdi:alert; | |
color: var(--alert-color); | |
{%- endif %} | |
} | |
paper-tab[aria-label='Beweging'] { | |
--card-mod-icon: {{'mdi:motion-sensor' if motion}}; | |
color: {{'red' if motion}}; | |
} | |
paper-tab[aria-label='Alarm'] { | |
--card-mod-icon: {{states('sensor.alarm_panel_icon')}}; | |
color: {{states('sensor.alarm_panel_icon_color')}}; | |
} | |
paper-tab[aria-label='Verwarming'] { | |
{%- set hvac = state_attr('climate.voorkamer','hvac_action') %} | |
--card-mod-icon: {%- set icon = | |
{'heating':'radiator','idle':'radiator-disabled'} -%} | |
mdi:{{icon.get(hvac,'radiator-off')}}; | |
color: {%- set color = {'off':'black','heating':'maroon', | |
'cooling':'dodgerblue','auto':'darkgreen'} %} | |
{{color.get(hvac,'')}}; | |
} | |
paper-tab[aria-label='Updates'] { | |
{%- set update = expand(integration_entities('hacs')) | |
|selectattr('state','eq','on')|list|count != 0 or | |
is_state('update.home_assistant_core_update','on') %} | |
--card-mod-icon: mdi:package{{'-up' if update}}; | |
color: {{'red' if update }}; | |
} | |
paper-tab[aria-label='Kalender'] { | |
--card-mod-icon: {{'mdi:party-popper' if feest}}; | |
color: {{'orange' if feest else | |
states('sensor.trash_color') if states('sensor.trash_color') != 'grey' | |
else 'red' if is_state('binary_sensor.wekker_voor_morgen','on')}}; | |
} | |
paper-tab[aria-label='Familie overzicht'] { | |
color: {{states('sensor.presence_color')}}; | |
} | |
paper-tab[aria-label='Feest'] { | |
color: {{'orange' if feest}}; | |
} | |
paper-tab[aria-label='Klimaat'] { | |
color: {{states('sensor.inside_temperature_color_name')}}; | |
} | |
paper-tab[aria-label='Rolluiken'] { | |
--card-mod-icon: mdi:window-shutter{{'-alert' if | |
states('cover.slaapkamers') in ['unknown','unavailable'] | |
else '-open' if is_state('cover.slaapkamers','open')}}; | |
} | |
paper-tab[aria-label='Verlichting'] { | |
--card-mod-icon: mdi:lightbulb-group{{'-off' if | |
is_state('light.all_lights_only','off') }}; | |
color: {{'gold' if states('light.all_inside_lights') == 'on'}}; | |
} | |
paper-tab[aria-label='Weer'] { | |
--card-mod-icon: {%- if meteo %} {{states('sensor.meteoalarm_icon')}} | |
{%- else %} {{states('sensor.weather_icon')}} | |
{%- endif %}; | |
color: {{'maroon' if meteo else states('sensor.temperature_color_name')}}; | |
} | |
paper-tab[aria-label='Energie'] { | |
color: {{'brown' if netto >= 0 else 'gold'}}; | |
} | |
paper-tab[aria-label='Zonne-energie'] { | |
color: {{'gold' if netto < 0}}; | |
} | |
paper-tab[aria-label='Water'] { | |
--card-mod-icon: {{'mdi:pipe-leak' if lek}}; | |
color: {%- if lek %} var(--alert-color) | |
{%- elif is_state('binary_sensor.watermeter_update_available','on') %} | |
blue | |
{%- endif %}; | |
} | |
paper-tab[aria-label='Ventilatoren'] { | |
--card-mod-icon: {{'mdi:fan' if vent else 'mdi:turbine' if pomp}}; | |
color: {%- if vent %} var(--alert-color) | |
{%- elif pomp %} lightseagreen | |
{%- endif %}; | |
} | |
paper-tab[aria-label='Tijd'] { | |
--card-mod-icon: {{state_attr('sensor.hour_icon','icon')}}; | |
color: {{'purple' if is_state('binary_sensor.donker_buiten','on') else | |
'deepskyblue'}}; | |
} | |
card-mod-more-info-yaml: | | |
$: | | |
.mdc-dialog { | |
backdrop-filter: blur(17px) !important; | |
-webkit-backdrop-filter: blur(17px) !important; | |
} | |
/*.mdc-dialog .mdc-dialog__content { | |
padding: var(--dialog-content-padding, 24px); | |
}*/ | |
weather-background: | |
card-mod-theme: weather-background | |
# <<: *card-mod-card | |
<<: *card-mod-card-yaml | |
card-mod-view: | | |
horizontal-layout { | |
{% if is_state('input_boolean.weer_view_background','on') %} | |
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}); | |
{% endif %} | |
} | |
# card-mod-view: | | |
# horizontal-layout { | |
# {% if is_state('input_boolean.weer_view_background','on') %} | |
# background: repeat url('/local/wallpapers/snow.mp4'); | |
# {% endif %} | |
# } | |
seizoen-background: | |
card-mod-theme: seizoen-background | |
# <<: *card-mod-card | |
<<: *card-mod-card-yaml | |
card-mod-view: | | |
vertical-layout { | |
{% set seizoen = states('sensor.season_astronomical') %} | |
background: repeat url('/local/season/{{seizoen}}_2.png'); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
added classes for card-header and a default