Moving applied CSS overrides from lovelace

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:
image

Also I need to apply that style CSS to certain instances of the card, not all.

Using card-mod you can define themes and classes.

e.g. in my day theme I have this:

day:
  card-mod-theme: day
  card-mod-card: |

    ha-card.top-level-card {
      border: solid 1px var(--primary-text-color);
      background: linear-gradient(rgba(147, 171, 202, 1), rgba(255, 255, 255, 0.6) 56px, rgba(255, 255, 255, 0.6) 100%); #url("/local/background/card_bg_Day.png");
    }

    ha-card.top-level-card h1.card-header {
      padding-top: 0px;
      padding-bottom: 28px;
    }

Then in the cards I want this applied to I just add:

card_mod:
  class: top-level-card

To give:

Screenshot 2021-12-23 at 22-10-39 Overview - Home Assistant

More here: https://github.com/thomasloven/lovelace-card-mod/wiki/Card-mod-Themes#classes

1 Like

Awesome, thank you… I’ll do some reading in the wiki there. I’m already using card-mod, but this looks like it will get me there, Thanks!