CSS-Klassen

Stabile Haken für Custom CSS. Sie sitzen fest im Markup und ändern sich nicht mit dem Theme.

Custom CSS wirkt im Frontend, im Editor nur mit der Option „CSS auch im Editor anwenden". Farben und Maße kommen besser über Design-Tokens als über eigene Regeln.

Seitenaufbau

Selektor	trifft
.aura-page	Wurzel der Frontend-Seite
.aura-page-<layout-slug>	dieselbe Wurzel, je Layout
.aura-<tab-slug>	dieselbe Wurzel, je aktivem Tab
.aura-header	Kopfzeile (Titel, Uhr, Bedienknöpfe)
.aura-titel	Überschrift in der Kopfzeile
.aura-tabs	Tab-Leiste, oben wie unten
.aura-tabs-top	Tab-Leiste über dem Dashboard
.aura-tabs-bottom	Tab-Leiste als Fußzeile
.aura-section-bar	Bereichsleiste
.aura-nav-stretch	Eintragsreihe einer Leiste mit Menü-Position Gleichmäßig
.aura-menu-widget	Widget-Platz in einer Menüleiste
.aura-pin-prompt	PIN-Abfrage vor einem gesperrten Tab

Tabs

Knopf und Inhalt sind zwei verschiedene Elemente: .aura-tab-btn sitzt in der Leiste, .aura-tab um die Widgets des Tabs.

Selektor	trifft
.aura-tab-btn	Tab-Knopf in der Leiste
.aura-tab-active	aktiver Tab-Knopf
.aura-tab	Inhaltsbereich eines Tabs
.aura-tab-<tab-slug>	Inhaltsbereich eines bestimmten Tabs
.aura-tab-label	Beschriftung im Tab-Knopf
.aura-tab-scroll-ind	Scroll-Anzeiger unter den Tabs (mobil)

Ein Tab mit dem Slug active bekäme über .aura-tab-<slug> ebenfalls .aura-tab-active. Wo das zählt, den Knopf über .aura-tab-btn.aura-tab-active ansprechen.

