button-card
button-card copied to clipboard
custom-cards
Extra style not loaded or loaded unexpected code
Checklist
- [X] I updated the card to the latest version available
- [X] I cleared the cache of my browser
Describe the bug
The extra_styles code is ignored from button-card template yaml and there is added unknow code ha-icon#icon:host { color: blue important; } even for cards they don't have extra_styles. After few tries clearing cache in browser works again and part is again filled with right code. But when again, try re-logging in to HA or clear browser cache or close browser and re-open then problem occurs again.
Version of the card Version: 3.4.2
Other (please complete the following information):
- Browser [chrome, firefox, edge] latest version
- HA 2022.9.7
- HACS 1.27.2
- no other integrations or plugins
To Reproduce This is the configuration I used:
section_1_title:
extra_styles: >
[[[
let Section_1_Title_Space_Left = "0px";
let Section_1_Title_Space_Name = "8px";
let Section_1_Title_Space_Right = "0px";
let Section_1_Title_Icon_Width = "34px";
let Section_1_Title_Icon_Height = "34px";
let Section_1_Title_Icon_Background = "none";
let Section_1_Title_Icon_Border_Radius = "50%";
let Section_1_Title_Icon_Size = "60%";
let Section_1_Title_Icon_Color = "rgba(218,225,235,1)";
let Section_1_Title_Name_Font_Size = "18px";
let Section_1_Title_Name_Color = "rgba(218,225,235,1)";
let Section_1_Title_Name_Justify_Content = "left";
let Section_1_Title_Desc_Font_Size = "18px";
let Section_1_Title_Desc_Color = "rgba(172,181,198,1)";
return `
div#section_1_title_space_left {
width: ${variables.section_1_title_space_left == null ? Section_1_Title_Space_Left : variables.section_1_title_space_left};}
div#section_1_title_space_name {
width: ${variables.section_1_title_space_name == null ? Section_1_Title_Space_Name : variables.section_1_title_space_name};}
div#section_1_title_space_right {
width: ${variables.section_1_title_space_right == null ? Section_1_Title_Space_Right : variables.section_1_title_space_right};}
div#section_1_title_space_left,
div#section_1_title_space_name,
div#section_1_title_space_right,
div#section_1_title_icon,
div#section_1_title_name,
div#section_1_title_desc,
div#section_1_title_name_desc {
display: flex;
height: 100%;
align-items: center;
}
div#section_1_title_name,
div#section_1_title_desc,
div#section_1_title_name_desc {
justify-content: ${variables.section_1_title_name_justify_content == null ? Section_1_Title_Name_Justify_Content : variables.section_1_title_name_justify_content};}
div#section_1_title_icon {
width: ${variables.section_1_title_icon_width == null ? Section_1_Title_Icon_Width : variables.section_1_title_icon_width};
height: ${variables.section_1_title_icon_height == null ? Section_1_Title_Icon_Height : variables.section_1_title_icon_height};
background: ${variables.section_1_title_icon_background == null ? Section_1_Title_Icon_Background : variables.section_1_title_icon_background};
border-radius: ${variables.section_1_title_icon_border_radius == null ? Section_1_Title_Icon_Border_Radius : variables.section_1_title_icon_border_radius};}
div#section_1_title_icon > ha-icon#icon {
width: ${variables.section_1_title_icon_size == null ? Section_1_Title_Icon_Size : variables.section_1_title_icon_size};
color: ${variables.section_1_title_icon_color == null ? Section_1_Title_Icon_Color : variables.section_1_title_icon_color};}
span.section_1_title_name {
font-size: ${variables.section_1_title_name_font_size == null ? Section_1_Title_Name_Font_Size : variables.section_1_title_name_font_size};
color: ${variables.section_1_title_name_color == null ? Section_1_Title_Name_Color : variables.section_1_title_name_color};}
span.section_1_title_desc {
font-size: ${variables.section_1_title_desc_font_size == null ? Section_1_Title_Desc_Font_Size : variables.section_1_title_desc_font_size};
color: ${variables.section_1_title_desc_color == null ? Section_1_Title_Desc_Color : variables.section_1_title_desc_color};}`
]]]
styles:
grid:
- grid-template-areas: >
[[[
let GridAreas = [];
if (variables.section_1_title_icon != null || variables.section_1_title_name != null || variables.section_1_title_desc != null) {
GridAreas.push('section_1_title_space_left');
if (variables.section_1_title_icon != null) {
GridAreas.push('section_1_title_icon');
if (variables.section_1_title_name != null || variables.section_1_title_desc != null) {
GridAreas.push('section_1_title_space_name');
}
}
if (variables.section_1_title_name != null && variables.section_1_title_desc != null) {
if (variables.section_1_title_desc_bottom == true) {
let RowName = Object.assign([],GridAreas);
let RowDesc = Object.assign([],GridAreas);
RowName.push("section_1_title_name", "section_1_title_space_right");
RowDesc.push("section_1_title_desc", "section_1_title_space_right");
GridAreas = RowName.concat("''",RowDesc);
}
else {
GridAreas.push("section_1_title_name_desc", "section_1_title_space_right");
}
}
else if (variables.section_1_title_name != null) {
GridAreas.push("section_1_title_name", "section_1_title_space_right");
}
else if (variables.section_1_title_desc != null) {
GridAreas.push("section_1_title_desc", "section_1_title_space_right")
}
return "'" + GridAreas.join(' ') + "'";
}
]]]
- grid-template-columns: >
[[[
let GridColumns = [];
if (variables.section_1_title_icon != null || variables.section_1_title_name != null || variables.section_1_title_desc != null) {
GridColumns.push('min-content');
if (variables.section_1_title_icon != null) {
GridColumns.push('min-content');
if (variables.section_1_title_name != null || variables.section_1_title_desc != null) {
GridColumns.push('min-content');
}
}
if (variables.section_1_title_name != null || variables.section_1_title_desc != null) {
GridColumns.push('auto');
}
GridColumns.push('min-content');
}
return GridColumns.join(' ');
]]]
- grid-template-rows: >
[[[
let GridRows = [];
if (variables.section_1_title_icon != null || variables.section_1_title_name != null || variables.section_1_title_desc != null) {
GridRows.push('min-content');
}
if (variables.section_1_title_desc_bottom == true && variables.section_1_title_name != null && variables.section_1_title_desc != null) {
GridRows.push('min-content');
}
return GridRows.join(' ');
]]]
card:
- border-radius: "0px"
- padding: >
[[[
let Section_1_Title_Card_Padding = "8px";
return variables.section_1_title_card_padding == null ? Section_1_Title_Card_Padding : variables.section_1_title_card_padding;
]]]
- background: >
[[[
let Section_1_Title_Card_Background = "rgba(36,39,46,1)";
return variables.section_1_title_card_background == null ? Section_1_Title_Card_Background : variables.section_1_title_card_background;
]]]
- border-bottom: >
[[[
let Section_1_Title_Card_Border_Bottom = "1px solid rgba(68,72,83,1)";
return variables.section_1_title_card_border_bottom == null ? Section_1_Title_Card_Border_Bottom : variables.section_1_title_card_border_bottom;
]]]
- box-shadow: >
[[[
let Section_1_Title_Card_Box_Shadow = "0px 0px 0px 1px rgba(26,27,31,1)";
return variables.section_1_title_card_box_shadow == null ? Section_1_Title_Card_Box_Shadow : variables.section_1_title_card_box_shadow;
]]]
custom_fields:
section_1_title_space_left: >
[[[
if (variables.section_1_title_icon != null && (variables.section_1_title_name != null || variables.section_1_title_desc != null)) {
return "";}
]]]
section_1_title_space_name: >
[[[
if (variables.section_1_title_icon != null && (variables.section_1_title_name != null || variables.section_1_title_desc != null)) {
return "";}
]]]
section_1_title_space_right: >
[[[
if (variables.section_1_title_icon != null || variables.section_1_title_name != null || variables.section_1_title_desc != null) {
return "";}
]]]
section_1_title_icon: >
[[[
if (variables.section_1_title_icon != null) {
return `<ha-icon id="icon" icon="${variables.section_1_title_icon}" style="position:relative;"></ha-icon>`;}
]]]
section_1_title_name_desc: >
[[[
if (variables.section_1_title_desc_bottom != true && variables.section_1_title_name != null && variables.section_1_title_desc != null) {
return `<span class="section_1_title_name">${variables.section_1_title_name}</span>` + `<span class="section_1_title_desc">${variables.section_1_title_desc}</span>`;}
]]]
section_1_title_name: >
[[[
if ((variables.section_1_title_desc_bottom == true && variables.section_1_title_name != null && variables.section_1_title_desc != null)
|| (variables.section_1_title_name != null && variables.section_1_title_desc == null)) {
return `<span class="section_1_title_name">${variables.section_1_title_name}</span>`;}
]]]
section_1_title_desc: >
[[[
if ((variables.section_1_title_desc_bottom == true && variables.section_1_title_name != null && variables.section_1_title_desc != null)
|| (variables.section_1_title_name == null && variables.section_1_title_desc != null)) {
return `<span class="section_1_title_desc">${variables.section_1_title_desc}</span>`;}
]]]
variables:
section_1_title_icon: "[[[ return variables.section_1_title_icon ]]]"
section_1_title_icon_width: "[[[ return variables.section_1_title_icon_width ]]]"
section_1_title_icon_height: "[[[ return variables.section_1_title_icon_height ]]]"
section_1_title_icon_background: "[[[ return variables.section_1_title_icon_background ]]]"
section_1_title_icon_border_radius: "[[[ return variables.section_1_title_icon_border_radius ]]]"
section_1_title_icon_color: "[[[ return variables.section_1_title_icon_color ]]]"
section_1_title_icon_size: "[[[ return variables.section_1_title_icon_size ]]]"
section_1_title_name: "[[[ return variables.section_1_title_name ]]]"
section_1_title_name_font_size: "[[[ return variables.section_1_title_name_font_size ]]]"
section_1_title_name_color: "[[[ return variables.section_1_title_name_color ]]]"
section_1_title_name_justify_content: "[[[ return variables.section_1_title_name_justify_content ]]]"
section_1_title_desc: "[[[ return variables.section_1_title_desc ]]]"
section_1_title_desc_font_size: "[[[ return variables.section_1_title_desc_font_size ]]]"
section_1_title_desc_color: "[[[ return variables.section_1_title_desc_color ]]]"
section_1_title_desc_bottom: "[[[ return variables.section_1_title_desc_bottom ]]]"
section_1_title_card_padding: "[[[ return variables.section_1_title_card_padding ]]]"
section_1_title_card_background: "[[[ return variables.section_1_title_card_background ]]]"
section_1_title_card_border_bottom: "[[[ return variables.section_1_title_card_border_bottom ]]]"
section_1_title_card_box_shadow: "[[[ return variables.section_1_title_card_box_shadow ]]]"
section_1_title_space_left: "[[[ return variables.section_1_title_space_left ]]]"
section_1_title_space_name: "[[[ return variables.section_1_title_space_name ]]]"
section_1_title_space_right: "[[[ return variables.section_1_title_space_right ]]]"
Screenshots
I found maybe where is problem, but not find solution. I am using lovelace in yaml mode and now have two dashboards. First is default by HA ui-lovelace.yaml and used for testing purpose and second my custom created. In ui-lovelace.yaml I has this code inside and nothing more:
title: My Awesome Home
views:
- title: Example
cards:
- type: "custom:button-card"
entity: sensor.plug_computer_energy_power
extra_styles: >
[[[
return `ha-icon#icon:host {color: blue !important;}`;
]]]
As you can see, there is extra_styles with code which is inserted to every even is not declared in button-card as you can see in images. Doesn't matter what code is inside extra_styles, every time is inserted when i do this steps.
- open chrome
- go to http://homeassistant.local:8123/ and login now style is loaded good, even if I refresh page in HA or browser, but when I jump to another site for example
- google.com
- and then back to http://homeassistant.local:8123/ and login now style is not loaded what I have for button cards, but in every is inserted code from extra_styles from ui-lovelace.yaml.
