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;
}

Eigenschaft	Typ	Beschreibung
`--app-font-family`	String	Schriftart, die in der gesamten Anwendung verwendet wird.
`--map-background-light`	Color	Standard-Hintergrundfarbe für die Karte im Light Mode.
`--map-background-dark`	Color	Standard-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;
}

Eigenschaft	Typ	Beschreibung
`--app-primary-color`	Color	Hauptfarbe der Anwendung, die für hervorgehobene Elemente genutzt wird.
`--app-secondary-color`	Color	Unterstützende Farbe, die für sekundäre Elemente und Akzente genutzt wird.
`--app-tertiary-color`	Color	Dritte 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);
}

Eigenschaft	Typ	Beschreibung
`--button-color`	Color	Standardfarbe für Button-Texte.
`--button-hover-background`	Color	Hintergrundfarbe für Buttons im Hover-Zustand.
`--button-hover-color`	Color	Textfarbe für Buttons im Hover-Zustand.
`--button-hover-border`	Color	Rahmenfarbe für Buttons im Hover-Zustand.

Footer Farben


 {
	--footer-primary: var(--app-primary-color);
	--footer-secondary: var(--app-secondary-color);
}

Eigenschaft	Typ	Beschreibung
`--footer-primary`	Color	Primärfarbe für den Fußbereich.
`--footer-secondary`	Color	Sekundärfarbe für den Fußbereich.

Schrift Farben


 {
	--app-font-color: #212121;
	--hover-color: #104869;
}

Eigenschaft	Typ	Beschreibung
`--app-font-color`	Color	Hauptfarbe für den Text in der Anwendung.
`--hover-color`	Color	Farbe für Hover-Effekte über interaktiven Elementen.

Hintergrundfarben / Border


 {
	--background-color: #fff;
	--background-highlight-color: #f3f3f3;
	--border-color: #acacac;
}

Eigenschaft	Typ	Beschreibung
`--background-color`	Color	Grundlegende Hintergrundfarbe der Anwendung.
`--background-highlight-color`	Color	Hintergrundfarbe für hervorgehobene Bereiche.
`--border-color`	Color	Farbe der Ränder und Abgrenzungen.

Akzentfarben


 {
	--gray-primary: #666666;
	--gray-secondary: #b8b8b8;
	--gray-tertiary: #f0f0f0;
}

Eigenschaft	Typ	Beschreibung
`--gray-primary`	Color	Hauptgrauton, der in der Anwendung verwendet wird.
`--gray-secondary`	Color	Sekundärer Grauton, der für feinere Abstufungen und Details verwendet wird.
`--gray-tertiary`	Color	Tertiärer Grauton, oft für Hintergründe oder Schatten verwendet.

Sonstiges


 {
	--spinner-color: var(--app-primary-color);
}

Eigenschaft	Typ	Beschreibung
`--spinner-color`	Color	Farbe 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%);
}

Eigenschaft	Typ	Beschreibung
`--svg-filter-primary`	Filter	Farbfilter, um SVG-Grafiken von schwarz `#000000` in die Hauptfarbe der Anwendung `app-primary-color` umzuwandeln
`--svg-filter-white`	Filter	Farbfilter, um SVG-Grafiken von schwarz `#000000` in Weiß umzuwandeln
`--svg-filter-gray-primary`	Filter	Farbfilter, um SVG-Grafiken von schwarz `#000000` in den Hauptgrauton `--gray-primary` umzuwandeln

Weiter Informationen und Anleitung zum Erstellen der Farbfilter finden Sie hier .