From 5fbb9435700f45b5f8bab73173eb7f59dae23ab3 Mon Sep 17 00:00:00 2001 From: Nerwyn Singh Date: Tue, 29 Oct 2024 21:59:27 -0400 Subject: [PATCH] remove bottom padding from subviews --- src/common/view.css | 5 +++++ themes/material_rounded.yaml | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/common/view.css b/src/common/view.css index 6e659f5..fa47894 100644 --- a/src/common/view.css +++ b/src/common/view.css @@ -8,3 +8,8 @@ ) !important; background: var(--lovelace-background) !important; } + +/* Remove bottom footer padding from subviews */ +.header:has(ha-icon-button-arrow-prev) ~ #view { + padding-bottom: env(safe-area-inset-bottom) !important; +} diff --git a/themes/material_rounded.yaml b/themes/material_rounded.yaml index e767170..e7543ea 100644 --- a/themes/material_rounded.yaml +++ b/themes/material_rounded.yaml @@ -14,15 +14,15 @@ Material Rounded: var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color) !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(--mdc-switch-checked-button-color);--switch-checked-track-color:var(--mdc-switch-checked-track-color);--switch-unchecked-button-color:var(--mdc-switch-unchecked-button-color);--switch-unchecked-track-color:var(--mdc-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(--mdc-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(--mdc-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--mdc-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(--mdc-switch-checked-button-color);--switch-checked-track-color:var(--mdc-switch-checked-track-color);--switch-unchecked-button-color:var(--mdc-switch-unchecked-button-color);--switch-unchecked-track-color:var(--mdc-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(--mdc-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(--mdc-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--mdc-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(--mdc-switch-checked-button-color);--switch-checked-track-color:var(--mdc-switch-checked-track-color);--switch-unchecked-button-color:var(--mdc-switch-unchecked-button-color);--switch-unchecked-track-color:var(--mdc-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(--mdc-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(--mdc-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--mdc-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(--mdc-switch-checked-button-color);--switch-checked-track-color:var(--mdc-switch-checked-track-color);--switch-unchecked-button-color:var(--mdc-switch-unchecked-button-color);--switch-unchecked-track-color:var(--mdc-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(--mdc-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(--mdc-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--mdc-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: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--text-light-primary-color: var(--text-primary-color);\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\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-text-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(--paper-slider-knob-color);\\n\\t--paper-slider-pin-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-active-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-secondary-color: var(--light-primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--input-hover-line-color);\\n\\t--mdc-text-field-hover-line-color: var(--input-hover-line-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--codemirror-property);\\n\\n\\t--slider-color: hsl({{ (hsl[0] | int) + 14 }}, 90%, calc(var(--dark-mode) * 33% + (1 - var(--dark-mode)) * 91%));\\n\\t--mdc-switch-checked-button-color: hsl(calc(({{ hsl[0] }}) * var(--dark-mode)), calc({{ hsl[1] }}% * var(--dark-mode)),calc(var(--accent-luminance) * var(--dark-mode) + 100% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-checked-track-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, calc(var(--primary-luminance) * var(--dark-mode) + 30% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-button-color: hsl({{ (hsl[0] | int ) + 16 }}, calc(3% * var(--dark-mode)), calc(60% * var(--dark-mode) + 50% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-track-color: hsl({{ (hsl[0] | int ) + 9 }}, 3%, calc(29% * var(--dark-mode) + 90% * (1 - var(--dark-mode))));\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--mdc-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--mdc-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: - var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-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%\n - 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 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;padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))!important;background:var(--lovelace-background)!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}" + var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-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%\n - 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 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;padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))!important;background:var(--lovelace-background)!important}.header:has(ha-icon-button-arrow-prev) ~ #view{padding-bottom: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}" 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: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--text-light-primary-color: var(--text-primary-color);\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\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-text-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(--paper-slider-knob-color);\\n\\t--paper-slider-pin-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-active-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-secondary-color: var(--light-primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--input-hover-line-color);\\n\\t--mdc-text-field-hover-line-color: var(--input-hover-line-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--codemirror-property);\\n\\n\\t--slider-color: hsl({{ (hsl[0] | int) + 14 }}, 90%, calc(var(--dark-mode) * 33% + (1 - var(--dark-mode)) * 91%));\\n\\t--mdc-switch-checked-button-color: hsl(calc(({{ hsl[0] }}) * var(--dark-mode)), calc({{ hsl[1] }}% * var(--dark-mode)),calc(var(--accent-luminance) * var(--dark-mode) + 100% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-checked-track-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, calc(var(--primary-luminance) * var(--dark-mode) + 30% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-button-color: hsl({{ (hsl[0] | int ) + 16 }}, calc(3% * var(--dark-mode)), calc(60% * var(--dark-mode) + 50% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-track-color: hsl({{ (hsl[0] | int ) + 9 }}, 3%, calc(29% * var(--dark-mode) + 90% * (1 - var(--dark-mode))));\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--mdc-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--mdc-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-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(--mdc-switch-checked-button-color);--switch-checked-track-color:var(--mdc-switch-checked-track-color);--switch-unchecked-button-color:var(--mdc-switch-unchecked-button-color);--switch-unchecked-track-color:var(--mdc-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(--mdc-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(--mdc-switch-unchecked-button-color)!important;border:none!important;--thumb-size-off:16px}.mdc-switch--checked .mdc-switch__thumb{background:var(--mdc-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: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--text-light-primary-color: var(--text-primary-color);\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\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-text-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(--paper-slider-knob-color);\\n\\t--paper-slider-pin-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-active-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-secondary-color: var(--light-primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--input-hover-line-color);\\n\\t--mdc-text-field-hover-line-color: var(--input-hover-line-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--codemirror-property);\\n\\n\\t--slider-color: hsl({{ (hsl[0] | int) + 14 }}, 90%, calc(var(--dark-mode) * 33% + (1 - var(--dark-mode)) * 91%));\\n\\t--mdc-switch-checked-button-color: hsl(calc(({{ hsl[0] }}) * var(--dark-mode)), calc({{ hsl[1] }}% * var(--dark-mode)),calc(var(--accent-luminance) * var(--dark-mode) + 100% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-checked-track-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, calc(var(--primary-luminance) * var(--dark-mode) + 30% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-button-color: hsl({{ (hsl[0] | int ) + 16 }}, calc(3% * var(--dark-mode)), calc(60% * var(--dark-mode) + 50% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-track-color: hsl({{ (hsl[0] | int ) + 9 }}, 3%, calc(29% * var(--dark-mode) + 90% * (1 - var(--dark-mode))));\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--mdc-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--mdc-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color) !important;\\n} ha-sidebar{width:56px}:not(.profile)>paper-icon-item{transition:width\n 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 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: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance));\\n\\t--text-light-primary-color: var(--text-primary-color);\\n\\t--mdc-theme-on-primary: var(--accent-color);\\n\\t--mdc-theme-on-secondary: var(--accent-color);\\n\\t\\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-text-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(--paper-slider-knob-color);\\n\\t--paper-slider-pin-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-active-color: var(--paper-slider-knob-color);\\n\\t--paper-slider-secondary-color: var(--light-primary-color);\\n\\t--input-hover-line-color: var(--primary-color);\\n\\t--mdc-select-hover-line-color: var(--input-hover-line-color);\\n\\t--mdc-text-field-hover-line-color: var(--input-hover-line-color);\\n\\t--codemirror-property: var(--primary-color);\\n\\t--codemirror-atom: var(--codemirror-property);\\n\\n\\t--slider-color: hsl({{ (hsl[0] | int) + 14 }}, 90%, calc(var(--dark-mode) * 33% + (1 - var(--dark-mode)) * 91%));\\n\\t--mdc-switch-checked-button-color: hsl(calc(({{ hsl[0] }}) * var(--dark-mode)), calc({{ hsl[1] }}% * var(--dark-mode)),calc(var(--accent-luminance) * var(--dark-mode) + 100% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-checked-track-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, calc(var(--primary-luminance) * var(--dark-mode) + 30% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-button-color: hsl({{ (hsl[0] | int ) + 16 }}, calc(3% * var(--dark-mode)), calc(60% * var(--dark-mode) + 50% * (1 - var(--dark-mode))));\\n\\t--mdc-switch-unchecked-track-color: hsl({{ (hsl[0] | int ) + 9 }}, 3%, calc(29% * var(--dark-mode) + 90% * (1 - var(--dark-mode))));\\n\\t{%- endif -%}\\n\\n\\t--switch-checked-button-color: var(--mdc-switch-checked-button-color) !important;\\n\\t--switch-checked-track-color: var(--mdc-switch-checked-track-color) !important;\\n\\t--switch-unchecked-button-color: - var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color) !important;\\n} #view{padding-top:calc(40px\n + 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;padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))!important;background:var(--lovelace-background)!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}" + var(--mdc-switch-unchecked-button-color) !important;\\n\\t--switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color) !important;\\n} #view{padding-top:calc(40px\n + 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;padding-bottom:calc(var(--footer-height) + env(safe-area-inset-bottom))!important;background:var(--lovelace-background)!important}.header:has(ha-icon-button-arrow-prev) ~ #view{padding-bottom: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}" code-editor-background-color: var(--primary-background-color) codemirror-atom: var(--codemirror-property) codemirror-keyword: rgb(140 169 255)