:root { --font-system-ui: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; --indigo-7: #4263eb; --purple-7: #ae3ec9; --gray-12: #030507; --gray-7: #495057; --gray-0: #f8f9fa; --gray-2: #e9ecef; --gray-3: #dee2e6; --gray-4: #ced4da; --red-6: #fa5252; --red-1: #ffe3e3; --red-9: #c92a2a; --green-6: #40c057; --green-1: #d3f9d8; --green-9: #2b8a3e; --blue-6: #228be6; --blue-1: #d0ebff; --blue-9: #1864ab; --yellow-9: #e67700; --yellow-1: #fff3bf; --size-content-3: 60ch; --size-fluid-4: max(2rem,min(4vw,3rem)); --size-fluid-3: max(1.5rem,min(3vw,2rem)); --indigo-3: #91a7ff; --purple-3: #e599f7; --gray-1: #f1f3f5; --gray-9: #212529; --gray-8: #343a40; --gray-6: #868e96; --red-4: #ff8787; --green-4: #69db7c; --blue-4: #4dabf7; --yellow-4: #ffd43b; --font-lineheight-3: 1.5; --ease-2: cubic-bezier(.25,0,.4,1); --font-weight-9: 900; --font-lineheight-1: 1.25; --font-size-8: 3.5rem; --size-header-1: 20ch; --font-size-6: 2.5rem; --size-header-2: 25ch; --font-size-5: 2rem; --font-size-4: 1.5rem; --font-size-3: 1.25rem; --size-header-3: 35ch; --font-size-2: 1.1rem; --indigo-2: #bac8ff; --purple-2: #eebefa; --size-1: .25rem; --size-2: .5rem; --size-relative-4: 1.25ch; --size-content-1: 20ch; --size-3: 1rem; --size-10: 5rem; --font-monospace-code: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,Cascadia Code,Menlo,Consolas,DejaVu Sans Mono,monospace; --radius-2: 5px; --border-size-1: 1px; --size-8: 3rem; --size-content-2: 45ch; --font-weight-7: 700; --size-5: 1.5rem; --font-size-0: .75rem; --border-size-2: 2px; --size-fluid-5: max(4rem,min(5vw,5rem)); --font-size-1: 1rem; --border-size-3: 5px; --size-4: 1.25rem; --red-2: #ffc9c9; --blue-5: #339af0; --radius-3: 1rem; --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 3px 2px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 12px 10px -2px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 22px 18px -2px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 41px 33px -2px hsl(var(--shadow-color)/var(--shadow-strength-7)),0 100px 80px -2px hsl(var(--shadow-color)/var(--shadow-strength-8)); --size-fluid-2: max(1rem,min(2vw,1.5rem)); --red-3: #ffa8a8; --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color)/var(--shadow-strength-10)),var(--inner-shadow-highlight); --size-relative-6: 1.75ch; --font-weight-6: 600; --shadow-color: 220 40% 2%; --shadow-strength-3: calc(var(--shadow-strength) + 2%); --shadow-strength-4: calc(var(--shadow-strength) + 3%); --shadow-strength-5: calc(var(--shadow-strength) + 4%); --shadow-strength-6: calc(var(--shadow-strength) + 5%); --shadow-strength-7: calc(var(--shadow-strength) + 6%); --shadow-strength-8: calc(var(--shadow-strength) + 7%); --shadow-strength-10: calc(var(--shadow-strength) + 9%); --inner-shadow-highlight: inset 0 -.5px 0 0 hsla(0,0%,100%,.067),inset 0 .5px 0 0 rgba(0,0,0,.467); --shadow-strength: 25%; --size-relative-7: 2ch; --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color)/var(--shadow-strength-4)),0 7px 14px -5px hsl(var(--shadow-color)/var(--shadow-strength-6)); --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color)/var(--shadow-strength-10)); --gray-5: #adb5bd; --ease-3: cubic-bezier(.25,0,.3,1); --ease-4: cubic-bezier(.25,0,.2,1); --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 2px -5px hsl(var(--shadow-color)/var(--shadow-strength-3)),0 2px 5px -5px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 4px 12px -5px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 12px 15px -5px hsl(var(--shadow-color)/var(--shadow-strength-8)); } /* * Test-Einstieg: komplettes Framework (styles.css) plus die JS-Variante des * mobilen Navigationsschalters. Nur zum Ausprobieren gedacht, damit styles.css * unverändert bleibt. Zusammen mit src/js/navigation.js verwenden. */ /* * Contao Theme Framework – Haupteinstiegspunkt. * Reihenfolge folgt ITCSS (generisch -> Basis -> komponentenspezifisch), * damit die Cascade genutzt werden kann statt Spezifität hochzuschrauben. */ /* abstracts: Design-Tokens & Farbschema (Light/Dark), zuerst importiert, damit alle folgenden Dateien die Tokens (--ctf-, --clr-, --grid-) nutzen können */ /* * Framework-Tokens & Farbschema. * Ergänzt die Design-Tokens von Open Props um Werte, die dort fehlen: * eine fluide Schriftgrößen-Skala nach der Utopia-Methode (utopia.fyi), * ein eigenes, Light/Dark-fähiges Farbschema und ein paar layoutbezogene * Basiswerte. Abstände, Radien usw. kommen weiterhin direkt aus Open Props * (var(--size-4), var(--radius-2) ...) statt hier dupliziert zu werden. * * Anders als in einer früheren Version wird diese Datei jetzt ganz normal * per @import eingebunden (siehe styles.css) statt per postcss-jit-props * injiziert: Für ein kleines, von Hand gepflegtes Token-Set ist eine * build-tool-spezifische Just-in-Time-Injektion unnötige Komplexität – * vor allem, weil Light/Dark-Werte ohnehin einen echten, verschachtelten * @media-Block brauchen, den jit-props nicht abbilden kann (es kennt nur * eine flache Property-zu-Wert-Zuordnung, keine Selektor-/Media-Struktur). * Für die große Open-Props-Rohfarbpalette (open-props.min.css) bleibt * jit-props weiterhin sinnvoll (siehe postcss.config.js) – nur dort lohnt * sich Tree-Shaking wirklich. */ :root { /* Fluide Typografie: Viewport 320px–1240px, Basisschrift 18px–20px, Skalenverhältnis 1.2 (klein) bis 1.25 (groß) */ --ctf-step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); --ctf-step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); --ctf-step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); --ctf-step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); --ctf-step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); --ctf-step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); --ctf-step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); --ctf-step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); --ctf-step-6: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem); /* Schrift-Aliase auf die Open-Props-Stacks (modernfontstacks.com). Themes können hier umschalten, ohne Selektoren im Framework anzufassen */ --ctf-font-body: var(--font-system-ui); --ctf-font-heading: var(--font-system-ui); /* * Farbschema (Light, Standardwert). Komponenten referenzieren nur noch * --clr-*, nie direkt Open-Props-Rohfarben wie --red-6 – ein Theme kann so * sein eigenes Farbschema definieren, ohne Selektoren in contao/*.css oder * generic/normalize.css anzufassen. Die numerischen Stufen (-1..-4 bzw. * -2) entsprechen der Open-Props-eigenen Konvention (text-1/-2, * surface-1..4), die generic/normalize.css als Vorbild übernimmt. */ --clr-link: var(--indigo-7); --clr-link-visited: var(--purple-7); --clr-text-1: var(--gray-12); --clr-text-2: var(--gray-7); --clr-surface-1: var(--gray-0); --clr-surface-2: var(--gray-2); --clr-surface-3: var(--gray-3); --clr-surface-4: var(--gray-4); --clr-scrollthumb: var(--gray-7); /* * Status-Farben, je drei Stufen: * Akzentfarbe (z. B. Text/Icon auf neutraler Fläche) * -surface Hintergrund einer gefüllten Box (z. B. .message) * -surface-text Textfarbe auf dieser Box * error/success werden von echten Contao-Klassen genutzt * (.message.error/.message.confirm, siehe contao/modules.css für den * tl_error-Alias – tl_confirm bewusst nicht gespiegelt, siehe dort). * info/warning sind (noch) keine von Contao selbst gesetzten Klassen, * aber als Helper-Klassen nutzbar (.message.info/.message.warning), * falls ein Projekt sie manuell braucht. */ --clr-error: var(--red-6); --clr-error-surface: var(--red-1); --clr-error-surface-text: var(--red-9); --clr-success: var(--green-6); --clr-success-surface: var(--green-1); --clr-success-surface-text: var(--green-9); --clr-info: var(--blue-6); --clr-info-surface: var(--blue-1); --clr-info-surface-text: var(--blue-9); --clr-warning: var(--yellow-9); --clr-warning-surface: var(--yellow-1); --clr-warning-surface-text: var(--yellow-9); /* Breitenbegrenzung für header/main/footer > .inside (base/skeleton.css) */ --ctf-content-width: 75rem; /* Lesemaß (typografische Zeilenlänge): generic/normalize.css (:where(p)) und contao/elements.css (.content-text) referenzieren beide dieses eine Token, damit eine andere Zeilenlänge nur an dieser Stelle geändert werden muss, statt an mehreren Dateien synchron */ --ctf-measure: var(--size-content-3); /* Vertikaler Rhythmus (base/typography.css): Abstand zwischen Artikeln, größer als der zwischen Inhaltselementen (--size-fluid-3) */ --ctf-article-space: var(--size-fluid-4); /* Gridsystem (base/grid.css): Spaltenzahl und Rinnenbreite waren dort bisher referenziert, aber nirgends definiert – ohne diese beiden Werte griff var(--grid-columns)/var(--grid-gutter) ins Leere */ --grid-columns: 12; --grid-gutter: var(--size-fluid-3); /* .row hat per gap: var(--grid-gutter) standardmäßig denselben Abstand in beide Richtungen. --grid-gutter-y ist der Override-Punkt für .row--gap-y, wenn ein Theme einen abweichenden vertikalen Abstand braucht; per Default identisch zu --grid-gutter, also ohne eigene Anpassung ein No-op */ --grid-gutter-y: var(--grid-gutter); } /* * Farbschema (Dark). Echter, verschachtelter @media-Block statt einer * build-tool-spezifischen Konvention – funktioniert unabhängig vom * verwendeten PostCSS-Setup und ist für jeden CSS-Entwickler auf Anhieb * lesbar. Nur die Farb-Tokens werden hier überschrieben, alles andere * (Typografie, Grid, Abstände) bleibt schemaunabhängig. */ @media (prefers-color-scheme: dark) { :root { --clr-link: var(--indigo-3); --clr-link-visited: var(--purple-3); --clr-text-1: var(--gray-1); --clr-text-2: var(--gray-4); --clr-surface-1: var(--gray-9); --clr-surface-2: var(--gray-8); --clr-surface-3: var(--gray-7); --clr-surface-4: var(--gray-6); --clr-scrollthumb: var(--gray-6); --clr-error: var(--red-4); --clr-error-surface: var(--red-9); --clr-error-surface-text: var(--red-1); --clr-success: var(--green-4); --clr-success-surface: var(--green-9); --clr-success-surface-text: var(--green-1); --clr-info: var(--blue-4); --clr-info-surface: var(--blue-9); --clr-info-surface-text: var(--blue-1); --clr-warning: var(--yellow-4); --clr-warning-surface: var(--yellow-9); --clr-warning-surface-text: var(--yellow-1); } } /* generic: Reset & Basiswerte, an die normalize.css von Open Props angelehnt */ /* * Reset & sinnvolle Basiswerte, nach dem Vorbild der normalize.css von Open * Props (siehe node_modules/open-props/normalize.min.css) – möglichst * unverändert übernommen, wo es rein strukturelles Reset-Verhalten betrifft * (box-sizing, Ränder, Formular-/Tabellen-Grundstyling, Fokus-Stile usw.). * * Farben wurden bewusst ersetzt: statt der eingebauten --text-1/--surface-1/ * --link-Tokens von Open Props referenziert dieses File unser eigenes * Farbschema (--clr-*, siehe abstracts/custom-properties.css) – so pflegen * wir Light/Dark-Werte an einer Stelle, statt zwei parallele Systeme * (Open-Props-Semantik und unser eigenes) im Framework zu haben. * * Ausgelassen: die button/.btn-bezogenen Custom-Property-Zuweisungen aus dem * Original (--_highlight, --_bg, --_ink-shadow usw.) – die greifen nur im * Zusammenspiel mit Open Props' eigenem Buttons-Modul, das wir nicht * einbinden, und wären hier totes Gewicht ohne Wirkung. */ :where(html) { -webkit-text-size-adjust: none; accent-color: var(--brand, var(--clr-link)); background-color: var(--clr-surface-1); block-size: 100%; caret-color: var(--brand, var(--clr-link)); color: var(--clr-text-1); --csstools-color-scheme--light: initial; color-scheme: light; font-family: var(--font-system-ui); line-height: var(--font-lineheight-3); scrollbar-color: var(--clr-scrollthumb) transparent; } @media (prefers-color-scheme: dark) { :where(html) { --csstools-color-scheme--light: ; color-scheme: dark; --shadow-strength: 10%; --shadow-color: 220 40% 2%; } } :where(html) :where(dialog) { background-color: var(--clr-surface-1); } :where(html) :where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"])) { background-color: var(--clr-surface-2); } :where(a[href]) { color: var(--brand, var(--clr-link)); } :where(a[href]):where(:visited) { color: var(--clr-link-visited); } :focus-visible { outline-color: var(--brand, var(--clr-link)); } *, :after, :before { box-sizing: border-box; } :where(:not(dialog)) { margin: 0; } :where(:not(fieldset):not(progress):not(meter)) { background-origin: border-box; background-repeat: no-repeat; border-style: solid; border-width: 0; } @media (prefers-reduced-motion: no-preference) { :where(html) { scroll-behavior: smooth; } :where(:focus-visible) { transition: outline-offset 145ms var(--ease-2); } :where(:not(:active):focus-visible) { transition-duration: 0.25s; } } :where(:not(:active):focus-visible) { outline-offset: 5px; } :where(body) { min-block-size: 100%; } :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; font-weight: var(--font-weight-9); line-height: var(--font-lineheight-1); } :where(h1) { font-size: var(--font-size-8); max-inline-size: var(--size-header-1); } :where(h2) { font-size: var(--font-size-6); max-inline-size: var(--size-header-2); } :where(h3) { font-size: var(--font-size-5); } :where(h4) { font-size: var(--font-size-4); } :where(h5) { font-size: var(--font-size-3); } :where(h3, h4, h5, h6, dt) { max-inline-size: var(--size-header-3); } :where(p, ul, ol, dl, h6) { font-size: var(--font-size-2); } :where(a, u, ins, abbr) { text-underline-offset: 1px; } @supports (-moz-appearance: none) { :where(a, u, ins, abbr) { text-underline-offset: 2px; } } :where(a[href], area, button, input:not([type="text"]):not([type="email"]):not([type="number"]):not([type="password"]):not([type=""]):not([type="tel"]):not([type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"]):not(pre)) { cursor: pointer; } :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } :where(a):where([href]) { text-decoration-color: var(--indigo-2); } :where(a):where([href]):where(:visited) { text-decoration-color: var(--purple-2); } :where(a):where(:not(:hover)) { text-decoration: inherit; } :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; } :where(img, svg, video) { block-size: auto; max-inline-size: 100%; } :where(input, button, textarea, select), :where(input[type="file"])::-webkit-file-upload-button { color: inherit; font: inherit; font-size: inherit; letter-spacing: inherit; } ::-moz-placeholder { color: var(--clr-text-2); opacity: 0.75; } ::placeholder { color: var(--clr-text-2); opacity: 0.75; } :where(input:not([type="range"]), textarea) { padding-block: var(--size-1); padding-inline: var(--size-2); } :where(select) { field-sizing: content; padding-block: 0.75ch; padding-inline: var(--size-relative-4) 0; } :where(textarea, select, input:not([type="button"]):not([type="submit"]):not([type="reset"])) { background-color: var(--clr-surface-2); border-radius: var(--radius-2); } :where(textarea) { field-sizing: content; min-block-size: 2lh; min-inline-size: var(--size-content-1); resize: vertical; } :where(input[type="checkbox"], input[type="radio"]) { block-size: var(--size-3); inline-size: var(--size-3); } :where(svg:not([width])) { inline-size: var(--size-10); } :where(code, kbd, samp, pre) { font-family: var(--font-monospace-code), monospace; } :where(:not(pre) > code, kbd) { white-space: nowrap; } :where(pre) { direction: ltr; max-inline-size: -moz-max-content; max-inline-size: max-content; min-inline-size: 0; white-space: pre; writing-mode: lr; } :where(:not(pre) > code) { background: var(--clr-surface-2); border-radius: var(--radius-2); padding: var(--size-1) var(--size-2); writing-mode: lr; } :where(kbd, var) { border-color: var(--clr-surface-4); border-radius: var(--radius-2); border-width: var(--border-size-1); padding: var(--size-1) var(--size-2); } :where(mark) { border-radius: var(--radius-2); padding-inline: var(--size-1); } :where(ol, ul) { padding-inline-start: var(--size-8); } :where(li) { padding-inline-start: var(--size-2); } :where(li, dd, figcaption) { max-inline-size: var(--size-content-2); } :where(p) { text-wrap: pretty; max-inline-size: var(--ctf-measure); } :where(dt, summary) { font-weight: var(--font-weight-7); } :where(dt:not(:first-of-type)) { margin-block-start: var(--size-5); } :where(small) { font-size: max(0.5em, var(--font-size-0)); max-inline-size: var(--size-content-1); } :where(hr) { background-color: var(--clr-surface-3); height: var(--border-size-2); margin-block: var(--size-fluid-5); } :where(figure) { display: grid; grid-gap: var(--size-2); gap: var(--size-2); align-items: center; justify-items: center; place-items: center; } :where(figure) > :where(figcaption) { text-wrap: balance; font-size: var(--font-size-1); } :where(blockquote, :not(blockquote) > cite) { border-inline-start-width: var(--border-size-3); } :where(blockquote) { display: grid; grid-gap: var(--size-3); gap: var(--size-3); max-inline-size: var(--size-content-2); padding-block: var(--size-3); padding-inline: var(--size-4); } :where(:not(blockquote) > cite) { padding-inline-start: var(--size-2); } :where(summary) { background: var(--clr-surface-3); border-radius: var(--radius-2); margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1); padding: var(--size-2) var(--size-3); } :where(details) { background: var(--clr-surface-2); border-radius: var(--radius-2); padding-block: var(--size-2); padding-inline: var(--size-3); } :where(details[open] > summary) { border-end-end-radius: 0; border-end-start-radius: 0; margin-bottom: var(--size-2); } :where(fieldset) { border: var(--border-size-1) solid var(--clr-surface-4); border-radius: var(--radius-2); } :where(del) { background: var(--red-9); color: var(--red-2); } :where(ins) { background: var(--green-9); color: var(--green-1); } :where(abbr) { text-decoration-color: var(--blue-5); } :where(dialog) { background-color: var(--clr-surface-1); border-radius: var(--radius-3); box-shadow: var(--shadow-6); color: inherit; } :where(menu) { display: flex; gap: var(--size-3); padding-inline-start: 0; } :where(sup) { font-size: 0.5em; } :where(table) { --nice-inner-radius: calc(var(--radius-3) - 2px); background: var(--clr-surface-2); border: 1px solid var(--clr-surface-2); border-radius: var(--radius-3); width: -moz-fit-content; width: fit-content; } :where(table:not(:has(tfoot)) tr:last-child td:first-child) { border-end-start-radius: var(--nice-inner-radius); } :where(table:not(:has(tfoot)) tr:last-child td:last-child) { border-end-end-radius: var(--nice-inner-radius); } :where(table thead tr:first-child th:first-child) { border-start-start-radius: var(--nice-inner-radius); } :where(table thead tr:first-child th:last-child) { border-start-end-radius: var(--nice-inner-radius); } :where(tfoot tr:last-child th:first-of-type) { border-end-start-radius: var(--nice-inner-radius); } :where(tfoot tr:last-child td:first-of-type) { border-end-start-radius: var(--nice-inner-radius); } :where(tfoot tr:last-child th:last-of-type) { border-end-end-radius: var(--nice-inner-radius); } :where(tfoot tr:last-child td:last-of-type) { border-end-end-radius: var(--nice-inner-radius); } :where(th) { background-color: var(--clr-surface-2); color: var(--clr-text-1); } :where(table a:not(.does-not-exist):focus-visible), :where(table button:not(.does-not-exist):focus-visible), :where(table [contenteditable]:focus-visible) { outline-offset: -2px; } :where(td) { text-wrap: pretty; background: var(--clr-surface-1); max-inline-size: var(--size-content-2); } :where(td, th) { padding: var(--size-2); text-align: left; } :where(td:not([align])), :where(th:not([align])) { text-align: center; } :where(thead) { border-collapse: collapse; } :where(table tr:hover td), :where(tbody tr:nth-child(2n):hover td) { background-color: var(--clr-surface-3); } :where(table > caption) { margin: var(--size-3); } :where(tfoot button) { padding-block: var(--size-1); padding-inline: var(--size-3); } /* Im Original ein eigener Dark-Mode-Override (Dialog etwas heller als der normale Seitenhintergrund) – die übrigen Dark-Anpassungen des Originals (Eingabefelder, Placeholder) entfallen hier, da sie über --clr-surface-2/ --clr-text-2 schon automatisch mit dem Farbschema mitschalten */ @media (prefers-color-scheme: dark) { :where(dialog) { background-color: var(--clr-surface-2); } } /* base: unstyled HTML-Elemente, Seitengerüst, Gridsystem */ /* * Seitengerüst nach page/layout.html.twig (siehe resources/layout.html.twig): * #wrapper enthält
,
und