/* DEADGRID — UI-Panels & HUD-Basis (extrahiert aus index.html, 2026-06-16). Options-Menü, Händler, GM-Modal, Char-Frame-HUD, Hinweise, Skillbar, Micro-Menü, Ruf-/Gruppen-Panel, Karten (Mini/Big), Marker, Radio-Log. WICHTIG: Diese Datei wird VOR css/hud.css geladen — der HUD-Overhaul (.hud/ #micromenu/.skill) überschreibt hier bewusst die alten Maße (Kaskaden-Reihenfolge im beibehalten). */ /* Zentrales Options-Menü (geöffnet über das Micro-Menü unten rechts). Wegen mehr Inhalt (Grafik/Sound/Nameplates) scrollt das Panel bei Bedarf. */ #opts-panel { position: fixed; bottom: 186px; right: 14px; z-index: 90; display: none; background: color-mix(in srgb, var(--panel) 97%, transparent); border: 1px solid var(--amber); padding: 10px 14px; min-width: 220px; max-height: calc(100vh - 220px); overflow-y: auto; font: 12px monospace; color: var(--text); } #opts-panel.open { display: block; } #opts-panel h3 { color: var(--amber); font-size: 10px; letter-spacing: 3px; margin: 0; font-weight: 600; } /* Kopfzeile mit Schliessen-X (konsistent zu den anderen Fenstern) */ .opts-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .opts-x { cursor: pointer; color: var(--dim); font-size: 12px; line-height: 1; padding: 0 2px; } .opts-x:hover { color: var(--blood); } /* Abschnitts-Überschrift (GRAFIK / SOUND / NAMEPLATES) */ .opts-section { color: var(--amber); font-size: 9px; letter-spacing: 3px; margin: 8px 0 4px; padding-top: 6px; border-top: 1px solid var(--line); } .opts-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .opt-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .opt-row label { color: var(--dim); font-size: 11px; letter-spacing: 1px; flex: 1; cursor: pointer; } .opt-row input[type=checkbox] { accent-color: var(--amber); cursor: pointer; } #opts-close { margin-top: 8px; width: 100%; cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--dim); font: 11px monospace; padding: 4px; letter-spacing: 1px; } #opts-close:hover { border-color: var(--blood); color: var(--blood); } #fps-counter { font-size: 10px; color: var(--dim); padding: 3px 0 0; letter-spacing: 1px; } /* Händler-UI */ #traderHint { position: fixed; bottom: 160px; left: 50%; transform: translateX(-50%); display: none; background: rgba(21,24,28,0.88); border: 1px solid var(--amber); color: var(--amber); font: 700 11px monospace; letter-spacing: 3px; padding: 5px 16px; pointer-events: none; z-index: 20; } #trade-panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 200; display: none; width: 340px; background: var(--panel); border: 1px solid var(--amber); font: 12px monospace; color: var(--text); box-shadow: 0 8px 32px rgba(0,0,0,0.6); } #trade-panel.open { display: block; } #trade-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: color-mix(in srgb, var(--amber) 14%, var(--panel)); border-bottom: 1px solid var(--line); } #trade-head-title { color: var(--amber); font: 600 11px monospace; letter-spacing: 3px; } #trade-close { background: transparent; border: 1px solid #50414a; color: var(--dim); font: 11px monospace; cursor: pointer; padding: 2px 8px; } #trade-close:hover { border-color: var(--blood); color: var(--blood); } #trade-body { padding: 10px 12px; } .trade-scrap-row { color: var(--dim); font-size: 10px; letter-spacing: 1px; margin-bottom: 8px; } .trade-scrap-row b { color: var(--amber); } .trade-section { color: var(--amber); font-size: 9px; letter-spacing: 3px; margin: 6px 0 4px; } .trade-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: color-mix(in srgb, var(--panel) 70%, #000); border: 1px solid var(--line); margin-bottom: 3px; } .trade-item { flex: 1; color: var(--text); font-size: 11px; } .trade-price { color: var(--dim); font-size: 10px; min-width: 80px; text-align: right; } .trade-buy-btn { cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--ok); font: 700 9px monospace; letter-spacing: 1px; padding: 3px 7px; } .trade-buy-btn:hover { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--panel)); } /* GM-Hilfe-Modal (mittig, dunkles Panel + Bernstein-Akzent, Overlay-Hintergrund). Stil konsistent zum Trade-Panel; Overlay dimmt den Hintergrund und faengt Klicks ab. */ #gm-modal-overlay { position: fixed; inset: 0; z-index: 210; display: none; background: rgba(8,10,12,0.62); align-items: center; justify-content: center; } #gm-modal-overlay.open { display: flex; } #gm-modal { width: 420px; max-width: calc(100vw - 32px); background: var(--panel); border: 1px solid var(--amber); font: 12px monospace; color: var(--text); box-shadow: 0 12px 40px rgba(0,0,0,0.7); } .gm-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; background: color-mix(in srgb, var(--amber) 14%, var(--panel)); border-bottom: 1px solid var(--line); } #gm-modal-title { color: var(--amber); font: 600 11px monospace; letter-spacing: 3px; } .gm-modal-x { cursor: pointer; color: var(--dim); font-size: 13px; line-height: 1; padding: 0 2px; } .gm-modal-x:hover { color: var(--blood); } .gm-modal-body { padding: 12px 14px; } .gm-modal-intro { color: var(--dim); font-size: 11px; line-height: 1.6; margin-bottom: 10px; } #gm-modal-text { width: 100%; resize: vertical; min-height: 90px; background: #0d1014; border: 1px solid var(--line); color: var(--text); font: 12px monospace; padding: 8px 10px; outline: none; } #gm-modal-text:focus { border-color: var(--amber); } .gm-modal-count { text-align: right; color: var(--dim); font-size: 9px; letter-spacing: 1px; margin-top: 4px; } .gm-modal-foot { display: flex; gap: 8px; padding: 0 14px 14px; } .gm-modal-btn { flex: 1; cursor: pointer; border: 1px solid var(--line); background: transparent; font: 700 10px monospace; letter-spacing: 2px; padding: 7px; } .gm-modal-cancel { color: var(--dim); } .gm-modal-cancel:hover { border-color: var(--blood); color: var(--blood); } .gm-modal-send { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 50%, var(--line)); } .gm-modal-send:hover { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--panel)); } /* Char-Frame-HUD (Basis-Maße — werden von css/hud.css überschrieben, siehe Kopf). */ .hud { position: fixed; left: 14px; top: 14px; width: 240px; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); padding: 12px 14px; color: var(--text); font-size: 12px; line-height: 1.7; user-select: none; } .hud h1 { font-size: 12px; letter-spacing: 3px; color: var(--amber); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; font-weight: 600; } .hud .row { display: flex; justify-content: space-between; } .hud .row span:first-child { color: var(--dim); } #hpbar { height: 8px; background: #2a2026; border: 1px solid var(--line); margin: 4px 0 8px; } #hpfill { height: 100%; width: 100%; background: var(--ok); transition: width .15s, background .15s; } #status { color: var(--amber); } #conn.ok { color: var(--ok); } #conn.bad { color: var(--blood); } .hint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--dim); font-size: 11px; letter-spacing: 1px; background: color-mix(in srgb, var(--panel) 80%, transparent); border: 1px solid var(--line); padding: 6px 14px; user-select: none; } .hint b { color: var(--text); font-weight: 600; } .skillbar { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } .skill { width: 52px; height: 52px; background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); color: var(--amber); font: 700 14px monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; cursor: none; } .skill span { font-size: 8px; color: var(--dim); letter-spacing: 1px; margin-top: 2px; } .skill.active { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, var(--panel)); } /* WoW-Style Micro-Menü (unten rechts, ÜBER dem Perf-Panel — beide koexistieren) */ #micromenu { position: fixed; right: 14px; bottom: 124px; z-index: 85; display: flex; gap: 5px; } .mmbtn { width: 52px; height: 52px; background: color-mix(in srgb, var(--panel) 90%, transparent); border: 1px solid var(--line); color: var(--amber); font: 700 16px monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; user-select: none; cursor: pointer; } .mmbtn span { font-size: 7px; color: var(--dim); letter-spacing: 1px; margin-top: 3px; } /* Icon-Span (z. B. Mute-Button) auf Button-Glyph-Größe statt Label-Größe */ .mmbtn span.mm-icon { font-size: 16px; color: var(--amber); margin-top: 0; letter-spacing: 0; line-height: 1; } .mmbtn:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, var(--panel)); } .mmbtn.disabled { opacity: 0.35; cursor: not-allowed; } .mmbtn.disabled:hover { border-color: var(--line); background: color-mix(in srgb, var(--panel) 90%, transparent); } /* Ruf-Panel: drei Fraktions-Balken (-100..+100) im Stil des Char-Fensters */ #repWindow { left: calc(50% - 160px); width: 320px; bottom: 200px; } .repbody { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 11px; } .reprow .rep-head { display: flex; justify-content: space-between; align-items: baseline; font: 700 11px monospace; letter-spacing: 2px; } .rep-bar { position: relative; height: 10px; margin-top: 4px; background: #0d1014; border: 1px solid var(--line); box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); } .rep-bar .rep-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--dim); opacity: 0.6; } .rep-bar .rep-fill { position: absolute; top: 1px; bottom: 1px; } .rep-status { font: 9px monospace; letter-spacing: 2px; margin-top: 3px; } /* Gruppen-Panel: Mitglieder-Liste mit HP-Balken + Leader-Markierung */ #groupWindow { left: calc(50% - 150px); width: 300px; bottom: 200px; } .groupbody { padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; min-height: 60px; max-height: 240px; overflow-y: auto; } .groupbody.empty { align-items: center; justify-content: center; color: var(--dim); font: 10px monospace; letter-spacing: 2px; text-align: center; } .grp-member { display: flex; flex-direction: column; gap: 3px; padding: 5px 7px; background: color-mix(in srgb, var(--panel) 70%, #000); border: 1px solid var(--line); } .grp-member.me { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); } .grp-mhead { display: flex; justify-content: space-between; align-items: baseline; font: 700 11px monospace; letter-spacing: 1px; } .grp-mname { color: var(--text); } .grp-mname .grp-lead { color: var(--amber); font-size: 9px; letter-spacing: 1px; margin-left: 5px; } .grp-mzone { font: 9px monospace; color: var(--dim); letter-spacing: 1px; } .grp-hpbar { position: relative; height: 7px; background: #0d1014; border: 1px solid var(--line); } .grp-hpfill { position: absolute; left: 0; top: 0; bottom: 0; } .grp-member.dead { opacity: 0.5; } .groupfoot { display: flex; gap: 6px; padding: 0 12px 12px; } .grp-btn { flex: 1; cursor: pointer; border: 1px solid #50414a; background: transparent; color: var(--text); font: 700 10px monospace; letter-spacing: 1px; padding: 6px 4px; } .grp-btn:hover { border-color: var(--amber); color: var(--amber); } .grp-leave:hover { border-color: var(--blood); color: var(--blood); } /* Eingehende-Einladung-Overlay (oben mittig) */ #group-invite-toast { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); z-index: 320; display: none; min-width: 280px; text-align: center; background: var(--panel); border: 1px solid var(--amber); padding: 12px 16px; box-shadow: 0 6px 28px rgba(0,0,0,0.65); } #group-invite-toast.open { display: block; } #group-invite-toast .git-text { color: var(--amber); font: 700 12px monospace; letter-spacing: 1px; margin-bottom: 10px; } #group-invite-toast .git-row { display: flex; gap: 8px; } .git-btn { flex: 1; cursor: pointer; border: 1px solid #50414a; background: transparent; color: var(--text); font: 700 11px monospace; letter-spacing: 1px; padding: 6px 8px; } .git-yes:hover { border-color: var(--ok); color: var(--ok); } .git-no:hover { border-color: var(--blood); color: var(--blood); } #deathOverlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; background: radial-gradient(ellipse at center, rgba(107,31,58,.35), rgba(21,24,28,.85)); color: var(--blood); letter-spacing: 6px; font-size: 28px; font-weight: 600; } #deathOverlay small { color: var(--dim); letter-spacing: 2px; font-size: 12px; } #minimap-wrap { position: fixed; right: 14px; top: 14px; user-select: none; background: color-mix(in srgb, var(--panel) 88%, transparent); border: 1px solid var(--line); } #minimap-title { color: var(--amber); font-size: 10px; letter-spacing: 3px; font-weight: 600; padding: 5px 8px 3px; border-bottom: 1px solid var(--line); } #minimap { display: block; } /* Sektor/Uhrzeit/Position unter der Minimap (aus dem Char-Frame hierher verschoben) */ #minimap-wrap .mm-meta { display: flex; justify-content: space-between; gap: 10px; padding: 4px 8px; border-top: 1px solid var(--line); color: var(--dim); font: 600 10px monospace; letter-spacing: 1px; } #minimap-wrap .mm-meta b { color: var(--amber); font-weight: 700; } #minimap-wrap #dgpos { justify-content: flex-start; opacity: .75; } /* Große Weltkarte (M) — 80% Bildschirm, resizable, schließen mit Esc oder X */ #bigmap-overlay { position: fixed; inset: 0; z-index: 300; display: none; background: rgba(0,0,0,0.55); align-items: center; justify-content: center; } #bigmap-overlay.open { display: flex; } #bigmap-panel { width: 80vw; height: 80vh; min-width: 360px; min-height: 280px; max-width: 98vw; max-height: 96vh; background: var(--panel); border: 1px solid var(--amber); display: flex; flex-direction: column; resize: both; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.6); } #bigmap-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--line); flex: 0 0 auto; } #bigmap-title { color: var(--amber); font: 600 12px monospace; letter-spacing: 3px; } #bigmap-close { background: transparent; border: 1px solid #50414a; color: var(--text); font: 12px monospace; cursor: pointer; padding: 2px 9px; line-height: 1.4; } #bigmap-close:hover { border-color: var(--amber); color: var(--amber); } #bigmap-canvas { flex: 1 1 auto; display: block; width: 100%; min-height: 0; cursor: crosshair; } /* Marker-Setz-/Lösch-Popup (Rechtsklick auf der großen Karte) */ #marker-popup { position: fixed; z-index: 320; display: none; min-width: 180px; background: var(--panel); border: 1px solid var(--amber); padding: 8px; font: 11px monospace; color: var(--text); box-shadow: 0 6px 24px rgba(0,0,0,0.6); } #marker-popup.open { display: block; } #marker-popup .mp-title { color: var(--amber); letter-spacing: 2px; margin-bottom: 6px; } #marker-popup .mp-cats { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; } #marker-popup .mp-cat { flex: 1 1 auto; min-width: 30px; text-align: center; cursor: pointer; border: 1px solid var(--line); padding: 4px 2px; background: transparent; color: var(--text); font: 14px monospace; line-height: 1.1; } #marker-popup .mp-cat small { display: block; font-size: 7px; letter-spacing: 1px; color: var(--dim); } #marker-popup .mp-cat.sel { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 16%, var(--panel)); } #marker-popup input { width: 100%; box-sizing: border-box; background: #0d1014; border: 1px solid var(--line); color: var(--text); font: 11px monospace; padding: 4px 6px; margin-bottom: 6px; } #marker-popup .mp-row { display: flex; gap: 6px; } #marker-popup button.mp-act { flex: 1; cursor: pointer; border: 1px solid #50414a; background: transparent; color: var(--text); font: 11px monospace; padding: 4px 6px; } #marker-popup button.mp-act:hover { border-color: var(--amber); color: var(--amber); } #marker-popup button.mp-danger:hover { border-color: var(--blood); color: var(--blood); } #radio-log { position: fixed; left: 14px; bottom: 108px; width: 310px; pointer-events: none; user-select: none; } #radio-log .radio-title { font-size: 9px; letter-spacing: 3px; color: var(--amber); opacity: 0.6; margin-bottom: 4px; } #radio-log .radio-entry { font-size: 10px; line-height: 1.55; letter-spacing: 0.5px; color: var(--amber); background: color-mix(in srgb, var(--panel) 78%, transparent); border-left: 2px solid var(--amber); padding: 3px 8px; margin-bottom: 3px; opacity: 1; transition: opacity 2s; } #radio-log .radio-entry.old { opacity: 0.4; } #radio-log .radio-age { font-size: 9px; color: var(--dim); margin-right: 6px; }