From ce8d96b6ac073595b6ec8c219bb0dfe0ea1594c5 Mon Sep 17 00:00:00 2001 From: Nerwyn Singh Date: Fri, 8 Nov 2024 19:39:38 -0500 Subject: [PATCH] remove footer-height and make any references to it directly calculate it from header-height instead, to work add-ons like kiosk mode that hide the header toolbar --- src/common/ha_fab.css | 2 +- src/common/root.css | 2 +- src/common/view.css | 3 +-- src/material_rounded/theme.yaml | 1 - themes/material_rounded.yaml | 18 +++--------------- 5 files changed, 6 insertions(+), 20 deletions(-) diff --git a/src/common/ha_fab.css b/src/common/ha_fab.css index b8e3967..bbf9003 100644 --- a/src/common/ha_fab.css +++ b/src/common/ha_fab.css @@ -1,6 +1,6 @@ /* Fix add card button position */ :host { - bottom: calc(var(--footer-height) + 16px) !important; + bottom: calc(var(--header-height) / 0.6 + 16px) !important; z-index: 3 !important; } diff --git a/src/common/root.css b/src/common/root.css index 678c05c..75ab428 100644 --- a/src/common/root.css +++ b/src/common/root.css @@ -5,7 +5,7 @@ ha-tabs { top: unset !important; bottom: 0 !important; background: var(--navbar-background) !important; - height: var(--footer-height) !important; + height: calc(var(--header-height) / 0.6) !important; width: calc(100% - var(--mdc-drawer-width, 0px)); padding-bottom: env(safe-area-inset-bottom) !important; margin: 0 !important; diff --git a/src/common/view.css b/src/common/view.css index 22ab8a0..f9f18d1 100644 --- a/src/common/view.css +++ b/src/common/view.css @@ -1,6 +1,5 @@ /* Add padding to sides of viewbox and force background color just in case */ #view { - padding-top: calc(40px + env(safe-area-inset-top)) !important; padding-left: calc(12px + env(safe-area-inset-left)) !important; padding-right: calc(12px + env(safe-area-inset-right)) !important; background: var(--view-background, var(--lovelace-background)) !important; @@ -9,6 +8,6 @@ /* Add bottom footer padding when present */ .header:has(ha-tabs, paper-tabs) + #view { padding-bottom: calc( - var(--footer-height) + env(safe-area-inset-bottom) + calc(var(--header-height) / 0.6) + env(safe-area-inset-bottom) ) !important; } diff --git a/src/material_rounded/theme.yaml b/src/material_rounded/theme.yaml index 3671e6d..505846a 100644 --- a/src/material_rounded/theme.yaml +++ b/src/material_rounded/theme.yaml @@ -53,7 +53,6 @@ Material Rounded: # Toolbar paper-slider-height: 4px header-height: 48px - footer-height: 80px mdc-top-app-bar-fixed-box-shadow: none app-header-background-color: var(--lovelace-background) app-header-text-color: var(--primary-text-color) diff --git a/themes/material_rounded.yaml b/themes/material_rounded.yaml index c79ae7c..7b6ae42 100644 --- a/themes/material_rounded.yaml +++ b/themes/material_rounded.yaml @@ -14,15 +14,15 @@ Material Rounded: !important;\\n}\"\nha-more-info-info$ state-card-content$ state-card-toggle$ ha-entity-toggle$ ha-switch$: :host{padding:0!important;position:relative;top:3px;--switch-checked-button-color:var(--md-switch-checked-button-color);--switch-checked-track-color:var(--md-switch-checked-track-color);--switch-unchecked-button-color:var(--md-switch-unchecked-button-color);--switch-unchecked-track-color:var(--md-switch-unchecked-track-color)}.mdc-switch__track{height:32px!important;width:52px!important;border-radius:32px!important;opacity:1!important;border:2px solid gray!important;--border-color:var(--md-switch-unchecked-button-color)}.mdc-switch--checked .mdc-switch__track{border:none!important}.mdc-switch__thumb-underlay{top:-8px!important;left:var(--thumb-left-on,var(--thumb-left-off))!important;--thumb-left-off:-8px}.mdc-switch--checked .mdc-switch__thumb-underlay{--thumb-left-on:-4px}.mdc-switch__thumb{height:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;width:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;background:var(--md-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--md-switch-checked-button-color)!important;--thumb-size-on:24px}.mdc-switch__thumb:active{transition:width 0.2s cubic-bezier(0.2,0,0,1)!important;--thumb-size-active:28px!important}mwc-ripple{display:none!important}\nha-more-info-settings$:\n entity-registry-settings$ entity-registry-settings-editor$ ha-switch$: :host{padding:0!important;position:relative;top:3px;--switch-checked-button-color:var(--md-switch-checked-button-color);--switch-checked-track-color:var(--md-switch-checked-track-color);--switch-unchecked-button-color:var(--md-switch-unchecked-button-color);--switch-unchecked-track-color:var(--md-switch-unchecked-track-color)}.mdc-switch__track{height:32px!important;width:52px!important;border-radius:32px!important;opacity:1!important;border:2px solid gray!important;--border-color:var(--md-switch-unchecked-button-color)}.mdc-switch--checked .mdc-switch__track{border:none!important}.mdc-switch__thumb-underlay{top:-8px!important;left:var(--thumb-left-on,var(--thumb-left-off))!important;--thumb-left-off:-8px}.mdc-switch--checked .mdc-switch__thumb-underlay{--thumb-left-on:-4px}.mdc-switch__thumb{height:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;width:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;background:var(--md-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--md-switch-checked-button-color)!important;--thumb-size-on:24px}.mdc-switch__thumb:active{transition:width 0.2s cubic-bezier(0.2,0,0,1)!important;--thumb-size-active:28px!important}mwc-ripple{display:none!important}\n entity-settings-helper-tab$ entity-registry-settings-editor$ ha-switch$: :host{padding:0!important;position:relative;top:3px;--switch-checked-button-color:var(--md-switch-checked-button-color);--switch-checked-track-color:var(--md-switch-checked-track-color);--switch-unchecked-button-color:var(--md-switch-unchecked-button-color);--switch-unchecked-track-color:var(--md-switch-unchecked-track-color)}.mdc-switch__track{height:32px!important;width:52px!important;border-radius:32px!important;opacity:1!important;border:2px solid gray!important;--border-color:var(--md-switch-unchecked-button-color)}.mdc-switch--checked .mdc-switch__track{border:none!important}.mdc-switch__thumb-underlay{top:-8px!important;left:var(--thumb-left-on,var(--thumb-left-off))!important;--thumb-left-off:-8px}.mdc-switch--checked .mdc-switch__thumb-underlay{--thumb-left-on:-4px}.mdc-switch__thumb{height:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;width:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;background:var(--md-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--md-switch-checked-button-color)!important;--thumb-size-on:24px}.mdc-switch__thumb:active{transition:width 0.2s cubic-bezier(0.2,0,0,1)!important;--thumb-size-active:28px!important}mwc-ripple{display:none!important}\nha-more-info-view-voice-assistants$ entity-voice-settings$ ha-switch$: :host{padding:0!important;position:relative;top:3px;--switch-checked-button-color:var(--md-switch-checked-button-color);--switch-checked-track-color:var(--md-switch-checked-track-color);--switch-unchecked-button-color:var(--md-switch-unchecked-button-color);--switch-unchecked-track-color:var(--md-switch-unchecked-track-color)}.mdc-switch__track{height:32px!important;width:52px!important;border-radius:32px!important;opacity:1!important;border:2px solid gray!important;--border-color:var(--md-switch-unchecked-button-color)}.mdc-switch--checked .mdc-switch__track{border:none!important}.mdc-switch__thumb-underlay{top:-8px!important;left:var(--thumb-left-on,var(--thumb-left-off))!important;--thumb-left-off:-8px}.mdc-switch--checked .mdc-switch__thumb-underlay{--thumb-left-on:-4px}.mdc-switch__thumb{height:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;width:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;background:var(--md-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--md-switch-checked-button-color)!important;--thumb-size-on:24px}.mdc-switch__thumb:active{transition:width 0.2s cubic-bezier(0.2,0,0,1)!important;--thumb-size-active:28px!important}mwc-ripple{display:none!important}" card-mod-root-yaml: ".: \"{# https://gist.github.com/mjackson/5311256 #}\\n{%- macro hex2hsl(hex) -%}\\n {%- if hex[0] == \\\"#\\\" -%}\\n {%- set hex = hex[1:] -%}\\n {%- endif -%}\\n {%- set r = (hex[0:2] | int(hex[0:2],16))/255 -%}\\n {%- set g = (hex[2:4] | int(hex[2:4],16))/255 -%}\\n {%- set b = (hex[4:6] | int(hex[4:6],16))/255 -%}\\n {%- set rgb_max = [r, g, b] | max -%}\\n {%- set rgb_min = [r, g, b] | min -%}\\n {%- set l = (rgb_max + rgb_min) / 2 -%}\\n {%- if rgb_max != rgb_min -%}\\n {%- set d = rgb_max - rgb_min -%}\\n {%- set s = d / (2 - rgb_max - rgb_min) if l > 0.5 else d / (rgb_max + rgb_min) -%}\\n {%- if r == rgb_max -%}\\n {%- set h = (g - b) / d + (6 if g < b else 0) -%}\\n {%- elif g == rgb_max -%}\\n {%- set h = (b - r) / d + 2 -%}\\n {%- elif b == rgb_max -%}\\n {%- set h = (r - g) / d + 4 -%}\\n {%- endif -%}\\n {%- set h = h / 6 -%}\\n {%- endif -%}\\n {%- set h = (h * 360) | int if h else 0 -%}\\n {%- set s = (s * 100) | int if s else 0 -%}\\n {%- set l = (l * 100) | int if l else 0 -%}\\n {{ h }},{{ s }},{{ l }}\\n{%- endmacro -%} :host {\\n\\t{%- set id = \\\"_\\\" + user | lower | replace(\\\" \\\",\\\"_\\\") -%}\\n\\t{%- set base_color = \\\"\\\" -%}\\n\\n\\t{%- if has_value(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- elif has_value(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- endif -%}\\n\\n\\t{%- if (base_color | length) in [6, 7] -%}\\n\\t{%- set hsl = hex2hsl(base_color).split(',') -%}\\n\\t\\n\\t{# accent color #}\\n\\t--accent-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\n\\t{# primary color #}\\n\\t--primary-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--primary-luminance));\\n\\t--text-accent-color: var(--primary-color);\\n\\t--link-text-color: var(--primary-color);\\n\\t--dark-primary-color: var(--primary-color);\\n\\t--light-primary-color: var(--primary-color);\\n \\t--slider-secondary-color: var(--primary-color);\\n\\t--mdc-theme-primary: var(--primary-color);\\n\\t--mdc-theme-secondary: var(--primary-color);\\n\\t--sidebar-selected-text-color: var(--primary-color);\\n\\t--sidebar-selected-icon-color: var(--primary-color);\\n\\t--paper-slider-knob-color: var(--primary-color);\\n\\t--paper-slider-knob-start-color: var(--primary-color);\\n\\t--paper-slider-pin-color: var(--primary-color);\\n\\t--paper-slider-active-color: var(--primary-color);\\n\\t--paper-slider-secondary-color: var(--primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--primary-color);\\n\\t--mdc-text-field-hover-line-color: var(--primary-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--primary-color);\\n\\n\\t--slider-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 91%),\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 33%),\\n\\t);\\n\\t--md-switch-checked-button-color: light-dark(\\n\\t\\thsl(0, 0%, 100%),\\n\\t\\tvar(--accent-color)\\n\\t);\\n\\t--md-switch-checked-track-color: light-dark(\\n\\t\\thsl({{ hsl[0] }}, {{ hsl[1] }}%, 30%),\\n\\t\\tvar(--primary-color)\\n\\t);\\n\\t--md-switch-unchecked-button-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 0%, 50%),\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 3%, 60%)\\n\\t);\\n\\t--md-switch-unchecked-track-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 90%),\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 29%)\\n\\t);\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--md-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--md-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: var(--md-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--md-switch-unchecked-track-color) - !important;\\n} paper-tabs,ha-tabs{position:fixed;top:unset!important;bottom:0!important;background:var(--navbar-background)!important;height:var(--footer-height)!important;width:calc(100% - var(--mdc-drawer-width,0px));padding-bottom:env(safe-area-inset-bottom)!important;margin:0!important;margin-inline:0!important}.header{background-color:rgb(0,0,0,0)!important;transition:top\n 100ms ease-in-out 0s}:host([scrolled]) .header{top:-48px!important;transition:top 100ms ease-in-out 0s}.toolbar{padding:0!important}.action-items{position:fixed;right:0px;padding:0 12px;transition:top 20ms ease-in-out 0s}ha-menu-button{padding:0 12px}.hide-tab{display:none!important}paper-tab{padding:11px 0;flex-direction:column;flex:1;width:var(--tab-width);--tab-width:clamp(min(calc(((100vw - var(--mdc-drawer-width,0px)) / 5) - 3px),72px),((100vw - var(--mdc-drawer-width,0px)) / var(--view-tabs-count)) - 3px,calc(((100vw - var(--mdc-drawer-width,0px))) - 3px))}paper-tab.iron-selected ha-icon{width:min(64px,var(--tab-width));color:var(--primary-color);background:var(--accent-color)}ha-icon{min-width:24px;width:24px;height:32px;border-radius:16px;display:inline-flex;justify-content:center;align-items:center;transition:width 0.2s cubic-bezier(0.2,0,0,1);will-change:width,color,background}ha-svg-icon{min-width:24px}paper-tab::after{content:attr(aria-label);text-transform:none;text-wrap:wrap;text-align:center;font-weight:500;font-size:min(3.6vw,13px);opacity:0.8;padding:0px 1px;overflow:hidden;line-height:12px;height:100%;margin-top:4px}paper-tab.iron-selected::after{opacity:1}paper-tabs{height:50%}.edit-mode paper-tab{min-width:fit-content!important}.edit-mode paper-tab.iron-selected::after{margin-top:-2px!important}.edit-mode .action-items{position:static!important}#add-view{top:6px;height:100%!important;display:inline-flex;flex-direction:column}#add-view::after{content:'Add View';text-transform:none;text-wrap:wrap;text-align:center;font-weight:500;font-size:min(3.6vw,13px);opacity:0.8;padding:0px 1px;overflow:hidden;line-height:12px;height:100%;margin-top:-6px} {% for i in range(50) %}\\n:is(ha-tabs, paper-tabs):has(> paper-tab:not(.hide-tab):nth-child({{ i }})) { --view-tabs-count: {{ i }}; }\\n{% endfor %} #view{padding-top:calc(40px + env(safe-area-inset-top))!important;padding-left:calc(12px + env(safe-area-inset-left))!important;padding-right:calc(12px + env(safe-area-inset-right))!important;background:var(--view-background,var(--lovelace-background))!important}.header:has(ha-tabs,paper-tabs) + #view{padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))!important}\"\ngrid-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhorizontal-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-masonry-view$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-panel-view$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-sidebar-view$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nmasonry-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nvertical-layout$:\n - \ ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}" + !important;\\n} paper-tabs,ha-tabs{position:fixed;top:unset!important;bottom:0!important;background:var(--navbar-background)!important;height:calc(var(--header-height) / 0.6)!important;width:calc(100% - var(--mdc-drawer-width,0px));padding-bottom:env(safe-area-inset-bottom)!important;margin:0!important;margin-inline:0!important}.header{background-color:rgb(0,0,0,0)!important;transition:top\n 100ms ease-in-out 0s}:host([scrolled]) .header{top:-48px!important;transition:top 100ms ease-in-out 0s}.toolbar{padding:0!important}.action-items{position:fixed;right:0px;padding:0 12px;transition:top 20ms ease-in-out 0s}ha-menu-button{padding:0 12px}.hide-tab{display:none!important}paper-tab{padding:11px 0;flex-direction:column;flex:1;width:var(--tab-width);--tab-width:clamp(min(calc(((100vw - var(--mdc-drawer-width,0px)) / 5) - 3px),72px),((100vw - var(--mdc-drawer-width,0px)) / var(--view-tabs-count)) - 3px,calc(((100vw - var(--mdc-drawer-width,0px))) - 3px))}paper-tab.iron-selected ha-icon{width:min(64px,var(--tab-width));color:var(--primary-color);background:var(--accent-color)}ha-icon{min-width:24px;width:24px;height:32px;border-radius:16px;display:inline-flex;justify-content:center;align-items:center;transition:width 0.2s cubic-bezier(0.2,0,0,1);will-change:width,color,background}ha-svg-icon{min-width:24px}paper-tab::after{content:attr(aria-label);text-transform:none;text-wrap:wrap;text-align:center;font-weight:500;font-size:min(3.6vw,13px);opacity:0.8;padding:0px 1px;overflow:hidden;line-height:12px;height:100%;margin-top:4px}paper-tab.iron-selected::after{opacity:1}paper-tabs{height:50%}.edit-mode paper-tab{min-width:fit-content!important}.edit-mode paper-tab.iron-selected::after{margin-top:-2px!important}.edit-mode .action-items{position:static!important}#add-view{top:6px;height:100%!important;display:inline-flex;flex-direction:column}#add-view::after{content:'Add View';text-transform:none;text-wrap:wrap;text-align:center;font-weight:500;font-size:min(3.6vw,13px);opacity:0.8;padding:0px 1px;overflow:hidden;line-height:12px;height:100%;margin-top:-6px} {% for i in range(50) %}\\n:is(ha-tabs, paper-tabs):has(> paper-tab:not(.hide-tab):nth-child({{ i }})) { --view-tabs-count: {{ i }}; }\\n{% endfor %} #view{padding-left:calc(12px + env(safe-area-inset-left))!important;padding-right:calc(12px + env(safe-area-inset-right))!important;background:var(--view-background,var(--lovelace-background))!important}.header:has(ha-tabs,paper-tabs) + #view{padding-bottom:calc(calc(var(--header-height) / 0.6) + env(safe-area-inset-bottom))!important}\"\ngrid-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhorizontal-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-masonry-view$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-panel-view$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-sidebar-view$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nmasonry-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nvertical-layout$:\n + \ ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}" card-mod-row-yaml: ".: \"{# https://gist.github.com/mjackson/5311256 #}\\n{%- macro hex2hsl(hex) -%}\\n {%- if hex[0] == \\\"#\\\" -%}\\n {%- set hex = hex[1:] -%}\\n {%- endif -%}\\n {%- set r = (hex[0:2] | int(hex[0:2],16))/255 -%}\\n {%- set g = (hex[2:4] | int(hex[2:4],16))/255 -%}\\n {%- set b = (hex[4:6] | int(hex[4:6],16))/255 -%}\\n {%- set rgb_max = [r, g, b] | max -%}\\n {%- set rgb_min = [r, g, b] | min -%}\\n {%- set l = (rgb_max + rgb_min) / 2 -%}\\n {%- if rgb_max != rgb_min -%}\\n {%- set d = rgb_max - rgb_min -%}\\n {%- set s = d / (2 - rgb_max - rgb_min) if l > 0.5 else d / (rgb_max + rgb_min) -%}\\n {%- if r == rgb_max -%}\\n {%- set h = (g - b) / d + (6 if g < b else 0) -%}\\n {%- elif g == rgb_max -%}\\n {%- set h = (b - r) / d + 2 -%}\\n {%- elif b == rgb_max -%}\\n {%- set h = (r - g) / d + 4 -%}\\n {%- endif -%}\\n {%- set h = h / 6 -%}\\n {%- endif -%}\\n {%- set h = (h * 360) | int if h else 0 -%}\\n {%- set s = (s * 100) | int if s else 0 -%}\\n {%- set l = (l * 100) | int if l else 0 -%}\\n {{ h }},{{ s }},{{ l }}\\n{%- endmacro -%} :host {\\n\\t{%- set id = \\\"_\\\" + user | lower | replace(\\\" \\\",\\\"_\\\") -%}\\n\\t{%- set base_color = \\\"\\\" -%}\\n\\n\\t{%- if has_value(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- elif has_value(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- endif -%}\\n\\n\\t{%- if (base_color | length) in [6, 7] -%}\\n\\t{%- set hsl = hex2hsl(base_color).split(',') -%}\\n\\t\\n\\t{# accent color #}\\n\\t--accent-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\n\\t{# primary color #}\\n\\t--primary-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--primary-luminance));\\n\\t--text-accent-color: var(--primary-color);\\n\\t--link-text-color: var(--primary-color);\\n\\t--dark-primary-color: var(--primary-color);\\n\\t--light-primary-color: var(--primary-color);\\n \\t--slider-secondary-color: var(--primary-color);\\n\\t--mdc-theme-primary: var(--primary-color);\\n\\t--mdc-theme-secondary: var(--primary-color);\\n\\t--sidebar-selected-text-color: var(--primary-color);\\n\\t--sidebar-selected-icon-color: var(--primary-color);\\n\\t--paper-slider-knob-color: var(--primary-color);\\n\\t--paper-slider-knob-start-color: var(--primary-color);\\n\\t--paper-slider-pin-color: var(--primary-color);\\n\\t--paper-slider-active-color: var(--primary-color);\\n\\t--paper-slider-secondary-color: var(--primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--primary-color);\\n\\t--mdc-text-field-hover-line-color: var(--primary-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--primary-color);\\n\\n\\t--slider-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 91%),\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 33%),\\n\\t);\\n\\t--md-switch-checked-button-color: light-dark(\\n\\t\\thsl(0, 0%, 100%),\\n\\t\\tvar(--accent-color)\\n\\t);\\n\\t--md-switch-checked-track-color: light-dark(\\n\\t\\thsl({{ hsl[0] }}, {{ hsl[1] }}%, 30%),\\n\\t\\tvar(--primary-color)\\n\\t);\\n\\t--md-switch-unchecked-button-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 0%, 50%),\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 3%, 60%)\\n\\t);\\n\\t--md-switch-unchecked-track-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 90%),\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 29%)\\n\\t);\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--md-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--md-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: var(--md-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--md-switch-unchecked-track-color) !important;\\n}\"\nha-entity-toggle$:\n ha-switch$: :host{padding:0!important;position:relative;top:3px;--switch-checked-button-color:var(--md-switch-checked-button-color);--switch-checked-track-color:var(--md-switch-checked-track-color);--switch-unchecked-button-color:var(--md-switch-unchecked-button-color);--switch-unchecked-track-color:var(--md-switch-unchecked-track-color)}.mdc-switch__track{height:32px!important;width:52px!important;border-radius:32px!important;opacity:1!important;border:2px solid gray!important;--border-color:var(--md-switch-unchecked-button-color)}.mdc-switch--checked .mdc-switch__track{border:none!important}.mdc-switch__thumb-underlay{top:-8px!important;left:var(--thumb-left-on,var(--thumb-left-off))!important;--thumb-left-off:-8px}.mdc-switch--checked .mdc-switch__thumb-underlay{--thumb-left-on:-4px}.mdc-switch__thumb{height:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;width:var(--thumb-size-active,var(--thumb-size-on,var(--thumb-size-off)))!important;background:var(--md-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--md-switch-checked-button-color)!important;--thumb-size-on:24px}.mdc-switch__thumb:active{transition:width 0.2s cubic-bezier(0.2,0,0,1)!important;--thumb-size-active:28px!important}mwc-ripple{display:none!important}" card-mod-sidebar-yaml: ".: \"{# https://gist.github.com/mjackson/5311256 #}\\n{%- macro hex2hsl(hex) -%}\\n {%- if hex[0] == \\\"#\\\" -%}\\n {%- set hex = hex[1:] -%}\\n {%- endif -%}\\n {%- set r = (hex[0:2] | int(hex[0:2],16))/255 -%}\\n {%- set g = (hex[2:4] | int(hex[2:4],16))/255 -%}\\n {%- set b = (hex[4:6] | int(hex[4:6],16))/255 -%}\\n {%- set rgb_max = [r, g, b] | max -%}\\n {%- set rgb_min = [r, g, b] | min -%}\\n {%- set l = (rgb_max + rgb_min) / 2 -%}\\n {%- if rgb_max != rgb_min -%}\\n {%- set d = rgb_max - rgb_min -%}\\n {%- set s = d / (2 - rgb_max - rgb_min) if l > 0.5 else d / (rgb_max + rgb_min) -%}\\n {%- if r == rgb_max -%}\\n {%- set h = (g - b) / d + (6 if g < b else 0) -%}\\n {%- elif g == rgb_max -%}\\n {%- set h = (b - r) / d + 2 -%}\\n {%- elif b == rgb_max -%}\\n {%- set h = (r - g) / d + 4 -%}\\n {%- endif -%}\\n {%- set h = h / 6 -%}\\n {%- endif -%}\\n {%- set h = (h * 360) | int if h else 0 -%}\\n {%- set s = (s * 100) | int if s else 0 -%}\\n {%- set l = (l * 100) | int if l else 0 -%}\\n {{ h }},{{ s }},{{ l }}\\n{%- endmacro -%} :host {\\n\\t{%- set id = \\\"_\\\" + user | lower | replace(\\\" \\\",\\\"_\\\") -%}\\n\\t{%- set base_color = \\\"\\\" -%}\\n\\n\\t{%- if has_value(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- elif has_value(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- endif -%}\\n\\n\\t{%- if (base_color | length) in [6, 7] -%}\\n\\t{%- set hsl = hex2hsl(base_color).split(',') -%}\\n\\t\\n\\t{# accent color #}\\n\\t--accent-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\n\\t{# primary color #}\\n\\t--primary-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--primary-luminance));\\n\\t--text-accent-color: var(--primary-color);\\n\\t--link-text-color: var(--primary-color);\\n\\t--dark-primary-color: var(--primary-color);\\n\\t--light-primary-color: var(--primary-color);\\n \\t--slider-secondary-color: var(--primary-color);\\n\\t--mdc-theme-primary: var(--primary-color);\\n\\t--mdc-theme-secondary: var(--primary-color);\\n\\t--sidebar-selected-text-color: var(--primary-color);\\n\\t--sidebar-selected-icon-color: var(--primary-color);\\n\\t--paper-slider-knob-color: var(--primary-color);\\n\\t--paper-slider-knob-start-color: var(--primary-color);\\n\\t--paper-slider-pin-color: var(--primary-color);\\n\\t--paper-slider-active-color: var(--primary-color);\\n\\t--paper-slider-secondary-color: var(--primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--primary-color);\\n\\t--mdc-text-field-hover-line-color: var(--primary-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--primary-color);\\n\\n\\t--slider-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 91%),\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 33%),\\n\\t);\\n\\t--md-switch-checked-button-color: light-dark(\\n\\t\\thsl(0, 0%, 100%),\\n\\t\\tvar(--accent-color)\\n\\t);\\n\\t--md-switch-checked-track-color: light-dark(\\n\\t\\thsl({{ hsl[0] }}, {{ hsl[1] }}%, 30%),\\n\\t\\tvar(--primary-color)\\n\\t);\\n\\t--md-switch-unchecked-button-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 0%, 50%),\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 3%, 60%)\\n\\t);\\n\\t--md-switch-unchecked-track-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 90%),\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 29%)\\n\\t);\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--md-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--md-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: var(--md-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--md-switch-unchecked-track-color) !important;\\n} ha-sidebar{width:56px}:not(.profile)>paper-icon-item{transition:width 0.2s cubic-bezier(0.2,0,0,1);height:48px;margin:0 4px!important;padding:0 12px!important}.item-text{z-index:2}paper-icon-item::before{content:'';height:48px;width:100%!important;position:absolute!important;transition:all\n 0.2s cubic-bezier(0.2,0,0,1)!important;left:0!important;right:0!important;opacity:1!important;background:var(--accent-color)!important;border-radius:128px!important;transform:scaleX(0)}.iron-selected paper-icon-item::before{will-change:unset!important;transform:scaleX(1)}.configuration-badge{box-shadow:inset 0px 0px 0px 1px var(--sidebar-icon-color)}\"\nha-user-badge$: .initials,.picture{z-index:2;margin:4px 0}" card-mod-theme: Material Rounded card-mod-view-yaml: ".: \"{# https://gist.github.com/mjackson/5311256 #}\\n{%- macro hex2hsl(hex) -%}\\n {%- if hex[0] == \\\"#\\\" -%}\\n {%- set hex = hex[1:] -%}\\n {%- endif -%}\\n {%- set r = (hex[0:2] | int(hex[0:2],16))/255 -%}\\n {%- set g = (hex[2:4] | int(hex[2:4],16))/255 -%}\\n {%- set b = (hex[4:6] | int(hex[4:6],16))/255 -%}\\n {%- set rgb_max = [r, g, b] | max -%}\\n {%- set rgb_min = [r, g, b] | min -%}\\n {%- set l = (rgb_max + rgb_min) / 2 -%}\\n {%- if rgb_max != rgb_min -%}\\n {%- set d = rgb_max - rgb_min -%}\\n {%- set s = d / (2 - rgb_max - rgb_min) if l > 0.5 else d / (rgb_max + rgb_min) -%}\\n {%- if r == rgb_max -%}\\n {%- set h = (g - b) / d + (6 if g < b else 0) -%}\\n {%- elif g == rgb_max -%}\\n {%- set h = (b - r) / d + 2 -%}\\n {%- elif b == rgb_max -%}\\n {%- set h = (r - g) / d + 4 -%}\\n {%- endif -%}\\n {%- set h = h / 6 -%}\\n {%- endif -%}\\n {%- set h = (h * 360) | int if h else 0 -%}\\n {%- set s = (s * 100) | int if s else 0 -%}\\n {%- set l = (l * 100) | int if l else 0 -%}\\n {{ h }},{{ s }},{{ l }}\\n{%- endmacro -%} :host {\\n\\t{%- set id = \\\"_\\\" + user | lower | replace(\\\" \\\",\\\"_\\\") -%}\\n\\t{%- set base_color = \\\"\\\" -%}\\n\\n\\t{%- if has_value(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\" + id) -%}\\n\\t{%- elif has_value(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- set base_color = states(\\\"sensor.material_rounded_base_color\\\") -%}\\n\\t{%- endif -%}\\n\\n\\t{%- if (base_color | length) in [6, 7] -%}\\n\\t{%- set hsl = hex2hsl(base_color).split(',') -%}\\n\\t\\n\\t{# accent color #}\\n\\t--accent-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\n\\t{# primary color #}\\n\\t--primary-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--primary-luminance));\\n\\t--text-accent-color: var(--primary-color);\\n\\t--link-text-color: var(--primary-color);\\n\\t--dark-primary-color: var(--primary-color);\\n\\t--light-primary-color: var(--primary-color);\\n \\t--slider-secondary-color: var(--primary-color);\\n\\t--mdc-theme-primary: var(--primary-color);\\n\\t--mdc-theme-secondary: var(--primary-color);\\n\\t--sidebar-selected-text-color: var(--primary-color);\\n\\t--sidebar-selected-icon-color: var(--primary-color);\\n\\t--paper-slider-knob-color: var(--primary-color);\\n\\t--paper-slider-knob-start-color: var(--primary-color);\\n\\t--paper-slider-pin-color: var(--primary-color);\\n\\t--paper-slider-active-color: var(--primary-color);\\n\\t--paper-slider-secondary-color: var(--primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--primary-color);\\n\\t--mdc-text-field-hover-line-color: var(--primary-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--primary-color);\\n\\n\\t--slider-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 91%),\\n\\t\\thsl({{ (hsl[0] | int) + 14 }}, 90%, 33%),\\n\\t);\\n\\t--md-switch-checked-button-color: light-dark(\\n\\t\\thsl(0, 0%, 100%),\\n\\t\\tvar(--accent-color)\\n\\t);\\n\\t--md-switch-checked-track-color: light-dark(\\n\\t\\thsl({{ hsl[0] }}, {{ hsl[1] }}%, 30%),\\n\\t\\tvar(--primary-color)\\n\\t);\\n\\t--md-switch-unchecked-button-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 0%, 50%),\\n\\t\\thsl({{ (hsl[0] | int ) + 16 }}, 3%, 60%)\\n\\t);\\n\\t--md-switch-unchecked-track-color: light-dark(\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 90%),\\n\\t\\thsl({{ (hsl[0] | int ) + 9 }}, 3%, 29%)\\n\\t);\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--md-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--md-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: var(--md-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--md-switch-unchecked-track-color) - !important;\\n} #view{padding-top:calc(40px + env(safe-area-inset-top))!important;padding-left:calc(12px + env(safe-area-inset-left))!important;padding-right:calc(12px + env(safe-area-inset-right))!important;background:var(--view-background,var(--lovelace-background))!important}.header:has(ha-tabs,paper-tabs)\n + #view{padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))!important}\"\ngrid-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhorizontal-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-masonry-view$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-panel-view$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-sidebar-view$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nmasonry-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nvertical-layout$:\n ha-fab$: :host{bottom:calc(var(--footer-height) + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}" + !important;\\n} #view{padding-left:calc(12px + env(safe-area-inset-left))!important;padding-right:calc(12px + env(safe-area-inset-right))!important;background:var(--view-background,var(--lovelace-background))!important}.header:has(ha-tabs,paper-tabs)\n + #view{padding-bottom:calc(calc(var(--header-height) / 0.6) + env(safe-area-inset-bottom))!important}\"\ngrid-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhorizontal-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-masonry-view$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-panel-view$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nhui-sidebar-view$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nmasonry-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}\nvertical-layout$:\n ha-fab$: :host{bottom:calc(var(--header-height) / 0.6 + 16px)!important;z-index:3!important}.mdc-fab{height:56px!important;border-radius:12px!important}.ripple{border-radius:12px!important}.mdc-fab__label{text-transform:none!important;font-size:11pt}" code-editor-background-color: var(--primary-background-color) codemirror-atom: var(--codemirror-property) codemirror-keyword: rgb(140 169 255) @@ -33,7 +33,6 @@ Material Rounded: dark-primary-color: var(--primary-color) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: var(--card-background-color) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -181,7 +180,6 @@ Material Rounded Dark: disabled-text-color: rgba(255, 255, 255, 0.5) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: var(--card-background-color) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -301,7 +299,6 @@ Material Rounded Light: disabled-text-color: rgb(128, 128, 128) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: var(--card-background-color) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -413,7 +410,6 @@ Material Rounded No Mod: dark-primary-color: var(--primary-color) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: var(--card-background-color) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -561,7 +557,6 @@ Material Rounded No Mod Dark: disabled-text-color: rgba(255, 255, 255, 0.5) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: var(--card-background-color) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -680,7 +675,6 @@ Material Rounded No Mod Light: disabled-text-color: rgb(128, 128, 128) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: var(--card-background-color) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -793,7 +787,6 @@ Material Rounded Transparent Card: dark-primary-color: var(--primary-color) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: rgb(0, 0, 0, 0) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -941,7 +934,6 @@ Material Rounded Transparent Card Dark: disabled-text-color: rgba(255, 255, 255, 0.5) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: rgb(0, 0, 0, 0) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -1061,7 +1053,6 @@ Material Rounded Transparent Card Light: disabled-text-color: rgb(128, 128, 128) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: rgb(0, 0, 0, 0) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -1173,7 +1164,6 @@ Material Rounded Transparent Card No Mod: dark-primary-color: var(--primary-color) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: rgb(0, 0, 0, 0) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -1321,7 +1311,6 @@ Material Rounded Transparent Card No Mod Dark: disabled-text-color: rgba(255, 255, 255, 0.5) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: rgb(0, 0, 0, 0) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0) @@ -1440,7 +1429,6 @@ Material Rounded Transparent Card No Mod Light: disabled-text-color: rgb(128, 128, 128) divider-color: var(--primary-background-color) font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" - footer-height: 80px ha-card-background: rgb(0, 0, 0, 0) ha-card-border: none ha-card-border-color: rgba(0, 0, 0, 0)