670 lines
26 KiB
CSS
670 lines
26 KiB
CSS
/* ==========================================================================
|
|
ASSESSOR Design Tokens
|
|
--------------------------------------------------------------------------
|
|
Verbindliche aktuelle Tokenquelle; Skill-Assets sind historische Referenzen.
|
|
|
|
EINZIGE QUELLE FÜR FARBEN, MASSE, RADIEN, SCHATTEN, TYPOGRAFIE.
|
|
|
|
Regeln:
|
|
- Ausserhalb dieser Datei existiert kein roher Farbwert.
|
|
- Ausserhalb dieser Datei existiert kein px-Wert fuer Abstaende, Hoehen,
|
|
Radien oder Schriftgroessen. Nur Token-Referenzen.
|
|
- Dark und Light rendern aus IDENTISCHEN semantischen Rollen.
|
|
Ein Light-Mode-Fix per Selektor-Override ist ein Fehler.
|
|
- Neue Farbe noetig? Erst semantische Rolle definieren, dann beide Themes
|
|
befuellen. Nie einen Einzelwert im Komponenten-CSS.
|
|
|
|
Uebergang: der Altbestand fuehrt seine Masse und Akzentfarben unter
|
|
`--legacy-*` weiter (src/styles/tokens.css). Diese Namen verschwinden,
|
|
sobald die jeweilige Ansicht auf dieses Tokenset umgestellt ist.
|
|
========================================================================== */
|
|
|
|
@layer tokens {
|
|
|
|
:root {
|
|
/* ---------- Typografie ---------- */
|
|
/* Inter wird lokal mit dem Client-Build ausgeliefert. Auch Datenwerte und
|
|
Rohansichten verwenden dieselbe Familie; Hierarchie entsteht nicht durch
|
|
wechselnde Schriften, sondern ausschliesslich durch Groesse und Gewicht. */
|
|
--activity-panel-width: 560px;
|
|
--pathfinder-details-width: clamp(270px, 21vw, 340px);
|
|
--pathfinder-stage-min-width: 360px;
|
|
|
|
--font-ui: "Inter Variable", sans-serif;
|
|
--font-mono: var(--font-ui);
|
|
/* User-requested path-only exception; no external font dependency. */
|
|
--font-path: ui-monospace, Consolas, "Liberation Mono", monospace;
|
|
--font-donut-display: var(--font-ui);
|
|
|
|
/* Semantische Typografierollen. Diese Rollen sind die verbindliche Quelle
|
|
fuer neue Ansichten; die darunterliegende fs-Skala bleibt nur als
|
|
Kompatibilitaetsschicht fuer bereits migrierte Komponenten bestehen. */
|
|
--type-h1-size: 56px;
|
|
--type-h2-size: 32px;
|
|
--type-h3-size: 18px;
|
|
--type-detail-title-size: 20px;
|
|
--type-h4-size: 16px;
|
|
--type-body-size: 16px;
|
|
--type-table-body-size: 14px;
|
|
--type-label-size: 12px;
|
|
--type-meta-size: 12px;
|
|
--type-badge-size: 11px;
|
|
--type-table-head-size: 12px;
|
|
--type-button-size: 13px;
|
|
|
|
/* ---------- Verbindlicher Donut-Standard ---------- */
|
|
/* Racks und andere Segmente sind reine, transparente Layoutgruppen.
|
|
Karte = Element, Ringspur = eingesenkt. */
|
|
/* ---------- Verbindliche Segment-/Kachelgrammatik ---------- */
|
|
--segment-surface: transparent;
|
|
--segment-border: transparent;
|
|
--segment-radius: 10px;
|
|
--segment-inset: var(--space-3);
|
|
--segment-gap: var(--space-3);
|
|
--tile-surface: #323238;
|
|
--tile-surface-hover: #3A3A42;
|
|
--tile-border: transparent;
|
|
/* Trennlinien innerhalb einer Kachel (Faktenzellen). */
|
|
--tile-divider: var(--border-subtle);
|
|
--tile-selected-border: var(--marking-color);
|
|
--tile-radius: var(--radius-sm);
|
|
--tile-inset: var(--space-4);
|
|
--tile-compact-width: 186px;
|
|
--tile-double-compact-width: calc(var(--tile-compact-width) * 2);
|
|
--tile-environment-min-width: 260px;
|
|
--tile-content-width: 358px;
|
|
--tile-content-min-height: 223px;
|
|
--tile-card-shadow: none;
|
|
|
|
/* Client Info uses the same theme and semantic status roles as Work.
|
|
Compatibility aliases retain existing chart consumers, not a local palette. */
|
|
--client-info-canvas: var(--surface-app);
|
|
--client-info-surface: var(--surface-input);
|
|
--client-info-surface-raised: var(--tile-surface);
|
|
--client-info-surface-hover: var(--tile-surface-hover);
|
|
--client-info-text: var(--text-primary);
|
|
--client-info-muted: var(--text-secondary);
|
|
--client-info-line: var(--border-default);
|
|
--client-info-line-strong: var(--border-strong);
|
|
--client-info-amber: var(--sev-medium);
|
|
--client-info-red: var(--sev-critical);
|
|
--client-info-green: var(--state-done);
|
|
--client-info-purple: var(--donut-not-applicable);
|
|
--client-info-blue: var(--donut-all);
|
|
--client-info-lime: var(--state-done);
|
|
--client-info-neutral: var(--donut-not-run);
|
|
|
|
--donut-rack-surface: var(--segment-surface);
|
|
--donut-card-surface: var(--tile-surface);
|
|
--donut-card-surface-end: var(--tile-surface);
|
|
--donut-track: #555B65;
|
|
--donut-border: var(--segment-border);
|
|
--donut-value: #E2DFE6;
|
|
--donut-label: #B7BAC0;
|
|
--donut-all: #348CF2;
|
|
--donut-deviation: #F0AC00;
|
|
--donut-passed: #3DA96C;
|
|
/* War violett, ersetzt durch einen dedizierten Rosa-Ton, kein Token/Chart-
|
|
Ton darf violett aufloesen (Nutzerentscheidung 2026-09-20). */
|
|
--donut-not-applicable: #C2568A;
|
|
--donut-not-run: #8A8E95;
|
|
--donut-error: #F23C47;
|
|
--donut-rack-shadow: none;
|
|
--donut-card-shadow: var(--tile-card-shadow);
|
|
--donut-rack-radius: var(--segment-radius);
|
|
--donut-card-radius: var(--tile-radius);
|
|
--donut-card-min-h: 196px;
|
|
--donut-ring-size: 128px;
|
|
--donut-ring-stroke: 12px;
|
|
--donut-progress-dash: 0 100;
|
|
--donut-title-size: 16px;
|
|
--donut-value-size: 26px;
|
|
--donut-percent-size: 14px;
|
|
--donut-compact-value-size: 22px;
|
|
--donut-compact-percent-size: 12px;
|
|
--donut-compact-unit-gap: 2px;
|
|
--datahub-readiness-dot-size: 14px;
|
|
--datahub-readiness-dot-inset: var(--space-1);
|
|
|
|
--fs-micro: var(--type-badge-size);
|
|
--fs-sm: var(--type-meta-size);
|
|
--fs-base: var(--type-button-size);
|
|
--fs-md: var(--type-table-body-size);
|
|
--fs-lg: var(--type-body-size);
|
|
--fs-xl: var(--type-h3-size);
|
|
|
|
/* Pathfinder Micro Card: eigenstaendige, im Graphen begrenzt
|
|
bildschirmstabil skalierte Knotenkarte. Keine allgemeine
|
|
TileCard-Typografie. */
|
|
--pathfinder-micro-title-size: 23px;
|
|
--pathfinder-micro-badge-size: 14px;
|
|
--pathfinder-micro-relation-badge-size: 16px;
|
|
--pathfinder-micro-action-size: 14px;
|
|
--pathfinder-micro-action-group-radius: 8px;
|
|
--pathfinder-micro-action-radius: 6px;
|
|
--pathfinder-micro-connector-backdrop-mix: #000000;
|
|
--pathfinder-micro-action-highlight-mix: #FFFFFF;
|
|
|
|
--fw-regular: 400;
|
|
--fw-content-medium: 500;
|
|
--fw-semibold: 600;
|
|
--fw-bold: 700;
|
|
/* Kompatibilitaetsname: visuell gibt es keine vierte Gewichtsstufe. */
|
|
--fw-medium: var(--fw-semibold);
|
|
|
|
--lh-ui: 1.35;
|
|
--lh-prose: 1.55;
|
|
|
|
--ls-caps: 0.06em; /* nur fuer Versal-Labels in --fs-micro */
|
|
|
|
/* ---------- Raster und Abstaende (4px-Basis) ---------- */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
|
|
/* ---------- Shell-Masse (in allen Archetypen identisch) ---------- */
|
|
--sidebar-w: 224px;
|
|
--sidebar-w-collapsed: 48px;
|
|
--topbar-h: 44px;
|
|
--band-row-h: 34px;
|
|
--contextstrip-h: 24px;
|
|
--statusbar-h: 24px;
|
|
--inspector-w: 380px;
|
|
--facetrail-w: 236px;
|
|
/* Mindestbreite einer Rasterspalte. Ohne sie fallen breite Scantabellen auf
|
|
Zeichenbreite zusammen, statt waagerecht zu scrollen. */
|
|
--table-col-min-w: 96px;
|
|
/* Verbindlicher Abstand zwischen dem Aussenrand eines abgerundeten Panels
|
|
und seinem Inhalt. Referenz ist Work: 20 px auf allen vier Seiten. Jede
|
|
Ansicht legt genau einen Root-Container in `.viewer`, der diesen Wert
|
|
traegt; bestehende und kuenftige Panels verwenden keine lokalen Ersatzwerte. */
|
|
--panel-content-inset: 20px;
|
|
--panel-inset: var(--panel-content-inset);
|
|
--app-grid-size: 22px 22px;
|
|
|
|
/* ---------- Dichte ---------- */
|
|
--control-h: 24px;
|
|
--control-h-sm: 20px;
|
|
--icon-btn: 24px;
|
|
--row-h: 32px;
|
|
--tile-h: 132px;
|
|
--tile-min-w: 260px;
|
|
|
|
/* ---------- Form ---------- */
|
|
--radius-xs: 0px; /* Badges, Chips */
|
|
--radius-sm: 0px; /* Inputs, Selects, Tiles, Zeilen */
|
|
--radius-md: 0px; /* Overlays: Dialog, Floating Window, Popover */
|
|
|
|
/* ---------- Verbindliche Buttonform ----------
|
|
Gilt fuer jede Schaltflaeche der App, unabhaengig von ihrer Farbe
|
|
(Nutzerentscheidung vom 2026-08-05): abgerundete Ecken und knapper
|
|
Innenabstand oben und unten. Keine Ansicht setzt eigene Buttonhoehen,
|
|
-radien oder -polster. Ausgenommen sind nur zusammengesetzte Reiter
|
|
(View-Tabs, Sidebar-Navigation), die als Gruppe eine eigene Form haben. */
|
|
--btn-radius: 4px;
|
|
--btn-h: 28px;
|
|
--btn-pad-x: 12px;
|
|
/* Groessere Radien existieren nicht. Panels und Shell: 0.
|
|
Einzige Ausnahme: die Reiter der Hauptnavigation. Sie folgen dem
|
|
Preferences-Muster aus Ableton Live, in dem die Rundung die Reiterform
|
|
ueberhaupt erst lesbar macht. 4px ist die Obergrenze der Designsprache. */
|
|
--radius-nav-item: 4px;
|
|
/* Zweite Ausnahme: der Stapel minimierter Results. Die Miniaturen liegen
|
|
kantenlos aufeinander und ergeben nur dann einen erkennbaren Koerper,
|
|
wenn seine Aussenecken gerundet sind - ohne Rundung zerfaellt der Stapel
|
|
optisch in Einzelzeilen. Gilt ausschliesslich fuer die vier Aussenecken,
|
|
nie zwischen den Zeilen. Entscheidung des Nutzers vom 2026-08-03. */
|
|
--radius-result-cluster: 4px;
|
|
|
|
--bw-hairline: 1px;
|
|
--bw-emphasis: 2px; /* Rahmen bei Auswahl und Fokus */
|
|
/* Markierungsstrich: die farbige linke Kante, die ein Objekt als aktiv,
|
|
ausgewaehlt oder zugehoerig markiert (aktive Recordzeile, minimiertes
|
|
Result, aktiver Pfadschritt, aktiver Zeitschnitt). Eine Breite fuer die
|
|
gesamte App - Referenz ist die Kante des Result-Fensters.
|
|
Entscheidung des Nutzers vom 2026-08-05. */
|
|
--marker-width: 8px;
|
|
|
|
/* ---------- Motion ---------- */
|
|
--dur-fast: 90ms;
|
|
--dur-base: 140ms;
|
|
--dur-data-build: 700ms;
|
|
--ease: cubic-bezier(0.2, 0, 0.2, 1);
|
|
--ease-data-build: cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
DICHTEMODI
|
|
Aendern ausschliesslich Hoehen und Abstaende.
|
|
Niemals Farben, Reihenfolge, Komponententypen oder Informationsmenge.
|
|
========================================================================== */
|
|
|
|
:root[data-density="compact"] {
|
|
--control-h: 26px;
|
|
--control-h-sm: 22px;
|
|
--icon-btn: 22px;
|
|
--row-h: 28px;
|
|
--tile-h: 116px;
|
|
--band-row-h: 30px;
|
|
}
|
|
|
|
:root[data-density="reading"] {
|
|
--control-h: 34px;
|
|
--control-h-sm: 30px;
|
|
--icon-btn: 30px;
|
|
--row-h: 40px;
|
|
--tile-h: 148px;
|
|
--band-row-h: 38px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
THEME: DARK (Standard)
|
|
========================================================================== */
|
|
|
|
:root,
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
/* Flaechen.
|
|
Vier Grundfarben, die in jedem Panel gelten (Nutzerentscheidung vom
|
|
2026-08-05). Kein Panel, keine Kachel, keine Zeile fuehrt einen eigenen
|
|
Grundton:
|
|
Hintergrund - die Flaeche, auf der alles liegt (--surface-app,
|
|
--surface-panel)
|
|
Element - alles, was auf der Flaeche sitzt und bedient wird
|
|
(--surface-panel-raised)
|
|
Textbox - eingesenkt, hier wird geschrieben (--surface-input)
|
|
Hover und Aktiv sind keine eigenen Grundfarben, sondern zwei Helligkeits-
|
|
stufen ueber dem Element. */
|
|
--surface-app: #242426; /* Grundfarbe Hintergrund */
|
|
--surface-shell: #1B1B1D; /* Chrome, kein Panel: Sidebar, Topbar, Statusbar */
|
|
--surface-panel: #242426; /* Grundfarbe Hintergrund */
|
|
--surface-panel-raised: #323238; /* Grundfarbe Element */
|
|
--surface-input: #1A1A1C; /* Grundfarbe Textbox */
|
|
--surface-hover: #3A3A42; /* Element, Hover */
|
|
--surface-active: #43434C; /* Element, gedrueckt */
|
|
/* Bernsteingetoente Auswahlflaeche, ersetzt den fruesheren violetten Wert
|
|
(Nutzerentscheidung 2026-09-20). Gemischt aus der Markierungsfarbe, damit
|
|
kein eigener Literalwert entsteht. */
|
|
--surface-selected: color-mix(in srgb, var(--marking-color) 16%, transparent);
|
|
/* Neutrale Auswahlflaeche: oberste Stufe der Elementleiter
|
|
(Element -> Hover -> Auswahl). Der alte Wert lag unter der Hoverstufe und
|
|
war auf dem Elementton nicht mehr zu sehen, sobald die Grundfarben
|
|
vereinheitlicht waren. */
|
|
--surface-selected-flat: #43434C;
|
|
--text-selected-flat: #E2DFE6;
|
|
--text-muted-selected-flat: #B7BAC0;
|
|
--border-selected-flat: var(--marking-color);
|
|
--surface-tab-active: #323238; /* Grundfarbe Element */
|
|
--text-tab-active: #E2DFE6;
|
|
--surface-results-action: #242426;
|
|
--border-results-action: var(--marking-color);
|
|
--text-results-action: var(--marking-color);
|
|
--surface-overlay: #242426; /* Dialog, Floating Window, Popover */
|
|
--surface-scrim: rgba(6, 6, 9, 0.62);
|
|
--app-grid-pattern: radial-gradient(circle at 1px 1px, #424248 1px, transparent 0);
|
|
--graph-edge: rgba(104, 143, 181, 0.52);
|
|
--graph-finding: #D9DEE4;
|
|
--graph-unknown: #8EA7C0;
|
|
/* Dediziertes, nicht-violettes Kategorieblau-Gruen fuer Graph-Beziehungsknoten
|
|
und -kanten, ersetzt den fruesheren violetten Wert (Nutzerentscheidung
|
|
2026-09-20). Von keinem Fokus- oder Markierungston abgeleitet. */
|
|
--graph-relation: #4FB8D4;
|
|
--graph-category: #AEB8C3;
|
|
--graph-defense: #789C99;
|
|
--graph-technique: #7E8D9C;
|
|
--graph-tactic: #668BB3;
|
|
--graph-alert: #E45E63;
|
|
--graph-selected: var(--marking-color);
|
|
/* Dedizierter, nicht-violetter Diagramm-/Kategorieton fuer Chart-Flaechen,
|
|
die frueher `--accent` wiederverwendeten (z. B. PKI-Chart-Ton, IOE-Summe).
|
|
Teilt sich den Farbwert mit `--graph-relation`, weil beide dieselbe Rolle
|
|
"dedizierter, nicht violetter Kategorieton" ausfuellen. */
|
|
--chart-tone-emphasis: var(--graph-relation);
|
|
/* Kennzeichnung der Context Engine ausserhalb des Graphen (Punkt vor jedem
|
|
Context-Badge, Nutzerentscheidung 2026-10-01). Gleicher Ton wie die
|
|
Context-Knoten in Pathfinder; kein Fokus-, Markierungs- oder Statuston. */
|
|
--context-marker: var(--graph-relation);
|
|
|
|
/* Rahmen: Weiche Konturen; dezenter heller Trennstrich fuer Listen */
|
|
--border-subtle: rgba(255, 255, 255, 0.14); /* Zellen-, Zeilentrenner */
|
|
--border-default: #383840; /* Controls, Tiles, Panels */
|
|
--border-strong: #4E4E58; /* Overlays, Hover-Rahmen */
|
|
|
|
/* Button-Tokens (Ableton Live aesthetic: einheitlicher 1px Rahmen, ohne Bunt-Linien) */
|
|
--button-border: #383840;
|
|
--button-bg: #323238; /* Grundfarbe Element */
|
|
--button-bg-hover: #3A3A42;
|
|
--button-text: #E2DFE6;
|
|
/* Standardgelb der Anwendung. Eine Schaltflaeche, die Farbe traegt, traegt
|
|
genau dieses Gelb - in Dark wie in Light (Nutzerentscheidung 2026-08-05). */
|
|
--button-accent: #E9A63C;
|
|
--button-accent-hover: #F0B252;
|
|
--button-accent-text: #000000;
|
|
--marking-color: #E9A63C;
|
|
/* Expliziter Entscheidungsentwurf an der Accepted-Risk-Aktion. Der Ton ist
|
|
eine eigene fachliche Rolle und wird nicht aus dem Fokusblau abgeleitet. */
|
|
--risk-draft-surface: #0A66C2;
|
|
--risk-draft-surface-hover: #0956A3;
|
|
--risk-draft-text: #FFFFFF;
|
|
|
|
/* Sidebar-Navigation (Ableton-Preferences-Muster).
|
|
Nicht gewaehlte Eintraege liegen erhoben ueber der Shell, der gewaehlte
|
|
nimmt exakt die Arbeitsflaeche an und laeuft ohne rechte Kante in sie
|
|
hinein. Der Uebergang ist damit eine Farbrolle, keine Sonderregel im
|
|
Komponenten-CSS. */
|
|
--surface-nav-item: #323238; /* Grundfarbe Element */
|
|
--surface-nav-item-hover: #3A3A42;
|
|
--surface-nav-active: var(--surface-app);
|
|
|
|
/* Text. Zwei Grundfarben, in jedem Panel dieselben:
|
|
Schrift (--text-primary): 13.0:1 auf Hintergrund, 9.5:1 auf Element
|
|
abgesetzte Schr. (--text-secondary): 7.9:1 auf Hintergrund, 6.5:1 auf Element
|
|
Sekundaer und gedaempft sind derselbe Ton: Hierarchie entsteht ueber
|
|
Groesse, Gewicht und Position, nicht ueber eine dritte Helligkeit. */
|
|
--text-primary: #E2DFE6;
|
|
--text-secondary: #B7BAC0;
|
|
--text-muted: #B7BAC0;
|
|
--text-disabled: #55555E;
|
|
--text-inverse: #0D0D10;
|
|
--text-link: #7FA9F0;
|
|
|
|
/* Die violette Akzentfamilie (--accent/-hover/-active/-on/-subtle) ist als
|
|
UI-Rolle vollstaendig entfernt (Nutzerentscheidung 2026-09-20, AGENTS.md
|
|
"UI segments and tiles"). Primaeraktion und Auswahl sind --marking-color,
|
|
Tastaturfokus ist --focus-ring; ein Tool-/Kategorieton bekommt bei Bedarf
|
|
einen eigenen dedizierten Wert (siehe --chart-tone-emphasis). Alle
|
|
ehemaligen Verbraucher sind direkt auf die passende Rolle umgestellt;
|
|
die Tokens sind deshalb geloescht, nicht nur umgeleitet. */
|
|
|
|
/* Command Band (Filter- und Analysemodus, Signaturfarbe) */
|
|
--band-surface: #D9962A;
|
|
--band-surface-hover: #E5A33A;
|
|
--band-surface-active: #C4831C;
|
|
--band-border: #A66E12;
|
|
--band-text: #17130A;
|
|
|
|
/* Severity: ausschliesslich gefuellte Badges mit Textlabel.
|
|
Diese fuenf Toene sind die Referenz der gesamten Anwendung. Sie gelten
|
|
unveraendert im hellen Skin und in jeder Darstellungsform - Hexagon,
|
|
Badge, Kante, Graphknoten. Eine Severity hat genau eine Farbe. */
|
|
--sev-critical: #E8214F;
|
|
--sev-high: #E2680F;
|
|
--sev-medium: #C99700;
|
|
--sev-low: #2E9E6B;
|
|
--sev-info: #3D8FD1;
|
|
--sev-unknown: #6E6E78;
|
|
--sev-on: #FFFFFF;
|
|
/* Tinte auf einer gefuellten Severity-Flaeche. Die fuenf Toene sind
|
|
durchgehend hell, deshalb traegt die Flaeche dunkle Schrift. Gemessen auf
|
|
11-px-Versaltext: 4.54:1 (critical) bis 7.91:1 (medium). Reines Weiss
|
|
erreichte hier nur 2.65:1 bis 4.41:1 und scheidet damit aus. */
|
|
--sev-ink: #08080A;
|
|
|
|
/* Outcome: ausschliesslich Textfarbe plus Glyph, nie gefuellt.
|
|
Pass ist auf Nutzerwunsch gruen; Severity bleibt eine eigene Dimension. */
|
|
--outcome-fail: #F2607F;
|
|
--outcome-pass: #63D69A;
|
|
--outcome-warning: #D9A82A;
|
|
--outcome-error: #E88A45;
|
|
--outcome-idle: #74747F;
|
|
|
|
/* Workflow / Review: ausschliesslich Outline-Chip mit Punkt */
|
|
--state-open: #8A8A94;
|
|
--state-progress: #3D8FD1;
|
|
--state-done: #2E9E6B;
|
|
--state-blocked: #E2680F;
|
|
--state-accepted: #74747F;
|
|
|
|
/* Systemzustaende, unabhaengig von Severity */
|
|
--state-bookmark: #1FA89E;
|
|
--state-online: #2E9E6B;
|
|
--state-offline: #E8214F;
|
|
|
|
/* Interaktion */
|
|
--focus-ring: #4CC2FF; /* eigenstaendig, kollidiert mit nichts */
|
|
--engines-button-bg: #4CC2FF;
|
|
--engines-button-text: #17171C;
|
|
--engines-dialog-width: 420px;
|
|
--table-row-marking: #4CC2FF;
|
|
--table-row-marking-surface: color-mix(in srgb, var(--table-row-marking) 14%, transparent);
|
|
--selection-border: var(--marking-color);
|
|
--selection-marker: var(--marking-color);
|
|
--search-highlight-bg: #FFE600;
|
|
--search-highlight-text: #000000;
|
|
/* Markierung einer vom Bericht selbst ausgewerteten Belegzeile (z. B.
|
|
CIS-CAT: `<tr class="evaluated">`) - eigenstaendiger Ton, bewusst wie
|
|
der Suchtreffer skinunabhaengig fest, damit die Markierung des
|
|
Originalberichts unveraendert wiedererkennbar bleibt. */
|
|
--evidence-highlight-bg: #CBF8FF;
|
|
--evidence-highlight-text: #000000;
|
|
--criterion-highlight-bg: #176B46;
|
|
--criterion-highlight-text: #FFFFFF;
|
|
--match-highlight-bg: #176B46;
|
|
--match-highlight-text: #FFFFFF;
|
|
--violation-highlight-bg: #981B37;
|
|
--violation-highlight-text: #FFFFFF;
|
|
|
|
/* Datenvisualisierung, kategorial. Nie fuer Zustaende verwenden. */
|
|
/* --viz-1 war violett und ist auf Oliv-Gruen umgestellt. --viz-6 lag mit
|
|
seinem frueheren Orchid-Ton farblich zu nah an Violett und ist auf ein
|
|
eindeutiges Pink verschoben (beides Nutzerentscheidung 2026-09-20). */
|
|
--viz-1: #6B9E1F;
|
|
--viz-2: #3D8FD1;
|
|
--viz-3: #1FA89E;
|
|
--viz-4: #C99700;
|
|
--viz-5: #E2680F;
|
|
--viz-6: #D6497A;
|
|
--viz-grid: #2A2A32;
|
|
|
|
/* Schatten: ausschliesslich echte Overlays */
|
|
--shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.48);
|
|
--shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.42);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
THEME: LIGHT (gleichwertig, kein Nachgedanke)
|
|
Identische Rollen, eigene Werte. Kontraste gegen die jeweilige
|
|
Nachbarflaeche geprueft: Text >= 4.5:1, Rahmen und Fokus >= 3:1.
|
|
========================================================================== */
|
|
|
|
:root[data-theme="light"] {
|
|
color-scheme: light;
|
|
|
|
/* Donut-Standard: identische Geometrie, helle Referenzpalette. */
|
|
--segment-surface: transparent;
|
|
--segment-border: transparent;
|
|
/* Gegenueber Reinweiss sichtbar beruhigt: reduziert die Blendwirkung grosser
|
|
Kachelflaechen, bleibt aber heller als der App-Hintergrund und behaelt so
|
|
die helle Ebenenhierarchie. */
|
|
--tile-surface: #F5F5F7;
|
|
/* Hover hellt die Flaeche leicht auf; die Kontur bleibt unveraendert. */
|
|
--tile-surface-hover: #F8F8FA;
|
|
/* Nutzerentscheidung 2026-09-25: Kachel und App-Hintergrund liegen im hellen
|
|
Theme nur eine Nuance auseinander. Eine neutrale Haarlinie traegt deshalb
|
|
die Kachelabgrenzung, ohne eine Flaechenfarbe zu aendern. Das dunkle Theme
|
|
bleibt ohne Kontur, dort traegt der Helligkeitsabstand. */
|
|
--tile-border: #DCDDE3;
|
|
--tile-divider: #D8D9DF;
|
|
--tile-selected-border: var(--marking-color);
|
|
--tile-card-shadow: none;
|
|
--donut-rack-surface: var(--segment-surface);
|
|
--donut-card-surface: var(--tile-surface);
|
|
--donut-card-surface-end: var(--tile-surface);
|
|
--donut-track: #B9BEC7;
|
|
--donut-border: var(--segment-border);
|
|
--donut-value: #20242A;
|
|
--donut-label: #555B65;
|
|
--donut-all: #1C70C9;
|
|
--donut-deviation: #9A6500;
|
|
--donut-passed: #1F7F4B;
|
|
/* War violett, ersetzt durch einen dedizierten Rosa-Ton, kein Token/Chart-
|
|
Ton darf violett aufloesen (Nutzerentscheidung 2026-09-20). */
|
|
--donut-not-applicable: #A13D6C;
|
|
--donut-not-run: #626873;
|
|
--donut-error: #D42836;
|
|
--donut-rack-shadow: none;
|
|
--donut-card-shadow: var(--tile-card-shadow);
|
|
--surface-app: #F1F1F4;
|
|
--surface-shell: #E4E4EA;
|
|
--surface-panel: #FFFFFF;
|
|
--surface-panel-raised: #F7F7F9;
|
|
--surface-input: #FFFFFF;
|
|
--surface-hover: #EDEDF2;
|
|
--surface-active: #E3E3EA;
|
|
/* Bernsteingetoente Auswahlflaeche, ersetzt den fruesheren violetten Wert
|
|
(Nutzerentscheidung 2026-09-20). */
|
|
--surface-selected: color-mix(in srgb, var(--marking-color) 16%, transparent);
|
|
/* Auswahl in Liste und Kachelraster: zurueckhaltende Flaeche, die 2-px-Kante
|
|
traegt die Aussage. Farbe steht damit nicht allein (WCAG 1.4.1). */
|
|
--surface-selected-flat: #E4E4EC;
|
|
--text-selected-flat: #17171C;
|
|
--text-muted-selected-flat: #55555F;
|
|
--border-selected-flat: var(--marking-color);
|
|
/* Aktive Ansicht (View-Tabs): neutrale erhobene Flaeche. Das Chrome bleibt
|
|
farblos, Farbe gehoert den Daten. */
|
|
--surface-tab-active: #FFFFFF;
|
|
--text-tab-active: #17171C;
|
|
/* Results-Aktion: Umriss in der Markenfarbe. Gefuellt wird sie erst im
|
|
geoeffneten Zustand, dann im Ton des zugehoerigen Ergebnisfensters. */
|
|
--surface-results-action: #FFFFFF;
|
|
--border-results-action: var(--marking-color);
|
|
--text-results-action: var(--marking-color);
|
|
--surface-overlay: #FFFFFF;
|
|
--surface-scrim: rgba(24, 24, 30, 0.32);
|
|
--app-grid-pattern: radial-gradient(circle at 1px 1px, #CBCBD3 1px, transparent 0);
|
|
--graph-edge: rgba(55, 92, 128, 0.45);
|
|
--graph-finding: #3F4851;
|
|
--graph-unknown: #58718A;
|
|
/* Dediziertes, nicht-violettes Kategorieblau-Gruen fuer Graph-Beziehungsknoten
|
|
und -kanten, ersetzt den fruesheren violetten Wert (Nutzerentscheidung
|
|
2026-09-20). */
|
|
--graph-relation: #2E93AD;
|
|
--graph-category: #667482;
|
|
--graph-defense: #527A77;
|
|
--graph-technique: #71808E;
|
|
--graph-tactic: #426C97;
|
|
--graph-alert: #C83E45;
|
|
--graph-selected: var(--marking-color);
|
|
/* Dedizierter, nicht-violetter Diagramm-/Kategorieton fuer Chart-Flaechen,
|
|
die frueher `--accent` wiederverwendeten. */
|
|
--chart-tone-emphasis: var(--graph-relation);
|
|
--context-marker: var(--graph-relation);
|
|
|
|
--border-subtle: #E2E2E8;
|
|
--border-default: #CFCFD8;
|
|
--border-strong: #A8A8B4;
|
|
|
|
/* Button-Tokens (Ableton Live aesthetic: einheitlicher 1px Rahmen, ohne Bunt-Linien) */
|
|
--button-border: #888888;
|
|
--button-bg: #C8C8C8;
|
|
--button-bg-hover: #D5D5D5;
|
|
--button-text: #111111;
|
|
/* Standardgelb, identisch zum dunklen Skin. */
|
|
--button-accent: #E9A63C;
|
|
--button-accent-hover: #F0B252;
|
|
--button-accent-text: #000000;
|
|
--marking-color: #E9A63C;
|
|
--risk-draft-surface: #0A66C2;
|
|
--risk-draft-surface-hover: #0956A3;
|
|
--risk-draft-text: #FFFFFF;
|
|
|
|
/* Sidebar-Navigation, siehe Dark-Skin. Gleiche Rollen, eigene Werte:
|
|
der gewaehlte Eintrag ist hier heller als die Shell, weil die
|
|
Arbeitsflaeche im hellen Skin die hellere Ebene ist. */
|
|
--surface-nav-item: #D8D8E0;
|
|
--surface-nav-item-hover: #E4E4EC;
|
|
--surface-nav-active: var(--surface-app);
|
|
|
|
--text-primary: #17171C;
|
|
--text-secondary: #55555F;
|
|
--text-muted: #74747F;
|
|
--text-disabled: #A0A0AA;
|
|
--text-inverse: #FFFFFF;
|
|
--text-link: #2A5FBF;
|
|
|
|
--band-surface: #E9A63C;
|
|
--band-surface-hover: #F0B252;
|
|
--band-surface-active: #D8942A;
|
|
--band-border: #B37B18;
|
|
--band-text: #17130A;
|
|
|
|
/* Severity kennt keinen Skinwechsel: identische Werte wie im dunklen Skin.
|
|
Ein Fund mit derselben Schwere muss in beiden Skins dieselbe Farbe tragen,
|
|
sonst ist ein Screenshot aus dem einen Skin im anderen nicht lesbar. */
|
|
--sev-critical: #E8214F;
|
|
--sev-high: #E2680F;
|
|
--sev-medium: #C99700;
|
|
--sev-low: #2E9E6B;
|
|
--sev-info: #3D8FD1;
|
|
--sev-unknown: #6E6E78;
|
|
--sev-on: #FFFFFF;
|
|
--sev-ink: #08080A;
|
|
|
|
--outcome-fail: #C60F3E;
|
|
--outcome-pass: #187447;
|
|
--outcome-warning: #8F6B00;
|
|
--outcome-error: #B85206;
|
|
--outcome-idle: #74747F;
|
|
|
|
--state-open: #6E6E78;
|
|
--state-progress: #2A6FA8;
|
|
--state-done: #1E7A50;
|
|
--state-blocked: #B85206;
|
|
--state-accepted: #74747F;
|
|
|
|
--state-bookmark: #10756D;
|
|
--state-online: #1E7A50;
|
|
--state-offline: #C60F3E;
|
|
|
|
--focus-ring: #0A66C2;
|
|
--engines-button-bg: #0A66C2;
|
|
--engines-button-text: #FFFFFF;
|
|
--table-row-marking: #0A66C2;
|
|
--table-row-marking-surface: color-mix(in srgb, var(--table-row-marking) 14%, transparent);
|
|
--selection-border: var(--marking-color);
|
|
--selection-marker: var(--marking-color);
|
|
--search-highlight-bg: #FFE600;
|
|
--search-highlight-text: #000000;
|
|
--evidence-highlight-bg: #CBF8FF;
|
|
--evidence-highlight-text: #000000;
|
|
--criterion-highlight-bg: #CBEFD9;
|
|
--criterion-highlight-text: #10261A;
|
|
--match-highlight-bg: #CBEFD9;
|
|
--match-highlight-text: #10261A;
|
|
--violation-highlight-bg: #FFD4DB;
|
|
--violation-highlight-text: #4A0714;
|
|
|
|
/* --viz-1 war violett und ist auf Oliv-Gruen umgestellt. --viz-6 lag mit
|
|
seinem frueheren Orchid-Ton farblich zu nah an Violett und ist auf ein
|
|
eindeutiges Pink verschoben (beides Nutzerentscheidung 2026-09-20). */
|
|
--viz-1: #4F7A12;
|
|
--viz-2: #2A6FA8;
|
|
--viz-3: #10756D;
|
|
--viz-4: #8F6B00;
|
|
--viz-5: #B85206;
|
|
--viz-6: #B02F5E;
|
|
--viz-grid: #DFDFE6;
|
|
|
|
--shadow-overlay: 0 8px 24px rgba(20, 20, 28, 0.18);
|
|
--shadow-popover: 0 4px 12px rgba(20, 20, 28, 0.14);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
REDUCED MOTION
|
|
========================================================================== */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--dur-fast: 0ms;
|
|
--dur-base: 0ms;
|
|
--dur-data-build: 0ms;
|
|
}
|
|
}
|
|
|
|
}
|