latest
⚙️ Administration
Statische Inhalte
Styles

Styles (CSS)

Die style.css Datei definiert das visuelle Erscheinungsbild der Anwendung durch Setzen von globalen Stilen.

        • style.css

    • Root

    Umfasst die Schriftart und Hintergrundfarben für die Kartendarstellung im Light und Dark Mode.

    :root {
	--app-font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
	--map-background-light: #fff;
	--map-background-dark: #363636;
}
    EigenschaftTypBeschreibung
    --app-font-familyStringSchriftart, die in der gesamten Anwendung verwendet wird.
    --map-background-lightColorStandard-Hintergrundfarbe für die Karte im Light Mode.
    --map-background-darkColorStandard-Hintergrundfarbe für die Karte im Dark Mode.

    Farben für Light / Dark Mode

    In den beiden Abschnitte [data-theme="light"] und [data-theme="dark"] können Sie Einstellungen für beide Darstellungsmodi individuell anpassen. Die verwendeten Variablen werden in den entsprechenden Sektionen definiert.

    Hauptfarben

     {
	--app-primary-color: #00619b;
	--app-secondary-color: #1b88c7;
	--app-tertiary-color: #262626;
}
    EigenschaftTypBeschreibung
    --app-primary-colorColorHauptfarbe der Anwendung, die für hervorgehobene Elemente genutzt wird.
    --app-secondary-colorColorUnterstützende Farbe, die für sekundäre Elemente und Akzente genutzt wird.
    --app-tertiary-colorColorDritte Farbe der Farbpalette, die u.a. für Hintergründe verwendet wird.

    Button Farben

     {
	--button-color: #00619b;
	--button-hover-background: white;
	--button-hover-color: var(--app-primary-color);
	--button-hover-border: var(--app-primary-color);
}
    EigenschaftTypBeschreibung
    --button-colorColorStandardfarbe für Button-Texte.
    --button-hover-backgroundColorHintergrundfarbe für Buttons im Hover-Zustand.
    --button-hover-colorColorTextfarbe für Buttons im Hover-Zustand.
    --button-hover-borderColorRahmenfarbe für Buttons im Hover-Zustand.

    Footer Farben

     {
	--footer-primary: var(--app-primary-color);
	--footer-secondary: var(--app-secondary-color);
}
    EigenschaftTypBeschreibung
    --footer-primaryColorPrimärfarbe für den Fußbereich.
    --footer-secondaryColorSekundärfarbe für den Fußbereich.

    Schrift Farben

     {
	--app-font-color: #212121;
	--hover-color: #104869;
}
    EigenschaftTypBeschreibung
    --app-font-colorColorHauptfarbe für den Text in der Anwendung.
    --hover-colorColorFarbe für Hover-Effekte über interaktiven Elementen.

    Hintergrundfarben / Border

     {
	--background-color: #fff;
	--background-highlight-color: #f3f3f3;
	--border-color: #acacac;
}
    EigenschaftTypBeschreibung
    --background-colorColorGrundlegende Hintergrundfarbe der Anwendung.
    --background-highlight-colorColorHintergrundfarbe für hervorgehobene Bereiche.
    --border-colorColorFarbe der Ränder und Abgrenzungen.

    Akzentfarben

     {
	--gray-primary: #666666;
	--gray-secondary: #b8b8b8;
	--gray-tertiary: #f0f0f0;
}
    EigenschaftTypBeschreibung
    --gray-primaryColorHauptgrauton, der in der Anwendung verwendet wird.
    --gray-secondaryColorSekundärer Grauton, der für feinere Abstufungen und Details verwendet wird.
    --gray-tertiaryColorTertiärer Grauton, oft für Hintergründe oder Schatten verwendet.

    Sonstiges

     {
	--spinner-color: var(--app-primary-color);
}
    EigenschaftTypBeschreibung
    --spinner-colorColorFarbe des Ladeindikators (Spinner).

    Filterfarben

     {
	--svg-filter-primary: invert(24%) sepia(39%) saturate(3747%) hue-rotate(182deg) brightness(95%) contrast(101%);
	--svg-filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(159deg) brightness(104%) contrast(104%);
	--svg-filter-gray-primary: invert(43%) sepia(0%) saturate(13%) hue-rotate(168deg) brightness(87%) contrast(81%);
}
    EigenschaftTypBeschreibung
    --svg-filter-primaryFilterFarbfilter, um SVG-Grafiken von schwarz #000000 in die Hauptfarbe der Anwendung app-primary-color umzuwandeln
    --svg-filter-whiteFilterFarbfilter, um SVG-Grafiken von schwarz #000000 in Weiß umzuwandeln
    --svg-filter-gray-primaryFilterFarbfilter, um SVG-Grafiken von schwarz #000000 in den Hauptgrauton --gray-primary umzuwandeln

    Weiter Informationen und Anleitung zum Erstellen der Farbfilter finden Sie hier (opens in a new tab).

    ManifestSystemeinstellungen