Last active
May 6, 2025 12:09
-
-
Save Mariusthvdb/b921fe1503476dbb9cf75415f8f380e8 to your computer and use it in GitHub Desktop.
themes-card-mod
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ########################################################################################## | |
| # 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 badge 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/1236 | |
| # most interface elements are now set using the new Kiosk-mode on | |
| # https://github.com/NemesisRE/kiosk-mode | |
| # using Custom sidebar https://github.com/elchininet/custom-sidebar/discussions/163 | |
| # last_update 20241017 using HA 2024.10.2 and card_mod 3.4.3 | |
| ########################################################################################## | |
| theme-mods: | |
| # card-mod-view-yaml: | | |
| # | |
| # hui-sections-view: | |
| # $: | |
| # hui-view-badges: | |
| # $: | |
| # ha-sortable: | | |
| # div.badges { | |
| # background: red; | |
| # margin-bottom: -16px !important; | |
| # } | |
| # hui-sections-view $: | | |
| # hui-view-badges { | |
| # margin-bottom: 0px !important; | |
| # background-color: yellow; | |
| # } | |
| # 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 { | |
| # --card-mod-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; | |
| # --card-mod-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-view: | | |
| # {% set meteo = is_state('binary_sensor.meteoalarm_brabant','on') %} | |
| # {% set weeralarm = states('sensor.weer_alarm_kleur') %} | |
| # | |
| # /*vertical-layout { | |
| # {% if meteo %} background: {{weeralarm}}; | |
| # {% endif %} | |
| # }*/ | |
| # /*hui-sections-view { | |
| # {% if meteo %} background: {{weeralarm}}; | |
| # {% endif %} | |
| # }*/ | |
| card-mod-glance: | | |
| :host { | |
| transition: none !important; | |
| } | |
| ########################################################################################## | |
| # to align notification badges on their right side (with the core notification use | |
| # left: calc(var(--app-drawer-width,248px) - 22px); | |
| # transform: translateX(-100%); | |
| # -32px aligns with the middle of the core notification badge, and around that the | |
| # translateX(-50%) centers. | |
| # no more use of complex calculations based on string length in notification. | |
| ########################################################################################## | |
| card-mod-sidebar-yaml: | | |
| .: | | |
| /*a:hover paper-icon-item ha-icon { | |
| color: var(--alert-color) !important; | |
| }*/ | |
| a:hover paper-icon-item .item-text{ | |
| color: var(--primary-color); | |
| } | |
| a:hover paper-icon-item { | |
| background: var(--hover-color); | |
| } | |
| {% set x = ['unknown','unavailable'] %} | |
| {% set afval = states('sensor.afvalwijzer_vandaag')|capitalize %} | |
| {% set alerts = states('sensor.alerts_notifying')|int(0) > 0 %} | |
| {% set beweging_buiten = is_state('binary_sensor.camera_beweging_buiten','on') %} | |
| {% set core = is_state('update.home_assistant_core_update','on') %} | |
| {% set familie = states('sensor.familie_samenvatting') %} | |
| {% set feest = is_state('binary_sensor.feest_alerts','on') %} | |
| {% set gereed = is_state('binary_sensor.huis_ramen_deuren_puien_veilig','on') %} | |
| {% set gevaar = is_state('binary_sensor.rook_co_lekkage','on') %} | |
| {% set kerst = is_state('input_select.theme','Kerst') %} | |
| {% set lek = is_state('binary_sensor.watermeter_leak_detected','on') %} | |
| {% set meteo = is_state('binary_sensor.meteoalarm_brabant','on') %} | |
| {% set netto = states('sensor.netto_verbruik')|int(0) >= 0 %} | |
| {% set vent = is_state('input_boolean.ventilate','on') %} | |
| {% set weeralarm = states('sensor.weer_alarm_kleur') %} | |
| @keyframes marquee { | |
| from {transform: translateX(0%);} | |
| to {transform: translateX(35%);} | |
| } | |
| @keyframes blink { | |
| 50% {opacity: 0.2;} | |
| } | |
| @keyframes blinkhard { | |
| 0%,49% {opacity:0;} | |
| 50%,100% {opacity:1;} | |
| } | |
| @keyframes spin { | |
| from {transform:rotate(0deg);} | |
| to {transform:rotate(360deg);} | |
| } | |
| {% set style_badge_generic %} | |
| position: absolute; | |
| min-width: 20px; | |
| box-sizing: border-box; | |
| border-radius: 24px; | |
| font-weight: 400; | |
| line-height: 20px; | |
| text-align: center; | |
| {% endset %} | |
| {% set style_badge_expanded %} | |
| {{style_badge_generic }} | |
| left: calc(var(--app-drawer-width,248px) - 32px); | |
| font-size: 14px; | |
| padding: 0px 6px; | |
| transform: translateX(-50%); | |
| {% endset %} | |
| {% set style_badge_not_expanded %} | |
| {{style_badge_generic }} | |
| left: 26px; | |
| font-size: 0.65em; | |
| bottom: 14px; | |
| padding: 0px 2px; | |
| transform: translateX(-25%); | |
| {% endset %} | |
| {% set style_secondary %} | |
| font-size: 11px; | |
| white-space: pre; | |
| display: block; | |
| line-height: 11px; | |
| {% endset %} | |
| :host { | |
| background: {% if meteo %} {{weeralarm}} !important | |
| {% elif kerst %} url(/local/season/kerst_smurfen.png) | |
| {% endif %}; | |
| } | |
| /*.menu { | |
| {{'pointer-events: none' if is_state('input_boolean.hide_menubutton','on')}}; | |
| }*/ | |
| /* now in custom: sidebar-config*/ | |
| .menu { | |
| background: {% if feest %} top / cover url(/local/images/balloons.png) {% endif %} | |
| } | |
| .menu ha-icon-button { | |
| color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}} !important; | |
| } | |
| :host(:not([expanded])) .menu ha-icon-button:after { | |
| content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %} {{m_alerts if m_alerts > 0 }}"; | |
| {{style_badge_not_expanded}} | |
| display: block; | |
| color: ivory; | |
| background: var(--alert-color); | |
| } | |
| .menu .title { | |
| color: {{states('sensor.presence_color')}}; | |
| } | |
| .menu .title:after { | |
| content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %} | |
| {%- set phrase = 'Alert: ' if m_alerts == 1 else 'Alerts:' -%} | |
| {{phrase ~ m_alerts if m_alerts > 0 }}"; | |
| white-space: pre; | |
| font-size: 12px; | |
| font-weight: bold; | |
| display: block; | |
| color: var(--alert-color); | |
| animation: marquee 4s alternate infinite; | |
| } | |
| a[data-panel='ui-overzicht'] paper-icon-item ha-icon { | |
| --card-mod-icon: {{'mdi:home-alert' if alerts else 'cli:home-check'}}; | |
| color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}}; | |
| } | |
| a[data-panel='ui-overzicht'] paper-icon-item { | |
| {% if lek %} | |
| --sidebar-text-color: blue; | |
| background: lightblue; | |
| animation: blink 2.5s ease infinite; | |
| {% endif %} | |
| } | |
| a[data-panel='ui-overzicht'] paper-icon-item:after { | |
| {%- set temp = states('sensor.ws_5500_outdoor_temperature') %} | |
| content: "{{'?' if temp in x else temp}}"; | |
| {{style_badge_expanded}} | |
| background: {{states('sensor.temperature_color_name')}}; | |
| color: {{'dimgray' if 5 < temp|int(0) < 15 else 'ivory'}}; | |
| } | |
| :host(:not([expanded])) a[data-panel='ui-overzicht'] paper-icon-item ha-icon:after { | |
| content: "{{'?' if temp in x else temp}}"; | |
| {{style_badge_not_expanded}} | |
| background: {{states('sensor.temperature_color_name')}}; | |
| color: {{'dimgray' if 5 < temp|int(0) < 15 else 'ivory'}}; | |
| } | |
| /*a[data-panel='ui-overzicht'] paper-icon-item .item-text:after { | |
| content: "☕ {{states('input_select.activiteit')}} - {{states('sensor.buienradar_barometer')}}"; | |
| {{style_secondary}} | |
| }*/ | |
| a[data-panel='ui-data'] paper-icon-item ha-icon { | |
| --card-mod-icon: {{'mdi:pipe-leak' if lek}}; | |
| color: {{'var(--alert-color)' if gevaar else 'var(--ok-color)'}}; | |
| animation: {{'spin 3s infinite linear' if lek else 'none'}}; | |
| } | |
| /* different animation when not expanded because of spinning badge */ | |
| :host(:not([expanded])) a[data-panel='ui-data'] paper-icon-item ha-icon { | |
| animation: {{'blink 2.5s ease infinite' if lek else 'none'}}; | |
| } | |
| a[data-panel='ui-data'] paper-icon-item:after { | |
| {%- set rook = 'binary_sensor.rook_co_lekkage' %} | |
| content: "{{'?' if gevaar in x else state_translated(rook)}}"; | |
| {{style_badge_expanded}} | |
| background: {{'var(--alert-color)' if gevaar else 'var(--ok-color)'}}; | |
| color: ivory; | |
| } | |
| :host(:not([expanded])) a[data-panel='ui-data'] paper-icon-item ha-icon:after { | |
| content: "{{state_translated(rook)}}"; | |
| {{style_badge_not_expanded}} | |
| transform: {{'translateX(-45%)' if gevaar}}; | |
| background: {{'var(--alert-color)' if gevaar else 'var(--ok-color)'}}; | |
| color: ivory; | |
| } | |
| /*a[data-panel='ui-data'] paper-icon-item .item-text:after { | |
| {% set ophaal = 'Afval: ' ~ afval if afval != 'Geen' %} | |
| content: "🏡 {{ophaal}}"; | |
| {{style_secondary}} | |
| color: {{states('sensor.afval_kleur')}}; | |
| }*/ | |
| 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,spin 3s infinite linear' if feest | |
| else 'none'}}; | |
| } | |
| /* different animation when not expanded because of spinning badge */ | |
| :host(:not([expanded])) a[data-panel='ui-familie'] paper-icon-item ha-icon { | |
| animation: {{'blink 2.5s ease infinite' if feest else 'none'}}; | |
| } | |
| a[data-panel='ui-familie'] paper-icon-item:after { | |
| content: "{{'?' if familie in x else familie}}"; | |
| {{style_badge_expanded}} | |
| background: {{states('sensor.presence_color')}}; | |
| color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' | |
| else 'ivory'}}; | |
| } | |
| :host(:not([expanded])) a[data-panel='ui-familie'] paper-icon-item ha-icon:after { | |
| content: "{{'?' if familie in x else familie}}"; | |
| {{style_badge_not_expanded}} | |
| background: {{states('sensor.presence_color')}}; | |
| color: {{'saddlebrown' if states('sensor.presence_color') == 'gold' | |
| else 'ivory'}}; | |
| } | |
| /*a[data-panel='ui-familie'] paper-icon-item .item-text:after { | |
| content: "🎂 {{states('sensor.dagen_tot_volgende_feest')}}"; | |
| {{style_secondary}} | |
| color: {{'orange' if feest else 'var(--ok-color)'}}; | |
| }*/ | |
| 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: {{'blink 2s ease infinite' if vent else 'none'}}; | |
| } | |
| a[data-panel='ui-instellingen'] paper-icon-item:after { | |
| {%- set check = is_state('binary_sensor.wekker_voor_morgen','on') %} | |
| {%- set wekker = states('sensor.next_alarm') %} | |
| {% set content = wekker if check %} | |
| content: "{{'?' if content in x else content}}"; | |
| {{style_badge_expanded}} | |
| background: {{'var(--alert-color)' if check}}; | |
| color: ivory; | |
| } | |
| :host(:not([expanded])) a[data-panel='ui-instellingen'] paper-icon-item ha-icon:after { | |
| content: "{{'?' if content in x else content}}"; | |
| {{style_badge_not_expanded}} | |
| background: {{'var(--alert-color)' if check}}; | |
| color: ivory; | |
| } | |
| /*a[data-panel='ui-instellingen'] paper-icon-item .item-text:after { | |
| content: "⏰ Beveiliging {{'Gereed' if gereed else 'Niet gereed'}}"; | |
| {{style_secondary}} | |
| color: {{'var(--ok-color)' if gereed else 'var(--warning-color)'}} | |
| }*/ | |
| a[data-panel='ui-develop'] paper-icon-item ha-icon { | |
| --card-mod-icon: {{'mdi:package-up' if core else 'mdi:home-assistant'}}; | |
| color: {{'var(--alert-color)' if states('sensor.memory_use_percent')|int(0) > 30 | |
| or core else 'var(--ha-color)'}}; | |
| animation: {{'blink 2s ease infinite' if core else 'none'}}; | |
| } | |
| a[data-panel='ui-develop'] paper-icon-item:after { | |
| {%- set percent = states('sensor.memory_use_percent') %} | |
| content: "{{'?' if percent in x else percent}}"; | |
| {{style_badge_expanded}} | |
| background: {{'var(--alert-color)' if percent|int(0) > 25 else 'var(--ha-color)'}}; | |
| color: ivory; | |
| } | |
| :host(:not([expanded])) a[data-panel='ui-develop'] paper-icon-item ha-icon:after { | |
| content: "{{'?' if percent in x else percent}}"; | |
| {{style_badge_not_expanded}} | |
| background: {{'var(--alert-color)' if percent|int(0) > 25 else 'var(--ha-color)'}}; | |
| color: ivory; | |
| } | |
| /*a[data-panel='ui-develop'] paper-icon-item .item-text:after { | |
| content: "☁️ Cloud {{state_translated('binary_sensor.remote_ui')}}"; | |
| {{style_secondary}} | |
| color: {{'var(--ok-color)' if is_state('binary_sensor.remote_ui','off') | |
| else 'var(--warning-color)'}} | |
| }*/ | |
| a[data-panel='ui-cctv'] paper-icon-item { | |
| {% if beweging_buiten %} | |
| --sidebar-text-color: blue; | |
| background: var(--alert-color); | |
| animation: blink 2.5s ease infinite; | |
| {% endif %} | |
| } | |
| 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)'}}; | |
| } | |
| a[data-panel='ui-cctv'] paper-icon-item:after { | |
| content: "{{'Actie' if beweging_buiten else 'Rust'}}"; | |
| {{style_badge_expanded}} | |
| background: {{'var(--alert-color)' if beweging_buiten else 'var(--ok-color)'}}; | |
| color: ivory; | |
| } | |
| /*a[data-panel='ui-cctv'] paper-icon-item .item-text:after { | |
| content: "📺 {{'Actie' if beweging_buiten else 'Rust'}}"; | |
| color: {{'var(--alert-color)' if beweging_buiten else 'var(--ok-color)'}}; | |
| {{style_secondary}} | |
| }*/ | |
| :host(:not([expanded])) a[data-panel='ui-cctv'] paper-icon-item ha-icon:after { | |
| content: "{{'Actie' if beweging_buiten else 'Rust'}}"; | |
| {{style_badge_not_expanded}} | |
| background: {{'var(--alert-color)' if beweging_buiten else 'var(--ok-color)'}}; | |
| color: ivory; | |
| } | |
| a[data-panel='energy'] paper-icon-item ha-svg-icon { | |
| --card-mod-icon: {{'mdi:home-lightning-bolt-outline' if netto else 'mdi:home-lightning-bolt'}}; | |
| color: {{'saddlebrown' if netto else 'var(--power-color)'}}; | |
| } | |
| a[data-panel='energy'] paper-icon-item:after { | |
| {%- set power = states('sensor.netto_verbruik') %} | |
| content: "{{'?' if power in x else power}}"; | |
| {{style_badge_expanded}} | |
| background: {{'saddlebrown' if power|int(0) >= 0 else 'var(--power-color)'}}; | |
| color: ivory; | |
| } | |
| :host(:not([expanded])) a[data-panel='energy'] paper-icon-item ha-svg-icon:after { | |
| content: "{{'?' if power in x else power}}"; | |
| {{style_badge_not_expanded}} | |
| transform: translateX(-70%); | |
| background: {{'saddlebrown' if power|int(0) >= 0 else 'var(--power-color)'}}; | |
| color: ivory; | |
| } | |
| /*a[data-panel='energy'] paper-icon-item .item-text:after { | |
| content: "⚡ {{'Levering' if power|int(0) < 0 else 'Verbruik'}}"; | |
| {{style_secondary}} | |
| color: {{'var(--power-color)' if power|int(0) < 0 else 'saddlebrown'}} | |
| }*/ | |
| # :host(:not([expanded])) a[data-panel='ui-cctv'] paper-icon-item ha-icon:after { | |
| # transform: translateX(-100%) !important; | |
| # } | |
| # not reliable | |
| # 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) | |
| # https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2458 | |
| <<: &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; | |
| } | |
| .: | | |
| {% set kerst = is_state('input_select.theme','Kerst') %} | |
| ha-card.class-header-icon .card-header .icon { | |
| padding-left: 0px; | |
| padding-right: 4px; | |
| } | |
| 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-section-heading .container { | |
| background: var(--background-color-off); | |
| --ha-heading-card-title-color: var(--text-color-off) !important; | |
| --ha-heading-card-title-font-size: 20px !important; | |
| --ha-heading-card-title-font-weight: 400; | |
| height: 24px; | |
| padding: 12px 8px 12px 12px; | |
| } | |
| ha-card.class-section-heading-no-color .container { | |
| /*background: var(--background-color-off);*/ | |
| /*--ha-heading-card-title-color: var(--text-color-off) !important;*/ | |
| --ha-heading-card-title-font-size: 20px !important; | |
| --ha-heading-card-title-font-weight: 400; | |
| height: 24px; | |
| padding: 12px 8px 12px 12px; | |
| } | |
| ha-card.class-header-margin .card-header { | |
| background: 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: 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 { | |
| transition: opacity 0.5s; | |
| animation: {{'spin 1s infinite linear' if is_state('input_boolean.ventilate','on') | |
| else 'none'}} | |
| } | |
| @keyframes spin { | |
| from {transform:rotate(0deg);} | |
| to {transform:rotate(360deg);} | |
| } | |
| paper-tab[aria-label='Vijver'] ha-icon$: | | |
| ha-svg-icon { | |
| animation: {{'spin 3s infinite linear' if is_state('switch.vijverpompen','on') | |
| else 'none'}}; | |
| } | |
| @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$: | | |
| {% set lek = is_state('binary_sensor.watermeter_leak_detected','on') %} | |
| ha-svg-icon { | |
| animation: {{'spin 3s infinite linear' if lek else 'none'}}; | |
| } | |
| @keyframes spin { | |
| from {transform:rotate(0deg);} | |
| to {transform:rotate(360deg);} | |
| } | |
| paper-tab[aria-label='Samenvatting'] ha-icon$: | | |
| ha-svg-icon { | |
| {%- if states('sensor.hubs_samenvatting')|int(-1) > 0 or | |
| states('sensor.kritieke_schakelaars_samenvatting')|int(-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 = is_state('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(0) %} | |
| {% set meteo = is_state('binary_sensor.meteoalarm_brabant','on') %} | |
| {% set alerts = states('sensor.alerts_notifying')|int(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.ws_5500_outdoor_temperature',with_unit=True) %} | |
| {% set wekker = is_state('binary_sensor.wekker_voor_morgen','on') %} | |
| {% set donker_thema = is_state('binary_sensor.donker_thema','on') %} | |
| /* 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}} | |
| {%- 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 donker_thema %} | |
| 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(--tab-active-color) !important; | |
| } | |
| paper-tab:hover { | |
| color: var(--primary-color); | |
| background: var(--hover-color); | |
| } | |
| /* alternative way to color active tab */ | |
| /*paper-tab.iron-selected { | |
| color: white; | |
| background: lightgreen; | |
| }*/ | |
| /* 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: rgba(var(--primary),0.5); | |
| --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: {{'var(--alert-color)' if wekker else 'var(--ok-color)'}}; | |
| } | |
| paper-tab[aria-label='Welkom'] { | |
| --card-mod-icon: {{'mdi:home-alert' if alerts }}; | |
| /*background: url('/local/devices/hue_home.png');*/ | |
| color: {{'var(--alert-color)' if alerts else 'var(--ok-color)'}}; | |
| } | |
| paper-tab[aria-label='Samenvatting'] { | |
| {%- if states('sensor.hubs_samenvatting')|int(-1) > 0 or | |
| states('sensor.kritieke_schakelaars_samenvatting')|int(-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: {{'var(--alert-color)' 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 = integration_entities('hacs') | |
| |select('is_state','off')|list|count != 0 or | |
| is_state('update.home_assistant_core_update','on') %} | |
| --card-mod-icon: mdi:package{{'-up' if update}}; | |
| color: {{'var(--alert-color)' if update }}; | |
| } | |
| paper-tab[aria-label='Kalender'] { | |
| --card-mod-icon: {{'mdi:party-popper' if feest}}; | |
| color: {{'orange' if feest else | |
| states('sensor.afval_kleur') if states('sensor.afval_kleur') != 'gray' | |
| else 'var(--alert-color)' if wekker}}; | |
| } | |
| 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'] { | |
| {% set lampen = states('light.alle_lampen_individueel') %} | |
| --card-mod-icon: mdi:lightbulb-group{{'-off' if lampen == 'off' }}; | |
| color: {{'var(--active-color)' if lampen == 'on' }}; | |
| } | |
| paper-tab[aria-label='Weer'] { | |
| --card-mod-icon: {{states('sensor.meteoalarm_icon') | |
| if meteo else states('sensor.weather_icon')}}; | |
| color: {{'var(--alert-color)' if meteo else | |
| states('sensor.temperature_color_name')}}; | |
| } | |
| paper-tab[aria-label='Energie'] { | |
| color: {{'brown' if netto >= 0 else 'var(--power-color)'}}; | |
| } | |
| paper-tab[aria-label='Zonne-energie'] { | |
| color: {{'var(--power-color)' 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'] { | |
| color: {{'var(--alert-color)' if vent }}; | |
| } | |
| paper-tab[aria-label='Vijver'] { | |
| color: {{'lightseagreen' if pomp}}; | |
| } | |
| paper-tab[aria-label='Tijd'] { | |
| --card-mod-icon: {{state_attr('sensor.hour_icon','icon')}}; | |
| color: {{'var(--state-sun-below_horizon-color)' | |
| if is_state('binary_sensor.donker_buiten','on') else | |
| 'deepskyblue'}}; | |
| } | |
| paper-tab[aria-label='Home Assistant'] { | |
| color: var(--ha-color); | |
| } | |
| 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: &cam_background | |
| | | |
| vertical-layout { | |
| {% if is_state('input_boolean.weer_view_background','on') %} | |
| background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed; | |
| {% endif %} | |
| } | |
| hui-sections-view { | |
| {% if is_state('input_boolean.weer_view_background','on') %} | |
| background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed; | |
| {% endif %} | |
| } | |
| card-mod-subview: *cam_background | |
| # card-mod-view: | | |
| # horizontal-layout { | |
| # {% if is_state('input_boolean.weer_view_background','on') %} | |
| # background: repeat url('/local/wallpapers/snow.mp4'); | |
| # {% endif %} | |
| # } | |
| feest-background: | |
| card-mod-theme: feest-background | |
| # <<: *card-mod-card | |
| <<: *card-mod-card-yaml | |
| card-mod-view: | | |
| {% set feest = is_state('binary_sensor.feest_alerts','on') %} | |
| vertical-layout { | |
| {% if feest %} | |
| background: repeat url('/local/images/balloons.png') fixed; | |
| {% endif %} | |
| } | |
| hui-sections-view { | |
| {% if feest %} | |
| background: repeat url('/local/images/balloons.png') fixed; | |
| {% 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') fixed; | |
| } | |
| hui-sections-view { | |
| {% set seizoen = states('sensor.season_astronomical') %} | |
| background: repeat url('/local/season/{{seizoen}}_2.png') fixed; | |
| } | |
| map-background: | |
| card-mod-theme: map-background | |
| # <<: *card-mod-card | |
| <<: *card-mod-card-yaml | |
| card-mod-view: | | |
| /*vertical-layout { | |
| {% set dark = is_state('binary_sensor.donker_thema','on') %} | |
| {% set flt = | |
| 'invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)' %}; | |
| background: center/cover no-repeat url('/local/wallpapers/map.png') fixed; | |
| filter: {{flt if not dark else 'none'}}; | |
| }*/ | |
| vertical-layout { | |
| background: | |
| {% set dark = is_state('binary_sensor.donker_thema','on') %} | |
| {% set extension = '_dark' if dark else '' %} | |
| center/cover no-repeat url('/local/wallpapers/map{{extension}}.png') fixed; | |
| } | |
| hui-sections-view { | |
| background: | |
| {% set dark = is_state('binary_sensor.donker_thema','on') %} | |
| {% set extension = '_dark' if dark else '' %} | |
| center/cover no-repeat url('/local/wallpapers/map{{extension}}.png') fixed; | |
| } | |
| hui-masonry-view { | |
| background: | |
| {% set dark = is_state('binary_sensor.donker_thema','on') %} | |
| {% set extension = '_dark' if dark else '' %} | |
| center/cover no-repeat url('/local/wallpapers/map{{extension}}.png') fixed; | |
| } | |
| # filter: "invert(.9) hue-rotate(170deg) brightness(1.5) contrast(1.2) saturate(.3)" | |
| # {{ "center / cover no-repeat url('/local/images/areas/plattegrond_inversed.png') fixed" | |
| # if states('input_select.theme') is search('ight|Dark|Matrix', ignorecase=True) | |
| # else | |
| # "center / cover no-repeat url('/local/images/areas/plattegrond.png') fixed" }}; | |
| # } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment