From 57862597978977f6c0a34fd602ca94bc92b640e7 Mon Sep 17 00:00:00 2001 From: Nerwyn Singh Date: Thu, 31 Oct 2024 20:16:59 -0400 Subject: [PATCH] refactor user colors to use light-dark instead of weird math, change graph color to primary color and lighten stroke color --- src/common/card.css | 12 ++ src/common/card.yaml | 9 +- src/common/graph.css | 7 + src/common/ha_switch.css | 14 +- src/material_rounded/theme.yaml | 26 ++- src/material_rounded/user_colors.jinja | 52 +++-- themes/material_rounded.yaml | 274 ++++++++++++------------- 7 files changed, 207 insertions(+), 187 deletions(-) create mode 100644 src/common/graph.css diff --git a/src/common/card.css b/src/common/card.css index 1d6bf1f..60d38d9 100644 --- a/src/common/card.css +++ b/src/common/card.css @@ -5,3 +5,15 @@ hui-entities-toggle { left: -4px !important; top: 8px !important; } + +/* Fix Header/Footer Overflow */ +.header { + border-top-left-radius: var(--ha-card-border-radius); + border-top-right-radius: var(--ha-card-border-radius); + overflow: hidden; +} +.footer { + border-bottom-left-radius: var(--ha-card-border-radius); + border-bottom-right-radius: var(--ha-card-border-radius); + overflow: hidden; +} diff --git a/src/common/card.yaml b/src/common/card.yaml index 3b42777..edbc893 100644 --- a/src/common/card.yaml +++ b/src/common/card.yaml @@ -26,12 +26,15 @@ ha-enable-shortcuts-row$ ha-switch$: >- {{ ha_switch.css }} # Device page -hui-toggle-entity-row$: - ha-entity-toggle$ ha-switch$: >- - {{ ha_switch.css }} +hui-toggle-entity-row$ ha-entity-toggle$ ha-switch$: >- + {{ ha_switch.css }} # Browser Mod .card-content: ha-settings-row: ha-switch$: >- {{ ha_switch.css }} + +# Graph Colors +hui-graph-header-footer$ hui-graph-base$: >- + {{ graph.css }} diff --git a/src/common/graph.css b/src/common/graph.css new file mode 100644 index 0000000..2fda6f6 --- /dev/null +++ b/src/common/graph.css @@ -0,0 +1,7 @@ +rect { + fill: var(--primary-color) !important; +} + +path { + stroke: hsl(0, 0%, 75%) !important; +} diff --git a/src/common/ha_switch.css b/src/common/ha_switch.css index b24c199..712d654 100644 --- a/src/common/ha_switch.css +++ b/src/common/ha_switch.css @@ -3,10 +3,10 @@ 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); + --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); } /* Increase track size, make always opaque, and border. */ @@ -16,7 +16,7 @@ border-radius: 32px !important; opacity: 1 !important; border: 2px solid gray !important; - --border-color: var(--mdc-switch-unchecked-button-color); + --border-color: var(--md-switch-unchecked-button-color); } /* Remove border when on */ .mdc-switch--checked .mdc-switch__track { @@ -44,13 +44,13 @@ --thumb-size-active, var(--thumb-size-on, var(--thumb-size-off)) ) !important; - background: var(--mdc-switch-unchecked-button-color) !important; + background: var(--md-switch-unchecked-button-color) !important; border: none !important; --thumb-size-off: 16px; } /* Switch on thumb color and size */ .mdc-switch--checked .mdc-switch__thumb { - background: var(--mdc-switch-checked-button-color) !important; + background: var(--md-switch-checked-button-color) !important; --thumb-size-on: 24px; } diff --git a/src/material_rounded/theme.yaml b/src/material_rounded/theme.yaml index f0f6a6d..3671e6d 100644 --- a/src/material_rounded/theme.yaml +++ b/src/material_rounded/theme.yaml @@ -1,7 +1,6 @@ Material Rounded: modes: dark: - dark-mode: 1 accent-luminance: 23% primary-luminance: 88% accent-color: rgb(0, 74, 119) @@ -18,15 +17,14 @@ Material Rounded: input-background-color: rgb(46, 48, 56) card-background-color: rgb(40, 42, 44) slider-color: rgb(8, 66, 160) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) secondary-background-color: rgb(55, 57, 59) # dark mode only state-inactive-color: rgb(72, 74, 78) # dark mode only light: - dark-mode: 0 accent-luminance: 88% primary-luminance: 10% accent-color: rgb(194, 231, 255) @@ -43,10 +41,10 @@ Material Rounded: input-background-color: rgb(234, 234, 235) card-background-color: rgb(233, 238, 246) slider-color: rgb(211, 227, 253) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) # Spacings horizontal-stack-card-margin: 0px 4px @@ -133,10 +131,10 @@ Material Rounded: paper-slider-secondary-color: var(--light-primary-color) # Switches - 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) + 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) # Toggles paper-toggle-button-checked-button-color: var(--switch-checked-button-color) diff --git a/src/material_rounded/user_colors.jinja b/src/material_rounded/user_colors.jinja index 7038719..4b6cb72 100644 --- a/src/material_rounded/user_colors.jinja +++ b/src/material_rounded/user_colors.jinja @@ -11,11 +11,12 @@ {%- if (base_color | length) in [6, 7] -%} {%- set hsl = hex2hsl(base_color).split(',') -%} + {# accent color #} --accent-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--accent-luminance)); - --text-light-primary-color: var(--text-primary-color); --mdc-theme-on-primary: var(--accent-color); --mdc-theme-on-secondary: var(--accent-color); + {# primary color #} --primary-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, var(--primary-luminance)); --text-accent-color: var(--primary-color); --link-text-color: var(--primary-color); @@ -24,28 +25,43 @@ --slider-secondary-color: var(--primary-color); --mdc-theme-primary: var(--primary-color); --mdc-theme-secondary: var(--primary-color); - --sidebar-selected-text-color: var(--primary-text-color); + --sidebar-selected-text-color: var(--primary-color); --sidebar-selected-icon-color: var(--primary-color); --paper-slider-knob-color: var(--primary-color); - --paper-slider-knob-start-color: var(--paper-slider-knob-color); - --paper-slider-pin-color: var(--paper-slider-knob-color); - --paper-slider-active-color: var(--paper-slider-knob-color); - --paper-slider-secondary-color: var(--light-primary-color); + --paper-slider-knob-start-color: var(--primary-color); + --paper-slider-pin-color: var(--primary-color); + --paper-slider-active-color: var(--primary-color); + --paper-slider-secondary-color: var(--primary-color); --input-hover-line-color: var(--primary-color); - --mdc-select-hover-line-color: var(--input-hover-line-color); - --mdc-text-field-hover-line-color: var(--input-hover-line-color); + --mdc-select-hover-line-color: var(--primary-color); + --mdc-text-field-hover-line-color: var(--primary-color); --codemirror-property: var(--primary-color); - --codemirror-atom: var(--codemirror-property); + --codemirror-atom: var(--primary-color); - --slider-color: hsl({{ (hsl[0] | int) + 14 }}, 90%, calc(var(--dark-mode) * 33% + (1 - var(--dark-mode)) * 91%)); - --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)))); - --mdc-switch-checked-track-color: hsl({{ hsl[0] }}, {{ hsl[1] }}%, calc(var(--primary-luminance) * var(--dark-mode) + 30% * (1 - var(--dark-mode)))); - --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)))); - --mdc-switch-unchecked-track-color: hsl({{ (hsl[0] | int ) + 9 }}, 3%, calc(29% * var(--dark-mode) + 90% * (1 - var(--dark-mode)))); + --slider-color: light-dark( + hsl({{ (hsl[0] | int) + 14 }}, 90%, 91%), + hsl({{ (hsl[0] | int) + 14 }}, 90%, 33%), + ); + --md-switch-checked-button-color: light-dark( + hsl(0, 0%, 100%), + var(--accent-color) + ); + --md-switch-checked-track-color: light-dark( + hsl({{ hsl[0] }}, {{ hsl[1] }}%, 30%), + var(--primary-color) + ); + --md-switch-unchecked-button-color: light-dark( + hsl({{ (hsl[0] | int ) + 16 }}, 0%, 50%), + hsl({{ (hsl[0] | int ) + 16 }}, 3%, 60%) + ); + --md-switch-unchecked-track-color: light-dark( + hsl({{ (hsl[0] | int ) + 9 }}, 3%, 90%), + hsl({{ (hsl[0] | int ) + 9 }}, 3%, 29%) + ); {%- endif -%} - --switch-checked-button-color: var(--mdc-switch-checked-button-color) !important; - --switch-checked-track-color: var(--mdc-switch-checked-track-color) !important; - --switch-unchecked-button-color: var(--mdc-switch-unchecked-button-color) !important; - --switch-unchecked-track-color: var(--mdc-switch-unchecked-track-color) !important; + --switch-checked-button-color: var(--md-switch-checked-button-color) !important; + --switch-checked-track-color: var(--md-switch-checked-track-color) !important; + --switch-unchecked-button-color: var(--md-switch-unchecked-button-color) !important; + --switch-unchecked-track-color: var(--md-switch-unchecked-track-color) !important; } \ No newline at end of file diff --git a/themes/material_rounded.yaml b/themes/material_rounded.yaml index fa2ed35..66c1d8d 100644 --- a/themes/material_rounded.yaml +++ b/themes/material_rounded.yaml @@ -5,24 +5,24 @@ Material Rounded: app-header-selection-bar-color: none app-header-text-color: var(--primary-text-color) border-radius: 28px - card-mod-card-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} hui-entities-toggle{position:relative!important;width:40px!important;left:-4px!important;top:8px!important}\"\n.card-content:\n ha-settings-row:\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}\nha-advanced-mode-row$ 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-enable-shortcuts-row$ 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-force-narrow-row$ 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-push-notifications-row$ ha-push-notifications-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-set-suspend-row$ 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-set-vibrate-row$ 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-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}\nhui-entities-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}\nhui-toggle-entity-row$:\n 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}" - card-mod-more-info-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-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;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}" - 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-card-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} hui-entities-toggle{position:relative!important;width:40px!important;left:-4px!important;top:8px!important}.header{border-top-left-radius:var(--ha-card-border-radius);border-top-right-radius:var(--ha-card-border-radius);overflow:hidden}.footer{border-bottom-left-radius:var(--ha-card-border-radius);border-bottom-right-radius:var(--ha-card-border-radius);overflow:hidden}\"\n.card-content:\n ha-settings-row:\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}\nha-advanced-mode-row$ 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-enable-shortcuts-row$ 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-force-narrow-row$ 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-push-notifications-row$ ha-push-notifications-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-set-suspend-row$ 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-set-vibrate-row$ 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-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}\nhui-entities-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}\nhui-graph-header-footer$ hui-graph-base$: rect{fill:var(--primary-color)!important}path{stroke:hsl(0,0%,75%)!important}\nhui-toggle-entity-row$ 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}" + card-mod-more-info-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-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(--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}" + 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: 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;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}" + 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(--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}" code-editor-background-color: var(--primary-background-color) codemirror-atom: var(--codemirror-property) codemirror-keyword: rgb(140 169 255) @@ -79,16 +79,15 @@ Material Rounded: accent-color: rgb(0, 74, 119) accent-luminance: 23% card-background-color: rgb(40, 42, 44) - dark-mode: 1 disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) input-background-color: rgb(46, 48, 56) lovelace-background: rgb(19, 19, 20) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) primary-background-color: rgb(30, 31, 32) primary-color: rgb(194, 231, 254) primary-luminance: 88% @@ -103,16 +102,15 @@ Material Rounded: accent-color: rgb(194, 231, 255) accent-luminance: 88% card-background-color: rgb(233, 238, 246) - dark-mode: 0 disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) input-background-color: rgb(234, 234, 235) lovelace-background: rgb(255, 255, 255) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) primary-background-color: rgb(240, 244, 249) primary-color: rgb(0, 29, 53) primary-luminance: 10% @@ -149,10 +147,10 @@ Material Rounded: sidebar-selected-text-color: var(--primary-text-color) sidebar-text-color: var(--sidebar-icon-color) slider-secondary-color: var(--primary-color) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -178,7 +176,6 @@ Material Rounded Dark: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 1 dark-primary-color: var(--primary-color) disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) @@ -210,16 +207,16 @@ Material Rounded Dark: link-text-color: var(--primary-color) lovelace-background: rgb(19, 19, 20) md-divider-color: var(--divider-color) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -270,10 +267,10 @@ Material Rounded Dark: slider-secondary-color: var(--primary-color) state-icon-color: rgb(196, 199, 197) state-inactive-color: rgb(72, 74, 78) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -299,7 +296,6 @@ Material Rounded Light: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 0 dark-primary-color: var(--primary-color) disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) @@ -331,16 +327,16 @@ Material Rounded Light: link-text-color: var(--primary-color) lovelace-background: rgb(255, 255, 255) md-divider-color: var(--divider-color) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -389,10 +385,10 @@ Material Rounded Light: slider-color: rgb(211, 227, 253) slider-secondary-color: var(--primary-color) state-icon-color: rgb(69, 71, 70) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -463,16 +459,15 @@ Material Rounded No Mod: accent-color: rgb(0, 74, 119) accent-luminance: 23% card-background-color: rgb(40, 42, 44) - dark-mode: 1 disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) input-background-color: rgb(46, 48, 56) lovelace-background: rgb(19, 19, 20) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) primary-background-color: rgb(30, 31, 32) primary-color: rgb(194, 231, 254) primary-luminance: 88% @@ -487,16 +482,15 @@ Material Rounded No Mod: accent-color: rgb(194, 231, 255) accent-luminance: 88% card-background-color: rgb(233, 238, 246) - dark-mode: 0 disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) input-background-color: rgb(234, 234, 235) lovelace-background: rgb(255, 255, 255) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) primary-background-color: rgb(240, 244, 249) primary-color: rgb(0, 29, 53) primary-luminance: 10% @@ -534,10 +528,10 @@ Material Rounded No Mod: sidebar-selected-text-color: var(--primary-text-color) sidebar-text-color: var(--sidebar-icon-color) slider-secondary-color: var(--primary-color) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -562,7 +556,6 @@ Material Rounded No Mod Dark: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 1 dark-primary-color: var(--primary-color) disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) @@ -594,16 +587,16 @@ Material Rounded No Mod Dark: link-text-color: var(--primary-color) lovelace-background: rgb(19, 19, 20) md-divider-color: var(--divider-color) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -654,10 +647,10 @@ Material Rounded No Mod Dark: slider-secondary-color: var(--primary-color) state-icon-color: rgb(196, 199, 197) state-inactive-color: rgb(72, 74, 78) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -682,7 +675,6 @@ Material Rounded No Mod Light: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 0 dark-primary-color: var(--primary-color) disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) @@ -714,16 +706,16 @@ Material Rounded No Mod Light: link-text-color: var(--primary-color) lovelace-background: rgb(255, 255, 255) md-divider-color: var(--divider-color) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -772,10 +764,10 @@ Material Rounded No Mod Light: slider-color: rgb(211, 227, 253) slider-secondary-color: var(--primary-color) state-icon-color: rgb(69, 71, 70) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -847,16 +839,15 @@ Material Rounded Transparent Card: accent-color: rgb(0, 74, 119) accent-luminance: 23% card-background-color: rgb(40, 42, 44) - dark-mode: 1 disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) input-background-color: rgb(46, 48, 56) lovelace-background: rgb(19, 19, 20) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) primary-background-color: rgb(30, 31, 32) primary-color: rgb(194, 231, 254) primary-luminance: 88% @@ -871,16 +862,15 @@ Material Rounded Transparent Card: accent-color: rgb(194, 231, 255) accent-luminance: 88% card-background-color: rgb(233, 238, 246) - dark-mode: 0 disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) input-background-color: rgb(234, 234, 235) lovelace-background: rgb(255, 255, 255) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) primary-background-color: rgb(240, 244, 249) primary-color: rgb(0, 29, 53) primary-luminance: 10% @@ -917,10 +907,10 @@ Material Rounded Transparent Card: sidebar-selected-text-color: var(--primary-text-color) sidebar-text-color: var(--sidebar-icon-color) slider-secondary-color: var(--primary-color) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -946,7 +936,6 @@ Material Rounded Transparent Card Dark: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 1 dark-primary-color: var(--primary-color) disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) @@ -978,16 +967,16 @@ Material Rounded Transparent Card Dark: link-text-color: var(--primary-color) lovelace-background: rgb(19, 19, 20) md-divider-color: var(--divider-color) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -1038,10 +1027,10 @@ Material Rounded Transparent Card Dark: slider-secondary-color: var(--primary-color) state-icon-color: rgb(196, 199, 197) state-inactive-color: rgb(72, 74, 78) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -1067,7 +1056,6 @@ Material Rounded Transparent Card Light: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 0 dark-primary-color: var(--primary-color) disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) @@ -1099,16 +1087,16 @@ Material Rounded Transparent Card Light: link-text-color: var(--primary-color) lovelace-background: rgb(255, 255, 255) md-divider-color: var(--divider-color) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -1157,10 +1145,10 @@ Material Rounded Transparent Card Light: slider-color: rgb(211, 227, 253) slider-secondary-color: var(--primary-color) state-icon-color: rgb(69, 71, 70) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -1231,16 +1219,15 @@ Material Rounded Transparent Card No Mod: accent-color: rgb(0, 74, 119) accent-luminance: 23% card-background-color: rgb(40, 42, 44) - dark-mode: 1 disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) input-background-color: rgb(46, 48, 56) lovelace-background: rgb(19, 19, 20) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) primary-background-color: rgb(30, 31, 32) primary-color: rgb(194, 231, 254) primary-luminance: 88% @@ -1255,16 +1242,15 @@ Material Rounded Transparent Card No Mod: accent-color: rgb(194, 231, 255) accent-luminance: 88% card-background-color: rgb(233, 238, 246) - dark-mode: 0 disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) input-background-color: rgb(234, 234, 235) lovelace-background: rgb(255, 255, 255) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) primary-background-color: rgb(240, 244, 249) primary-color: rgb(0, 29, 53) primary-luminance: 10% @@ -1302,10 +1288,10 @@ Material Rounded Transparent Card No Mod: sidebar-selected-text-color: var(--primary-text-color) sidebar-text-color: var(--sidebar-icon-color) slider-secondary-color: var(--primary-color) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -1330,7 +1316,6 @@ Material Rounded Transparent Card No Mod Dark: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 1 dark-primary-color: var(--primary-color) disabled-color: rgb(0, 0, 0) disabled-text-color: rgba(255, 255, 255, 0.5) @@ -1362,16 +1347,16 @@ Material Rounded Transparent Card No Mod Dark: link-text-color: var(--primary-color) lovelace-background: rgb(19, 19, 20) md-divider-color: var(--divider-color) + md-switch-checked-button-color: var(--accent-color) + md-switch-checked-track-color: var(--primary-color) + md-switch-unchecked-button-color: rgb(140, 144, 159) + md-switch-unchecked-track-color: rgb(65, 71, 83) mdc-checkbox-unchecked-color: rgb(138, 140, 153) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: var(--accent-color) - mdc-switch-checked-track-color: var(--primary-color) - mdc-switch-unchecked-button-color: rgb(140, 144, 159) - mdc-switch-unchecked-track-color: rgb(65, 71, 83) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -1422,10 +1407,10 @@ Material Rounded Transparent Card No Mod Dark: slider-secondary-color: var(--primary-color) state-icon-color: rgb(196, 199, 197) state-inactive-color: rgb(72, 74, 78) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color) @@ -1450,7 +1435,6 @@ Material Rounded Transparent Card No Mod Light: codemirror-number: rgb(255 91 29) codemirror-property: var(--primary-color) codemirror-string: rgb(119 196 229) - dark-mode: 0 dark-primary-color: var(--primary-color) disabled-color: rgb(173, 176, 174) disabled-text-color: rgb(128, 128, 128) @@ -1482,16 +1466,16 @@ Material Rounded Transparent Card No Mod Light: link-text-color: var(--primary-color) lovelace-background: rgb(255, 255, 255) md-divider-color: var(--divider-color) + md-switch-checked-button-color: rgb(255, 255, 255) + md-switch-checked-track-color: rgb(0, 91, 191) + md-switch-unchecked-button-color: rgb(114, 119, 133) + md-switch-unchecked-track-color: rgb(222, 226, 242) mdc-checkbox-unchecked-color: rgb(42, 43, 51) mdc-dialog-scrim-color: rgba(4, 5, 7, 0.9) mdc-radio-unchecked-color: var(--mdc-checkbox-unchecked-color) mdc-select-fill-color: var(--input-fill-color) mdc-select-hover-line-color: var(--input-hover-line-color) mdc-select-idle-line-color: var(--input-idle-line-color) - mdc-switch-checked-button-color: rgb(255, 255, 255) - mdc-switch-checked-track-color: rgb(0, 91, 191) - mdc-switch-unchecked-button-color: rgb(114, 119, 133) - mdc-switch-unchecked-track-color: rgb(222, 226, 242) mdc-text-field-fill-color: var(--input-fill-color) mdc-text-field-hover-line-color: var(--input-hover-line-color) mdc-text-field-idle-line-color: var(--input-idle-line-color) @@ -1540,10 +1524,10 @@ Material Rounded Transparent Card No Mod Light: slider-color: rgb(211, 227, 253) slider-secondary-color: var(--primary-color) state-icon-color: rgb(69, 71, 70) - 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) + 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) text-accent-color: var(--primary-color) text-field-overflow: hidden text-light-primary-color: var(--text-primary-color)