:root { --font-system-ui: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; --indigo-7-hsl: 228 81% 59%; --gray-12-hsl: 210 40% 2%; --gray-7-hsl: 210 9% 31%; --gray-0-hsl: 210 17% 98%; --red-6-hsl: 0 94% 65%; --green-6-hsl: 131 50% 50%; --blue-6-hsl: 208 80% 52%; --yellow-9-hsl: 31 100% 45%; --size-content-3: 60ch; --size-fluid-4: max(2rem,min(4vw,3rem)); --size-fluid-3: max(1.5rem,min(3vw,2rem)); --indigo-3-hsl: 228 100% 78%; --gray-1-hsl: 210 17% 95%; --gray-4-hsl: 210 14% 83%; --gray-9-hsl: 210 11% 15%; --gray-6-hsl: 210 7% 56%; --red-4-hsl: 0 100% 76%; --green-4-hsl: 130 61% 64%; --blue-4-hsl: 207 91% 64%; --yellow-4-hsl: 47 100% 62%; --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; --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; --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)); --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)); --size-fluid-2: max(1rem,min(2vw,1.5rem)); --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%; --gray-5-hsl: 210 11% 71%; --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)); --ease-3: cubic-bezier(.25,0,.3,1); --ease-4: cubic-bezier(.25,0,.2,1); } /* * 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. * * Alle Farben sind HSL-Farben: Basiswerte kommen aus den ----hsl- * Tripeln von Open Props ("228 81% 59%"), abgeleitete Werte per CSS * Relative Colors – hsl(from h s l), siehe * developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors. * Ein Theme muss dadurch nur die Basisfarben tauschen (--clr-link, * --clr-surface-1, die Statusfarben), der Rest zieht nach. */ --clr-link: hsl(var(--indigo-7-hsl)); /* Besuchter Link: gleiche Helligkeit/Sättigung wie der Link, Farbton um 60° Richtung Violett gedreht (indigo 228° -> purple 288°) */ --clr-link-visited: hsl(from var(--clr-link) calc(h + 60) s l); --clr-text-1: hsl(var(--gray-12-hsl)); --clr-text-2: hsl(var(--gray-7-hsl)); --clr-surface-1: hsl(var(--gray-0-hsl)); /* Flächen 2-4: Stufen vom Seitenhintergrund aus, hier jeweils dunkler. Im Dark Mode zeigt die Richtung nach oben (heller), siehe unten */ --clr-surface-2: hsl(from var(--clr-surface-1) h s calc(l - 5)); --clr-surface-3: hsl(from var(--clr-surface-1) h s calc(l - 9)); --clr-surface-4: hsl(from var(--clr-surface-1) h s calc(l - 15)); --clr-scrollthumb: hsl(var(--gray-7-hsl)); /* * 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 * Nur die Akzentfarbe wird festgelegt, Fläche und Text daraus abgeleitet * (gleicher Farbton, Fläche mit 60 % der Sättigung, Helligkeit fest: hell 92 %/ * Text 22 %, im Dark Mode umgekehrt). So reichen vier Zeilen für ein * neues Statusschema. * 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: hsl(var(--red-6-hsl)); --clr-success: hsl(var(--green-6-hsl)); --clr-info: hsl(var(--blue-6-hsl)); --clr-warning: hsl(var(--yellow-9-hsl)); --clr-error-surface: hsl(from var(--clr-error) h calc(s * 0.6) 92%); --clr-error-surface-text: hsl(from var(--clr-error) h s 22%); --clr-success-surface: hsl(from var(--clr-success) h calc(s * 0.6) 92%); --clr-success-surface-text: hsl(from var(--clr-success) h s 22%); --clr-info-surface: hsl(from var(--clr-info) h calc(s * 0.6) 92%); --clr-info-surface-text: hsl(from var(--clr-info) h s 22%); --clr-warning-surface: hsl(from var(--clr-warning) h calc(s * 0.6) 92%); --clr-warning-surface-text: hsl(from var(--clr-warning) h s 22%); /* 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: hsl(var(--indigo-3-hsl)); --clr-text-1: hsl(var(--gray-1-hsl)); --clr-text-2: hsl(var(--gray-4-hsl)); --clr-surface-1: hsl(var(--gray-9-hsl)); /* Flächen 2-4 werden im Dark Mode heller statt dunkler; die Schritte (+8/+16/+41) entsprechen den Open-Props-Graustufen 8/7/6 */ --clr-surface-2: hsl(from var(--clr-surface-1) h s calc(l + 8)); --clr-surface-3: hsl(from var(--clr-surface-1) h s calc(l + 16)); --clr-surface-4: hsl(from var(--clr-surface-1) h s calc(l + 41)); --clr-scrollthumb: hsl(var(--gray-6-hsl)); --clr-error: hsl(var(--red-4-hsl)); --clr-success: hsl(var(--green-4-hsl)); --clr-info: hsl(var(--blue-4-hsl)); --clr-warning: hsl(var(--yellow-4-hsl)); --clr-error-surface: hsl(from var(--clr-error) h calc(s * 0.6) 20%); --clr-error-surface-text: hsl(from var(--clr-error) h s 92%); --clr-success-surface: hsl(from var(--clr-success) h calc(s * 0.6) 20%); --clr-success-surface-text: hsl(from var(--clr-success) h s 92%); --clr-info-surface: hsl(from var(--clr-info) h calc(s * 0.6) 20%); --clr-info-surface-text: hsl(from var(--clr-info) h s 92%); --clr-warning-surface: hsl(from var(--clr-warning) h calc(s * 0.6) 20%); --clr-warning-surface-text: hsl(from var(--clr-warning) h s 92%); } } /* 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: hsl(from var(--clr-link) h s l / 40%); } :where(a):where([href]):where(:visited) { text-decoration-color: hsl(from var(--clr-link-visited) h s l / 40%); } :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(--clr-error-surface); color: var(--clr-error-surface-text); } :where(ins) { background: var(--clr-success-surface); color: var(--clr-success-surface-text); } :where(abbr) { text-decoration-color: var(--clr-info); } :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