/* Hilfe-Cluster (Port c-hilfe) — Styles der sechs Bestandskomponenten * AppHelpOverlay.vue, AboutOverlay.vue, GuidedTourOverlay.vue, * OpenSourceLibrariesOverlay.vue, IntegrationBlueprintOverlay.vue und * AppWelcomeHook.vue. Uebernommen mit * `scripts/scope-legacy-styles.mjs

`; Werte * unveraendert, Selektoren an die jeweilige Wurzelklasse gebunden (im * Bestand leistet das Vues `scoped`). * * Drei bewusste Eingriffe — jeweils begruendet: * * 1. Der Bestand definiert in AppHelpOverlay/AboutOverlay einen Alias-Block * (`--surface: var(--core-color-panel-surface, …)` u. a.), weil sein * Design-System nur `--core-color-*` kennt. Im Port ist es genau * umgekehrt: `legacy-aliases.css` definiert `--core-color-panel-surface: * var(--surface)`. Der Bestands-Block waere hier eine ZIRKULAERE * Definition (--surface aus --core-color-panel-surface aus --surface) und * faellt komplett aus. Deshalb ist er ersetzt durch die Bruecke unten: * nur die im Port fehlenden Namen (--surface-hover, --accent) werden * gesetzt, alles andere loest direkt gegen die Port-Tokens auf. * 2. Harte Farbwerte des Bestands (--primary: #2f7dff, --accent: #38d9ff, * --danger: #ff6b6b, --warning: #f59f00 sowie die dunklen Rueckfaelle im * Rundgang und im Welcome-Hook) sind im Hell-Theme falsch und auf Tokens * abgebildet (--primary, --core-color-accent-blue, --danger, --warning, * --bg, --surface, --surface-elevated, --text). * 3. Vues `:deep(...)` und die `*-fade-*`/`hook-fade-*`-Transitionsklassen * entfallen: Light DOM braucht kein :deep, und der Port hat kein * . * * AboutOverlay traegt im Bestand die Klassen `help-overlay * help-overlay--anchored about-overlay`; sein Style-Block wiederholt die * Rahmen-Regeln von AppHelpOverlay wortgleich. Uebernommen ist deshalb nur * der about-spezifische Teil — die Rahmen-Regeln greifen ueber * `.help-overlay` bereits. */ /* --- Token-Bruecke fuer den Hilfe-Rahmen --------------------------------- * `--surface-hover` und `--accent` kennt der Port nicht; alle uebrigen im * Bestands-Block gesetzten Namen (--surface, --surface-elevated, * --surface-overlay, --border, --text, --text-muted, --text-soft, --primary, * --primary-soft, --space-1..6, --radius-md, --radius-control, * --radius-overlay, --shadow-card, --shadow-overlay) existieren global. */ .help-overlay, .about-overlay { --surface-hover: var(--control-bg-hover); --accent: var(--core-color-accent-blue); } /* --- Halter der header-gebundenen Overlays (Bestand: App.vue) ------------ * Im Bestand liegt `.help-right-overlay` absolut im `.viewer`-Container; der * Port haengt die Overlays an , deshalb `fixed` unterhalb der 48px * hohen Kopfleiste — genau wie `.account-right-overlay` des Konto-Overlays. */ .help-right-overlay { position: fixed; top: 48px; right: 0; bottom: 0; z-index: 1390; overflow: auto; } /* --- Wirtselemente ------------------------------------------------------- * Custom Elements sind ohne Regel `display: inline`. Die Bestandsklassen * setzen Groesse und Lage auf dem INNEREN Element voraus (im Bestand war das * die Komponentenwurzel selbst), deshalb reichen die Wirte sie durch. */ cw-app-help-overlay, cw-about-overlay { display: block; height: 100%; } cw-open-source-libraries-overlay, cw-integration-blueprint-overlay { display: block; height: 100%; } cw-guided-tour-overlay, cw-app-welcome-hook { display: contents; } /* ===== AppHelpOverlay.vue ================================================ */ .help-overlay { position: absolute; inset: 0; z-index: 1400; background: var(--surface-overlay); display: grid; place-items: center; padding: var(--space-4); box-sizing: border-box; color: var(--text); } .help-overlay--anchored { position: static; inset: auto; width: min(860px, calc(100vw - 24px)); height: 100%; background: transparent; display: block; padding: 0; } .help-overlay .help-panel { width: min(860px, 96vw); max-height: min(82vh, 900px); overflow: auto; border-radius: var(--radius-overlay); border: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-overlay); } .help-overlay--anchored .help-panel { width: min(860px, calc(100vw - 24px)); max-height: 100%; height: 100%; border-radius: 0; border-top: 0; border-right: 0; box-shadow: var(--shadow-card); } .help-overlay .help-header { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); background: var(--surface); border-bottom: 1px solid var(--border); } .help-overlay .help-header h2 { margin: 0; font-size: 1.35rem; } .help-overlay .help-eyebrow { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-1); } .help-overlay .help-body { padding: var(--space-2) var(--space-4) var(--space-4); display: grid; gap: var(--space-3); } .help-overlay .help-header-layout { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-3); } .help-overlay .help-topic-list { align-content: start; } .help-overlay .help-topic-btn { width: 100%; border: 1px solid transparent; border-radius: var(--radius-md); background: var(--surface); color: var(--text); padding: var(--space-2) var(--space-3); display: flex; align-items: center; gap: var(--space-2); cursor: pointer; text-align: left; font: inherit; } .help-overlay .help-topic-btn .material-icons { font-size: 18px; } .help-overlay .help-topic-btn:hover { border-color: var(--primary); } .help-overlay .help-topic-btn.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .help-overlay .help-topic-content { min-width: 0; } .help-overlay .help-topic-summary { margin: 0 0 var(--space-3); color: var(--text-muted); line-height: 1.4; } .help-overlay .help-about-row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); } .help-overlay .help-about-row:last-child { border-bottom: 0; } .help-overlay .help-about-row span { color: var(--text-muted); } .help-overlay .help-about-row strong { font-weight: 600; overflow-wrap: anywhere; } .help-overlay .help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .help-overlay .help-panel ul { margin: 0; padding-left: var(--space-4); } .help-overlay .help-panel li { margin: 0 0 var(--space-2); line-height: 1.35; } .help-overlay .help-panel h3, .help-overlay .help-panel h4 { font-size: 1rem; margin: 0; color: var(--text); } @media (max-width: 760px) { .help-overlay .help-header-layout { grid-template-columns: 1fr; } .help-overlay .help-grid { grid-template-columns: 1fr; } .help-overlay { padding: var(--space-3); } .help-overlay .help-panel { width: 100%; max-height: 88vh; } } /* Online-Help live search bar + footer link to the full MKDocs site. */ .help-overlay .help-search-bar { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 0 var(--space-3); } .help-overlay .help-search-bar__label { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-elevated); } .help-overlay .help-search-bar__label .material-icons { font-size: 1rem; color: var(--text-soft); } .help-overlay .help-search-bar__label input { flex: 1; min-width: 0; border: none; background: transparent; font: inherit; color: inherit; outline: none; } /* SPEC-0646 — Klasse A: `outline: none` ohne Ersatz. Die beiden vorhandenen Fokusregeln dieses Blattes (`… __results a:focus`, `… help-footer-link a:focus`) betreffen Ergebnis-Links, nicht das Suchfeld. Das Feld ist rahmenlos im umrandeten Etikett — der Ring gehoert an das Etikett. */ .help-overlay .help-search-bar__label:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .help-overlay .help-search-bar__error { font-size: 0.78rem; color: var(--text-soft); } .help-overlay .help-search-bar__results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-elevated); } .help-overlay .help-search-bar__results li + li { border-top: 1px solid var(--border); } .help-overlay .help-search-bar__results a { display: flex; flex-direction: column; gap: 2px; padding: 8px var(--space-3); text-decoration: none; color: inherit; } .help-overlay .help-search-bar__results a:hover, .help-overlay .help-search-bar__results a:focus { background: var(--surface-hover); } .help-overlay .help-search-bar__results strong { font-weight: 600; } .help-overlay .help-search-bar__results span { font-size: 0.82rem; color: var(--text-soft); } .help-overlay .help-footer-link { margin-top: var(--space-3); text-align: right; } .help-overlay .help-footer-link a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-3); border-radius: var(--radius-control); border: 1px solid var(--accent, var(--border)); color: var(--accent, var(--text)); text-decoration: none; font-size: 0.86rem; } .help-overlay .help-footer-link a:hover, .help-overlay .help-footer-link a:focus { background: var(--surface-hover); } .help-overlay .help-footer-link .material-icons { font-size: 1rem; } /* ===== AboutOverlay.vue (nur der about-spezifische Teil) ================= */ .about-overlay .about-subtitle { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 0.88rem; line-height: 1.4; } .about-overlay .about-close-btn, .about-overlay .about-refresh-btn { border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .about-overlay .about-close-btn { width: 36px; height: 36px; } .about-overlay .about-close-btn:hover, .about-overlay .about-refresh-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } .about-overlay .about-refresh-btn { width: 34px; height: 34px; margin-left: auto; } .about-overlay .about-refresh-btn:disabled { cursor: default; opacity: 0.65; } .about-overlay .about-refresh-btn--mobile { display: none; } .about-overlay .about-refresh-btn .spinning { animation: about-spin 0.9s linear infinite; } @keyframes about-spin { to { transform: rotate(360deg); } } .about-overlay .about-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-elevated); box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) inset; } .about-overlay .about-card--hero { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 18%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)), var(--surface-elevated); } .about-overlay .about-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); } .about-overlay .about-card-head--compact { display: flex; align-items: center; padding-bottom: var(--space-3); } .about-overlay .about-card-head > .material-icons, .about-overlay .about-card-head--compact > .material-icons { color: var(--accent); font-size: 22px; } .about-overlay .about-card-head h3 { margin: 0; font-size: 1rem; color: var(--text); } .about-overlay .about-card-head p { margin: var(--space-1) 0 0; color: var(--text-soft); font-size: 0.86rem; line-height: 1.4; } .about-overlay .about-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .about-overlay .about-table th, .about-overlay .about-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; } .about-overlay .about-table th { font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .about-overlay .about-table tbody tr:last-child td { border-bottom: 0; } .about-overlay .about-table tbody tr:hover td { background: var(--surface-hover); } .about-overlay .about-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--text); padding: 2px 5px; background: var(--surface-elevated); border-radius: 4px; word-break: break-all; } .about-overlay .about-component-name { font-weight: 600; color: var(--text); } .about-overlay .about-component-cell { display: grid; gap: 3px; min-width: 240px; } .about-overlay .about-component-line { display: flex; align-items: center; gap: var(--space-2); } .about-overlay .about-component-meta { color: var(--text-muted); font-size: 0.74rem; line-height: 1.25; } .about-overlay .about-image-ref { display: block; width: fit-content; max-width: min(520px, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-soft); } .about-overlay .about-offline-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 0.7rem; background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); text-transform: uppercase; letter-spacing: 0.04em; } .about-overlay .about-internal-chip { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 0.66rem; background: color-mix(in srgb, var(--warning) 18%, transparent); color: var(--warning); text-transform: uppercase; letter-spacing: 0.04em; } .about-overlay .about-row-offline td { opacity: 0.62; } .about-overlay .about-track-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; text-transform: lowercase; letter-spacing: 0.02em; background: var(--primary-soft); color: var(--primary); } .about-overlay .about-track-chip[data-track="experimental"] { background: color-mix(in srgb, var(--warning) 22%, transparent); color: var(--warning); } .about-overlay .about-track-chip[data-track="baseline"] { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text-muted); } .about-overlay .about-track-chip[data-track="deprecated"] { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } .about-overlay .about-cell-empty { opacity: 0.45; } .about-overlay .about-status-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; } .about-overlay .about-status-chip--online { color: var(--success); background: var(--success-soft); } .about-overlay .about-status-chip--offline { color: var(--danger); background: color-mix(in srgb, var(--danger) 18%, transparent); } .about-overlay .about-status-chip--inventory { color: var(--text-soft); background: color-mix(in srgb, var(--text-soft) 12%, transparent); } .about-overlay .about-empty, .about-overlay .about-error { display: flex; align-items: center; gap: 8px; padding: 14px; font-size: 0.88rem; color: var(--text-soft); } .about-overlay .about-error { color: var(--danger); } .about-overlay .about-generated-line { margin: var(--space-3) 2px 0; font-size: 0.72rem; color: var(--text-muted); } .about-overlay .about-copyright { margin: 0 0 6px; font-size: 0.85rem; color: var(--text); } .about-overlay .about-license-note { margin: 0; font-size: 0.78rem; color: var(--text-soft); line-height: 1.4; } @media (max-width: 760px) { .about-overlay.help-overlay--anchored, .about-overlay.help-overlay--anchored .help-panel { width: min(100vw, 100%); } .about-overlay .about-refresh-btn { display: none; } .about-overlay .about-refresh-btn--mobile { display: inline-flex; } .about-overlay .about-card-head { grid-template-columns: auto 1fr; } .about-overlay .about-table { display: block; overflow-x: auto; white-space: nowrap; } } /* ===== GuidedTourOverlay.vue ============================================ */ .guided-tour-layer { /* Abweichung vom Bestand (bewusst): der Bestand haelt hier harte * Rueckfallwerte (#07111f, #56d6ee, #101b2e, #050b14, #172640, #132238, * #edf5ff) fuer Tokens, die es im Port gibt. Im Hell-Theme waeren das * dunkle Fremdkoerper. Deshalb ausschliesslich Port-Tokens; --app-bg / * --settings-* existieren hier nicht und sind auf --bg / --surface / * --surface-elevated abgebildet. Struktur und Mischverhaeltnisse bleiben. */ --guided-tour-app-bg: var(--bg); --guided-tour-accent: var(--primary); --guided-tour-base: var(--surface); --guided-tour-surface: color-mix(in srgb, var(--guided-tour-base) 88%, var(--bg) 12%); --guided-tour-raised: color-mix(in srgb, var(--surface-elevated) 88%, var(--guided-tour-accent) 12%); --guided-tour-control: color-mix(in srgb, var(--surface) 90%, var(--guided-tour-accent) 10%); --guided-tour-text: var(--text); --guided-tour-muted: var(--text-muted); --guided-tour-border: var(--border); --guided-tour-strong-border: color-mix(in srgb, var(--guided-tour-accent) 40%, var(--guided-tour-border) 60%); position: fixed; inset: 0; z-index: 2500; font-family: var(--font-ui, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); pointer-events: none; } .guided-tour-layer .guided-tour-scrim { position: absolute; inset: 0; z-index: 0; background: color-mix(in srgb, var(--guided-tour-app-bg) 18%, transparent); backdrop-filter: saturate(0.94); pointer-events: auto; } .guided-tour-layer .guided-tour-dialog { position: absolute; z-index: 2; right: clamp(18px, 3vw, 42px); bottom: clamp(18px, 4vh, 42px); width: min(560px, calc(100vw - 32px)); max-height: min(78vh, 720px); display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; color: var(--guided-tour-text); background: var(--guided-tour-surface); border: 1px solid var(--guided-tour-strong-border); border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--guided-tour-accent) 24%, transparent), 0 0 0 5px color-mix(in srgb, var(--guided-tour-accent) 10%, transparent), 0 18px 58px color-mix(in srgb, var(--bg) 28%, transparent); pointer-events: auto; } .guided-tour-layer .guided-tour-header { display: grid; grid-template-columns: minmax(0, 1fr) 38px; gap: 12px; align-items: start; padding: 18px 18px 12px; background: color-mix(in srgb, var(--guided-tour-surface) 84%, var(--guided-tour-accent) 16%); border-bottom: 1px solid color-mix(in srgb, var(--guided-tour-strong-border) 70%, transparent); } .guided-tour-layer .guided-tour-eyebrow { margin: 0 0 6px; color: var(--guided-tour-accent); font-size: 0.74rem; font-weight: 800; letter-spacing: 0; text-transform: uppercase; } .guided-tour-layer .guided-tour-header h2 { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.34rem); line-height: 1.18; letter-spacing: 0; } .guided-tour-layer .guided-tour-icon-btn { width: 36px; height: 36px; border: 1px solid var(--guided-tour-border); border-radius: 8px; color: var(--guided-tour-text); background: var(--guided-tour-control); display: grid; place-items: center; cursor: pointer; } .guided-tour-layer .guided-tour-progress { height: 3px; background: color-mix(in srgb, var(--guided-tour-text) 10%, transparent); } .guided-tour-layer .guided-tour-progress span { display: block; height: 100%; background: var(--guided-tour-accent); transition: width 180ms ease; } .guided-tour-layer .guided-tour-body { min-height: 0; overflow: auto; padding: 16px 18px; display: grid; gap: 14px; } .guided-tour-layer .guided-tour-main-copy { margin: 0; color: var(--guided-tour-text); font-size: 0.98rem; line-height: 1.52; } .guided-tour-layer .guided-tour-help, .guided-tour-layer .guided-tour-notes { border: 1px solid var(--guided-tour-border); background: var(--guided-tour-raised); border-radius: 8px; padding: 12px; } .guided-tour-layer .guided-tour-help-title { display: flex; gap: 9px; align-items: flex-start; } .guided-tour-layer .guided-tour-notes { display: grid; grid-template-columns: 20px minmax(0, auto) minmax(0, 1fr); gap: 8px; align-items: start; } .guided-tour-layer .guided-tour-help-title { color: var(--guided-tour-muted); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .guided-tour-layer .guided-tour-notes strong { color: var(--guided-tour-accent); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; } .guided-tour-layer .guided-tour-help p, .guided-tour-layer .guided-tour-notes span:last-child { margin: 8px 0 0; color: color-mix(in srgb, var(--guided-tour-text) 76%, transparent); font-size: 0.88rem; line-height: 1.45; } .guided-tour-layer .guided-tour-help a { display: inline-flex; margin-top: 10px; color: var(--guided-tour-accent); font-size: 0.86rem; font-weight: 700; text-decoration: none; } .guided-tour-layer .guided-tour-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px 18px; border-top: 1px solid var(--guided-tour-border); background: color-mix(in srgb, var(--guided-tour-surface) 90%, var(--guided-tour-raised) 10%); } .guided-tour-layer .guided-tour-step-count { color: var(--guided-tour-muted); font-size: 0.84rem; } .guided-tour-layer .guided-tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .guided-tour-layer .guided-tour-primary, .guided-tour-layer .guided-tour-secondary { min-height: 34px; border-radius: 8px; border: 1px solid var(--guided-tour-border); padding: 0 12px; font-weight: 800; cursor: pointer; } .guided-tour-layer .guided-tour-primary { color: var(--guided-tour-app-bg); background: var(--guided-tour-accent); border-color: var(--guided-tour-accent); } .guided-tour-layer .guided-tour-secondary { color: var(--guided-tour-text); background: var(--guided-tour-control); } .guided-tour-layer .guided-tour-secondary:disabled { opacity: 0.48; cursor: not-allowed; } .guided-tour-layer .guided-tour-highlight { position: fixed; z-index: 1; border: 2px solid var(--guided-tour-accent); border-radius: 10px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--guided-tour-surface) 76%, transparent), 0 0 22px color-mix(in srgb, var(--guided-tour-accent) 44%, transparent); pointer-events: none; transition: left 160ms ease, top 160ms ease, width 160ms ease, height 160ms ease; } @media (max-width: 720px) { .guided-tour-layer .guided-tour-dialog { right: 12px; bottom: 12px; width: calc(100vw - 24px); max-height: 82vh; } .guided-tour-layer .guided-tour-footer { grid-template-columns: 1fr; } .guided-tour-layer .guided-tour-actions { justify-content: stretch; } .guided-tour-layer .guided-tour-actions > button { flex: 1 1 100%; } } /* ===== OpenSourceLibrariesOverlay.vue =================================== */ /* Welle 1 migration — see docs/architecture/ui-theming.md */ .oss-overlay { display: grid; gap: var(--space-4); width: min(1200px, calc(100vw - 120px)); max-height: calc(100dvh - 60px); overflow: auto; padding: var(--space-5); border-radius: var(--radius-overlay); background: var(--surface); color: var(--text); border: 1px solid var(--border); } .oss-overlay .oss-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .oss-overlay .oss-header h3 { margin: 0; } .oss-overlay .oss-header p { margin: var(--space-1) 0 0; color: var(--text-muted); } .oss-overlay .oss-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); } .oss-overlay .stat-card { border-radius: var(--radius-card); padding: var(--space-3); background: var(--surface-elevated); border: 1px solid var(--border); display: grid; gap: var(--space-1); } .oss-overlay .stat-card--warn { background: var(--warning-soft); } .oss-overlay .stat-card--risk { background: var(--danger-soft); } .oss-overlay .stat-label { font-size: 0.82rem; color: var(--text-muted); } .oss-overlay .oss-main { display: grid; grid-template-columns: minmax(320px, 38%) minmax(560px, 1fr); gap: var(--space-3); min-height: 280px; } .oss-overlay .oss-requirements, .oss-overlay .oss-packages { border-radius: var(--radius-card); background: var(--surface-elevated); border: 1px solid var(--border); padding: var(--space-3); } .oss-overlay .oss-requirements h4, .oss-overlay .oss-packages h4 { margin: 0 0 var(--space-3); } .oss-overlay .req-row { border-top: 1px solid var(--border); padding: var(--space-3) 0; } .oss-overlay .req-row:first-of-type { border-top: none; } .oss-overlay .req-head { display: flex; justify-content: space-between; gap: var(--space-2); } .oss-overlay .req-details { margin-top: var(--space-1); color: var(--text-muted); font-size: 0.9rem; } .oss-overlay .table-wrap { overflow: auto; max-height: 520px; } .oss-overlay table { width: 100%; border-collapse: collapse; } .oss-overlay th, .oss-overlay td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); font-size: 0.88rem; } .oss-overlay .status-pill { display: inline-block; border-radius: var(--radius-pill); padding: 2px 9px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border-strong); } .oss-overlay .status-implemented, .oss-overlay .status-allowed { background: var(--success-soft); color: var(--success); border-color: var(--success); } .oss-overlay .status-warning, .oss-overlay .status-review-required { background: var(--warning-soft); color: var(--warning); border-color: var(--warning); } .oss-overlay .status-missing, .oss-overlay .status-denied { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .oss-overlay .oss-footer { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: 0.86rem; color: var(--text-muted); } @media (max-width: 1200px) { .oss-overlay .oss-main { grid-template-columns: 1fr; } .oss-overlay .oss-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===== IntegrationBlueprintOverlay.vue ================================== */ /* Welle 1 migration — see docs/architecture/ui-theming.md */ .integration-blueprint { height: 100%; width: min(860px, calc(100vw - 24px)); min-width: min(860px, calc(100vw - 24px)); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-pad-card) var(--space-pad-card) var(--space-4); box-sizing: border-box; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); } .integration-blueprint .blueprint-header h3 { margin: 0; font-size: 1.26rem; font-weight: 700; } .integration-blueprint .blueprint-header p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: 0.94rem; } .integration-blueprint .blueprint-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); overflow: auto; padding-right: 2px; } .integration-blueprint .blueprint-card { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-3); } .integration-blueprint .blueprint-card h4 { margin: 0 0 var(--space-1); font-size: 1rem; } .integration-blueprint .blueprint-card p { margin: 0 0 var(--space-2); font-size: 0.9rem; line-height: 1.35; color: var(--text); } .integration-blueprint .blueprint-card small { display: block; color: var(--text-muted); line-height: 1.3; } @media (max-width: 1100px) { .integration-blueprint { width: min(760px, calc(100vw - 24px)); min-width: min(760px, calc(100vw - 24px)); } } @media (max-width: 980px) { .integration-blueprint { width: calc(100vw - 24px); min-width: calc(100vw - 24px); } .integration-blueprint .blueprint-grid { grid-template-columns: 1fr; } } /* ===== AppWelcomeHook.vue =============================================== */ .welcome-hook { position: fixed; inset: 48px 0 0; z-index: 40; display: grid; place-items: center; width: auto; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at center, color-mix(in srgb, var(--core-color-accent-blue) 22%, transparent), transparent 34%), color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: blur(3px); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } .welcome-hook .welcome-hook-panel { display: block; width: min(820px, calc(100vw - 48px)); border: 1px solid color-mix(in srgb, var(--core-color-accent-blue) 34%, transparent); border-radius: 10px; padding: 34px 38px; background: linear-gradient(135deg, color-mix(in srgb, var(--surface-elevated) 84%, transparent), color-mix(in srgb, var(--surface) 72%, transparent)), var(--surface); box-shadow: var(--shadow-overlay), 0 0 70px color-mix(in srgb, var(--core-color-accent-blue) 32%, transparent); text-align: center; } .welcome-hook .welcome-hook-kicker { display: block; margin-bottom: 10px; color: var(--warning); font-size: 12px; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; } .welcome-hook strong { display: block; color: var(--text); font-size: clamp(32px, 5vw, 64px); line-height: 1; font-weight: 800; text-shadow: 0 0 26px color-mix(in srgb, var(--core-color-accent-blue) 42%, transparent), 0 0 54px color-mix(in srgb, var(--warning) 18%, transparent); } @media (max-width: 640px) { .welcome-hook .welcome-hook-panel { padding: 26px 18px; } } /* --- Einblendungen, die im Port folgenlos waren ----------------------------- * * BEFUND (2026-08-04): der Port hat KEIN `` — der Dateikopf sagt * das selbst. Damit blieben fuenf Uebergangsnamen des Bestands wirkungslos, * und die portierten `*-fade-*`-Regeln lagen tot herum: sie warten auf * Klassen, die niemand vergibt. * * Ersetzt durch eine Einblendung am Element selbst. Das braucht kein * JavaScript und wirkt beim Erscheinen wie im Bestand. Die AUSblendung fehlt * weiterhin: dafuer muesste der Renderer den Knoten haengen lassen, bis die * Bewegung durch ist — das waere ein Eingriff in den Einhaengepfad und ist * hier bewusst nicht mitgemacht. */ .welcome-hook-panel { animation: vcHookFadeIn 500ms ease; } @keyframes vcHookFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } /* Hilfe- und Ueber-Dialog: 180 ms reine Deckkraft (Bestand AppHelpOverlay.vue:890). */ cw-app-help-overlay .vc-card, cw-about-overlay .vc-card { animation: vcHelpFadeIn 180ms ease; } @keyframes vcHelpFadeIn { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .welcome-hook-panel, cw-app-help-overlay .vc-card, cw-about-overlay .vc-card { animation: none; } } /* --- Globale Fehlerkarte --------------------------------------------------- * * Port von App.vue:1925-1976. Werte unveraendert; die Karte liegt oben rechts * unter der Kopfleiste und ueber allem anderen (z-index 3100). */ .global-error-overlay { position: fixed; top: 76px; right: 18px; z-index: 3100; max-width: min(560px, calc(100vw - 28px)); } .global-error-card { border-radius: 12px; border: 1px solid var(--danger); background: var(--danger-soft); color: var(--danger); box-shadow: var(--shadow-overlay); padding: 12px 14px; } .global-error-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; } .global-error-message { font-size: 0.86rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; } .global-error-request-id { margin-top: 8px; font-size: 0.8rem; color: var(--danger); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .global-error-actions { margin-top: 10px; display: flex; justify-content: flex-end; } .global-error-btn { border-radius: 8px; border: 1px solid var(--border); background: var(--surface-elevated); color: var(--danger); font-size: 0.82rem; font-weight: 600; padding: 6px 10px; cursor: pointer; } /* ====== SPEC-0646 — Windows-Kontrastmodus =============================== * * Edge/Chromium zeichnen unter `forced-colors: active` KEINEN `box-shadow` * und zwingen jede Rahmen- und Flaechenfarbe auf eine Systemfarbe. Damit * faellt jeder Fokusring dieses Blattes dort ersatzlos aus — der ring-lose * Rahmenwechsel ebenso, weil dann jeder Rahmen dieselbe Farbe traegt. * `outline` WIRD gezeichnet und ist das einzige Mittel, das dort traegt. * `Highlight` ist die Systemfarbe fuer Auswahl und hebt sich per Definition * vom `Canvas` des Nutzers ab; `outline-offset` haelt den Ring von der * eigenen Kante frei, die dort ebenfalls `CanvasText` traegt. * KEIN `forced-color-adjust: none` — das naehme dem Nutzer genau die * Farbwahl, um die es hier geht (SPEC-0646, Entscheidung E3). * ====================================================================== */ @media (forced-colors: active) { .help-overlay .help-search-bar__label:focus-within, .help-overlay .help-search-bar__results a:focus-visible, .help-overlay .help-footer-link a:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } }