I have heavily modified the Simple Thermostat custom card to fit my lovelace layout, but as a result have a lot of Style overrides in the lovelace yaml, which is not ideal. I’ve reduced the card count by over 50% by changing from 11 conditional cards to 4 cards with if/else, but still have almost half of the lovelace coding in style overrides in this particular yaml.
My question: I’ve worked this out as I go, I do not have CSS experience or theme skills, and don’t know how to move the style overrides separate from the lovelace yaml file - can someone help?
I’ve combined where possible, and have only used !important where I cannot work out another way to make it stick. Here is an example of why I want to move it out of the card definition!
style: |
ha-card {
--st-font-size-sensors: 18px;
--st-spacing: 2px;
--st-font-size-m: 20px;
--st-font-size-l: 24px;
--st-font-size-xl: 24px;
--st-font-size-title: 18px;
font-family: var(--paper-font-body1_-_font-family);
padding-left: 6px;
border-radius: 24px;
color: {% if is_state('climate.ac', 'cool') %}#2b9af9;
{% elif is_state('climate.ac', 'heat') %}#ff8100;
{% elif is_state('climate.ac', 'fan_only') %}#6b15aa;
{% elif is_state('climate.ac', 'dry') %}#efbd07;
{% endif %}
}
ha-icon {
height: 32px;
}
.mode-icon, .sensor-value, .sensor-heading {
height: 24px;
}
.modes {
margin-top: 0px !important;
padding-top: 0px !important;
}
.current--value, .sensor-value, .sensor-heading, .header__title {
font-weight: 500 !important;
}
.sensor-value, .sensor-heading {
font-size: 18px !important;
color: rgba(125, 125, 125, 0.6);
}
.sensor-heading, .body, ha-card, .sensor-value {
padding-bottom: 0px !important;
}
.mode-item {
border-radius: 14px !important;
margin: 10px;
}
.mode-item.active.auto, .mode-item.active.low, .mode-item.active.medium, .mode-item.active.high {
background: rgba(var(--color-green), 0.6) !important;
}
BTW, that looks like this:
Also I need to apply that style CSS to certain instances of the card, not all.
