Can’t find a way to change font size or background colour

[Ian C.]

Describe the bug
I tried to use compact mode but everything is off center and no settings seem to work.

I’d like the card background to turn orange when heating.

To Reproduce
Copy the compact example

Expected behavior
I’d like smaller fonts and things to be lined up correctly

# The least ammount of code possible to reproduce my error

type: custom:simple-thermostat
style: |
  ha-card {
    --st-font-size-xl: 20px;
    --st-font-size-m: 16px;
    --st-font-size-title: 16px;
    --st-font-size-sensors: 26px;
    --st-spacing: 0px;
    --st-mode-active-background: 
  }
entity: climate.thermostat_cuisine
layout:
  step: row 0
  mode:
    headings: false
    names: false
    icons: false
    labels: false
header: true
control: false

Screenshots
Always include a screenshot

Browser

• OS: iOs
• Browser: app
• Simple Thermostat version from browser console: latest
• Home Assistant version: latest

[Ian C.]

Was able to fix the alignment but still need help with mode based background colour

[mcvicthor]

I just noticed that my fonts exploded in recent weeks for the card (possibly since an update to card-mod?) and no font settings would work so I tried using this format for the style successfully

      type: custom:simple-thermostat
      entity: climate.itc_gym
      card_mod:
        style: |
          ha-card {
            --st-font-size-xl: 20px;
            --st-font-size-m: 14px;
          }
      layout:
        step: row
      step_size: 1
      hide:
        temperature: true
        state: true
      header: false
      control: false

[titis14]

Hi, same problem with me, all my css code is no longer taken into account.

[titis14]

I just noticed that my fonts exploded in recent weeks for the card (possibly since an update to card-mod?) and no font settings would work so I tried using this format for the style successfully

      type: custom:simple-thermostat
      entity: climate.itc_gym
      card_mod:
        style: |
          ha-card {
            --st-font-size-xl: 20px;
            --st-font-size-m: 14px;
          }
      layout:
        step: row
      step_size: 1
      hide:
        temperature: true
        state: true
      header: false
      control: false

Thanks with card_mod added in the code it's good.