/* ===================================================================== HORANOS - DESIGN-TOKENS --------------------------------------------------------------------- Die eine Stelle, an der Farben, Schrift, Groessen, Radien, Schatten und Tempo festgelegt werden. Alles andere im Theme liest nur noch diese Namen (var(--hz-...)) - wer hier einen Wert aendert, aendert ihn auf der ganzen Seite. Ladereihenfolge (includes/head.tpl): direkt nach theme.min.css und vor custom.css. Die Datei setzt nur Variablen, keine Regeln fuer Elemente; sie kann also nichts ueberschreiben und muss nichts gewinnen. Die Bauteile, die diese Werte benutzen (Button, Feld, Dropdown, Karte, Tabelle ...), stehen in css/components.css. Regeln * Neue Farbe, Groesse oder Dauer? Erst pruefen, ob ein Token passt. Nur wenn keiner passt, hier einen ergaenzen - nie direkt im Bauteil. * Farben mit Transparenz: rgb(var(--hz-primary-rgb) / .15). Deshalb gibt es fuer die Markenfarben zusaetzlich die Kanalwerte. ===================================================================== */ /* Reihenfolge der Kaskaden-Ebenen. Bei !important gewinnt die zuerst genannte Ebene, und jede Ebene gewinnt gegen Regeln ohne Ebene: hz-rtl Arabisch (css/rtl.css, nur bei lang="ar" geladen) - dreht Seiten, die sonst ueberall links/rechts festlegen, und muss deshalb gegen alle anderen Ebenen gewinnen hz-drawer Handy-Menue (css/mobile-nav.css) - hat Vorrang vor der allgemeinen Dropdown-Vorlage, weil die Schublade ihr eigenes Listenbild hat hz-system Bauteile (css/components.css) */ @layer hz-rtl, hz-drawer, hz-system; :root { /* ----------------------------------------------------------------- 1. Farben ----------------------------------------------------------------- */ /* Markenrot. Nur die Kanalwerte aendern - --hz-primary folgt. 196 49 53 = #C43135 */ --hz-primary-rgb: 196 49 53; --hz-primary: rgb(var(--hz-primary-rgb)); --hz-primary-hover: #A7282C; /* Hover/aktiv auf Rot */ --hz-primary-soft: #F9EAEB; /* heller Grund: Badge, Auswahl */ --hz-primary-on-dark: #EF5B60; /* Rot als Schrift auf Navy */ /* Navy - Kopf- und Fusszeile, Ueberschriften */ --hz-navy-900-rgb: 15 31 38; --hz-navy-900: rgb(var(--hz-navy-900-rgb)); /* #0F1F26 */ --hz-navy-rgb: 31 58 64; --hz-navy: rgb(var(--hz-navy-rgb)); /* #1F3A40 */ /* Text */ --hz-text: #33474C; /* Fliesstext */ --hz-muted: #6B7B80; /* Nebentext, Hinweise */ --hz-on-dark: #FFFFFF; /* Text auf Navy/Rot */ --hz-on-dark-muted: rgb(255 255 255 / .72); /* Flaechen und Linien */ --hz-bg: #F7F7F9; /* Seitengrund */ --hz-surface: #FFFFFF; /* Karte, Feld, Liste */ --hz-surface-2: #F0F3F4; /* Tabellenkopf, Hover-Grund */ --hz-surface-3: #E4EAEC; /* Kopf einer Karte (Planname) */ --hz-line: #E1E6E8; /* Rahmen von Karten, Trenner */ --hz-line-strong: #C9D2D5; /* Rahmen von Feldern */ --hz-line-hover: #AEB9BD; /* Feldrahmen beim Hover */ --hz-line-on-dark: rgb(255 255 255 / .10); /* Laufleiste der Seite (dunkel wie Windows 11). Die Pfeile in custom.css sind SVG-Bilder und tragen dieselben Farben fest eingetragen. */ --hz-scrollbar-track: #2C2C2C; --hz-scrollbar-thumb: #9F9F9F; --hz-scrollbar-thumb-hover: #BDBDBD; /* Links */ --hz-link: var(--hz-primary); --hz-link-hover: var(--hz-primary-hover); /* Status - getrennt vom Markenrot, damit "Fehler" nicht wie ein Button aussieht */ --hz-success: #1E7A50; --hz-success-soft: #E6F4EC; --hz-warning: #9A6412; --hz-warning-soft: #FBF1DF; --hz-danger: #B42318; --hz-danger-soft: #FDECEA; --hz-info: var(--hz-navy); --hz-info-soft: #E8EEF0; /* ----------------------------------------------------------------- 2. Schrift 'Noto Sans Arabic' liegt in 400, 500, 600 und 700 vor (css/fonts.css). Benutzt werden nur drei Schnitte. ----------------------------------------------------------------- */ --hz-font: 'Noto Sans Arabic', sans-serif; --hz-fw-regular: 400; /* Fliesstext */ --hz-fw-semibold: 600; /* Buttons, Labels, Menues */ --hz-fw-bold: 700; /* Ueberschriften, Preise */ /* Groessen (PC). Die Handy-Werte stehen im @media-Block unten. */ --hz-fs-hero: 32px; --hz-fs-h1: 30px; --hz-fs-h2: 24px; --hz-fs-h3: 18px; --hz-fs-h4: 16px; --hz-fs-lead: 17px; /* Untertitel unter H1/H2 */ --hz-fs-body: 15px; --hz-fs-control: 14.5px; /* Buttons, Felder, Menues */ --hz-fs-small: 13px; --hz-fs-mini: 12px; --hz-fs-sidebar-title: 15px; /* Kopf der Seitenleisten-Kaesten ("Manage", "Actions") - PC und Handy gleich */ --hz-lh-tight: 1.25; /* Ueberschriften */ --hz-lh-snug: 1.4; /* Buttons, Listen */ --hz-lh-body: 1.6; /* Fliesstext */ /* ----------------------------------------------------------------- 3. Form ----------------------------------------------------------------- */ /* Ein Radius fuer alles: Buttons, Felder, Listen, Karten, Kaesten, Badges. Rund (50%) bleiben nur Kreise wie Symbol-Kreise. */ --hz-radius: 12px; --hz-shadow-sm: 0 1px 2px rgb(var(--hz-navy-900-rgb) / .06); --hz-shadow-md: 0 8px 24px rgb(var(--hz-navy-900-rgb) / .10); --hz-shadow-lg: 0 20px 48px rgb(var(--hz-navy-900-rgb) / .16); /* Abstaende - 4er-Raster */ --hz-space-1: 4px; --hz-space-2: 8px; --hz-space-3: 12px; --hz-space-4: 16px; --hz-space-5: 24px; --hz-space-6: 32px; --hz-space-7: 48px; --hz-space-8: 64px; /* Hoehe von Buttons und Feldern */ --hz-h-sm: 32px; --hz-h-md: 40px; --hz-h-lg: 48px; /* nur die grosse Suche */ /* Fokus - fuer alles, was sich anklicken oder ausfuellen laesst */ --hz-focus-ring: 0 0 0 3px rgb(var(--hz-primary-rgb) / .18); /* ----------------------------------------------------------------- 4. Bewegung ----------------------------------------------------------------- */ --hz-dur-fast: 150ms; /* Hover */ --hz-dur: 200ms; /* Menues, Akkordeon */ --hz-dur-slow: 300ms; /* Schublade, Dialog */ --hz-ease: cubic-bezier(.2, 0, 0, 1); /* Die Standard-Uebergaenge fuer Farbwechsel beim Hover */ --hz-transition-color: color var(--hz-dur-fast) var(--hz-ease), background-color var(--hz-dur-fast) var(--hz-ease), border-color var(--hz-dur-fast) var(--hz-ease), box-shadow var(--hz-dur-fast) var(--hz-ease); /* ----------------------------------------------------------------- 5. Dropdown-Vorlage (hell) Jede Auswahlliste der Seite liest diese Namen - siehe components.css, Abschnitt "Dropdown-Vorlage". Die Kopfzeile setzt dieselben Namen dunkel (Abschnitt 6), die Form bleibt gleich. ----------------------------------------------------------------- */ --hz-dd-bg: var(--hz-surface); --hz-dd-border: var(--hz-line); --hz-dd-shadow: var(--hz-shadow-md); --hz-dd-radius: var(--hz-radius); --hz-dd-pad: 6px; --hz-dd-gap: 2px; --hz-dd-min-w: 200px; --hz-dd-max-h: 320px; --hz-dd-item-h: 36px; --hz-dd-item-px: 12px; --hz-dd-item-radius: var(--hz-radius); --hz-dd-item-fs: 14px; --hz-dd-item-color: var(--hz-navy); --hz-dd-item-hover-bg: var(--hz-surface-2); --hz-dd-item-hover-color: var(--hz-primary); --hz-dd-item-active-bg: var(--hz-primary-soft); --hz-dd-item-active-color: var(--hz-primary); --hz-dd-group-color: var(--hz-muted); --hz-dd-divider: var(--hz-line); /* ----------------------------------------------------------------- 6. Bootstrap-Grundfarben theme.min.css bringt das Blau von Twenty-One (#336699) mit. Die Variablen hier decken alles ab, was Bootstrap ueber var() liest; die fest eingebauten Farben ersetzt components.css. ----------------------------------------------------------------- */ --primary: var(--hz-primary); --secondary: var(--hz-muted); --success: var(--hz-success); --info: var(--hz-info); --warning: var(--hz-warning); --danger: var(--hz-danger); --light: var(--hz-bg); --dark: var(--hz-navy); --blue: var(--hz-primary); --font-family-sans-serif: var(--hz-font); } /* Dropdown-Vorlage dunkel: alle Listen in der Kopfzeile (Hauptmenue, Konto, Sprache). Nur die Farben wechseln - Form und Tempo bleiben die der hellen Vorlage oben. */ #header { --hz-dd-bg: var(--hz-navy-900); --hz-dd-border: var(--hz-line-on-dark); --hz-dd-shadow: var(--hz-shadow-lg); --hz-dd-item-color: rgb(255 255 255 / .82); --hz-dd-item-hover-bg: rgb(255 255 255 / .07); --hz-dd-item-hover-color: var(--hz-on-dark); --hz-dd-item-active-bg: rgb(var(--hz-primary-rgb) / .24); --hz-dd-item-active-color: var(--hz-on-dark); --hz-dd-group-color: rgb(255 255 255 / .5); --hz-dd-divider: var(--hz-line-on-dark); } /* Handy: kleinere Ueberschriften, alles andere bleibt */ @media (max-width: 767.98px) { :root { --hz-fs-hero: 28px; --hz-fs-h1: 24px; --hz-fs-h2: 20px; --hz-fs-h3: 17px; --hz-fs-lead: 16px; } } /* Wer weniger Bewegung eingestellt hat, bekommt keine */ @media (prefers-reduced-motion: reduce) { :root { --hz-dur-fast: 0ms; --hz-dur: 0ms; --hz-dur-slow: 0ms; } }