/* * FKTT project styles for the Xarapro theme. * * All browser-facing CSS customizations belong in this file. Module-specific * sections are kept only as comments for navigation and ownership context. */ /* ========================================================================== Static fallback for the FKTT brand colors/typography. These mirror the values configured under Appearance > Settings > xara_fktt (theme_color_one/two/dark/light/border, color_bodybg/bodytext/bold, body_font_size/line_height, h1_size..h6_size) and are rendered dynamically in by templates/template-parts/critical-style.html.twig. This block is a static safety net so the site never falls back to thexpro's generic demo colors/sizes, even outside that render path. Loads after style.css's own (outdated) :root, so it wins the cascade. If the theme settings change, update both this block and critical-style.html.twig. ========================================================================== */ :root { --primary: #f8d365; --secondary: #de9c12; --dark: #777777; --light: #f8f8f8; --border: #b4b4b4; --color-heading: #111111; } body { background: #ffffff; color: #383549; font-size: 0.8rem; line-height: 1.7; } @media (min-width: 768px) { h1 { font-size: 1.6rem; font-weight: 700; text-transform: none; line-height: 1.7; } h2 { font-size: 1.3rem; font-weight: 700; text-transform: none; line-height: 1.7; } h3 { font-size: 1rem; font-weight: 700; text-transform: none; line-height: 1.7; } h4 { font-size: 1.1rem; font-weight: 700; text-transform: none; line-height: 1.7; } h5 { font-size: 1.1rem; font-weight: 700; text-transform: none; line-height: 1.7; } h6 { font-size: 1rem; font-weight: 700; text-transform: none; line-height: 1.7; } } /* ========================================================================== Long-form article readability: floated inline images and automatic reading breaks for long text (see xara_fktt_preprocess_node() / _xara_fktt_insert_reading_breaks() in xara_fktt.theme). Both let a wide text column stay wide while shortening the effective line length and breaking up the "wall of text" visually. ========================================================================== */ .node-content img[data-align="left"], .node-content img[data-align="right"] { max-width: min(22rem, 40%); height: auto; margin-bottom: 1rem; } .node-content img[data-align="left"] { float: left; margin-right: 1.5rem; } .node-content img[data-align="right"] { float: right; margin-left: 1.5rem; } .fktt-reading-break { position: relative; width: 5rem; max-width: 100%; height: 1px; margin: 2.5rem auto; background: var(--border, #b4b4b4); } .fktt-reading-break::before { content: ""; position: absolute; top: 50%; left: 50%; width: .4rem; height: .4rem; border-radius: 50%; background: var(--secondary, #de9c12); transform: translate(-50%, -50%); } @media (max-width: 36rem) { .node-content img[data-align="left"], .node-content img[data-align="right"] { float: none; max-width: 100%; margin: 0 0 1rem; } } /* Rechte Randspalte (node.html.twig: .node-rail) für Autor, Stichwörter und Kommentare: nimmt dem Fließtext bewusst Breite weg, ohne den Container selbst schmaler zu machen (siehe Absprache zur Lesbarkeit langer Texte). */ .node-body-wrap:has(.node-rail) { display: grid; grid-template-columns: 1fr 20rem; column-gap: 1.5rem; align-items: start; } .node-rail { padding-left: 1.5rem; border-left: 2px dotted var(--secondary, #de9c12); font-size: .78rem; color: var(--dark, #777777); } .node-rail > * + * { margin-top: 1.75rem; } .node-rail img { max-width: 100%; height: auto; } .node-rail input, .node-rail textarea, .node-rail select { max-width: 100%; } .node-rail .node-author { flex-wrap: wrap; } .node-rail__heading { margin: 0 0 .75rem; font-size: .85rem; font-weight: 700; color: var(--color-heading, #111111); } /* Die Kommentar-"Karte" ist für die volle Textbreite gestaltet (großes Autorenbild, Schatten, große Buttons) und muss in der 20rem-Randspalte deutlich kompakter dargestellt werden. */ .node-rail__comments .comment { box-shadow: none; border: 1px solid var(--border, #b4b4b4); border-radius: 6px; margin-bottom: 1rem; } .node-rail__comments .comment-user-picture { display: none; } .node-rail__comments .comment-header { display: block; background: var(--light, #f8f8f8); padding: .6rem .75rem; } .node-rail__comments .comment-title { font-size: .8rem; line-height: 1.3; } .node-rail__comments .comment-meta p { margin: .25rem 0 0; font-size: .68rem; } .node-rail__comments .comment-body { padding: .6rem .75rem; font-size: .75rem; line-height: 1.5; } .node-rail__comments .comment-body ul.links { display: flex; flex-wrap: wrap; gap: .4rem; padding-left: 0; margin: .6rem 0 0; list-style: none; } .node-rail__comments .comment-reply a, .node-rail__comments .comment-delete a, .node-rail__comments .comment-edit a { padding: 2px 8px; font-size: .68rem; } @media (max-width: 44rem) { .node-body-wrap:has(.node-rail) { display: block; } .node-rail { margin-top: 2rem; padding-left: 0; padding-top: 1.5rem; border-left: none; border-top: 2px dotted var(--secondary, #de9c12); } } /* ========================================================================== Source: web/modules/custom/fktt_base/css/box-design.css ========================================================================== */ /* ─── Karten-Grunddesign ──────────────────────────────────────── */ .fktt-new-box-design { background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); padding: 1.25rem 1.5rem; margin-bottom: 1rem; font-size: large; } .fktt-new-box-design--bild { padding: 0; overflow: hidden; } .fktt-new-box-design--bild img { width: 100%; height: auto; display: block; } /* ─── Karten-Überschriften ────────────────────────────────────── */ .fktt-new-box-design > h3 { margin: 0 0 0.6rem; padding-bottom: 0.4rem; font-size: 1rem; font-weight: 700; color: #1a2a4a; border-bottom: 2px solid #e8edf5; } /* ─── Kompakt-Felder (label: inline) ─────────────────────────── */ .fktt-fields .field--label-inline { display: grid; grid-template-columns: 45% 1fr; gap: 0 0.5rem; align-items: baseline; padding: 0.3rem 0; border-bottom: 1px solid #f0f0f0; } .fktt-fields .field--label-inline:last-child { border-bottom: none; padding-bottom: 0; } .fktt-fields .field--label-inline .field__label { color: var(--xara-fktt-text-muted); font-weight: 400; font-size: 0.875rem; white-space: nowrap; } .fktt-fields .field--label-inline .field__items, .fktt-fields .field--label-inline .field__item, .fktt-fields .field--label-inline .field-item { font-weight: 400; color: #2c3e50; } /* ─── Beschreibungsfelder (label: above) ─────────────────────── */ .fktt-new-box-design .field--label-above .field__label { font-weight: 600; font-size: 0.875rem; color: #1a2a4a; margin-bottom: 0.2rem; } .fktt-new-box-design .field--label-above + .field--label-above { margin-top: 0.75rem; } /* ─── Bild-Feld am Ende der Karte ────────────────────────────── */ .fktt-new-box-design .image-field:last-child { margin: 0; } /* ========================================================================== Source: web/modules/custom/fktt_base/css/column-reorder.css ========================================================================== */ /* Spalten-Reordering Styles */ table thead th[draggable="true"] { cursor: grab; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; position: relative; transition: background-color 0.2s ease; } table thead th[draggable="true"]:active { cursor: grabbing; } table thead th.bs-dragging { opacity: 0.6; background-color: #e8f4f8; } table thead th[draggable="true"]:hover { background-color: #f5f5f5; } /* Drop-Indikator */ table thead th[style*="borderLeft"] { border-left: 3px solid #0078d4; padding-left: calc(var(--padding-left, 8px) - 3px); } /* ========================================================================== Source: web/modules/custom/fktt_base/css/column-toggle.css ========================================================================== */ /* Strukturierte Tabellen-Toolbar direkt über der Tabelle */ .bs-table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 8px; padding: 4px 0 6px; } .bs-table-toolbar__left, .bs-table-toolbar__right { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; } .bs-table-toolbar__right .bs-col-toggle-bar { margin-bottom: 0; position: relative; } /* Links und native Buttons in der Toolbar auf eine gemeinsame Höhe bringen. * .bs-col-toggle-btn zählt mit: sitzt als (Sortierung zurücksetzen) und *