/* ============================================================ HUD.CSS — Gemeinsames UI-Stylesheet Data-Brutalism / Retrofuturismus · Wojtek Für: PARTIKELRASTER · REISSBRETT · ROUTENMODUL · PARAMETRIK ------------------------------------------------------------ Dunkles Standard-Theme + optionale Hell-Variante. Hell umschalten: oder class="theme-light" Akzentfarbe pro Tool überschreibbar via --accent / --accent-2. ============================================================ */ /* ---------- 1. Design-Tokens ---------- */ /* === HUD:ROOT START – vom HUD-Export ersetzbar === */ :root { /* Flächen (dunkel) */ --bg: #ffffff; --panel: #fafafa; --panel-2: #12151a; --line: #969696; --line-soft: #1a1f24; /* Text */ --text: #5c5c5c; --text-dim: #6b7683; --text-mut: #4d5761; /* Akzente — pro Tool via --accent überschreibbar */ --accent: #f5a623; /* amber — Primärakzent, Regler, Titel */ --accent-dim: #8a6420; /* gedämpftes Amber — Eckmarken, Rahmen */ --accent-2: #519aa4; /* cyan — Sekundärakzent, Messwerte */ --accent-2-dim:#1d6a6a; --danger: #d84f42; /* Fehler / kritische Aktion */ /* Typografie */ --mono: "SF Mono", "JetBrains Mono", "IBM Plex Mono", "Cascadia Code", Menlo, Consolas, monospace; /* Maße */ --gap: 10px; --pad: 14px; --radius: 0px; /* data-brutalism: keine Rundungen */ --track: 2px; /* Slider-Schienenhöhe */ --thumb: 14px; /* Slider-Griffgröße */ /* Typo-Skala */ --fs-title: 13px; --fs-read: 10px; --fs-label: 10px; --fs-btn: 10px; --fs-body: 11px; --track-let: .14em; /* Standard-Laufweite (letter-spacing) */ --track-wide:.20em; /* Titel / Eyebrows */ /* Kachel-Design (über das HUD einstellbar; Sync überschreibt zur Laufzeit) */ --card-fill: #fffbf6; /* Kachelfarbe */ --card-alpha: 100; /* Transparenz in % */ --card-outline-w: 0px; /* Kachel-Outline-Stärke */ --card-outline-c: #969696; /* Kachel-Outline-Farbe */ --card-radius: 20px; /* Kantenrundung */ --field-radius: 14px; /* Rundung der Popup-Buttons/Felder */ --card-text: #1b1e22; /* Textfarbe */ --card-label: #a4681f; /* Überschriften */ --card-value: #ffffff; /* Werte */ --card-label-fs: 18px; /* Überschriften-Größe */ --panel-fs: 11px; /* Schriftgröße Kachel-Text */ --ctrl-outline-w: 1px; /* Regler/Button-Outline-Stärke */ --ctrl-outline-c: #f5a623; /* Regler/Button-Outline-Farbe */ --btn-fs: 12px; /* Button-Schriftgröße */ } /* === HUD:ROOT END === */ /* ---------- 2. Hell-Variante ---------- */ :root[data-theme="light"], :root.theme-light { --bg: #e8eaec; --panel: #ffffff; --panel-2: #f4f5f7; --line: #d4d7db; --line-soft: #e2e4e7; --text: #191a1e; --text-dim: #6b6f76; --text-mut: #9a9ea6; --accent: #d33a2c; /* im Hellmodus kräftiges Rot (REISSBRETT-Herkunft) */ --accent-dim: #b23020; --accent-2: #1c7a72; --accent-2-dim:#3aa89e; --danger: #c02a1c; } .hud-stats b, .stats b, #readout b { font-variant-numeric: tabular-nums; } /* ---------- 3. Reset / Grundlagen ---------- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-weight: 400; font-size: var(--fs-body); line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* Für Vollflächen-Canvas-Tools (3D/2D-Viewport) */ body.hud-fixed { overflow: hidden; touch-action: none; } canvas { display: block; } /* ---------- 4. Kopfzeile / HUD-Header ---------- */ .hud-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; box-sizing: border-box; padding: 8px 22px; border-bottom: 1px solid var(--line); background: var(--panel); } /* Name + Unterzeile als linke Gruppe (Basislinie ausgerichtet) */ .head-l { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .subtitle { font-size: 11px; font-weight: 400; letter-spacing: .04em; color: var(--text-dim); } /* schwebend über einem Canvas */ .hud-header.floating { position: fixed; inset: 0 0 auto 0; z-index: 10; pointer-events: none; } .hud-header.floating .hud-readout { pointer-events: auto; } .hud-title { font-family: 'Rajdhani', var(--mono); font-weight: 600; font-size: 23px; letter-spacing: .10em; color: var(--text); white-space: nowrap; } .hud-title span { color: var(--accent); } .hud-readout { font-size: var(--fs-read); letter-spacing: .12em; color: var(--text-dim); text-align: right; line-height: 1.7; } .hud-readout b { color: var(--accent-2); font-weight: 400; } /* ---------- 5. Eckmarken ---------- */ .hud-mark { position: fixed; width: 14px; height: 14px; border: 0 solid var(--accent-dim); z-index: 9; pointer-events: none; } .hud-mark.tl { top: 54px; left: 12px; border-top-width: 1px; border-left-width: 1px; } .hud-mark.tr { top: 54px; right: 12px; border-top-width: 1px; border-right-width: 1px; } .hud-mark.bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; } .hud-mark.br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; } /* ---------- 6. Panels & Sektionen ---------- */ .hud-panel { background: var(--panel); border: 1px solid var(--line); padding: var(--pad); } /* seitliche Steuerspalte (PARTIKELRASTER-Stil) */ .hud-panel.side { display: flex; flex-direction: column; gap: var(--gap); overflow-y: auto; } /* untere Steuerleiste, auto-fit Raster (PARAMETRIK/ROUTENMODUL-Stil) */ .hud-panel.dock { position: fixed; inset: auto 0 0 0; z-index: 10; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 22px; border: 0; border-top: 1px solid var(--line); } /* umrahmte Gruppe mit schwebender Beschriftung */ .hud-sect { position: relative; border: 1px solid var(--line); padding: 12px 12px 13px; } .hud-sect > .lg { position: absolute; top: -7px; left: 8px; padding: 0 6px; background: var(--panel); font-size: var(--fs-label); letter-spacing: .16em; color: var(--accent-dim); } /* ---------- 7. Regler (Slider) ---------- */ .hud-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .hud-row:first-of-type { margin-top: 6px; } .hud-row label { color: var(--text-dim); letter-spacing: .06em; flex: 0 0 auto; } .hud-row output, .hud-row .val { color: var(--accent-2); min-width: 44px; text-align: right; flex: 0 0 auto; } /* Label-über-Slider-Variante (Dock-Layout) */ .hud-ctrl label { display: flex; justify-content: space-between; font-size: var(--fs-label); letter-spacing: var(--track-let); color: var(--text-dim); margin-bottom: 7px; } .hud-ctrl label output { color: var(--accent); } input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; flex: 1 1 0; min-width: 0; height: var(--track); background: var(--line); outline: none; cursor: pointer; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb); height: var(--thumb); border-radius: var(--radius); background: var(--bg); border: 1px solid var(--accent); cursor: pointer; } input[type=range]::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border-radius: var(--radius); background: var(--bg); border: 1px solid var(--accent); cursor: pointer; } /* ---------- 8. Buttons ---------- */ .hud-btn, button.hud { background: transparent; border: 1px solid var(--line); color: var(--text); font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: var(--btn-fs, 11px); letter-spacing: var(--track-let); padding: 8px 6px; cursor: pointer; flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .12s, color .12s, background .12s; } .hud-btn:hover, button.hud:hover { border-color: var(--accent); color: var(--accent); } .hud-btn:active, button.hud:active { background: color-mix(in srgb, var(--accent) 12%, transparent); } /* aktiver Zustand (Toggle an) */ .hud-btn.active, button.hud.active { border-color: var(--accent); color: var(--accent); } /* Sekundärakzent (Export etc.) */ .hud-btn.accent, button.hud.accent { border-color: var(--accent-2-dim); color: var(--accent-2); } .hud-btn.accent:hover, button.hud.accent:hover { border-color: var(--accent-2); } /* Primär gefüllt (Hauptaktion) */ .hud-btn.primary, button.hud.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; } .hud-btn.primary:hover, button.hud.primary:hover { background: color-mix(in srgb, var(--accent) 85%, #fff); } /* kritische Aktion */ .hud-btn.danger, button.hud.danger { border-color: var(--danger); color: var(--danger); } /* Button-Zeile */ .hud-btnrow { display: flex; gap: 8px; } .hud-btnrow + .hud-btnrow { margin-top: 8px; } /* ---------- 9. Chips (Modus-Auswahl) ---------- */ .hud-chips { display: flex; flex-wrap: wrap; gap: 6px; } .hud-chip { background: transparent; border: 1px solid var(--line); color: var(--text-dim); font-family: var(--mono); font-size: var(--fs-btn); letter-spacing: .1em; padding: 6px 10px; cursor: pointer; transition: border-color .12s, color .12s; } .hud-chip:hover { border-color: var(--accent); color: var(--text); } .hud-chip.active { border-color: var(--accent); color: var(--accent); } /* ---------- 10. Farbwähler-Feld ---------- */ input[type=color] { flex: 1 1 0; min-width: 0; height: 24px; padding: 0; background: transparent; border: 1px solid var(--line); cursor: pointer; } /* ---------- 11. Checkbox ---------- */ .hud-check { display: flex; align-items: center; gap: 8px; cursor: pointer; color: var(--text-dim); } .hud-check input { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid var(--line); background: var(--bg); cursor: pointer; } .hud-check input:checked { background: var(--accent); border-color: var(--accent); } /* ---------- 12. Hinweistext ---------- */ .hud-note { font-size: var(--fs-label); line-height: 1.7; letter-spacing: .04em; color: var(--text-dim); } .hud-note.error { color: var(--danger); } /* zentraler, ausblendender Bedien-Hinweis über Canvas */ .hud-hint { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: var(--fs-label); letter-spacing: .18em; color: var(--text-mut); z-index: 9; pointer-events: none; animation: hud-fade 1s ease 5s forwards; } @keyframes hud-fade { to { opacity: 0; } } /* ---------- 13. Toast ---------- */ .hud-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--panel); border: 1px solid var(--accent); color: var(--text); font-size: var(--fs-label); letter-spacing: .1em; padding: 10px 16px; z-index: 40; opacity: 0; transition: opacity .2s, transform .2s; } .hud-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- 14. Statuszeile (Kopf-Messwerte inline) ---------- */ .hud-stats { display: flex; gap: 18px; color: var(--text-dim); letter-spacing: .08em; } .hud-stats b { color: var(--accent-2); font-weight: 400; } /* ---------- 15. Scrollbar (dezent) ---------- */ .hud-panel::-webkit-scrollbar { width: 8px; } .hud-panel::-webkit-scrollbar-track { background: transparent; } .hud-panel::-webkit-scrollbar-thumb { background: var(--line); } .hud-panel::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); } /* ---------- 16. Fokus-Sichtbarkeit (A11y) ---------- */ :where(button, input, [tabindex]):focus-visible { outline: 1px solid var(--accent-2); outline-offset: 2px; } /* ---------- 17. Reduzierte Bewegung ---------- */ @media (prefers-reduced-motion: reduce) { .hud-hint { animation: none; } *, *::before, *::after { transition-duration: .01ms !important; } } /* ---------- 18. Mobile: Seitenpanel einklappbar ---------- */ @media (max-width: 760px) { .hud-panel.side { position: fixed; inset: 0 0 0 auto; z-index: 30; width: 250px; transform: translateX(100%); transition: transform .2s ease; box-shadow: -8px 0 24px rgba(0,0,0,.5); } .hud-panel.side.open { transform: translateX(0); } }