2021.12: New configuration menu, the button entity, and gorgeous area cards!

Blog
395
Here're styles for an entity card: 
    --layout_-_display: flex;
    --layout-inline_-_display: inline-flex;
    --layout-horizontal_-_display: var(--layout_-_display);
    --layout-horizontal_-_-ms-flex-direction: row;
    --layout-horizontal_-_-webkit-flex-direction: row;
    --layout-horizontal_-_flex-direction: row;
    --layout-horizontal-reverse_-_display: var(--layout_-_display);
    --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
    --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
    --layout-horizontal-reverse_-_flex-direction: row-reverse;
    --layout-vertical_-_display: var(--layout_-_display);
    --layout-vertical_-_-ms-flex-direction: column;
    --layout-vertical_-_-webkit-flex-direction: column;
    --layout-vertical_-_flex-direction: column;
    --layout-vertical-reverse_-_display: var(--layout_-_display);
    --layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
    --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
    --layout-vertical-reverse_-_flex-direction: column-reverse;
    --layout-wrap_-_-ms-flex-wrap: wrap;
    --layout-wrap_-_-webkit-flex-wrap: wrap;
    --layout-wrap_-_flex-wrap: wrap;
    --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
    --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
    --layout-wrap-reverse_-_flex-wrap: wrap-reverse;
    --layout-flex-auto_-_-ms-flex: 1 1 auto;
    --layout-flex-auto_-_-webkit-flex: 1 1 auto;
    --layout-flex-auto_-_flex: 1 1 auto;
    --layout-flex-none_-_-ms-flex: none;
    --layout-flex-none_-_-webkit-flex: none;
    --layout-flex-none_-_flex: none;
    --layout-flex_-_-ms-flex: 1 1 0.000000001px;
    --layout-flex_-_-webkit-flex: 1;
    --layout-flex_-_flex: 1;
    --layout-flex_-_-webkit-flex-basis: 0.000000001px;
    --layout-flex_-_flex-basis: 0.000000001px;
    --layout-flex-2_-_-ms-flex: 2;
    --layout-flex-2_-_-webkit-flex: 2;
    --layout-flex-2_-_flex: 2;
    --layout-flex-3_-_-ms-flex: 3;
    --layout-flex-3_-_-webkit-flex: 3;
    --layout-flex-3_-_flex: 3;
    --layout-flex-4_-_-ms-flex: 4;
    --layout-flex-4_-_-webkit-flex: 4;
    --layout-flex-4_-_flex: 4;
    --layout-flex-5_-_-ms-flex: 5;
    --layout-flex-5_-_-webkit-flex: 5;
    --layout-flex-5_-_flex: 5;
    --layout-flex-6_-_-ms-flex: 6;
    --layout-flex-6_-_-webkit-flex: 6;
    --layout-flex-6_-_flex: 6;
    --layout-flex-7_-_-ms-flex: 7;
    --layout-flex-7_-_-webkit-flex: 7;
    --layout-flex-7_-_flex: 7;
    --layout-flex-8_-_-ms-flex: 8;
    --layout-flex-8_-_-webkit-flex: 8;
    --layout-flex-8_-_flex: 8;
    --layout-flex-9_-_-ms-flex: 9;
    --layout-flex-9_-_-webkit-flex: 9;
    --layout-flex-9_-_flex: 9;
    --layout-flex-10_-_-ms-flex: 10;
    --layout-flex-10_-_-webkit-flex: 10;
    --layout-flex-10_-_flex: 10;
    --layout-flex-11_-_-ms-flex: 11;
    --layout-flex-11_-_-webkit-flex: 11;
    --layout-flex-11_-_flex: 11;
    --layout-flex-12_-_-ms-flex: 12;
    --layout-flex-12_-_-webkit-flex: 12;
    --layout-flex-12_-_flex: 12;
    --layout-start_-_-ms-flex-align: start;
    --layout-start_-_-webkit-align-items: flex-start;
    --layout-start_-_align-items: flex-start;
    --layout-center_-_-ms-flex-align: center;
    --layout-center_-_-webkit-align-items: center;
    --layout-center_-_align-items: center;
    --layout-end_-_-ms-flex-align: end;
    --layout-end_-_-webkit-align-items: flex-end;
    --layout-end_-_align-items: flex-end;
    --layout-baseline_-_-ms-flex-align: baseline;
    --layout-baseline_-_-webkit-align-items: baseline;
    --layout-baseline_-_align-items: baseline;
    --layout-start-justified_-_-ms-flex-pack: start;
    --layout-start-justified_-_-webkit-justify-content: flex-start;
    --layout-start-justified_-_justify-content: flex-start;
    --layout-center-justified_-_-ms-flex-pack: center;
    --layout-center-justified_-_-webkit-justify-content: center;
    --layout-center-justified_-_justify-content: center;
    --layout-end-justified_-_-ms-flex-pack: end;
    --layout-end-justified_-_-webkit-justify-content: flex-end;
    --layout-end-justified_-_justify-content: flex-end;
    --layout-around-justified_-_-ms-flex-pack: distribute;
    --layout-around-justified_-_-webkit-justify-content: space-around;
    --layout-around-justified_-_justify-content: space-around;
    --layout-justified_-_-ms-flex-pack: justify;
    --layout-justified_-_-webkit-justify-content: space-between;
    --layout-justified_-_justify-content: space-between;
    --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align);
    --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items);
    --layout-center-center_-_align-items: var(--layout-center_-_align-items);
    --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack);
    --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content);
    --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);
    --layout-self-start_-_-ms-align-self: flex-start;
    --layout-self-start_-_-webkit-align-self: flex-start;
    --layout-self-start_-_align-self: flex-start;
    --layout-self-center_-_-ms-align-self: center;
    --layout-self-center_-_-webkit-align-self: center;
    --layout-self-center_-_align-self: center;
    --layout-self-end_-_-ms-align-self: flex-end;
    --layout-self-end_-_-webkit-align-self: flex-end;
    --layout-self-end_-_align-self: flex-end;
    --layout-self-stretch_-_-ms-align-self: stretch;
    --layout-self-stretch_-_-webkit-align-self: stretch;
    --layout-self-stretch_-_align-self: stretch;
    --layout-self-baseline_-_-ms-align-self: baseline;
    --layout-self-baseline_-_-webkit-align-self: baseline;
    --layout-self-baseline_-_align-self: baseline;
    --layout-start-aligned_-_-ms-flex-line-pack: start;
    --layout-start-aligned_-_-ms-align-content: flex-start;
    --layout-start-aligned_-_-webkit-align-content: flex-start;
    --layout-start-aligned_-_align-content: flex-start;
    --layout-end-aligned_-_-ms-flex-line-pack: end;
    --layout-end-aligned_-_-ms-align-content: flex-end;
    --layout-end-aligned_-_-webkit-align-content: flex-end;
    --layout-end-aligned_-_align-content: flex-end;
    --layout-center-aligned_-_-ms-flex-line-pack: center;
    --layout-center-aligned_-_-ms-align-content: center;
    --layout-center-aligned_-_-webkit-align-content: center;
    --layout-center-aligned_-_align-content: center;
    --layout-between-aligned_-_-ms-flex-line-pack: justify;
    --layout-between-aligned_-_-ms-align-content: space-between;
    --layout-between-aligned_-_-webkit-align-content: space-between;
    --layout-between-aligned_-_align-content: space-between;
    --layout-around-aligned_-_-ms-flex-line-pack: distribute;
    --layout-around-aligned_-_-ms-align-content: space-around;
    --layout-around-aligned_-_-webkit-align-content: space-around;
    --layout-around-aligned_-_align-content: space-around;
    --layout-block_-_display: block;
    --layout-invisible_-_visibility: hidden !important;
    --layout-relative_-_position: relative;
    --layout-fit_-_position: absolute;
    --layout-fit_-_top: 0;
    --layout-fit_-_right: 0;
    --layout-fit_-_bottom: 0;
    --layout-fit_-_left: 0;
    --layout-scroll_-_-webkit-overflow-scrolling: touch;
    --layout-scroll_-_overflow: auto;
    --layout-fullbleed_-_margin: 0;
    --layout-fullbleed_-_height: 100vh;
    --layout-fixed-top_-_position: fixed;
    --layout-fixed-top_-_top: 0;
    --layout-fixed-top_-_left: 0;
    --layout-fixed-top_-_right: 0;
    --layout-fixed-right_-_position: fixed;
    --layout-fixed-right_-_top: 0;
    --layout-fixed-right_-_right: 0;
    --layout-fixed-right_-_bottom: 0;
    --layout-fixed-bottom_-_position: fixed;
    --layout-fixed-bottom_-_right: 0;
    --layout-fixed-bottom_-_bottom: 0;
    --layout-fixed-bottom_-_left: 0;
    --layout-fixed-left_-_position: fixed;
    --layout-fixed-left_-_top: 0;
    --layout-fixed-left_-_bottom: 0;
    --layout-fixed-left_-_left: 0;
    --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-none_-_box-shadow: none;
    --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
                    0 1px 8px 0 rgba(0, 0, 0, 0.12),
                    0 3px 3px -2px rgba(0, 0, 0, 0.4);
    --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                    0 1px 10px 0 rgba(0, 0, 0, 0.12),
                    0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
                    0 1px 18px 0 rgba(0, 0, 0, 0.12),
                    0 3px 5px -1px rgba(0, 0, 0, 0.4);
    --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
                    0 5px 5px -3px rgba(0, 0, 0, 0.4);
    --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
                    0 4px 22px 3px rgba(0, 0, 0, 0.12),
                    0 6px 7px -4px rgba(0, 0, 0, 0.4);
    --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                    0  6px 30px 5px rgba(0, 0, 0, 0.12),
                    0  8px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
                    0 9px 46px 8px rgba(0, 0, 0, 0.12),
                    0 11px 15px -7px rgba(0, 0, 0, 0.4);
    --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif;
    --paper-font-common-base_-_-webkit-font-smoothing: antialiased;
    --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
    --paper-font-common-code_-_-webkit-font-smoothing: antialiased;
    --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;
    --paper-font-common-nowrap_-_white-space: nowrap;
    --paper-font-common-nowrap_-_overflow: hidden;
    --paper-font-common-nowrap_-_text-overflow: ellipsis;
    --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-display4_-_font-size: 112px;
    --paper-font-display4_-_font-weight: 300;
    --paper-font-display4_-_letter-spacing: -.044em;
    --paper-font-display4_-_line-height: 120px;
    --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-display3_-_font-size: 56px;
    --paper-font-display3_-_font-weight: 400;
    --paper-font-display3_-_letter-spacing: -.026em;
    --paper-font-display3_-_line-height: 60px;
    --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display2_-_font-size: 45px;
    --paper-font-display2_-_font-weight: 400;
    --paper-font-display2_-_letter-spacing: -.018em;
    --paper-font-display2_-_line-height: 48px;
    --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display1_-_font-size: 34px;
    --paper-font-display1_-_font-weight: 400;
    --paper-font-display1_-_letter-spacing: -.01em;
    --paper-font-display1_-_line-height: 40px;
    --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-headline_-_font-size: 24px;
    --paper-font-headline_-_font-weight: 400;
    --paper-font-headline_-_letter-spacing: -.012em;
    --paper-font-headline_-_line-height: 32px;
    --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-title_-_font-size: 20px;
    --paper-font-title_-_font-weight: 500;
    --paper-font-title_-_line-height: 28px;
    --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-subhead_-_font-size: 16px;
    --paper-font-subhead_-_font-weight: 400;
    --paper-font-subhead_-_line-height: 24px;
    --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-body2_-_font-size: 14px;
    --paper-font-body2_-_font-weight: 500;
    --paper-font-body2_-_line-height: 24px;
    --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-body1_-_font-size: 14px;
    --paper-font-body1_-_font-weight: 400;
    --paper-font-body1_-_line-height: 20px;
    --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-caption_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-caption_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-caption_-_font-size: 12px;
    --paper-font-caption_-_font-weight: 400;
    --paper-font-caption_-_letter-spacing: 0.011em;
    --paper-font-caption_-_line-height: 20px;
    --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-menu_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-menu_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-menu_-_font-size: 13px;
    --paper-font-menu_-_font-weight: 500;
    --paper-font-menu_-_line-height: 24px;
    --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-button_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-button_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-button_-_font-size: 14px;
    --paper-font-button_-_font-weight: 500;
    --paper-font-button_-_letter-spacing: 0.018em;
    --paper-font-button_-_line-height: 24px;
    --paper-font-button_-_text-transform: uppercase;
    --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family);
    --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing);
    --paper-font-code2_-_font-size: 14px;
    --paper-font-code2_-_font-weight: 700;
    --paper-font-code2_-_line-height: 20px;
    --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family);
    --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing);
    --paper-font-code1_-_font-size: 14px;
    --paper-font-code1_-_font-weight: 500;
    --paper-font-code1_-_line-height: 20px;
    --primary-text-color: #212121;
    --secondary-text-color: #727272;
    --text-primary-color: #ffffff;
    --text-light-primary-color: #212121;
    --disabled-text-color: #bdbdbd;
    --primary-color: #03a9f4;
    --dark-primary-color: #0288d1;
    --light-primary-color: #b3e5fC;
    --accent-color: #ff9800;
    --divider-color: rgba(0, 0, 0, .12);
    --scrollbar-thumb-color: rgb(194, 194, 194);
    --error-color: #db4437;
    --warning-color: #ffa600;
    --success-color: #43a047;
    --info-color: #039be5;
    --primary-background-color: #fafafa;
    --secondary-background-color: #e5e5e5;
    --header-height: 56px;
    --label-badge-red: #DF4C1E;
    --label-badge-blue: #039be5;
    --label-badge-green: #0DA035;
    --label-badge-yellow: #f4b400;
    --label-badge-grey: #9e9e9e;
    --state-icon-color: #44739e;
    --state-icon-active-color: #FDD835;
    --state-on-color: #66a61e;
    --state-off-color: #ff0029;
    --state-home-color: #66a61e;
    --state-not_home-color: #ff0029;
    --state-unknown-color: #606060;
    --state-idle-color: #7990a3;
    --state-climate-auto-color: #008000;
    --state-climate-eco-color: #00ff7f;
    --state-climate-cool-color: #2b9af9;
    --state-climate-heat-color: #ff8100;
    --state-climate-manual-color: #44739e;
    --state-climate-off-color: #8a8a8a;
    --state-climate-fan_only-color: #8a8a8a;
    --state-climate-dry-color: #efbd07;
    --state-climate-idle-color: #8a8a8a;
    --energy-grid-consumption-color: #488fc2;
    --energy-grid-return-color: #8353d1;
    --energy-solar-color: #ff9800;
    --energy-non-fossil-color: #0f9d58;
    --energy-battery-out-color: #4db6ac;
    --energy-battery-in-color: #f06292;
    --energy-gas-color: #8E021B;
    --dark-divider-opacity: 0.12;
    --dark-disabled-opacity: 0.38;
    --dark-secondary-opacity: 0.54;
    --dark-primary-opacity: 0.87;
    --light-divider-opacity: 0.12;
    --light-disabled-opacity: 0.3;
    --light-secondary-opacity: 0.7;
    --light-primary-opacity: 1.0;
    --rgb-primary-color: 3, 169, 244;
    --rgb-accent-color: 255, 152, 0;
    --rgb-primary-text-color: 33, 33, 33;
    --rgb-secondary-text-color: 114, 114, 114;
    --rgb-text-primary-color: 255, 255, 255;
    --rgb-card-background-color: 255, 255, 255;
    --input-idle-line-color: rgba(0, 0, 0, 0.42);
    --input-hover-line-color: rgba(0, 0, 0, 0.87);
    --input-disabled-line-color: rgba(0, 0, 0, 0.06);
    --input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
    --input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
    --input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
    --input-fill-color: rgb(245, 245, 245);
    --input-disabled-fill-color: rgb(250, 250, 250);
    --input-ink-color: rgba(0, 0, 0, 0.87);
    --input-label-ink-color: rgba(0, 0, 0, 0.6);
    --input-disabled-ink-color: rgba(0, 0, 0, 0.37);
    --input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
    --material-h6-font-size: 1.25rem;
    --material-small-font-size: 0.875rem;
    --material-caption-font-size: 0.75rem;
    --material-button-font-size: 0.875rem;
    --paper-input-container-shared-input-style_-_position: relative;
    --paper-input-container-shared-input-style_-_outline: none;
    --paper-input-container-shared-input-style_-_box-shadow: none;
    --paper-input-container-shared-input-style_-_padding: 0;
    --paper-input-container-shared-input-style_-_margin: 0;
    --paper-input-container-shared-input-style_-_width: 100%;
    --paper-input-container-shared-input-style_-_max-width: 100%;
    --paper-input-container-shared-input-style_-_background: transparent;
    --paper-input-container-shared-input-style_-_border: none;
    --paper-input-container-shared-input-style_-_color: var(--paper-input-container-input-color, var(--primary-text-color));
    --paper-input-container-shared-input-style_-_-webkit-appearance: none;
    --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit;
    --paper-input-container-shared-input-style_-_vertical-align: var(--paper-input-container-input-align, bottom);
    --paper-input-container-shared-input-style_-_font-family: var(--paper-font-subhead_-_font-family);
    --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
    --paper-input-container-shared-input-style_-_font-size: var(--paper-font-subhead_-_font-size);
    --paper-input-container-shared-input-style_-_font-weight: var(--paper-font-subhead_-_font-weight);
    --paper-input-container-shared-input-style_-_line-height: var(--paper-font-subhead_-_line-height);
    --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
    --material-primary-color: var(--primary-color, #6200ee);
    --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
    --material-primary-text-color: var(--material-primary-color);
    --material-error-color: var(--error-color, #b00020);
    --material-error-text-color: var(--material-error-color);
    --material-disabled-color: rgba(0, 0, 0, 0.26);
    --material-divider-color: rgba(0, 0, 0, 0.12);
    --material-shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --material-shadow-elevation-3dp: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-4dp: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
    text-shadow: transparent 0px 0px 0px, rgba(0,0,0,0.68) 0px 0px 0px !important;
    direction: ltr;
    --app-drawer-width: 56px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    font-family: var(--paper-font-body1_-_font-family);
    -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);
    font-size: var(--paper-font-body1_-_font-size);
    font-weight: var(--paper-font-body1_-_font-weight);
    line-height: var(--paper-font-body1_-_line-height);
    user-select: none;
    --state-icon-error-color: var(--error-state-color, var(--error-color));
    --state-unavailable-color: var(--state-icon-unavailable-color, var(--disabled-text-color));
    --sidebar-text-color: var(--primary-text-color);
    --sidebar-background-color: var(--card-background-color);
    --sidebar-selected-text-color: var(--primary-color);
    --sidebar-selected-icon-color: var(--primary-color);
    --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
    --switch-checked-color: var(--primary-color);
    --switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
    --switch-checked-track-color: var(--switch-checked-color, #000000);
    --switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
    --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
    --slider-color: var(--primary-color);
    --slider-secondary-color: var(--light-primary-color);
    --slider-track-color: var(--scrollbar-thumb-color);
    --label-badge-background-color: var(--card-background-color);
    --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8);
    --paper-listbox-background-color: var(--card-background-color);
    --paper-item-icon-color: var(--state-icon-color);
    --paper-item-icon-active-color: var(--state-icon-active-color);
    --table-row-background-color: var(--primary-background-color);
    --table-row-alternative-background-color: var(--secondary-background-color);
    --paper-slider-knob-color: var(--slider-color);
    --paper-slider-knob-start-color: var(--slider-color);
    --paper-slider-pin-color: var(--slider-color);
    --paper-slider-pin-start-color: var(--slider-color);
    --paper-slider-active-color: var(--slider-color);
    --paper-slider-secondary-color: var(--slider-secondary-color);
    --paper-slider-container-color: var(--slider-track-color);
    --data-table-background-color: var(--card-background-color);
    --markdown-code-background-color: var(--primary-background-color);
    --mdc-theme-primary: var(--primary-color);
    --mdc-theme-secondary: var(--accent-color);
    --mdc-theme-background: var(--primary-background-color);
    --mdc-theme-surface: var(--card-background-color);
    --mdc-theme-on-primary: var(--text-primary-color);
    --mdc-theme-on-secondary: var(--text-primary-color);
    --mdc-theme-on-surface: var(--primary-text-color);
    --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
    --mdc-theme-text-primary-on-background: var(--primary-text-color);
    --mdc-theme-text-secondary-on-background: var(--secondary-text-color);
    --mdc-theme-text-hint-on-background: var(--secondary-text-color);
    --mdc-theme-text-icon-on-background: var(--secondary-text-color);
    --mdc-theme-error: var(--error-color);
    --app-header-text-color: var(--text-primary-color);
    --app-header-background-color: var(--primary-color);
    --mdc-checkbox-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54);
    --mdc-checkbox-disabled-color: var(--disabled-text-color);
    --mdc-radio-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54);
    --mdc-radio-disabled-color: var(--disabled-text-color);
    --mdc-tab-text-label-color-default: var(--primary-text-color);
    --mdc-button-disabled-ink-color: var(--disabled-text-color);
    --mdc-button-outline-color: var(--divider-color);
    --mdc-dialog-scroll-divider-color: var(--divider-color);
    --mdc-text-field-idle-line-color: var(--input-idle-line-color);
    --mdc-text-field-hover-line-color: var(--input-hover-line-color);
    --mdc-text-field-disabled-line-color: var(--input-disabled-line-color);
    --mdc-text-field-outlined-idle-border-color: var(--input-outlined-idle-border-color);
    --mdc-text-field-outlined-hover-border-color: var(--input-outlined-hover-border-color);
    --mdc-text-field-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
    --mdc-text-field-fill-color: var(--input-fill-color);
    --mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color);
    --mdc-text-field-ink-color: var(--input-ink-color);
    --mdc-text-field-label-ink-color: var(--input-label-ink-color);
    --mdc-text-field-disabled-ink-color: var(--input-disabled-ink-color);
    --mdc-select-idle-line-color: var(--input-idle-line-color);
    --mdc-select-hover-line-color: var(--input-hover-line-color);
    --mdc-select-outlined-idle-border-color: var(--input-outlined-idle-border-color);
    --mdc-select-outlined-hover-border-color: var(--input-outlined-hover-border-color);
    --mdc-select-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
    --mdc-select-fill-color: var(--input-fill-color);
    --mdc-select-disabled-fill-color: var(--input-disabled-fill-color);
    --mdc-select-ink-color: var(--input-ink-color);
    --mdc-select-label-ink-color: var(--input-label-ink-color);
    --mdc-select-disabled-ink-color: var(--input-disabled-ink-color);
    --mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color);
    --mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color);
    --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);
    --material-body-text-color: var(--primary-text-color);
    --material-background-color: var(--card-background-color);
    --material-secondary-background-color: var(--secondary-background-color);
    --material-secondary-text-color: var(--secondary-text-color);
    --card-background-color: LightPink;
    --ha-card-background: LightPink;
    background: var( --ha-card-background, var(--card-background-color, white) );
    border-radius: var(--ha-card-border-radius, 4px);
    box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
    color: var(--primary-text-color);
    transition: all 0.3s ease-out 0s;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
