Thanks that solve my warning problem in the log
There seems to be a lot of thing like attribute and class that are marked Ā«FinalĀ» in the code. Is there a place we can find more details about what is marked final and what changes we need to do to followup in code changes?
Would you mind sharing your yaml for your development dashboard?
Unable to add contact sensor (binary.sensor) via local tuya. I get past filling in all info, local key ect, next section where I select binary.sensor and get this error Pics attached. After restoring a backup to the previous update i was able to add them
Then after hitting submit a second time
I discovered pressing c and scrolling to the bottom without entering anything is slightly faster, for those who are concerned with fewest clicks possible 
1 Like
The issue isnāt only with custom cards but, for example, with edit panel of any built-in card. I donāt know if the property was changed, I tried to briefly look into diff between versions but found nothing.
You can use F12 in a browser to see what each element uses. Editing may have a different css variable. These things arenāt typically documented changes. You have to search the elements yourself.
I did this, all the cards and card edit panels use --card-background-color and --ha-card-background, the only difference is that some have value from one theme, other from another one.
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;
...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;
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.
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.
For a restart? No clicks needed 
. 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ā¦
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
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
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
Iām sorry if someone aleady ask for it but where is the section with virtual switch and timer and the rest ? Thanks.
Would you mind sharing your yaml for your development dashboard?
3 Likes
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?