7.2 – CSS-Variablen

Wo man sie setzt

In quartz/styles/custom.scss des Projekts:

.quartz-nav {
  --quartz-nav-indent: 1.5rem;
  --quartz-nav-color-active: var(--tertiary);
}

Das gewinnt ohne höhere Spezifität: Quartz legt das CSS jeder Komponente in eine CSS-Ebene (@layer quartz-base), custom.scss nicht — und Regeln außerhalb einer Ebene schlagen Regeln darin.

Eine einzelne Navigation

Jede Navigation trägt ihre ID im Attribut data-quartz-nav:

.quartz-nav[data-quartz-nav="seitenleiste"] {
  --quartz-nav-bg-hover: transparent;
}

Die ID ist der Wert von id — ohne id ein Prüfwert, der sich mit jeder Option ändert. Wer eine Navigation gezielt gestaltet, gibt ihr deshalb eine id (7.3). Alternativ setzt className eigene Klassen an das <nav>.

Farben und Schriften

Die Vorgaben verweisen auf Quartz’ Theme-Variablen und folgen damit dem Dunkelmodus.

Variable	Vorgabe	Wirkung
--quartz-nav-color	--darkgray	Links
--quartz-nav-color-hover	--secondary	Links beim Überfahren
--quartz-nav-color-active	--secondary	die aktuelle Seite
--quartz-nav-color-trail	--secondary	Ordner auf dem Pfad zur aktuellen Seite
--quartz-nav-color-static	--dark	Ordnertitel ohne Link
--quartz-nav-color-heading	--dark	Überschrift title
--quartz-nav-color-muted	--gray	Pfeile, Beschriftungen
--quartz-nav-color-icon	--gray	Glyphen und Icons
--quartz-nav-bg-hover	--highlight	Hintergrund beim Überfahren
--quartz-nav-bg-active	--highlight	Hintergrund der aktuellen Seite
--quartz-nav-bg-panel	--light	Menüs, Panels, mobiles Menü
--quartz-nav-border	--lightgray	Rahmen und Führungslinien
--quartz-nav-focus	--secondary	Fokusring
--quartz-nav-shadow	weicher Schatten, im Dunkelmodus kräftiger	Menüs und Panels
--quartz-nav-backdrop	rgba(0,0,0,.35), im Dunkelmodus .55	Hintergrund hinter dem mobilen Menü
--quartz-nav-font	--bodyFont	Schrift der Einträge
--quartz-nav-heading-font	--headerFont	Schrift der Überschrift
--quartz-nav-folder-font	--quartz-nav-heading-font	Schrift der Ordnertitel

Abstände und Form

Variable	Vorgabe	Wirkung
--quartz-nav-gap	0.25rem 0.5rem	Abstand in waagerechten Zeilen
--quartz-nav-nested-gap	0.25rem 0.5rem	Abstand der Unterebenen in bar
--quartz-nav-indent	1rem	Einrückung je Ebene
--quartz-nav-item-padding-y, -x	0.2rem, 0.5rem	Innenabstand einer Zeile
--quartz-nav-radius	4px	Eckenradius einer Zeile
--quartz-nav-line-height	1.6	Zeilenhöhe
--quartz-nav-row-height	Zeilenhöhe plus Innenabstand	Höhe des Aufklapp-Buttons
--quartz-nav-toggle-size	1.75rem	Breite des Aufklapp-Buttons
--quartz-nav-icon-size	1.1em	Größe der Icons
--quartz-nav-accent-bar	3px	Akzentbalken an der aktuellen Seite
--quartz-nav-chevron-open-rotate	180deg	Drehung des Pfeils bei offenem Ordner
--quartz-nav-title-size, --quartz-nav-title-margin	1rem, 0 0 0.5rem	Überschrift title

Menüs, Spalten, mobiles Menü

Variable	Vorgabe	Wirkung
--quartz-nav-panel-min-width	12rem	Mindestbreite eines Menüs
--quartz-nav-panel-padding	0.5rem	Innenabstand eines Menüs
--quartz-nav-panel-radius	6px	Eckenradius eines Menüs
--quartz-nav-panel-z	20	Stapelhöhe der Menüs
--quartz-nav-mega-min-width	min(40rem, 90vw)	Breite des Mega-Menüs
--quartz-nav-column-min-width	10rem	Mindestbreite einer Spalte in columns und mega
--quartz-nav-column-gap	1rem 1.5rem	Abstand der Spalten
--quartz-nav-offcanvas-width	min(20rem, 85vw)	Breite des mobilen Menüs
--quartz-nav-offcanvas-padding	1rem	Innenabstand des mobilen Menüs
--quartz-nav-offcanvas-z	100	Stapelhöhe des mobilen Menüs

Schrift nach Ebene

Ordnerzeilen werden je Ebene kleiner und leichter: Ebene 1 ist ein Bereich, Ebene 2 ein Kapitel, alles darunter ein Ort. Seiten bleiben leicht und höchstens so groß wie --quartz-nav-page-size. Die oberste Zeile der waagerechten Varianten ist dagegen einheitlich.

Variable	Vorgabe
--quartz-nav-level-1-size, -weight	0.95rem, 700
--quartz-nav-level-2-size, -weight	0.9rem, 600
--quartz-nav-level-3-size, -weight	0.875rem, 500
--quartz-nav-level-4-size, -weight	0.8rem, 500 — für Ebene 4 und tiefer
--quartz-nav-page-size, --quartz-nav-page-weight	0.875rem, 400
--quartz-nav-bar-weight	500 — oberste Zeile von bar, dropdown, mega, tabs
--quartz-nav-weight-active	600 — die aktuelle Seite

Bewegung

Pfeile drehen sich, Farben blenden über, Ordner und Menüs blenden beim Öffnen ein, das mobile Menü fährt herein. Alles hängt an einer Variable:

.quartz-nav {
  --quartz-nav-transition: 0s;   /* Vorgabe: 0.2s ease */
}

Bei prefers-reduced-motion setzt das Plugin sie selbst auf 0s.