Statusseiten-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.

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.

Blöcke, die du ansprechen kannst

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

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.

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.

.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.

.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.

.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.