diff --git a/src/common/card.yaml b/src/common/card.yaml index 952c1f7..3b42777 100644 --- a/src/common/card.yaml +++ b/src/common/card.yaml @@ -3,6 +3,10 @@ {{ user_colors.jinja }} {{ card.css }} +# No parent shadow-root in card +ha-switch$: >- + {{ ha_switch.css }} + # Entities header toggle hui-entities-toggle$ ha-switch$: >- {{ ha_switch.css }} diff --git a/themes/material_rounded.yaml b/themes/material_rounded.yaml index 87b8650..cee9078 100644 --- a/themes/material_rounded.yaml +++ b/themes/material_rounded.yaml @@ -8,8 +8,8 @@ Material Rounded: 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}\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}" + .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}"