/* ============================================================ * Boardly App Shell — Story 0008 * * 3-Zeilen-Grid: topbar + main (sidebar links, content rechts). * Reverse-engineered aus .project/design/Boardly.html (Zeilen 126-185) * und auf Sprint-1-Minimum reduziert. * * Reihenfolge im HTML: tokens.css + base.css VOR shell.css laden. * * Story 0049 (Sprint-1-Auflage 0017) — a11y: * Skip-to-Content-Link versteckt sich ausserhalb des Viewports und * wird beim ersten Tab-Fokus sichtbar. * * Story 0057 / ADR-0026 (Sprint 6) — Design-Tokens (Tokens-only-Polish): * Spacing, Typo, State-Colors als zentrale CSS-Custom-Properties. * tokens.css definiert Theme-bezogene Variablen (--accent etc.) themed, * shell.css ergaenzt themed-invariante Sprint-6-Tokens. * ============================================================ */ /* ---------- Story 0057 — Design-Tokens (Tokens-only-Pass, ADR-0026) ---------- */ :root { /* Spacing-Skala 4 / 8 / 16 / 24 / 32 px. Verwendung Pflicht in pages.css. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2rem; /* Typografie — nur 3 Stufen (sm/base/lg). Heading-Hierarchie ueber font-weight. */ --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.5rem; /* State-Colors — Banner/Alert. tokens.css definiert die theme-bezogenen Akzent-Farben (--accent, --accent-soft, --danger, --good, --info); wir kanonisieren hier nur die State-Aliase, damit Banner-Tokens (--state-warn, --state-error, --state-success) unabhaengig vom Theme funktionieren. Default-Palette (Blau-Akzent) als Fallback, falls --accent nicht gesetzt ist. */ --state-warn: oklch(70% 0.14 80); --state-warn-soft: oklch(94% 0.05 80); --state-error: oklch(58% 0.18 28); --state-error-soft: oklch(94% 0.05 28); --state-success: oklch(58% 0.12 150); --state-success-soft: oklch(94% 0.04 150); } /* ---------- Skip-to-Content (a11y) ---------- */ .skip-link { position: absolute; top: -40px; left: 8px; z-index: 1000; padding: 8px 12px; background: var(--ink); color: var(--bg); font-size: 13px; font-weight: 500; border-radius: var(--r-2); text-decoration: none; transition: top .15s var(--ease); } .skip-link:focus, .skip-link:focus-visible { top: 8px; outline: 2px solid var(--ink-2); outline-offset: 2px; } /* main als programmatisches Sprungziel — entfernt den Default-Outline-Ring, weil der Fokus per Skip-Link bewusst ankommt. */ main[id="main"]:focus { outline: none; } /* ---------- Root-Grid ---------- */ .app { /* UI-Restyle: Sidebar-Breite als Variable → einklappbar (TopBar-Toggle) UND als harte Referenz fuer die main-Breite (siehe .main). */ --sidebar-w: 220px; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "topbar topbar" "sidebar main" "footer footer"; height: 100vh; overflow: hidden; } /* UI-Restyle: eingeklappte Sidebar (Zustand auf via JS). */ html[data-sidebar="collapsed"] .app { --sidebar-w: 0px; } html[data-sidebar="collapsed"] .sidebar { display: none; } /* Sprint-7-Hotfix: Footer ueberspannt beide Spalten (full-width). Ohne grid-area-Eintrag landet er per Auto-Placement in Spalte 1 — sah aus wie "klebt unter der Sidebar". */ .app-footer { grid-area: footer; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2, 0.5rem) var(--space-4, 1.5rem); padding: var(--space-3, 1rem) var(--space-4, 1.5rem); background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--font-size-sm, 0.875rem); } .app-footer-links { display: flex; gap: var(--space-3, 1rem); flex-wrap: wrap; } .app-footer-links a { color: var(--ink-2); text-decoration: none; transition: color 0.15s var(--ease, ease); } .app-footer-links a:hover, .app-footer-links a:focus-visible { color: var(--ink); text-decoration: underline; } .app-footer-version { margin: 0; color: var(--ink-3); font-size: 0.8125rem; } /* ---------- Top-Bar ---------- */ .topbar { grid-area: topbar; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .brand-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--ink); display: grid; place-items: center; color: var(--bg); font-family: var(--f-mono); font-size: 11px; font-weight: 600; } .brand-fam { font-size: 11px; color: var(--ink-3); border-left: 1px solid var(--line-strong); padding-left: 10px; margin-left: 4px; font-family: var(--f-mono); letter-spacing: 0.02em; } .top-sep { flex: 1; } .top-user { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); font-family: var(--f-mono); } .top-user-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); } .top-user-action { color: var(--ink-2); text-decoration: none; border-bottom: 1px dotted var(--line-strong); padding-bottom: 1px; transition: color .15s var(--ease); } .top-user-action:hover { color: var(--ink); } /* ---------- UI-Restyle — Sidebar-Einklapp-Toggle (TopBar, links) ---------- */ .sidebar-toggle { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; } .sidebar-toggle:hover { background: var(--bg-sunken); color: var(--ink); } /* ---------- Sidebar ---------- */ .sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 2px; padding: 14px 8px; border-right: 1px solid var(--line); background: var(--surface-2); overflow-y: auto; } .sidebar-link { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: var(--r-2); color: var(--ink-2); font-size: 13px; text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease); } .sidebar-link:hover { background: var(--bg-sunken); color: var(--ink); } .sidebar-link.active { background: var(--ink); color: var(--bg); } /* ---------- Main-Content ---------- */ .main { grid-area: main; /* UI-Restyle FIX: min-width:0 allein constraint die 1fr-Grid-Spalte in der Praxis NICHT zuverlaessig (die max-content-breite Spalten-Flexrow sprengte sie weiter, .app overflow:hidden schnitt ab → keine horizontale Scrollbar). Daher zusaetzlich eine HARTE Obergrenze: Viewport minus Sidebar-Breite. Damit ist .main garantiert viewport-breit, .board-scroll erbt diese Breite und scrollt seinen max-content-Inhalt horizontal. */ min-width: 0; max-width: calc(100vw - var(--sidebar-w)); overflow-y: auto; background: var(--bg); } /* ---------- UI-Restyle — Theme-/Dichte-Umschalter (TopBar) ---------- */ .theme-switcher { position: relative; } .theme-switcher-trigger { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); color: var(--ink-2); cursor: pointer; list-style: none; user-select: none; line-height: 1; } .theme-switcher-trigger::-webkit-details-marker { display: none; } .theme-switcher-trigger::marker { content: ""; } .theme-switcher-trigger:hover { background: var(--bg-sunken); color: var(--ink); } .theme-switcher[open] .theme-switcher-trigger { border-color: var(--line-strong); color: var(--ink); } .theme-switcher-icon { font-size: 15px; } .theme-switcher-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 200px; padding: 10px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: 0 8px 24px oklch(0% 0 0 / 0.12); } .theme-switcher-group { display: flex; flex-direction: column; gap: 6px; } .theme-switcher-label { font-family: var(--f-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); } .theme-switcher-options { display: flex; gap: 4px; } .theme-opt { flex: 1; height: 28px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 12px; cursor: pointer; white-space: nowrap; transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); } .theme-opt:hover { border-color: var(--ink-3); color: var(--ink); } .theme-opt.active { background: var(--ink); color: var(--bg); border-color: var(--ink); } /* ============================================================ * Story 0057 — Sprint-6 Polish (LoadingSpinner + Banner-Variants + Headings) * ============================================================ */ /* Heading-Hierarchie: h1=lg, h2-h4=base mit unterschiedlichen Weights. */ h1 { font-size: var(--font-size-lg); font-weight: 700; } h2 { font-size: var(--font-size-base); font-weight: 600; } h3 { font-size: var(--font-size-base); font-weight: 600; } h4 { font-size: var(--font-size-base); font-weight: 500; } /* ---------- LoadingSpinner-Component ---------- */ .spinner { display: inline-block; width: var(--font-size-base); height: var(--font-size-base); border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: boardly-spin 1s linear infinite; vertical-align: middle; } @keyframes boardly-spin { to { transform: rotate(360deg); } } /* ---------- Banner-Component-Variants (Story 0057, ADR-0026) ---------- */ .banner-info { background: var(--accent-soft); border-left-color: var(--accent); } .banner-success { background: var(--state-success-soft); border-left-color: var(--state-success); } .banner-warn { background: var(--state-warn-soft); border-left-color: var(--state-warn); } .banner-error { background: var(--state-error-soft); border-left-color: var(--state-error); } .banner > .banner-title { margin: 0 0 var(--space-1); font-size: var(--font-size-base); font-weight: 600; } .banner > .banner-trace { margin: var(--space-1) 0 0; color: var(--ink-3); font-size: var(--font-size-sm); font-family: var(--f-mono); } /* ---------- Story 0067 (Sprint 7) — Beta-Disclaimer-Banner ---------- Closed-Alpha Header-Hinweis oberhalb der Topbar. Volle Breite, dezent warnender Token-Style; Link auf /legal/beta-disclaimer. */ .beta-disclaimer-banner { background: var(--state-warn-soft); color: var(--ink); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--state-warn); font-size: var(--font-size-sm); text-align: center; } .beta-disclaimer-banner strong { margin-right: var(--space-1); } .beta-disclaimer-banner a { color: inherit; text-decoration: underline; margin-left: var(--space-1); }