# Statusseiten-CSS

> Die Klassen, Attribute und Variablen, auf die das eigene CSS einer Statusseite sich verlassen kann, mit Kaskadenregeln und drei getesteten Beispielen.

Source: https://upfour.io/de/docs/reference/status-page-css

Die Haken, auf die sich dein eigenes CSS über Versionen hinweg verlassen kann. Alles, was hier fehlt, kann sich ohne Ankündigung ändern.

Dein CSS trägst du unter **Erweitert** in **Eigenes CSS** ein. Nutze den Editor überall, wo er ein Feld hat: Logo, Akzentfarbe, Kopfzeilenfarbe für hell und dunkel, Hintergrund und Thema stellst du dort ein, und der Editor leitet daraus lesbare Textfarben ab. CSS ist für alles, was der Editor nicht kann. Wie du die Seite anlegst, steht unter [Statusseite veröffentlichen](https://upfour.io/de/docs/publish-a-status-page.md).

## So wird es angewendet

Dein CSS steht in einem Style-Element auf der Seite, nach dem Stylesheet des Layouts, deshalb gewinnt bei gleicher Spezifität deine Regel. Nichts begrenzt es für dich: Selektoren erreichen das ganze Seitendokument, beginne sie also mit `.sp`. Die Regeln der Layouts sind schlicht und mit Klassenpräfix geschrieben (`.sp .sp-…`), schreibe deine genauso, nicht kürzer. Den dunklen Modus erkennst du an der Klasse `dark` am Dokumentelement: dafür schreibst du `.dark .sp …`.

CSS aus der Zeit vor den Layouts (Oktober 2026) zielt auf Markup, das es nicht mehr gibt, und muss gegen diese Haken neu geschrieben werden.

## Attribute am Wurzelelement

Das Element `.sp` trägt diese Attribute, alle Werte sind stabil. Statuselemente tragen `data-s`.

| Attribut | Werte | Was es dir sagt |
| --- | --- | --- |
| `data-layout` | `essential`, `brand`, `overview` | Das Layout der Seite. |
| `data-surface` | `open`, `cards` | Offenes Papier mit Haarlinien (Essential) oder Karten (Brand, Overview). |
| `data-state` | `ok`, `warn`, `down`, `idle` | Der Gesamtzustand der Seite. |
| `data-ground` | `paper`, `white`, `cool` | Der gewählte Hintergrund. |
| `data-head` | `brand` | Nur vorhanden, wenn für das aktuelle Thema eine Kopfzeilenfarbe gesetzt ist. |
| `data-tv` | – | Vorhanden (leer) in der TV-Ansicht. |
| `data-s` | `up`, `ok`, `degraded`, `warn`, `down`, `maintenance`, `stale`, `idle` | Der Zustand eines Statuselements wie einer Dienstzeile oder einer Meldung. |

## Blöcke, die du ansprechen kannst

Nur diese Blöcke sind dokumentiert. Ihr innerer Aufbau ist es nicht.

| Klasse | Was es ist | Layouts |
| --- | --- | --- |
| `.sp-head` | Kopfband: Logo oder Name, Sprache, Benachrichtigen-Knopf. | alle |
| `.sp-logo` | Dein Logobild. | alle |
| `.sp-ident-name` | Der Firmenname, wenn es kein Logo gibt. | alle |
| `.sp-btn, .sp-btn-head, .sp-btn-accent` | Knöpfe. Die Kopf-Variante sitzt in der Kopfzeile, die Akzent-Variante nutzt die Akzentfarbe. | alle; Kopf-Variante: Essential, Overview |
| `.sp-state` | Die Antwort auf „läuft alles?“: Überschrift, Zeichen und Metazeile. | alle |
| `.sp-counts` | Anzahl je Zustand im Antwortstreifen. | Overview |
| `.sp-msg` | Ein offener Vorfall oder eine laufende Wartungsmeldung. | alle |
| `.sp-note` | Die Ankündigung. | alle |
| `.sp-maint` | Ein geplanter Wartungseintrag. | alle |
| `.sp-card` | Das Feld um die geplanten Wartungseinträge. | Brand, Overview |
| `.sp-group, .sp-group-head, .sp-group-sum` | Eine Gruppe von Diensten, ihr Titel und ihre Summe. | alle; Summe: Overview |
| `.sp-svc` | Eine Dienstzeile. | alle |
| `.sp-svc-name` | Der Dienstname. | alle |
| `.sp-svc-word` | Der Zustand in Worten. | alle (Overview blendet es bei laufenden Diensten aus) |
| `.sp-svc-uptime` | Die Verfügbarkeit oder in der Antwortzeit-Ansicht die letzte Antwortzeit. | alle |
| `.sp-svc-bar` | Der Verfügbarkeitsbalken. | alle |
| `.sp-svc-note` | Erklärung, Quelle und Aktualität einer Zeile. | alle |
| `.sp-svc-ext` | Der Chip „Extern“. | alle |
| `.sp-switch, .sp-range` | Der Umschalter Verfügbarkeit und Antwortzeit sowie der Umschalter für 30, 60 und 90 Tage. | alle; Overview hat keinen Zeitraum-Umschalter |
| `.sp-past, .sp-cal` | Der Verlaufsblock, eingeklappt bis zum Öffnen, und sein Vorfallskalender. | alle |
| `.sp-sub` | Das Feld zum Abonnieren. | alle |
| `.sp-foot` | Die Fußzeile. | alle |

## Variablen, die du überschreiben darfst

Alle sind benutzerdefinierte Eigenschaften an `.sp`. Standardwerte stehen erst für hell, dann für dunkel. Variablen, die der Editor setzt, ersetzt er durch deine Wahl dort. Änderst du einen Hintergrund, ändere auch den Text darauf: Kontrast prüft für CSS niemand nach.

| Variable | Bedeutung | Standard | Vom Editor gesetzt |
| --- | --- | --- | --- |
| `--sp-bg` | Seitenhintergrund. | Papier #FAF9F5 · #17181A; weiß #FFFFFF · #0F1011; kühl #F3F4F6 · #14161A | Nein |
| `--sp-surface` | Karten und Felder. | #FFFFFF · #1F2023 | Nein |
| `--sp-ink` | Text. | #141415 · #EEEBE3 | Nein |
| `--sp-ink-2, --sp-rule, --sp-rule-2, --sp-sunk` | Zweittext, Haarlinien, kräftige Haarlinien und vertiefte Flächen. Jede ist eine Mischung aus Textfarbe und Hintergrund und folgt ihm von selbst. | abgeleitet | Nein |
| `--sp-accent` | Akzentfüllung für Knöpfe. | #28479E · #7A9BFF | Ja |
| `--sp-on-accent` | Text auf dem Akzent. | #FFFFFF · #101112 | Ja |
| `--sp-accent-ink` | Akzent als Link- und Fokustext. | #28479E · #7A9BFF | Ja |
| `--sp-head` | Fläche der Kopfzeile. | der Seitenhintergrund | Ja |
| `--sp-on-head` | Text auf der Kopfzeile. | die Textfarbe | Ja |
| `--sp-on-head-2` | Zweittext auf der Kopfzeile. | abgeleitet | Ja |
| `--sp-head-rule` | Haarlinien in der Kopfzeile. | abgeleitet | Nein |

Lesen, aber nicht ändern darfst du `--sp-ok`, `--sp-warn`, `--sp-warn-fill`, `--sp-down`, `--sp-idle`. Statusfarben sind mit Absicht fest: Grün, Gelb und Rot bedeuten auf jeder Seite dasselbe, und der Kontrast der Layouts wurde nur mit den Standardwerten geprüft.

## Wenn deine Variable nicht greift

- Der Editor setzt einige Variablen als Inline-Stil an `.sp`: die Akzentvariablen, wenn eine Akzentfarbe gesetzt ist, die der Kopfzeile, wenn eine Kopfzeilenfarbe gesetzt ist. Eine einfache `.sp`\-Regel verliert gegen einen Inline-Stil. Lass diese Farbe im Editor leer, deklariere die Variable an einem inneren Element wie im ersten Beispiel oder ergänze `!important`, das einen Inline-Wert schlägt.
- Der dunkle Modus setzt die Farbvariablen mit `.dark .sp` neu, das ist spezifischer als `.sp`. Für einen dunklen Wert schreibst du `.dark .sp` oder nutzt `!important`.
- Abgeleitete Variablen folgen deiner Änderung nur, wenn du die Basisvariable an dem Element deklarierst, an dem sie berechnet werden, also an `.sp`. Eine Variable, die du an einem inneren Element neu deklarierst, leitet die anderen nicht neu ab: setze sie mit.
- Die Logodatei richtet sich nach der Kopfzeilenfarbe im Editor und nach dem Thema, nicht nach deinem CSS. Machst du die Kopfzeile per CSS dunkel, lade ein Logo hoch, das darauf passt, oder setze die Kopfzeilenfarbe im Editor, der auch die richtige Logodatei wählt.

```css
.sp { --sp-accent: #B3261E !important; --sp-on-accent: #FFFFFF !important; --sp-accent-ink: #B3261E !important; }
```

## Beispiele

Alle drei liefen gegen das aktuelle Stylesheet bei 1440 und 375 px, hell und dunkel, in allen drei Layouts: Kopfzeilenfarben, kein horizontales Überlaufen.

### Eine marineblaue Kopfzeile in beiden Themen

Deklariere die Variablen an der Kopfzeile selbst: Das schlägt den Inline-Stil und das Stylesheet. Text-, Zweittext- und Linienfarbe setzt du mit, weil sie dort nicht neu abgeleitet werden.

```css
.sp .sp-head { --sp-head: #14304F; --sp-on-head: #FFFFFF; --sp-on-head-2: #C5D0DE; --sp-head-rule: #3B5576; }
.dark .sp .sp-head { --sp-head: #0E2238; }
```

### Die Verfügbarkeit ausblenden

Balken und Worte bleiben. In der Antwortzeit-Ansicht trägt dasselbe Element die letzte Antwortzeit, die wird also mit ausgeblendet.

```css
.sp .sp-svc-uptime { display: none; }
```

### Engere Ecken an den Karten

Brand und Overview zeichnen ihre Radien als feste Längen, überschreibe also die Kartenblöcke.

```
.sp[data-surface="cards"] :is(.sp-group, .sp-msg, .sp-note, .sp-card, .sp-past, .sp-sub, .sp-state) { border-radius: 4px; }
```

## Was nicht zugesichert ist

- Verschachtelung und Tag-Namen innerhalb der Blöcke oben. Aus einem span kann ein div werden.
- Jede `sp-*`\-Klasse und `--sp-*`\-Variable, die nicht aufgeführt ist, etwa Layoutbreite, Radius- und Schattenwerte und jeder nicht genannte Teil einer Dienstzeile, Meldung, Historie, eines Kalenders oder Abo-Blocks.
- Pixelmaße, Abstände, Radien und Schriftgrößen. Es gibt keine Radius-Variable.
- Reihenfolge und Vorhandensein der Blöcke und welches Layout welchen Teil zeigt.
- Die Vorschaubilder und Beispieldaten im Editor.

## Was up4 hier nicht macht

- Kein Skript. Eigenes JavaScript wird abgelehnt, und die Sicherheitsrichtlinie der Seite erlaubt Skripte nur von der eigenen Adresse der Seite.
- up4 prüft nur die Größe (höchstens 64 KiB), gültiges UTF-8, kein NUL-Byte und kein schließendes Style-Tag. Dein CSS wird nicht umgeschrieben, gekürzt oder geparst.
- Den Rest begrenzt der Browser. Ein `@import` oder `@font-face` von einem anderen Host wird blockiert, also keine Webfont-Dienste: Binde die Schrift als Data-Adresse ein oder verzichte darauf. Bilder laden von sicheren Adressen und Data-Adressen.
- Das CSS gilt nur für eine Statusseite. Es erreicht weder die App noch andere Seiten noch das Banner auf deiner eigenen Website.
- Die Zugangssperre mit Passwort und E-Mail-Code, die Ansicht „Abo bestätigt“ und die Abmeldeansicht zeigen die Marke der Seite, laden aber nie dein CSS: Sie werden Menschen gezeigt, die die Seite vielleicht nicht sehen dürfen.
- CSS kann Blöcke weder hinzufügen noch entfernen noch umsortieren und macht aus einem Layout kein anderes. Ein Block mit `display: none` ist für alle weg, auch für Nutzer von Screenreadern.

[Per API PUT /v1/status-pages/{pageID}](https://upfour.io/docs/api/status-pages#put_status_pages_pageID)

| In der App | API-Feld |
| --- | --- |
| Eigenes CSS | `custom_css` |

[Vollständige Referenz (Englisch)](https://upfour.io/docs/api/status-pages#put_status_pages_pageID)