Überblick CSS-Klassen und CSS-Variablen

Die Hierarchie von Elementen bei der Anwendung von CSS-Stilen wird im Folgenden von allgemein bis spezifisch erklärt:

Dashboard: Das Dashboard ist das übergeordnete Element, das die gesamte Oberfläche oder den gesamten Bereich umfasst. Es stellt den allgemeinsten Rahmen dar, auf den CSS-Stile angewendet werden.
Seite: Innerhalb des Dashboards gibt es einzelne Seiten. Jede Seite kann eigene CSS-Stile haben, die auf alle Elemente auf dieser speziellen Seite angewendet werden.
Panel: Ein Panel ist ein Abschnitt innerhalb einer Seite. Es stellt einen spezifischeren Bereich dar, der eigene Stile haben kann, die nur für diesen Abschnitt der Seite gelten.
Vorlage: Die Vorlage ist das spezifischste Element in dieser Hierarchie. Sie kann einzelne Komponenten oder Inhalte innerhalb eines Panels darstellen und sehr detaillierte CSS-Stile haben.

Unterschied zwischen CSS-Styles und CSS-Variablen

CSS Styles definieren das visuelle Erscheinungsbild von HTML-Elementen auf einer Webseite. Eigenschaften wie Schriftgröße, Farben oder Abstände werden durch Styles direkt auf die jeweiligen Elemente angewendet.

CSS-Variablen (Custom Properties) ermöglichen die Wiederverwendung von Werten in Ihrem CSS. Sie können global oder lokal definiert werden und helfen dabei, wiederkehrende Werte wie Farben oder Größen zentral zu verwalten, was die Wartung und Flexibilität des Codes verbessert.

Beziehung zwischen CSS Styles und CSS-Variablen

CSS-Variablen sind eine Ergänzung zu CSS Styles. Während Styles das Aussehen festlegen, ermöglichen Variablen eine effizientere Verwaltung und Wiederverwendung von Designwerten. Änderungen an einer CSS-Variable wirken sich automatisch auf alle Styles aus, die diese Variable nutzen.

Dashboard Controls I

Die folgenden Variablen können nur auf Dashboard- und Seite-Ebene angewendet werden

--dashboard-font-family: ändert die Schriftart für das Dashboard. Diese Eigenschaft wird standardmäßig an alle Elemente im Dashboard vererbt ✔
--dashboard-page-background: ändert die Hintergrundfarbe der Seite. Dies ist eine globale Variable. Das bedeutet, dass alle Seiten im Dashboard ihre Farbe von dieser Variable erben. Einzelne Seitenfarben können mit der Variable „--page-background“ festgelegt werden ✔

Dashboard Controls II

Die folgenden Variablen können auf Dashboard-, Seite-, und Panel-Ebene angewendet werden

