/* ============================================================================ STYLE: Terminal — Finanz-Terminal/Bloomberg-Anmutung, neu aufgelegt auf die WEB-DOM (Portal index.html + nve/hub styles.css). Signatur: Monospace überall, scharfe Kanten (border-radius:0), winzige Paddings, sichtbare 1px-Gitterlinien, maximale Datendichte, Labels klein + UPPERCASE, Akzent als harter Block. Farben kommen ausschliesslich aus den Theme-Variablen (11 Themes) — KEINE feste Palette. Aktiv bei . JEDE Regel ist auf html[data-style="terminal"] gescoped. ============================================================================ */ /* ---- Monospace + scharfe Kanten auf ALLEM ---- */ html[data-style="terminal"], html[data-style="terminal"] body { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.35; } html[data-style="terminal"] * { border-radius: 0 !important; } /* ---- Lesbarer Text auf Akzent-Bloecken (KONTRAST-FIX) ---- Akzent-Bloecke (.btn, .map-metric.active, .dp-seg button.active, menu primary) nutzen --accent-fg als Textfarbe. Das Portal setzt --accent-fg fest auf #fff. In den dunklen Themes ist die Akzentfarbe (--nve/--hub) aber oft SEHR HELL (matrix-grün, tron-cyan, azeroth-gold, dracula-lila, synthwave-pink) -> weisser Text darauf ist unlesbar (Kontrast < 1,9). Loesung ohne feste Palette: die theme-eigene HINTERGRUNDfarbe (--bg, in dunklen Themes dunkel) als Akzent-Text. Das ergibt durchgehend hohen Kontrast (5–15:1) auf statischem UND Hover-Akzent. Helle Themes (hell/beige) + horde (dunkelroter Akzent) behalten weiss -> dort ist die Akzentfarbe dunkel genug bzw. der Hintergrund hell, weiss bleibt lesbar. */ html[data-style="terminal"] { --accent-fg: var(--bg); --border: color-mix(in srgb, var(--fg) 22%, var(--bg)); } html[data-style="terminal"][data-theme="hell"], html[data-style="terminal"][data-theme="beige"], html[data-style="terminal"][data-theme="horde"] { --accent-fg: #fff; } html[data-style="terminal"] h1, html[data-style="terminal"] h2, html[data-style="terminal"] h3, html[data-style="terminal"] button, html[data-style="terminal"] input, html[data-style="terminal"] select, html[data-style="terminal"] textarea, html[data-style="terminal"] .btn, html[data-style="terminal"] .brand, html[data-style="terminal"] .menu-title, html[data-style="terminal"] .ct, html[data-style="terminal"] .value, html[data-style="terminal"] th { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; } /* Dezente Scanline-Anmutung (sehr leicht, theme-unabhaengig) */ html[data-style="terminal"] body::before { content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(127, 127, 127, 0.035) 0, rgba(127, 127, 127, 0.035) 1px, transparent 1px, transparent 3px ); } /* Headlines kompakt + UPPERCASE */ html[data-style="terminal"] h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin: 0 0 12px; } html[data-style="terminal"] h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin: 16px 0 8px; } /* =========================================================================== PORTAL (index.html) — Variablen: --card --card-h --text --muted --border --nve --hub --page-bg =========================================================================== */ /* Topbar als Terminal-Statusleiste */ html[data-style="terminal"] .topbar { padding: 6px 12px; border-bottom: 1px solid var(--nve, var(--accent)); } html[data-style="terminal"] .topbar .brand, html[data-style="terminal"] .brand { font-size: 13px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; } html[data-style="terminal"] .brand .dot { color: var(--nve); } html[data-style="terminal"] .badge { font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; } html[data-style="terminal"] .theme-sel, html[data-style="terminal"] .fb-btn { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); } html[data-style="terminal"] #adminFlag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } html[data-style="terminal"] main { padding: 18px 12px; } html[data-style="terminal"] .sub { font-size: 12px; letter-spacing: 0.3px; margin-bottom: 16px; } /* Portal-Auswahlkarten: harte Bloecke statt verschoben/Schatten */ html[data-style="terminal"] .grid { gap: 8px; } html[data-style="terminal"] .card { border: 1px solid var(--border); background: var(--card); padding: 14px 14px 12px; transition: background 0.1s ease, border-color 0.1s ease; } html[data-style="terminal"] .card:hover { transform: none; background: var(--card-h); } html[data-style="terminal"] .card.nve:hover { border-color: var(--nve); } html[data-style="terminal"] .card.hub:hover { border-color: var(--hub); } html[data-style="terminal"] .card::before { height: 2px; } html[data-style="terminal"] .card.nve::before { background: var(--nve); } html[data-style="terminal"] .card.hub::before { background: var(--hub); } html[data-style="terminal"] .ic { width: 38px; height: 38px; font-size: 20px; margin-bottom: 10px; border: 1px solid var(--border); } html[data-style="terminal"] .ct { font-size: 15px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 4px; } html[data-style="terminal"] .cs { font-size: 12px; line-height: 1.4; } html[data-style="terminal"] .go { margin-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } html[data-style="terminal"] .foot { font-size: 11px; margin-top: 18px; letter-spacing: 0.3px; } /* Feedback-Modal */ html[data-style="terminal"] .fb-modal { border: 1px solid var(--border); box-shadow: none; padding: 16px; } html[data-style="terminal"] .fb-modal h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; } html[data-style="terminal"] .fb-modal .fb-sub { font-size: 12px; } html[data-style="terminal"] .fb-modal label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; } html[data-style="terminal"] .fb-modal input, html[data-style="terminal"] .fb-modal textarea { padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); } html[data-style="terminal"] .fb-row button { padding: 9px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; } /* Login-Gate */ html[data-style="terminal"] .gate-box { border: 1px solid var(--border); box-shadow: none; padding: 20px 18px; } html[data-style="terminal"] .gate-logo { font-size: 24px; } html[data-style="terminal"] .gate-box h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; } html[data-style="terminal"] .gate-sub { font-size: 12px; } html[data-style="terminal"] .gate-box input { padding: 9px 11px; font-size: 14px; border: 1px solid var(--border); } html[data-style="terminal"] .gate-box button { padding: 9px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } html[data-style="terminal"] .gate-msg { font-size: 11px; } /* =========================================================================== NVE / HUB (nve/styles.css) — Variablen: --bg --bg-card --bg-card-hover --fg --fg-muted --accent --accent-hover --accent-fg --success --warning --error --border --radius --shadow =========================================================================== */ /* Topbar (nve/hub) */ html[data-style="terminal"] .topbar .back { font-size: 18px; padding: 2px 6px; } html[data-style="terminal"] .topbar .home { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 8px; border: 1px solid var(--border); } html[data-style="terminal"] .topbar .home:hover { border-color: var(--accent); } html[data-style="terminal"] .status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; } /* Container: dichter, breiter nutzbar. HUB setzt .container{max-width:1200px} in einem spaeteren inline