/* ═══════════════════════════════════════════════════════════════════ Jarvis – Gemeinsame Theme-Variablen (Single Source of Truth) ─────────────────────────────────────────────────────────────────── Wird VOR style.css / chat.css auf ALLEN Seiten eingebunden. Dark = :root (Default), Hell = body.light. Der Branding-Skill (branding.js) ueberschreibt diese Variablen zur Laufzeit inline auf → wirkt dadurch einheitlich auf allen Seiten. chat.css aliast seine eigenen Namen (--purple/--bg/--surface/…) auf diese Variablen, damit Branding + Dark/Light ueberall identisch greifen. ═══════════════════════════════════════════════════════════════════ */ :root { /* Native Controls (Select-Popups, Scrollbars, Date-Picker) folgen dem Theme. */ color-scheme: dark; /* Tinten-/Schatten-Basis (Dark = Weiss/Schwarz); im Light-Theme gekippt. Alle rgba(var(--fg-rgb), …)-Raender/-Overlays folgen automatisch. */ --fg-rgb: 255, 255, 255; --shadow-rgb: 0, 0, 0; --bg-primary: #0a0e17; --bg-secondary: #111827; --bg-glass: rgba(15, 23, 42, 0.75); --bg-glass-heavy: rgba(15, 23, 42, 0.9); --border: rgba(var(--fg-rgb), 0.08); --border-hover: rgba(var(--fg-rgb), 0.15); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; /* Akzent = Markenfarbe (Default Lila, von Branding ueberschrieben) */ --accent: #9B59B6; --accent-hover: #BB86FC; --accent-dark: #6A0DAD; --accent-glow: rgba(155, 89, 182, 0.4); --accent-light: rgba(155, 89, 182, 0.1); /* RGB-Tripel des Akzents fuer Toenungen rgba(var(--accent-rgb), …). Wird von branding.js aus der Markenfarbe mitgesetzt. */ --accent-rgb: 155, 89, 182; /* Akzent-Verlauf fuer Primaer-Buttons (.btn-primary). Akzentbasiert, damit Branding automatisch greift. */ --gradient: linear-gradient(135deg, var(--accent), var(--accent-dark)); --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* RGB-Tripel der Statusfarben fuer Toenungen rgba(var(--…-rgb), α). */ --success-rgb: 16, 185, 129; --warning-rgb: 245, 158, 11; --danger-rgb: 239, 68, 68; --info-rgb: 59, 130, 246; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --shadow-sm: 0 2px 8px rgba(var(--shadow-rgb), 0.3); --shadow-md: 0 4px 16px rgba(var(--shadow-rgb), 0.4); --shadow-lg: 0 8px 32px rgba(var(--shadow-rgb), 0.5); --shadow-glow: 0 0 30px var(--accent-glow); --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); } /* ─── Sprachbloecke (lange Fliesstext-Inhalte, z.B. API-Doku) ───────── i18n.js applyLang() setzt html[data-lang]. Default (kein Attribut) = DE. */ html[data-lang="en"] .i18n-de { display: none !important; } html:not([data-lang="en"]) .i18n-en { display: none !important; } /* ─── Der Akzent-Verlauf muss AUF BODY neu berechnet werden ────────────── `--gradient` steht oben in `:root` (= ) und verweist auf `var(--accent)`. Eine Custom Property wird aber auf dem Element BERECHNET, auf dem sie deklariert ist – der fertige Verlauf wird danach nur noch weitervererbt. branding.js setzt die Markenfarbe per Inline-Style auf , also EINE Ebene darunter: der Verlauf blieb dadurch Jarvis-Violett, obwohl der Kommentar an der Deklaration ausdruecklich "damit Branding automatisch greift" verspricht. Aufgefallen am Outlook-Aufgabenfenster (gemeldet 2026-08-17): Logo und Markenname standen rot da, der Anmelden-Knopf daneben violett – betroffen war aber JEDE Seite mit `var(--gradient)` (13 Stellen). Diese Zeile deklariert dieselbe Formel noch einmal auf ; dort ist die Markenfarbe gesetzt und wird eingerechnet. OHNE Branding kommt exakt derselbe Verlauf heraus wie vorher (`--accent` ist dann der geerbte Vorgabewert). */ body { --gradient: linear-gradient(135deg, var(--accent), var(--accent-dark)); } /* ─── Hell-Theme: kippt nur die Basis-Variablen, alles andere folgt ─── */ body.light { color-scheme: light; --fg-rgb: 17, 24, 39; --shadow-rgb: 15, 23, 42; --bg-primary: #f4f5f7; --bg-secondary: #ffffff; --bg-glass: rgba(255, 255, 255, 0.78); --bg-glass-heavy: rgba(255, 255, 255, 0.92); --border: rgba(var(--fg-rgb), 0.12); --border-hover: rgba(var(--fg-rgb), 0.22); --text-primary: #1a2233; --text-secondary: #4a5568; --text-muted: #7a8599; } /* ─── Native Dropdowns (option/optgroup) ──────────────────────────────────── Steht ABSICHTLICH hier und nicht in style.css: style.css wird nur von settings.html und wissen.html geladen. Auf portal/chat/userchat/support gab es die Regel deshalb nicht – der Browser fuellte das Auswahlmenue mit Weiss, erbte aber die helle Schriftfarbe des Feldes: weisse Schrift auf weissem Grund (gemeldet 2026-07-29 fuer "Issue bearbeiten" → Status). theme.css laedt JEDE Seite, damit gilt die Regel auch fuer Widgets, die ihr CSS selbst mitbringen (issues.js, extractor.js, profile_switcher.js …). Deckende Flaeche ist Pflicht: ein halbtransparenter Feld-Hintergrund (rgba(var(--fg-rgb),.06)) wird im Popup zu fast Weiss. */ select option, select optgroup { background-color: var(--bg-secondary); color: var(--text-primary); } select option:checked, select option:hover { background-color: var(--accent); color: #ffffff; /* Text auf Akzentflaeche – gilt in beiden Themes */ } /* ─── Diagramme im Chat (```chartjs / ```mermaid) ─────────────────────────── Steht hier und NICHT in chat.css – gleiche Begruendung wie bei den Dropdowns oben: chat.css laedt nur chat.html und userchat.html, waehrend charts.js auch von sap.html eingebunden wird. Dort hatte der Container deshalb gar keine Regeln – ohne Hoehe rendert ein Chart.js-Canvas mit maintainAspectRatio:false ins Nichts. */ .jarvis-chart { position: relative; width: 100%; max-width: 640px; height: 340px; margin: 12px 0; padding: 12px 14px; background: rgba(var(--fg-rgb), 0.03); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: 12px; box-sizing: border-box; } .jarvis-chart canvas { width: 100% !important; height: 100% !important; } .jarvis-chart-err { height: auto; color: var(--text-secondary, #f0a0a0); font-size: 0.85rem; font-style: italic; } /* Werkzeugleiste (PNG speichern). Liegt IM Container ueber dem Canvas, wird erst beim Hovern sichtbar und ist deshalb deckend – halbtransparent scheinen die Datenpunkte darunter durch. */ .jarvis-chart-tools { position: absolute; top: 6px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition, .2s); z-index: 2; } .jarvis-chart:hover .jarvis-chart-tools, .jarvis-chart-tools:focus-within { opacity: 1; } .jarvis-chart-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; cursor: pointer; color: var(--text-secondary); background-color: var(--bg-secondary); border: 1px solid var(--border, rgba(var(--fg-rgb), 0.12)); border-radius: 6px; transition: color var(--transition, .2s), border-color var(--transition, .2s); } .jarvis-chart-btn:hover { color: var(--accent); border-color: var(--accent); } /* Mermaid-Schaubilder (Fluss-, Sequenz-, Gantt-Diagramme). Kein festes Hoehenmass: das SVG bringt seine eigenen Ausmasse mit. */ .jarvis-mermaid { position: relative; margin: 12px 0; padding: 12px 14px; overflow-x: auto; background: rgba(var(--fg-rgb), 0.03); border: 1px solid rgba(var(--fg-rgb), 0.1); border-radius: 12px; box-sizing: border-box; } .jarvis-mermaid > svg { max-width: 100%; height: auto; display: block; } .jarvis-mermaid-err { color: var(--text-secondary, #f0a0a0); font-size: 0.85rem; font-style: italic; white-space: pre-wrap; }