/* nur die untere Leiste */
.aura-tabs-bottom {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

Widget-Karte

Selektor	trifft
.aura-widget	jede Widget-Karte
.aura-widget-<widget-id>	eine bestimmte Karte
.aura-widget-type-<typ>	alle Karten eines Widget-Typs, z. B. .aura-widget-type-light
.aura-widget-focused	Karte, die gerade angesprungen wurde (Puls)
.aura-widget-fullscreen	Vollbild-Overlay eines Widgets
.aura-fullscreen-btn	Vollbild-Knopf in der Kartenecke
.aura-collapse-btn	Einklapp-Knopf in der Kartenecke (Option „Standardmäßig eingeklappt")
.aura-click-action-btn	Klick-Aktions-Symbol in der Kartenecke bzw. rechts in der eingeklappten Kopfzeile
.aura-collapsed-header	eingeklappte Karte: die Zeile mit Icon und Titel
.aura-zoom-ctl	Zoom-Tasten im iFrame-Widget (Option iframeZoomControls)
.aura-sound-ctl	Ton-Taste im iFrame-Widget (Option iframeSoundControl)
.aura-badge-corner	Badge-Overlay in der Kartenecke
.aura-textwrap	Karte mit aktivem Textumbruch (Option „Textumbruch")
.aura-devicecard-link	Editor: farbiger Rahmen verknüpfter Gerätekarten
.aura-devicecard-badge	Editor: Hinweis „Aufbau geteilt mit …“ auf dem Rahmen einer Gerätekarte

Kopfzeile des Widgets

Elemente aus der Einstellung „Kopfzeile“, in zwei Zeilen mit je drei Plätzen.

Selektor	trifft
.aura-header-row	eine Zeile der Kopfzeile
.aura-header-row-1 / .aura-header-row-2	Zeile 1 (Titelzeile) bzw. Zeile 2
.aura-header-slot	ein Platz, gleich welcher
.aura-header-slot-r1-left	Zeile 1 links
.aura-header-slot-r1-center	Zeile 1 Mitte
.aura-header-slot-r1-right	Zeile 1 rechts
.aura-header-slot-r2-left	Zeile 2 links
.aura-header-slot-r2-center	Zeile 2 Mitte
.aura-header-slot-r2-right	Zeile 2 rechts
.aura-header-item	ein Element auf einem Platz
.aura-header-item-icon	Symbol eines Elements
.aura-header-item-text	Text eines Elements
.aura-header-item-<platz>-<index>	ein Element nach Platz und Reihenfolge darauf, von 0 an gezählt — z. B. .aura-header-item-r1-right-0

.aura-header-slot-r2-left .aura-header-item {
    color: orange;
}

Widget-Innenleben

Diese vier setzt jedes Widget selbst — sie sind der Weg, Titel, Icon oder Wert über alle Typen hinweg zu treffen. Titel, Icon und Kopfzeilen-Elemente übernehmen eine einfache Regel ohne !important, auch die Titel-Zelle eines Custom-Layouts und die Titelzeile im Thermostat-Layout „Dial“.

Selektor	trifft
.aura-widget-row	Inhaltswurzel des Widgets
.aura-widget-icon	Icon
.aura-widget-accent-bar	farbige Leiste links (Wert-Anzeige und Auswahlfeld „Karte“, auch als Custom-Komponente accent-bar)
.aura-widget-title	Titelzeile
.aura-widget-value	Wertanzeige
.aura-widget-action	Bedienelement-Gruppe (nicht ziehbar)
.aura-checkbox	Checkbox-Bedienelement (Schalter, Dimmer, Listenzeile, Custom-Zelle, Gruppen-Aktion)
.aura-checkbox-on	dieselbe Checkbox im angehakten Zustand
.aura-checkbox-mixed	Gruppen-Checkbox im gemischten Zustand (Strich)
.aura-last-change	Zeitstempel „zuletzt geändert"
.aura-frame-neutral	eingebettetes Dokument ohne eigenes Farbschema (HTML-, eCharts- und Kamera-Widget)
.aura-camera-talk	Gegensprech-Button der Kamera; [data-talk="active"] während eines Gesprächs
.aura-chart-period	Zeile der Zeitraum-Kennzahlen im Diagramm (erweitert)
.aura-history-error	Fehlerhinweis im Diagramm, wenn der Verlaufs-Adapter eine Abfrage ablehnt (ganze Fläche oder Ecke)

.aura-widget-title {
    color: red;
}
.aura-widget-type-thermostat .aura-widget-title {
    text-transform: uppercase;
}

Bedienelemente

Selektor	trifft
.aura-slider-bar	Balkenregler
.aura-slider-range	Schieberegler
.aura-slider-scale	Skala am Regler
.aura-shutter-control	Rollladen-Bedienung
.aura-shutter-slider	Rollladen-Regler
.aura-shutter-pos	Positionswert in Prozent
.aura-shutter-tilt / .aura-widget-tilt	Lamellenwert bzw. Lamellen-Block
.aura-shutter-presets	Schnellwahl-Zeile des Rollladens (Tasten: .aura-preset-button, aktive mit [aria-pressed="true"])
.aura-select-control	Auswahlfeld
.aura-preset-button	Voreinstellungs-Chip
.aura-state-display	Status-Pille
.aura-contact-lock	Kontakt-/Schloss-Symbol
.aura-input-unit	Einheit hinter einem Eingabefeld
.aura-dt-input	Datums-/Zeitfeld mit eigenem Picker
.aura-dt-dropdown	zusätzlich an Datums-/Zeitfeldern, die der Browser als Auswahlknopf zeichnet (Chrome auf Android)

Listen und Einträge

Selektor	trifft
.aura-entry-subline	zweite Zeile eines Eintrags
.aura-room-header	Raum-Zwischenüberschrift (Auto-Liste)
.aura-section-break	Abschnittstrenner (Liste)
.aura-list-more	„+N weitere"-Zeile
.aura-badge-room	Tab-Zeile mit Platz für überstehende Badges

Einzelne Widgets

Selektor	trifft
.aura-clock-time · .aura-clock-date · .aura-clock-weekday	Uhr: Zeit, Datum, Wochentag
.aura-clock-custom	Uhr mit eigenem Format
.aura-clock-extras	Zusatzzeile (Ort, Auf-/Untergang, KW)
.aura-countdown	Countdown-Widget; data-state trägt idle · running · paused · ended · unknown
.aura-countdown-digits · .aura-countdown-progress · .aura-countdown-state	Countdown: Ziffern, Fortschrittsbalken, Zustandstext
.aura-countdown-controls · .aura-countdown-primary · .aura-countdown-stop · .aura-countdown-step · .aura-countdown-presets	Countdown: Tastenzeile, Start/Pause, Stopp, ±-Tasten, Vorgaben-Chips
.aura-countdown-modal	Countdown: Dialog „Dauer einstellen“
.aura-cal-*	Kalender — eigene Tabelle
.aura-group-header	Kopfleiste einer Gruppe (Titel, Icon, Einklapp-Pfeil) — trifft die Titel der Kinder-Widgets nicht
.aura-custom-grid	Raster des Benutzerdefinierten Widgets
.aura-custom-cell-<index>	eine Zelle darin, von 0 an gezählt
.aura-custom-cell-clickable	Hülle um eine Zelle mit Klick-Aktion (display: contents) — die Zelle selbst trifft .aura-custom-cell-clickable > *
.aura-fill-segments-value	Füllstand, Layout LED-Segmente: der Wert unter oder neben den Segmenten
.aura-slideshow · .aura-slideshow-stage	Diashow: Widget, Bildfläche; data-aura-slideshow-paused solange angehalten
.aura-slideshow-layer · .aura-slideshow-media · .aura-slideshow-backdrop	Diashow: eine Bild-Ebene (data-anim = laufender Übergang), das Bild/Video, der unscharfe Hintergrund
.aura-slideshow-caption · .aura-slideshow-notice · .aura-slideshow-paused · .aura-slideshow-sound	Diashow: Beschriftung, Hinweis (kein Ordner, leer), Pause-Zeichen, Ton-Knopf
.aura-feed	Nachrichten: Widget; data-aura-feed-layout = default · card · ticker · single
.aura-feed-list · .aura-feed-cards · .aura-feed-ticker · .aura-feed-ticker-track · .aura-feed-single-stage	Nachrichten: Fläche je Layout; die Laufschrift-Spur läuft per --aura-feed-ticker-s
.aura-feed-item (+ .aura-feed-row · .aura-feed-card · .aura-feed-ticker-item · .aura-feed-single)	Nachrichten: ein Artikel; data-aura-feed-item = Id des Artikels
.aura-feed-title · .aura-feed-summary · .aura-feed-image · .aura-feed-meta · .aura-feed-source · .aura-feed-source-dot · .aura-feed-date	Nachrichten: Teile eines Artikels
.aura-feed-notice · .aura-feed-warning · .aura-feed-dots	Nachrichten: Hinweis (kein Feed, leer, Fehler), Warnzeichen bei einem ausgefallenen Feed, Punkte der Einzelmeldung
.aura-feed-new · .aura-feed-unread · .aura-feed-speak	Nachrichten: Punkt an einem ungelesenen Artikel, „N neu“-Knopf, Vorlese-Knopf (data-aura-feed-reading solange er liest)
.aura-marquee-track	Lauftext im Karussell
.aura-carousel-shake	kurzer Anstoß beim Öffnen (Karussell)
.aura-map-pin	Markierung im Karten-Widget
.aura-msg-html	HTML-Inhalt einer Meldung (Titel und Text)
.aura-html-fill	HTML-Zelle der JSON-Tabelle mit Breite füllen
.aura-status-row-2l	Statusübersicht: Zeile im Layout „Zweizeilig“ (twoline); data-latch trägt active · muted
.aura-status-action · .aura-status-action-lg	Statusübersicht: Knopf am Zeilenende, große Form der zweizeiligen Zeile
.aura-status-action-ack · -snooze · -ignore · -unignore	Statusübersicht: die einzelnen Merklisten-Knöpfe (Gewechselt/Quittieren, Später, Ignorieren, Aufnehmen)
.aura-status-history-row · .aura-status-history-reason	Statusübersicht: Zeile im Layout „Zuletzt gewechselt“ (history), data-reason trägt ack · auto; Kennzeichen „per Knopf“/„automatisch“
.aura-status-tile · .aura-status-tile-name	Statusübersicht: Kachel im Layout „Karten“ (card) und der Gerätename darin
.aura-status-more	Statusübersicht: Zeile „+N weitere“ unter einer mit maxRows gekappten Liste

.aura-group-header {
    background: #1e3a5f;
}
.aura-group-header .aura-widget-title {
    color: #fff;
}

Bedingungen

Setzt eine Bedingung einen Effekt, landet die passende Klasse auf der Karte. Nützlich, um den Effekt umzudefinieren.

Selektor	trifft
.aura-cond-bold · .aura-cond-italic	ganze Karte fett bzw. kursiv
.aura-cond-ring	Rahmeneffekt
.aura-cond-disabled · .aura-cond-disabled-veil	deaktivierte Karte bzw. ihre Abdeckung (Aussehen über --widget-disabled-*)
.aura-cond-el-disabled · .aura-tab-cond-disabled	per Bedingung deaktivierte Zeile/Wert/Zelle bzw. deaktivierter Tab
.aura-cond-title-*	Titel: -color, -bold, -italic, -size, -hide
.aura-cond-icon-*	Icon: -color, -hide
.aura-cond-value-*	Wert: -color, -bold, -italic, -size, -hide

Verbindung verloren

Ist die Verbindung zu ioBroker länger als 5 s weg, trägt die Seite [data-aura-offline].

Selektor	trifft
[data-aura-offline] .aura-widget	ausgegraute Karten (Aussehen über --widget-offline-filter / --widget-offline-opacity)
.aura-offline-banner	Hinweis oben mittig „Keine Verbindung … seit“

Hilfsklassen

Selektor	trifft
.aura-scroll	Scrollbereich mit dünner Akzent-Scrollleiste
.aura-scroll-touch	derselbe Bereich auf Touch-Geräten (native Leiste aus)
.aura-scroll[data-aura-grid-mode="fluid"]	Dashboard-Raster im Modus „Fensterbreite füllen“ (sonst "fixed")
.aura-scroll[data-aura-grid-height-mode="fill"]	Höhe des Rasters: "fixed", "scale" (mitskalieren) oder "fill" (Fensterhöhe füllen)
.aura-no-scrollbar	Scrollbereich ohne sichtbare Leiste
.aura-bleed-host · .aura-bleed-row · .aura-bleed-clip · .aura-bleed-scroll	Listenzeilen, die in den Innenabstand der Karte ragen
.aura-popup-countdown	Countdown bis zum Auto-Schließen eines Popups
.aura-popup-countdown--top-left · --top-right · --bottom-left · --bottom-right	derselbe Countdown je Ecke
.aura-popup-countdown-icon · .aura-popup-countdown-value	Uhr-Symbol und Sekundenzahl darin

Im Editor

Selektor	trifft
.aura-edit-chrome	Bedienknöpfe am Widget im Bearbeiten-Modus
.aura-group-toolbar	Werkzeugleiste einer Gruppe ohne Kopfzeile
.aura-widget-inert	Widget-Inhalt mit gesperrter Bedienung
.aura-peek	am <body>, solange Strg+Alt die Editor-Elemente ausblendet
.aura-config-modal	Konfigurations-Popup
.aura-widget-edit-modal	Widget-Bearbeiten-Popup
.aura-dp-picker	Datenpunkt-Auswahl
.aura-dp-tree-row	eine Zeile der Baumansicht darin

Weitere aura-Klassen im Adminbereich sind Anker für die automatischen Tests — Custom CSS läuft dort nicht.

Daten-Attribute

Selektor	trifft
[data-aura-app="frontend"]	Frontend-Container (Skalierung, Theme-Bereich)
[data-aura-tab-id="<id>"]	Inhaltsbereich eines Tabs
[data-aura-widget="<id>"]	Widget-Box im mobilen Layout
[data-aura-widget-type="<typ>"]	dieselbe Box je Typ
[data-aura-nav-icon="tab|section|menu"]	Icon in einer Navigationsleiste
[data-aura-toasts="<position>"]	Toast-Ecke der Meldungen
[data-aura-click-popup="<art>"]	Popup eines Widget-Klicks
[data-aura-popup-countdown="<ecke>"]	Countdown darin (top-left, top-right, bottom-left, bottom-right)
[data-aura-locked]	Widget mit gesperrter Bedienung

CSS-Variablen

Variable	Bedeutung
--aura-widget-pad	Innenabstand der Karte, aus den Layout-Einstellungen
--aura-wrap-lines	Zeilenzahl der Option „Textumbruch"
--aura-bleed-max	wie weit Listenzeilen in den Innenabstand ragen dürfen
--aura-sbw	gemessene Breite der Scrollleiste
--font-scale	Schriftskalierung des Frontends
--popup-countdown-color · --popup-countdown-bg · --popup-countdown-border	Schrift, Fläche und Rahmen des Popup-Countdowns

Eigener Inhalt am Kartenrand richtet sich nach --aura-widget-pad statt nach einem festen Wert:

.aura-widget-type-list .aura-widget-row {
    margin-inline: calc(-1 * var(--aura-widget-pad, 16px));
}