/* --------------------------------------------------------------------------- * pa-tokens.css - Farben, Abstaende, Radien, Schatten, Schriftskala. * * Eine Stelle fuer alle Gestaltungswerte. Wer eine Farbe aendern will, aendert * sie hier und nicht in dreissig Regeln. Der untere Teil der Datei bildet * diese Werte auf die CSS-Variablen von Bootstrap 5 ab - damit kommen Karten, * Knoepfe, Formulare, Hinweise und Modals in unseren Farben heraus, ohne dass * wir Bootstrap-Regeln ueberschreiben muessen. * * ZUR PALETTE - warum sie nicht ganz die alte ist * * Die Hausfarben bleiben: das Navy der Kopfleiste und das Signalgruen. Zwei * Werte mussten aber nachgezogen werden, weil sie nachgerechnet nicht tragen: * * #62c40d auf weiss (und weiss darauf) = 2,23:1 * Das ist keine Geschmacksfrage. Als Flaeche unter weisser Schrift ist * dieses Gruen nicht lesbar - gefordert sind 4,5:1. Es bleibt deshalb * reine Zierfarbe: Fokusringe, aktive Markierungen, Trennlinien, * Hinterlegungen unter DUNKLER Schrift. Nie Text auf Gruen. * * #3d7a08 auf weiss = 5,27:1 <- neue Primaerfarbe fuer Flaechen * Gleicher Farbton wie #62c40d (92 Grad), nur dunkler. Das ist der * hellste Wert in genau diesem Farbton, der weisse Schrift sicher * traegt. Der Knopf sieht damit aus wie vorher gemeint, nur lesbar. * * #2c88c5 als Linkfarbe = 3,86:1 -> #1f6f9f = 5,48:1 * Derselbe Blauton, eine Stufe dunkler. * * Alle Zahlen sind mit der WCAG-Formel gerechnet, nicht geschaetzt. * --------------------------------------------------------------------------- */ :root { /* --- Marke ----------------------------------------------------------- */ --pa-navy: #2d3e50; /* Kopfleiste, Ueberschriften, Fliesstext */ --pa-navy-dark: #273646; /* obere Leiste, Fusszeile */ --pa-navy-soft: #475f78; /* gedrueckte Zustaende auf Navy */ --pa-accent: #62c40d; /* NUR Zierde - siehe Kopfkommentar */ --pa-accent-soft: #eaf7db; /* Gruen als Hinterlegung, Schrift bleibt dunkel */ --pa-primary: #3d7a08; /* Primaerflaeche, traegt weisse Schrift */ --pa-primary-hover: #428509; --pa-primary-active: #336607; --pa-link: #1f6f9f; --pa-link-hover: #17618f; /* --- Text und Flaechen ---------------------------------------------- */ --pa-ink: #2d3e50; /* 10,96:1 auf weiss */ --pa-ink-soft: #5a6673; /* 5,86:1 */ --pa-ink-muted: #6b7684; /* 4,62:1 - Grenzwert, nur fuer Beiwerk */ --pa-surface: #ffffff; --pa-surface-sunken: #f5f7f8; /* Seitenhintergrund hinter Karten */ --pa-surface-raised: #ffffff; --pa-border: #e3e6e8; --pa-border-strong: #ccd2d8; /* --- Zustandsfarben -------------------------------------------------- */ --pa-success: #2f7a3f; --pa-success-bg: #e8f5ea; --pa-danger: #b3261e; --pa-danger-bg: #fdeceb; --pa-warning: #8a5a00; --pa-warning-bg: #fff6e3; --pa-info: #1f6f9f; --pa-info-bg: #e9f3fa; /* --- Abstandsskala --------------------------------------------------- * Vielfache von 4 px. Wer einen Abstand braucht, nimmt eine Stufe - * das haelt die Seite ruhig, weil nicht jedes Panel seinen eigenen * Wert erfindet. */ --pa-space-1: 0.25rem; /* 4px */ --pa-space-2: 0.5rem; /* 8px */ --pa-space-3: 0.75rem; /* 12px */ --pa-space-4: 1rem; /* 16px */ --pa-space-5: 1.5rem; /* 24px */ --pa-space-6: 2rem; /* 32px */ --pa-space-7: 3rem; /* 48px */ --pa-space-8: 4rem; /* 64px */ /* --- Radien ---------------------------------------------------------- */ --pa-radius-sm: 4px; --pa-radius: 8px; --pa-radius-lg: 14px; --pa-radius-pill: 999px; /* --- Schatten -------------------------------------------------------- * Zwei Ebenen genuegen: ruhend und angehoben. Beide sehr zurueckhaltend, * damit die Fotos die Buehne behalten und nicht die Rahmen. */ --pa-shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.06), 0 1px 3px rgba(20, 30, 40, 0.05); --pa-shadow: 0 2px 4px rgba(20, 30, 40, 0.06), 0 6px 16px rgba(20, 30, 40, 0.08); --pa-shadow-lg: 0 8px 24px rgba(20, 30, 40, 0.12), 0 2px 6px rgba(20, 30, 40, 0.08); /* --- Schrift --------------------------------------------------------- * Source Sans 3 als Variable Font, selbst ausgeliefert (siehe * PortraitArchivHeaderContributor). Die Systemschriften stehen dahinter, * damit vor dem Laden nichts Fremdes erscheint. */ --pa-font: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pa-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pa-text-xs: 0.75rem; /* 12px */ --pa-text-sm: 0.875rem; /* 14px */ --pa-text-base: 1rem; /* 16px - bewusst 16 statt der alten 14: darunter zoomt iOS Safari Eingabefelder beim Antippen automatisch hinein. */ --pa-text-lg: 1.125rem; /* 18px */ --pa-text-xl: 1.375rem; /* 22px */ --pa-text-2xl: 1.75rem; /* 28px */ --pa-text-3xl: 2.25rem; /* 36px */ --pa-leading-tight: 1.2; --pa-leading: 1.55; /* --- Bewegung -------------------------------------------------------- * Kurz und einheitlich. Alles darueber wirkt auf einer Bestellseite * nicht edel, sondern langsam. */ --pa-ease: cubic-bezier(0.2, 0, 0.2, 1); --pa-duration: 160ms; --pa-duration-slow: 260ms; /* --- Aufbau ---------------------------------------------------------- */ --pa-header-height: 64px; /* 1600 statt 1280. * * Auf einem 1600er Fenster blieben vom Warenkorb 876 px fuer die * Positionen - Vorschaubild, Bezeichnung, Menge und Preis draengten sich * darin, obwohl daneben Platz frei war. Die Galerie zeigt mit der * groesseren Breite zugleich eine Kachelspalte mehr. * * Reine Textseiten (AGB, Datenschutz) bekommen ihre Lesebreite ueber * `.pa-textseite` - eine Zeile ueber die volle Breite waere hier zu * lang. */ --pa-container-max: 1600px; --pa-z-header: 1030; /* ueber Bootstraps Sticky, unter Modal (1055) */ } /* --------------------------------------------------------------------------- * Abbildung auf Bootstrap 5 * * Bootstrap 5.3 stellt seine Bauteile selbst ueber CSS-Variablen ein. Wir * setzen deshalb dessen Variablen statt seine Regeln zu ueberschreiben - das * ist der von Bootstrap vorgesehene Weg und bleibt bei einem Versionswechsel * heil. * --------------------------------------------------------------------------- */ :root { --bs-font-sans-serif: var(--pa-font); --bs-body-font-family: var(--pa-font); --bs-body-font-size: var(--pa-text-base); --bs-body-line-height: var(--pa-leading); --bs-body-color: var(--pa-ink); --bs-body-bg: var(--pa-surface); --bs-emphasis-color: var(--pa-navy); --bs-secondary-color: var(--pa-ink-soft); --bs-tertiary-color: var(--pa-ink-muted); --bs-border-color: var(--pa-border); --bs-border-radius: var(--pa-radius); --bs-border-radius-sm: var(--pa-radius-sm); --bs-border-radius-lg: var(--pa-radius-lg); --bs-border-radius-xl: var(--pa-radius-lg); --bs-link-color: var(--pa-link); --bs-link-color-rgb: 31, 111, 159; --bs-link-hover-color: var(--pa-link-hover); --bs-link-hover-color-rgb: 23, 97, 143; --bs-primary: var(--pa-primary); --bs-primary-rgb: 61, 122, 8; --bs-secondary: var(--pa-navy); --bs-success: var(--pa-success); --bs-danger: var(--pa-danger); --bs-warning: var(--pa-warning); --bs-info: var(--pa-info); --bs-focus-ring-color: rgba(98, 196, 13, 0.35); --bs-focus-ring-width: 3px; } /* Primaerknopf: die Hauptaktion einer Seite. Traegt weisse Schrift auf * #3d7a08 - nachgerechnet 5,27:1. */ .btn-primary { --bs-btn-bg: var(--pa-primary); --bs-btn-border-color: var(--pa-primary); --bs-btn-hover-bg: var(--pa-primary-hover); --bs-btn-hover-border-color: var(--pa-primary-hover); --bs-btn-active-bg: var(--pa-primary-active); --bs-btn-active-border-color: var(--pa-primary-active); --bs-btn-disabled-bg: var(--pa-primary); --bs-btn-disabled-border-color: var(--pa-primary); } /* Zweite Ebene: Navy. Fuer Aktionen, die wichtig sind, aber nicht DIE * Aktion der Seite - "Warenkorb anzeigen" neben "Bestellung abschliessen". */ .btn-secondary { --bs-btn-bg: var(--pa-navy); --bs-btn-border-color: var(--pa-navy); --bs-btn-hover-bg: var(--pa-navy-soft); --bs-btn-hover-border-color: var(--pa-navy-soft); --bs-btn-active-bg: var(--pa-navy-dark); --bs-btn-active-border-color: var(--pa-navy-dark); } /* Nebenwege: sichtbar, aber erkennbar nachrangig. Das ersetzt den alten * btn-default, der als grauer Klotz oft neben der Hauptaktion stand und * optisch gleich stark war. */ .btn-outline-secondary { --bs-btn-color: var(--pa-navy); --bs-btn-border-color: var(--pa-border-strong); --bs-btn-hover-bg: var(--pa-surface-sunken); --bs-btn-hover-border-color: var(--pa-navy); --bs-btn-hover-color: var(--pa-navy); --bs-btn-active-bg: var(--pa-border); --bs-btn-active-color: var(--pa-navy); --bs-btn-active-border-color: var(--pa-navy); } .card { --bs-card-border-color: var(--pa-border); --bs-card-border-radius: var(--pa-radius); --bs-card-inner-border-radius: calc(var(--pa-radius) - 1px); --bs-card-cap-bg: var(--pa-surface-sunken); --bs-card-cap-padding-y: var(--pa-space-3); --bs-card-cap-padding-x: var(--pa-space-5); --bs-card-spacer-y: var(--pa-space-5); --bs-card-spacer-x: var(--pa-space-5); } .alert { --bs-alert-border-radius: var(--pa-radius); --bs-alert-padding-y: var(--pa-space-3); --bs-alert-padding-x: var(--pa-space-4); } .modal { --bs-modal-border-radius: var(--pa-radius-lg); --bs-modal-border-color: transparent; --bs-modal-header-padding: var(--pa-space-4) var(--pa-space-5); --bs-modal-padding: var(--pa-space-5); --bs-modal-box-shadow: var(--pa-shadow-lg); } .form-control, .form-select { --bs-border-radius: var(--pa-radius-sm); } .table { --bs-table-border-color: var(--pa-border); } /* Der Schliessknopf sitzt rechts - auch dann, wenn der Dialog keine * Ueberschrift traegt (der Produktsatzdialog setzt keine). Ohne diese Zeile * rutschte er in dem Fall nach links, weil .modal-header mit nur einem Kind * am Anfang ausrichtet. */ .modal-header .btn-close { margin-left: auto; }