--dashboard-panel-border: legt die Breite, den Linientyp und die Farbe für die Panel-Ränder innerhalb des Dashboards fest – "universelle Panel-Randsteuerung".
--dashboard-button-control-background: legt die Hintergrundfarbe für alle Schaltflächen innerhalb eines Dashboards fest
--dashboard-button-control-active: Voreinstellung #00ff00, Hintergrundfarbe wenn der Baustein active ist.
--dashboard-button-control-inactive: Voreinstellung #ff4040, Hintergrundfarbe, wenn der Baustein inactive ist.
--dashboard-button-control-enabled-opacity: Voreinstellung 1, die CSS opacity für einen enabled Button. Man beachte, dass dieser Wert auch die Grundeinstellung der HTML Elementes ist, so dass bei Verwendung der Voreinstellungen enabled optisch keinen Unterschied macht.
--dashboard-button-control-disabled-opacity: Voreinstellung 0.5, analog für disabled.
--dashboard-button-control-hover-active: Voreinstellung #00cc00, für den Fall, dass der Button active ist.
--dashboard-button-control-hover: Voreinstellung #ff8080, in allen anderen Fällen, also wenn der Button inactive ist oder der Parameter Active weder true noch false liefert.
--dashboard-radio-control-background: Voreinstellung #ffffff, der globale Hintergrund (CSS background) des ganzen Bausteins.
--dashboard-radio-control-foreground: Voreinstellung #000000, der globale Hintergrund (CSS background) des Umschaltknopfs, wenn der Parameter Source einen truthy (JavaScript !!) Wert liefert.
--dashboard-slider-control-knob-size: Voreinstellung 1em: die Größe des Knopfs.
--dashboard-slider-control-knob-shadow: Voreinstellung 1px 1px 0px #cccccc: der Schatten (CSS filter der Art drop-shadow) um den Knopf. Ist diese Variable nicht gesetzt, dafür aber --dashboard-control-knob-shadow, so wird deren Wert statt der Voreinstellung verwendet.
--dashboard-slider-control-round-knob-offset: Voreinstellung calc(-1em / 4) ein Versatz (CSS bottom) für die Anzeige eines runden Knopfs.
--dashboard-slider-control-up-knob-offset: Voreinstellung calc(1em / 12) ein Versatz (CSS top) für die Anzeige der Träne nach oben.
--dashboard-slider-control-down-knob-offset: Voreinstellung calc(1em / 12): ein Versatz (CSS bottom) für die Anzeige der Träne nach unten (Einheit: em).
--dashboard-knob-control-knob-position. Voreinstellung -2.5%, beschreibt letztlich die Position (CSS margin-top) des eigentlichen Knopfs zur Veränderung des Wertes. Ein Wert von 23% würde diesen auf den mittleren Ring verschieben.
--dashboard-knob-control-knob-shadow: Voreinstellung 1px 1px 0 #cccccc, der Schatten des Knopfs (CSS filter der Art drop-shadow). Ist diese Variable nicht gesetzt, dafür aber --dashboard-control-knob-shadow, so wird deren Wert statt der Voreinstellung verwendet.
--dashboard-knob-control-background: Voreinstellung #ffffff, der Hintergrund (CSS background) zwischen dem äußeren Ring und dem inneren Kreis.
--dashboard-icon-control-text-foreground: Voreinstellung #000000, die Farbe des Symbols an sich (CSS color). Ist dies Variable nicht gesetzt, dafür aber --dashboard-control-text-foreground so wird deren Wert vor der Voreinstellung verwendet.
--dashboard-icon-control-text-background: Voreinstellung transparent: der Hintergrund des Symbols an sich (CSS background). Ist dies Variable nicht gesetzt, dafür aber --dashboard-control-text-background, so wird deren Wert vor der Voreinstellung verwendet.
--control-border: Damit wird der Rahmen um alle Vorlagenelemente in einem Dashboard erstellt. Diese Eigenschaft kann nur über das Dashboard, Seite und Panel angepasst werden. (Breite(px), Stil(solid, dashed), Farbe)
--control-border-radius: wird verwendet, um abgerundete Ecken für das äußere Rahmen eines Elements zu erstellen. Diese Eigenschaft kann nur über das Dashboard, Seite und Panel angepasst werden.
--control-knob-shadow: wird nur der Knopf des Schieberegler mit einem Schatten versehen (horizontal-offset vertical-offset blur-radius spread-radius color inset)
--control-padding: fügt dem Element, auf das es angewandt wird, ein Padding (Abstand zwischen dem Element selbst und dem Rand des Elements) mit einer bestimmten Breite hinzu. Diese Eigenschaft kann nur über das Dashboard, Seite und Panel angepasst werden.
--control-text-align: bestimmt die horizontale Ausrichtung von Text innerhalb eines Blockelements. Mögliche Werte sind left, right, center und justify, um den Text linksbündig, rechtsbündig, zentriert oder im Blocksatz anzuordnen.
--control-text-background: bestimmt die Hinterfrundfarbe von Textelemente. Dies kann vom Dashboard bis auf die Vorlagen angewendet werden
--control-text-foreground: bestimmt die Farbe von Textelemente. Dies kann auf allen Ebenen der Dashboard-Hierarchie angewendet werden.

Deprecated Dashboard Controls

--dashboard-background
--dashboard-panel-background
--dashboard-format-control-text-background
--control-color
--control-knob-color
--control-shadow

Seite Controls

--page-background: ändert die Hintergrundfarbe einer Seite und kann auf der Dashboard-Ebene sowie auf Seitenebene angewendet werden.

Panel Controls

Diese Variablen können auf Dashboard-, Seiten- und Panel-Ebenen angewendet werden.

--panel-background: ändert die Hintergrundfarbe eines Panels.
--panel-border: legt die Breite, den Stil und die Farbe des Rahmens eines Panels fest. Die möglichen Werte sind: Breite (in Pixel), Stil (z.B. solid oder dashed), und Farbe.
--panel-border-radius: wird verwendet, um abgerundete Ecken für den Rahmen eines Elements festzulegen.
--panel-shadow: fügt einen Schatteneffekt zu einem Element hinzu. Der Schatten kann entweder außerhalb oder innerhalb des Elements erscheinen. Die Größe, Unschärfe, Verteilung und Farbe des Schattens lassen sich mit den Parametern (horizontaler Versatz, vertikaler Versatz, Unschärferadius, Ausbreitungsradius, Farbe, und optional inset für innere Schatten) anpassen." (horizontal-offset vertical-offset blur-radius spread-radius color inset)
--panel-title-background: färbt den Hintergrund des Titeltextes innerhalb eines Panels.
--panel-title-foreground: ändert die Farbe des Titeltexts innerhalb eines Panels.
--panel-title-separator: fügt einen Unterstrich unter dem Titel des Panels hinzu, dessen Farbe ebenfalls angepasst werden kann.

Druckknopf Controls

Diese Variablen ermöglichen die flexible Anpassung von Farben auf jeder Spezifitätsebene – von einzelnen Elementen bis hin zum gesamten Layout.

--radio-background: der Hintergrund (CSS background) des ganzen Bausteins.
--radio-foreground: der Hintergrund (CSS background) des Umschaltknopfs, wenn der Parameter Source einen truthy (JavaScript !!) Wert liefert.

Template Controls

Diese Variablen können auf allen Ebenen angewendet werden, beeinflussen jedoch ausschließlich Vorlagen.

--template-background: legt die Hintergrundfarbe einer Vorlage fest
--template-border: Hier werden die Breite, der Strichstil und die Farbe des Rahmens einer Vorlage festgelegt. (Breite in Pixel, Stil (z.B. solid, dashed), Farbe).
--template-border-radius: wird verwendet, um abgerundete Ecken für den äußeren Rahmen eines Elements zu erstellen.