CSS'en bag mine glassmorphism-dashboards i Home Assistant

Jeg byggede mine Home Assistant-dashboards om tre gange, før de så ud til at høre sammen. Den første version var flade kort. Fin nok. Den anden havde for mange farver. Den tredje endte med glassmorphism, halvgennemsigtige frostede kort på en dyb marineblå baggrund, og den har jeg ikke rørt siden.

Herunder følger den præcise CSS med forklaringer på de ting, jeg snublede over.

De seks CSS-konstanter for hvert glassmorphism-kort

Hvert ydre kort bruger præcis disse værdier. Ingen variationer.

border-radius: 28px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.10);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

Og den, du går glip af, hvis ingen fortæller dig om den:

ha-card::before { display: none !important; }

Temaet Frosted Glass Dark (findes i HACS under Themes, og det samme gælder flere lignende temaer) lægger et ::before-lag på hvert ha-card. Fjerner du det ikke, får din egen baggrund et halvgennemsigtigt lag ovenpå. Symptomet er, at kortene ser lidt forkerte ud, lidt for uigennemsigtige, lidt forkert farvede, og du kan ikke finde ud af hvorfor. Jeg ledte et godt stykke tid de forkerte steder, før jeg fandt det.

Skabelonen til det ydre kort

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      background: rgba(255,255,255,0.05) !important;
      backdrop-filter: blur(15px) !important;
      -webkit-backdrop-filter: blur(15px) !important;
      border: 1px solid rgba(255,255,255,0.10) !important;
      box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
      border-radius: 28px !important;
    }
    ha-card::before { display: none !important; }
cards:
  # indhold herunder

custom:stack-in-card (HACS) er rammen. Al visuel styling ligger her, og de indre kort får intet af det. card_mod (også HACS) er det, der gør det muligt at lægge CSS ind.

Indre kort: kun gennemsigtighed

Kort inde i glasrammen skal forsvinde visuelt:

card_mod:
  style: |
    ha-card {
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
    }
    ha-card::before { display: none !important; }

::before skal også fjernes på de indre kort. Temaet lægger det på overalt.

Mellem de indre kort bruger jeg en svag skillelinje:

border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;

Den er svagere, end du måske tror. Er den for tydelig, skærer den glasfladen over. Med en alfaværdi på 0,06 fungerer den som et skift mellem sektioner uden at trække opmærksomheden til sig.

Statusbjælker via ::after

::before bruges allerede til at fjerne temaets lag. ::after er fri til indhold.

card_mod:
  style: |
    ha-card {
      overflow: hidden !important;
      position: relative !important;
    }
    ha-card::before { display: none !important; }
    ha-card::after {
      content: '' !important;
      position: absolute !important;
      left: 0; top: 0;
      width: {{ states('sensor.batteriniveau') | int(0) }}% !important;
      height: 100% !important;
      background: linear-gradient(90deg,
        rgba(76, 175, 80, 0.18),
        rgba(129, 199, 132, 0.05)) !important;
      pointer-events: none !important;
    }

Gradienten toner ud mod højre, så et kort ved 30 % ser anderledes ud end et ved 80 %, og det aflæses intuitivt. Jeg bruger den til elbilens, støvsugerens og plæneklipperens batteri. For sensorer til vedligeholdelse vender jeg farverne om: tæt på 0 % er en advarsel, så gradienten er rød.

Kort med landkort

Landkortet har sine egne regler for, hvordan det tegnes. Sætter du det direkte ind i et glas-stack-in-card uden at justere noget, får du skarpe hjørner, der stikker ud over den afrundede ramme.

Løsningen: overflow: hidden på det ydre kort og border-radius: 0 på landkortet indeni. Det ydre korts overflow klarer beskæringen.

type: custom:stack-in-card
card_mod:
  style: |
    ha-card {
      /* standard glasværdier */
      overflow: hidden !important;
    }
    ha-card::before { display: none !important; }
cards:
  - type: custom:xiaomi-vacuum-map-card
    entity: vacuum.robot
    card_mod:
      style: |
        ha-card {
          border-radius: 0 !important;
          box-shadow: none !important;
          border: none !important;
        }

Skjul badges

Mushroom-kort viser farvede badges ved visse tilstande. Det orange «utilgængelig»-badge på en enhed, der er offline, er den hyppigste synder.

card_mod:
  style:
    ".": |
      mushroom-badge-icon.unavailable {
        display: none !important;
      }

Nøglen "." er den rigtige for Mushroom-kort fra HA 2024. Ikke ha-card og ikke komponentens navn, men ".". Jeg prøvede alt for mange andre selektorer, før den virkede.

Samme udtryk i alle HA-dashboards

YAML har ikke variabler. Hvert kort med glas får sin egen kopi af de seks CSS-linjer. Vil jeg ændre baggrundens gennemsigtighed i hele dashboardet, skal det ændres 25 steder.

Min løsning er en lokal snippets.yaml med hele skabelonen til det ydre kort som en kommentarblok. Den kopierer jeg fra, når jeg laver nye kort. Det er ikke elegant, men det er til at vedligeholde.

Den rigtige løsning er CSS-variabler i temaet: var(--glass-bg) defineres én gang og bruges overalt. Det virker allerede i dag, hvis dit tema definerer dem. Det skridt har jeg bare ikke taget endnu.