396
...and for it's edit panel: 
    --layout_-_display: flex;
    --layout-inline_-_display: inline-flex;
    --layout-horizontal_-_display: var(--layout_-_display);
    --layout-horizontal_-_-ms-flex-direction: row;
    --layout-horizontal_-_-webkit-flex-direction: row;
    --layout-horizontal_-_flex-direction: row;
    --layout-horizontal-reverse_-_display: var(--layout_-_display);
    --layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
    --layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
    --layout-horizontal-reverse_-_flex-direction: row-reverse;
    --layout-vertical_-_display: var(--layout_-_display);
    --layout-vertical_-_-ms-flex-direction: column;
    --layout-vertical_-_-webkit-flex-direction: column;
    --layout-vertical_-_flex-direction: column;
    --layout-vertical-reverse_-_display: var(--layout_-_display);
    --layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
    --layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
    --layout-vertical-reverse_-_flex-direction: column-reverse;
    --layout-wrap_-_-ms-flex-wrap: wrap;
    --layout-wrap_-_-webkit-flex-wrap: wrap;
    --layout-wrap_-_flex-wrap: wrap;
    --layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
    --layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
    --layout-wrap-reverse_-_flex-wrap: wrap-reverse;
    --layout-flex-auto_-_-ms-flex: 1 1 auto;
    --layout-flex-auto_-_-webkit-flex: 1 1 auto;
    --layout-flex-auto_-_flex: 1 1 auto;
    --layout-flex-none_-_-ms-flex: none;
    --layout-flex-none_-_-webkit-flex: none;
    --layout-flex-none_-_flex: none;
    --layout-flex_-_-ms-flex: 1 1 0.000000001px;
    --layout-flex_-_-webkit-flex: 1;
    --layout-flex_-_flex: 1;
    --layout-flex_-_-webkit-flex-basis: 0.000000001px;
    --layout-flex_-_flex-basis: 0.000000001px;
    --layout-flex-2_-_-ms-flex: 2;
    --layout-flex-2_-_-webkit-flex: 2;
    --layout-flex-2_-_flex: 2;
    --layout-flex-3_-_-ms-flex: 3;
    --layout-flex-3_-_-webkit-flex: 3;
    --layout-flex-3_-_flex: 3;
    --layout-flex-4_-_-ms-flex: 4;
    --layout-flex-4_-_-webkit-flex: 4;
    --layout-flex-4_-_flex: 4;
    --layout-flex-5_-_-ms-flex: 5;
    --layout-flex-5_-_-webkit-flex: 5;
    --layout-flex-5_-_flex: 5;
    --layout-flex-6_-_-ms-flex: 6;
    --layout-flex-6_-_-webkit-flex: 6;
    --layout-flex-6_-_flex: 6;
    --layout-flex-7_-_-ms-flex: 7;
    --layout-flex-7_-_-webkit-flex: 7;
    --layout-flex-7_-_flex: 7;
    --layout-flex-8_-_-ms-flex: 8;
    --layout-flex-8_-_-webkit-flex: 8;
    --layout-flex-8_-_flex: 8;
    --layout-flex-9_-_-ms-flex: 9;
    --layout-flex-9_-_-webkit-flex: 9;
    --layout-flex-9_-_flex: 9;
    --layout-flex-10_-_-ms-flex: 10;
    --layout-flex-10_-_-webkit-flex: 10;
    --layout-flex-10_-_flex: 10;
    --layout-flex-11_-_-ms-flex: 11;
    --layout-flex-11_-_-webkit-flex: 11;
    --layout-flex-11_-_flex: 11;
    --layout-flex-12_-_-ms-flex: 12;
    --layout-flex-12_-_-webkit-flex: 12;
    --layout-flex-12_-_flex: 12;
    --layout-start_-_-ms-flex-align: start;
    --layout-start_-_-webkit-align-items: flex-start;
    --layout-start_-_align-items: flex-start;
    --layout-center_-_-ms-flex-align: center;
    --layout-center_-_-webkit-align-items: center;
    --layout-center_-_align-items: center;
    --layout-end_-_-ms-flex-align: end;
    --layout-end_-_-webkit-align-items: flex-end;
    --layout-end_-_align-items: flex-end;
    --layout-baseline_-_-ms-flex-align: baseline;
    --layout-baseline_-_-webkit-align-items: baseline;
    --layout-baseline_-_align-items: baseline;
    --layout-start-justified_-_-ms-flex-pack: start;
    --layout-start-justified_-_-webkit-justify-content: flex-start;
    --layout-start-justified_-_justify-content: flex-start;
    --layout-center-justified_-_-ms-flex-pack: center;
    --layout-center-justified_-_-webkit-justify-content: center;
    --layout-center-justified_-_justify-content: center;
    --layout-end-justified_-_-ms-flex-pack: end;
    --layout-end-justified_-_-webkit-justify-content: flex-end;
    --layout-end-justified_-_justify-content: flex-end;
    --layout-around-justified_-_-ms-flex-pack: distribute;
    --layout-around-justified_-_-webkit-justify-content: space-around;
    --layout-around-justified_-_justify-content: space-around;
    --layout-justified_-_-ms-flex-pack: justify;
    --layout-justified_-_-webkit-justify-content: space-between;
    --layout-justified_-_justify-content: space-between;
    --layout-center-center_-_-ms-flex-align: var(--layout-center_-_-ms-flex-align);
    --layout-center-center_-_-webkit-align-items: var(--layout-center_-_-webkit-align-items);
    --layout-center-center_-_align-items: var(--layout-center_-_align-items);
    --layout-center-center_-_-ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack);
    --layout-center-center_-_-webkit-justify-content: var(--layout-center-justified_-_-webkit-justify-content);
    --layout-center-center_-_justify-content: var(--layout-center-justified_-_justify-content);
    --layout-self-start_-_-ms-align-self: flex-start;
    --layout-self-start_-_-webkit-align-self: flex-start;
    --layout-self-start_-_align-self: flex-start;
    --layout-self-center_-_-ms-align-self: center;
    --layout-self-center_-_-webkit-align-self: center;
    --layout-self-center_-_align-self: center;
    --layout-self-end_-_-ms-align-self: flex-end;
    --layout-self-end_-_-webkit-align-self: flex-end;
    --layout-self-end_-_align-self: flex-end;
    --layout-self-stretch_-_-ms-align-self: stretch;
    --layout-self-stretch_-_-webkit-align-self: stretch;
    --layout-self-stretch_-_align-self: stretch;
    --layout-self-baseline_-_-ms-align-self: baseline;
    --layout-self-baseline_-_-webkit-align-self: baseline;
    --layout-self-baseline_-_align-self: baseline;
    --layout-start-aligned_-_-ms-flex-line-pack: start;
    --layout-start-aligned_-_-ms-align-content: flex-start;
    --layout-start-aligned_-_-webkit-align-content: flex-start;
    --layout-start-aligned_-_align-content: flex-start;
    --layout-end-aligned_-_-ms-flex-line-pack: end;
    --layout-end-aligned_-_-ms-align-content: flex-end;
    --layout-end-aligned_-_-webkit-align-content: flex-end;
    --layout-end-aligned_-_align-content: flex-end;
    --layout-center-aligned_-_-ms-flex-line-pack: center;
    --layout-center-aligned_-_-ms-align-content: center;
    --layout-center-aligned_-_-webkit-align-content: center;
    --layout-center-aligned_-_align-content: center;
    --layout-between-aligned_-_-ms-flex-line-pack: justify;
    --layout-between-aligned_-_-ms-align-content: space-between;
    --layout-between-aligned_-_-webkit-align-content: space-between;
    --layout-between-aligned_-_align-content: space-between;
    --layout-around-aligned_-_-ms-flex-line-pack: distribute;
    --layout-around-aligned_-_-ms-align-content: space-around;
    --layout-around-aligned_-_-webkit-align-content: space-around;
    --layout-around-aligned_-_align-content: space-around;
    --layout-block_-_display: block;
    --layout-invisible_-_visibility: hidden !important;
    --layout-relative_-_position: relative;
    --layout-fit_-_position: absolute;
    --layout-fit_-_top: 0;
    --layout-fit_-_right: 0;
    --layout-fit_-_bottom: 0;
    --layout-fit_-_left: 0;
    --layout-scroll_-_-webkit-overflow-scrolling: touch;
    --layout-scroll_-_overflow: auto;
    --layout-fullbleed_-_margin: 0;
    --layout-fullbleed_-_height: 100vh;
    --layout-fixed-top_-_position: fixed;
    --layout-fixed-top_-_top: 0;
    --layout-fixed-top_-_left: 0;
    --layout-fixed-top_-_right: 0;
    --layout-fixed-right_-_position: fixed;
    --layout-fixed-right_-_top: 0;
    --layout-fixed-right_-_right: 0;
    --layout-fixed-right_-_bottom: 0;
    --layout-fixed-bottom_-_position: fixed;
    --layout-fixed-bottom_-_right: 0;
    --layout-fixed-bottom_-_bottom: 0;
    --layout-fixed-bottom_-_left: 0;
    --layout-fixed-left_-_position: fixed;
    --layout-fixed-left_-_top: 0;
    --layout-fixed-left_-_bottom: 0;
    --layout-fixed-left_-_left: 0;
    --shadow-transition_-_transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-none_-_box-shadow: none;
    --shadow-elevation-2dp_-_box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
                    0 1px 5px 0 rgba(0, 0, 0, 0.12),
                    0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --shadow-elevation-3dp_-_box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
                    0 1px 8px 0 rgba(0, 0, 0, 0.12),
                    0 3px 3px -2px rgba(0, 0, 0, 0.4);
    --shadow-elevation-4dp_-_box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
                    0 1px 10px 0 rgba(0, 0, 0, 0.12),
                    0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-elevation-6dp_-_box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
                    0 1px 18px 0 rgba(0, 0, 0, 0.12),
                    0 3px 5px -1px rgba(0, 0, 0, 0.4);
    --shadow-elevation-8dp_-_box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
                    0 3px 14px 2px rgba(0, 0, 0, 0.12),
                    0 5px 5px -3px rgba(0, 0, 0, 0.4);
    --shadow-elevation-12dp_-_box-shadow: 0 12px 16px 1px rgba(0, 0, 0, 0.14),
                    0 4px 22px 3px rgba(0, 0, 0, 0.12),
                    0 6px 7px -4px rgba(0, 0, 0, 0.4);
    --shadow-elevation-16dp_-_box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                    0  6px 30px 5px rgba(0, 0, 0, 0.12),
                    0  8px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-elevation-24dp_-_box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14),
                    0 9px 46px 8px rgba(0, 0, 0, 0.12),
                    0 11px 15px -7px rgba(0, 0, 0, 0.4);
    --paper-font-common-base_-_font-family: 'Roboto', 'Noto', sans-serif;
    --paper-font-common-base_-_-webkit-font-smoothing: antialiased;
    --paper-font-common-code_-_font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
    --paper-font-common-code_-_-webkit-font-smoothing: antialiased;
    --paper-font-common-expensive-kerning_-_text-rendering: optimizeLegibility;
    --paper-font-common-nowrap_-_white-space: nowrap;
    --paper-font-common-nowrap_-_overflow: hidden;
    --paper-font-common-nowrap_-_text-overflow: ellipsis;
    --paper-font-display4_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display4_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display4_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-display4_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-display4_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-display4_-_font-size: 112px;
    --paper-font-display4_-_font-weight: 300;
    --paper-font-display4_-_letter-spacing: -.044em;
    --paper-font-display4_-_line-height: 120px;
    --paper-font-display3_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display3_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display3_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-display3_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-display3_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-display3_-_font-size: 56px;
    --paper-font-display3_-_font-weight: 400;
    --paper-font-display3_-_letter-spacing: -.026em;
    --paper-font-display3_-_line-height: 60px;
    --paper-font-display2_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display2_-_font-size: 45px;
    --paper-font-display2_-_font-weight: 400;
    --paper-font-display2_-_letter-spacing: -.018em;
    --paper-font-display2_-_line-height: 48px;
    --paper-font-display1_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-display1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-display1_-_font-size: 34px;
    --paper-font-display1_-_font-weight: 400;
    --paper-font-display1_-_letter-spacing: -.01em;
    --paper-font-display1_-_line-height: 40px;
    --paper-font-headline_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-headline_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-headline_-_font-size: 24px;
    --paper-font-headline_-_font-weight: 400;
    --paper-font-headline_-_letter-spacing: -.012em;
    --paper-font-headline_-_line-height: 32px;
    --paper-font-title_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-title_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-title_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-title_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-title_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-title_-_font-size: 20px;
    --paper-font-title_-_font-weight: 500;
    --paper-font-title_-_line-height: 28px;
    --paper-font-subhead_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-subhead_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-subhead_-_font-size: 16px;
    --paper-font-subhead_-_font-weight: 400;
    --paper-font-subhead_-_line-height: 24px;
    --paper-font-body2_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-body2_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-body2_-_font-size: 14px;
    --paper-font-body2_-_font-weight: 500;
    --paper-font-body2_-_line-height: 24px;
    --paper-font-body1_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-body1_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-body1_-_font-size: 14px;
    --paper-font-body1_-_font-weight: 400;
    --paper-font-body1_-_line-height: 20px;
    --paper-font-caption_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-caption_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-caption_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-caption_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-caption_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-caption_-_font-size: 12px;
    --paper-font-caption_-_font-weight: 400;
    --paper-font-caption_-_letter-spacing: 0.011em;
    --paper-font-caption_-_line-height: 20px;
    --paper-font-menu_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-menu_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-menu_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-menu_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-menu_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-menu_-_font-size: 13px;
    --paper-font-menu_-_font-weight: 500;
    --paper-font-menu_-_line-height: 24px;
    --paper-font-button_-_font-family: var(--paper-font-common-base_-_font-family);
    --paper-font-button_-_-webkit-font-smoothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
    --paper-font-button_-_white-space: var(--paper-font-common-nowrap_-_white-space);
    --paper-font-button_-_overflow: var(--paper-font-common-nowrap_-_overflow);
    --paper-font-button_-_text-overflow: var(--paper-font-common-nowrap_-_text-overflow);
    --paper-font-button_-_font-size: 14px;
    --paper-font-button_-_font-weight: 500;
    --paper-font-button_-_letter-spacing: 0.018em;
    --paper-font-button_-_line-height: 24px;
    --paper-font-button_-_text-transform: uppercase;
    --paper-font-code2_-_font-family: var(--paper-font-common-code_-_font-family);
    --paper-font-code2_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing);
    --paper-font-code2_-_font-size: 14px;
    --paper-font-code2_-_font-weight: 700;
    --paper-font-code2_-_line-height: 20px;
    --paper-font-code1_-_font-family: var(--paper-font-common-code_-_font-family);
    --paper-font-code1_-_-webkit-font-smoothing: var(--paper-font-common-code_-_-webkit-font-smoothing);
    --paper-font-code1_-_font-size: 14px;
    --paper-font-code1_-_font-weight: 500;
    --paper-font-code1_-_line-height: 20px;
    --primary-text-color: #212121;
    --secondary-text-color: #727272;
    --text-primary-color: #ffffff;
    --text-light-primary-color: #212121;
    --disabled-text-color: #bdbdbd;
    --primary-color: #03a9f4;
    --dark-primary-color: #0288d1;
    --light-primary-color: #b3e5fC;
    --accent-color: #ff9800;
    --divider-color: rgba(0, 0, 0, .12);
    --scrollbar-thumb-color: rgb(194, 194, 194);
    --error-color: #db4437;
    --warning-color: #ffa600;
    --success-color: #43a047;
    --info-color: #039be5;
    --primary-background-color: #fafafa;
    --secondary-background-color: #e5e5e5;
    --header-height: 56px;
    --label-badge-red: #DF4C1E;
    --label-badge-blue: #039be5;
    --label-badge-green: #0DA035;
    --label-badge-yellow: #f4b400;
    --label-badge-grey: #9e9e9e;
    --state-icon-color: #44739e;
    --state-icon-active-color: #FDD835;
    --state-on-color: #66a61e;
    --state-off-color: #ff0029;
    --state-home-color: #66a61e;
    --state-not_home-color: #ff0029;
    --state-unknown-color: #606060;
    --state-idle-color: #7990a3;
    --state-climate-auto-color: #008000;
    --state-climate-eco-color: #00ff7f;
    --state-climate-cool-color: #2b9af9;
    --state-climate-heat-color: #ff8100;
    --state-climate-manual-color: #44739e;
    --state-climate-off-color: #8a8a8a;
    --state-climate-fan_only-color: #8a8a8a;
    --state-climate-dry-color: #efbd07;
    --state-climate-idle-color: #8a8a8a;
    --energy-grid-consumption-color: #488fc2;
    --energy-grid-return-color: #8353d1;
    --energy-solar-color: #ff9800;
    --energy-non-fossil-color: #0f9d58;
    --energy-battery-out-color: #4db6ac;
    --energy-battery-in-color: #f06292;
    --energy-gas-color: #8E021B;
    --dark-divider-opacity: 0.12;
    --dark-disabled-opacity: 0.38;
    --dark-secondary-opacity: 0.54;
    --dark-primary-opacity: 0.87;
    --light-divider-opacity: 0.12;
    --light-disabled-opacity: 0.3;
    --light-secondary-opacity: 0.7;
    --light-primary-opacity: 1.0;
    --rgb-primary-color: 3, 169, 244;
    --rgb-accent-color: 255, 152, 0;
    --rgb-primary-text-color: 33, 33, 33;
    --rgb-secondary-text-color: 114, 114, 114;
    --rgb-text-primary-color: 255, 255, 255;
    --rgb-card-background-color: 255, 255, 255;
    --input-idle-line-color: rgba(0, 0, 0, 0.42);
    --input-hover-line-color: rgba(0, 0, 0, 0.87);
    --input-disabled-line-color: rgba(0, 0, 0, 0.06);
    --input-outlined-idle-border-color: rgba(0, 0, 0, 0.38);
    --input-outlined-hover-border-color: rgba(0, 0, 0, 0.87);
    --input-outlined-disabled-border-color: rgba(0, 0, 0, 0.06);
    --input-fill-color: rgb(245, 245, 245);
    --input-disabled-fill-color: rgb(250, 250, 250);
    --input-ink-color: rgba(0, 0, 0, 0.87);
    --input-label-ink-color: rgba(0, 0, 0, 0.6);
    --input-disabled-ink-color: rgba(0, 0, 0, 0.37);
    --input-dropdown-icon-color: rgba(0, 0, 0, 0.54);
    --material-h6-font-size: 1.25rem;
    --material-small-font-size: 0.875rem;
    --material-caption-font-size: 0.75rem;
    --material-button-font-size: 0.875rem;
    --paper-input-container-shared-input-style_-_position: relative;
    --paper-input-container-shared-input-style_-_outline: none;
    --paper-input-container-shared-input-style_-_box-shadow: none;
    --paper-input-container-shared-input-style_-_padding: 0;
    --paper-input-container-shared-input-style_-_margin: 0;
    --paper-input-container-shared-input-style_-_width: 100%;
    --paper-input-container-shared-input-style_-_max-width: 100%;
    --paper-input-container-shared-input-style_-_background: transparent;
    --paper-input-container-shared-input-style_-_border: none;
    --paper-input-container-shared-input-style_-_color: var(--paper-input-container-input-color, var(--primary-text-color));
    --paper-input-container-shared-input-style_-_-webkit-appearance: none;
    --paper-input-container-shared-input-style_-_text-align: apply-shim-inherit;
    --paper-input-container-shared-input-style_-_vertical-align: var(--paper-input-container-input-align, bottom);
    --paper-input-container-shared-input-style_-_font-family: var(--paper-font-subhead_-_font-family);
    --paper-input-container-shared-input-style_-_-webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
    --paper-input-container-shared-input-style_-_font-size: var(--paper-font-subhead_-_font-size);
    --paper-input-container-shared-input-style_-_font-weight: var(--paper-font-subhead_-_font-weight);
    --paper-input-container-shared-input-style_-_line-height: var(--paper-font-subhead_-_line-height);
    --material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
    --material-primary-color: var(--primary-color, #6200ee);
    --material-primary-contrast-color: var(--dark-theme-base-color, #fff);
    --material-primary-text-color: var(--material-primary-color);
    --material-error-color: var(--error-color, #b00020);
    --material-error-text-color: var(--material-error-color);
    --material-disabled-color: rgba(0, 0, 0, 0.26);
    --material-divider-color: rgba(0, 0, 0, 0.12);
    --material-shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
    --material-shadow-elevation-3dp: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-4dp: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
    --material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
    text-shadow: transparent 0px 0px 0px, rgba(0,0,0,0.68) 0px 0px 0px !important;
    direction: ltr;
    --app-drawer-width: 56px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    font-family: var(--paper-font-body1_-_font-family);
    -webkit-font-smoothing: var(--paper-font-body1_-_-webkit-font-smoothing);
    font-size: var(--paper-font-body1_-_font-size);
    font-weight: var(--paper-font-body1_-_font-weight);
    line-height: var(--paper-font-body1_-_line-height);
    user-select: none;
    --state-icon-error-color: var(--error-state-color, var(--error-color));
    --state-unavailable-color: var(--state-icon-unavailable-color, var(--disabled-text-color));
    --sidebar-text-color: var(--primary-text-color);
    --sidebar-background-color: var(--card-background-color);
    --sidebar-selected-text-color: var(--primary-color);
    --sidebar-selected-icon-color: var(--primary-color);
    --sidebar-icon-color: rgba(var(--rgb-primary-text-color), 0.6);
    --switch-checked-color: var(--primary-color);
    --switch-checked-button-color: var(--switch-checked-color, var(--primary-background-color));
    --switch-checked-track-color: var(--switch-checked-color, #000000);
    --switch-unchecked-button-color: var(--switch-unchecked-color, var(--primary-background-color));
    --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
    --slider-color: var(--primary-color);
    --slider-secondary-color: var(--light-primary-color);
    --slider-track-color: var(--scrollbar-thumb-color);
    --label-badge-background-color: var(--card-background-color);
    --label-badge-text-color: rgba(var(--rgb-primary-text-color), 0.8);
    --paper-listbox-background-color: var(--card-background-color);
    --paper-item-icon-color: var(--state-icon-color);
    --paper-item-icon-active-color: var(--state-icon-active-color);
    --table-row-background-color: var(--primary-background-color);
    --table-row-alternative-background-color: var(--secondary-background-color);
    --paper-slider-knob-color: var(--slider-color);
    --paper-slider-knob-start-color: var(--slider-color);
    --paper-slider-pin-color: var(--slider-color);
    --paper-slider-pin-start-color: var(--slider-color);
    --paper-slider-active-color: var(--slider-color);
    --paper-slider-secondary-color: var(--slider-secondary-color);
    --paper-slider-container-color: var(--slider-track-color);
    --data-table-background-color: var(--card-background-color);
    --markdown-code-background-color: var(--primary-background-color);
    --mdc-theme-primary: var(--primary-color);
    --mdc-theme-secondary: var(--accent-color);
    --mdc-theme-background: var(--primary-background-color);
    --mdc-theme-surface: var(--card-background-color);
    --mdc-theme-on-primary: var(--text-primary-color);
    --mdc-theme-on-secondary: var(--text-primary-color);
    --mdc-theme-on-surface: var(--primary-text-color);
    --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
    --mdc-theme-text-primary-on-background: var(--primary-text-color);
    --mdc-theme-text-secondary-on-background: var(--secondary-text-color);
    --mdc-theme-text-hint-on-background: var(--secondary-text-color);
    --mdc-theme-text-icon-on-background: var(--secondary-text-color);
    --mdc-theme-error: var(--error-color);
    --app-header-text-color: var(--text-primary-color);
    --app-header-background-color: var(--primary-color);
    --mdc-checkbox-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54);
    --mdc-checkbox-disabled-color: var(--disabled-text-color);
    --mdc-radio-unchecked-color: rgba(var(--rgb-primary-text-color), 0.54);
    --mdc-radio-disabled-color: var(--disabled-text-color);
    --mdc-tab-text-label-color-default: var(--primary-text-color);
    --mdc-button-disabled-ink-color: var(--disabled-text-color);
    --mdc-button-outline-color: var(--divider-color);
    --mdc-dialog-scroll-divider-color: var(--divider-color);
    --mdc-text-field-idle-line-color: var(--input-idle-line-color);
    --mdc-text-field-hover-line-color: var(--input-hover-line-color);
    --mdc-text-field-disabled-line-color: var(--input-disabled-line-color);
    --mdc-text-field-outlined-idle-border-color: var(--input-outlined-idle-border-color);
    --mdc-text-field-outlined-hover-border-color: var(--input-outlined-hover-border-color);
    --mdc-text-field-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
    --mdc-text-field-fill-color: var(--input-fill-color);
    --mdc-text-field-disabled-fill-color: var(--input-disabled-fill-color);
    --mdc-text-field-ink-color: var(--input-ink-color);
    --mdc-text-field-label-ink-color: var(--input-label-ink-color);
    --mdc-text-field-disabled-ink-color: var(--input-disabled-ink-color);
    --mdc-select-idle-line-color: var(--input-idle-line-color);
    --mdc-select-hover-line-color: var(--input-hover-line-color);
    --mdc-select-outlined-idle-border-color: var(--input-outlined-idle-border-color);
    --mdc-select-outlined-hover-border-color: var(--input-outlined-hover-border-color);
    --mdc-select-outlined-disabled-border-color: var(--input-outlined-disabled-border-color);
    --mdc-select-fill-color: var(--input-fill-color);
    --mdc-select-disabled-fill-color: var(--input-disabled-fill-color);
    --mdc-select-ink-color: var(--input-ink-color);
    --mdc-select-label-ink-color: var(--input-label-ink-color);
    --mdc-select-disabled-ink-color: var(--input-disabled-ink-color);
    --mdc-select-dropdown-icon-color: var(--input-dropdown-icon-color);
    --mdc-select-disabled-dropdown-icon-color: var(--input-disabled-ink-color);
    --chip-background-color: rgba(var(--rgb-primary-text-color), 0.15);
    --material-body-text-color: var(--primary-text-color);
    --material-background-color: var(--card-background-color);
    --material-secondary-background-color: var(--secondary-background-color);
    --material-secondary-text-color: var(--secondary-text-color);
    --card-background-color: LightCyan;
    --ha-card-background: LightCyan;
    background: var( --ha-card-background, var(--card-background-color, white) );
    border-radius: var(--ha-card-border-radius, 4px);
    box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) );
    color: var(--primary-text-color);
    display: block;
    transition: all 0.3s ease-out 0s;
    position: relative;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
397

Just have a look and jump into the discussion here Navigation concept · home-assistant/frontend · Discussion #10491 · GitHub, but don’t expect one single reply from the decision makers of these “improvements” - aka removal of usability.

398

Has anyone gotten the Jellyfin integration to work?

The config seems really simple from the integration page, but everytime I try to connect it fails.

image

image

image
image976×43 8.92 KB

399

For a restart? No clicks needed :grinning_face_with_smiling_eyes: . Can all be done through the quickbar with a few single keystrokes (not sure if mobile supports that though).

EDIT: I see others already pointed that out as well already. My bad…

400

Hi all! Thank you for all the feedback about the menu change in 2021.12. Any feedback is welcome to make Home Assistant a better product for all of us . Although some comments are not constructive and may be interpreted as a personal attack.

Love to see that a lot of you are personal committed to Home Assistant. Please use that energy into making something positive, like sharing thoughts and ideas. Or even design or develop! I just replied at the Github discussion, feel free to join: Navigation concept · Discussion #10491 · home-assistant/frontend · GitHub

17 Likes
401

You know, it’s possible to convey your opinion while having a positive tone. I’d certainly ignore all those comments on that as well. I’m not sure what the word is that I’m looking for, however, I would not reply positively to any of those messages in that discussion. So, while you may think those messages help your cause, they certainly do not.

E.g.

“Hey I’m not a fan of this new design, how can we make it easier to get to these pages that are now buried further in the menu? Here are some of my ideas…”

Instead of

“Who thought this was great, its terrible. No one thought this through. Rah rah rah rah rah”

Just my 2c. You’re welcome to ignore me, but I’m sure they’ll ignore those responses.

16 Likes
402

Hello everyone following an upgrade of “Home Assistant Core 2021.12.0” to “Home Assistant Core 2021.12.1” the key that I had previously worked for opening and closing doors of my “MINI Cooper S” now no longer works on the board is in the “Not Available” state, this key was referring to the entity: “lock.cooper_s_lock”. To make sure that with the release “Home Assistant Core 2021.12.0” it worked well I reloaded a backup and the key returned to work as I reinstalled the release Home Assistant Core 2021.12.1 it stopped working again making itself “Unavailable”. Could you help me understand? or to solve the problem?

1 Like
403

I’m sorry if someone aleady ask for it but where is the section with virtual switch and timer and the rest ? Thanks.

404

Would you mind sharing your yaml for your development dashboard?

3 Likes
405

Helpers?

They are here:

image
image1252×180 14.9 KB

Click on each item in the new menu and take a tour!

1 Like
406

Regarding the issue with the flash option having been removed from the Hue API, am I missing something when people are saying that the light states need to be stored and then restored (as a scene snapshot using scene.create, I assume). Can’t this be done with the light.toggle service and a 1 second delay in between? As long as you are toggling the light an even number of times, it will always return to the state it was in previously? It is a little bit of a pain to have to change your exisiting automations (I have a number I will need to take a look at) and write a small script to do this, but I believe it’s still possible (although I haven’t tried it yet) by doing it this way? If this is the case and we also get the breath feature of the new API, then we actually get additional functionality to what was available previously?

407

Many thanks and nice work. It’s nice to have another way of getting to your most used entries when developing. :smile:

409

Thank you! That was very well written and respectful. I think I understand the GUI changes better now.

Maybe some advance discussion here on the forums would have avoided some negative posts. As a dumb ol’ user, I admit I felt a bit blindsided by a change I didn’t really see the point of. I think we’ve all been through “change for changes’ sake” updates, as well as designers trying to make a name for themselves by shaking things up in new and shocking (but pointless) ways.

Knowing there’s some real thought going into the change should give people the confidence to give it a try and respond more constructively.

1 Like
410

Yeah, but I think people want it to flash and return to the previous state. Also, maybe they want it to flash a different color.

That’s all up to Hue. It wasn’t removed by HA, it was removed by Hue. If they don’t make it possible, then you won’t get the previous skills.

411

I had no idea this functionality existed! Thanks :+1:

412

Very nice update! Thanks to all who worked so hard to make this happen. Have a great holiday. You deserve it! See you on the other side! :wink:

1 Like
413

Xiaomi gateway alarm not available but the sensors work (integration xiaomi miio with cloud)

414

logs, or maybe read this: How to help us help you - or How to ask a good question

1 Like
415

Getting all kinds of errors after update.
I can’t even restart HA because of those errors, and I can’t restore due to the system is “freezed”.

The error messages don’t tell my anything, but maybe some experts can?

This is one error that prevents me from restarting HA:

Loggdetaljer (FEIL)
Logger: homeassistant.components.websocket_api.http.connection
Source: components/hassio/__init__.py:599
Integration: Home Assistant WebSocket API (documentation, issues)
First occurred: 06:11:36 (2 occurrences)
Last logged: 07:37:36

[548287249568] The system cannot restart because the configuration is not valid: Platform error sensor.weather_data - cannot import name 'HTTP_BAD_REQUEST' from 'homeassistant.const' (/usr/src/homeassistant/homeassistant/const.py)
[547899333312] The system cannot restart because the configuration is not valid: Platform error sensor.weather_data - cannot import name 'HTTP_BAD_REQUEST' from 'homeassistant.const' (/usr/src/homeassistant/homeassistant/const.py)
Traceback (most recent call last):
  File "/usr/src/homeassistant/homeassistant/components/websocket_api/commands.py", line 185, in handle_call_service
    await hass.services.async_call(
  File "/usr/src/homeassistant/homeassistant/core.py", line 1495, in async_call
    task.result()
  File "/usr/src/homeassistant/homeassistant/core.py", line 1530, in _execute_service
    await handler.job.target(service_call)
  File "/usr/src/homeassistant/homeassistant/components/hassio/__init__.py", line 599, in async_handle_core_service
    raise HomeAssistantError(
homeassistant.exceptions.HomeAssistantError: The system cannot restart because the configuration is not valid: Platform error sensor.weather_data - cannot import name 'HTTP_BAD_REQUEST' from 'homeassistant.const' (/usr/src/homeassistant/homeassistant/const.py)