:root { --bg: #050310; --bg-2: #0a0616; --surface: rgba(255,255,255,0.035); --surface-strong: rgba(255,255,255,0.06); --border: rgba(168,120,255,0.18); --border-hover: rgba(168,120,255,0.42); --text: #f4eefe; --text-dim: #a99bc9; --text-faint: #746793; --violet: #9b5cff; --violet-2: #7c3aed; --magenta: #ff53d4; --ok: #3cf295; --warn: #ffcf4d; --down: #ff4d6d; /* NACHTRAG (23.08.2026, Nutzer-Wunsch "Icons farbig machen"): zwei zusätzliche Akzentfarben, damit nicht jedes Icon nur violett/magenta/ grün/gelb/rot sein muss - passt zum bestehenden Neon-Farbschema. */ --cyan: #4de8ff; --blue: #5b8dff; --radius: 16px; --radius-sm: 11px; --font-display: 'Unbounded', system-ui, sans-serif; --font-body: 'Manrope', system-ui, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; } /* "color-scheme: dark" allein hat NICHT gereicht (von Nutzer per Screenshot bestätigt: Aufklapp-Liste blieb weiß/unlesbar, Browser ignoriert das für die Options-Popup teilweise trotzdem). Bleibt als harmloser Fallback stehen, die eigentliche Lösung ist jetzt customSelect.js - ersetzt die native Aufklapp-Liste komplett durch eine selbst gezeichnete (siehe unten, ".custom-select-*"), auf jeder Seite, die customSelect.js einbindet. */ select { color-scheme: dark; } /* Eigene Dropdown-Liste (customSelect.js) - ersetzt optisch komplett die native bleibt nur unsichtbar für den Formularwert bestehen. */ .custom-select-wrapper { position: relative; } .custom-select-native { position: absolute; inset: 0; opacity: 0; pointer-events: none; } .custom-select-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--surface-strong); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; color: var(--text); font-family: var(--font-body); font-size: 14px; cursor: pointer; text-align: left; margin-top: 4px; } .custom-select-trigger:hover { border-color: var(--border-hover); } .custom-select-trigger.open { border-color: var(--violet); } .custom-select-trigger::after { content: '▾'; color: var(--text-faint); flex-shrink: 0; } /* position/top/left/width hier sind nur der Ausgangswert - sobald die Liste offen ist, hängt sie per JS (customSelect.js -> openList()) direkt an und bekommt eine feste Pixel-Position per Inline-Style, damit sie NICHT mehr vom "overflow: hidden" der .glow-card (oder jeder anderen Karte) abgeschnitten werden kann (Nutzer-Feedback: "kann man nicht alles einsehen"). */ /* NACHTRAG (23.08.2026, Nutzer-Bug "weißer Balken" bei der Musik-Lautstärke): (Lautstärke-Regler auf /panel/music) hatte bisher NIRGENDS im Panel-CSS eine eigene Track-Farbe - nur "accent-color" auf dem Slider selbst (siehe music.html .music-volume-row-Regel). Chrome/Edge färbt per accent-color zwar Thumb + den bereits "gefüllten" Teil links vom Thumb ein, der Rest der Leiste bleibt aber Browser-Standard = fast immer ein helles/weißes Grau, das im dunklen Marken-Look als Fremdkörper auffällt. Fix: Track in beiden Engines (WebKit/Blink + Firefox) explizit auf die Marken-Oberfläche setzen, Thumb im Marken-Verlauf - gilt global für JEDEN Regler im Panel, nicht nur den einen auf der Musik-Seite. */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: transparent; cursor: pointer; } input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 4px; background: var(--surface-strong); border: 1px solid var(--border); } input[type="range"]::-moz-range-track { height: 5px; border-radius: 4px; background: var(--surface-strong); border: 1px solid var(--border); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -6px; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--violet-2)); border: 2px solid var(--text); cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: linear-gradient(135deg, var(--magenta), var(--violet-2)); border: 2px solid var(--text); cursor: pointer; } input[type="range"]::-moz-range-progress { height: 5px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, var(--magenta), var(--violet-2)); } .custom-select-list { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; /* NACHTRAG (17.08.2026, Nutzer-Screenshot "Werbepausen"): war vorher "background: var(--surface-strong)" (nur rgba(255,255,255,0.06), also 94% durchsichtig) - sah bei den meisten Seiten "gut genug" aus, weil meist nur der schlichte Seitenhintergrund dahinterliegt, aber die Liste wird per JS als "Portal" an gehängt und kann dadurch über JEDEM beliebigen Element der Seite aufklappen (hier: direkt über dem lila "Werbepause jetzt starten"-Knopf) - bei 94% Durchsichtigkeit schimmerte der knallige Knopf-Farbverlauf deutlich sichtbar durch die Liste durch (sah aus wie ein kaputtes Stacking, war aber tatsächlich nur fehlende Deckkraft). Jetzt eine echte, praktisch blickdichte Hintergrundfarbe, die weiterhin zum dunklen Violett-Look passt. */ background: #150c29; border: 1px solid var(--border-hover); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 200; max-height: 260px; overflow-y: auto; padding: 4px; } .custom-select-list.open { display: block; } .custom-select-item { padding: 9px 10px; font-size: 14px; color: var(--text); cursor: pointer; border-radius: 6px; } .custom-select-item:hover { background: rgba(255,255,255,0.07); } .custom-select-item.selected { background: rgba(139,92,246,0.22); font-weight: 700; } /* NACHTRAG (17.08.2026, Nutzer-Wunsch "Panel wie NEBULA STREAM CONTROL / NEXUS MOD umbauen") - feines Sternenfeld zusätzlich zum bestehenden Farbverlauf, rein additiv (mehrere kleine radial-gradient-"Sterne" als eigene, sich wiederholende Hintergrund-Ebenen VOR dem bisherigen Farbverlauf, der als letzte/unterste Ebene unverändert bestehen bleibt) - soll den "im Weltraum"-Eindruck der Vorlage verstärken, ohne die bisherige Optik zu ersetzen. */ body { background-color: var(--bg); background-image: radial-gradient(1.4px 1.4px at 40px 60px, rgba(255,255,255,0.5), transparent 60%), radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.32), transparent 60%), radial-gradient(1.4px 1.4px at 260px 40px, rgba(255,255,255,0.4), transparent 60%), radial-gradient(1px 1px at 320px 190px, rgba(255,255,255,0.28), transparent 60%), radial-gradient(1.4px 1.4px at 90px 230px, rgba(255,255,255,0.35), transparent 60%), radial-gradient(1px 1px at 220px 280px, rgba(255,255,255,0.25), transparent 60%), radial-gradient(circle at 20% -10%, #1c0f3a 0%, var(--bg) 55%); background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, no-repeat; background-size: 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 340px 340px, 100% 100%; background-attachment: fixed, fixed, fixed, fixed, fixed, fixed, fixed; color: var(--text); font-family: var(--font-body); padding: 32px 20px 80px; position: relative; } /* ============================================================ Animiertes Hintergrund-Glow (rein additiv, "position: fixed", liegt HINTER allem anderen -- keine bestehende Seite betroffen, einfach zwei langsam driftende, leicht pulsierende Farbflecken für mehr Tiefe/Atmosphäre, statt eines statischen flachen Hintergrunds). ============================================================ */ body::before, body::after { content: ""; position: fixed; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; border-radius: 50%; filter: blur(90px); opacity: 0.22; pointer-events: none; z-index: -1; } body::before { background: var(--violet); top: -14vw; left: -10vw; animation: bgDriftA 26s ease-in-out infinite alternate; } body::after { background: var(--magenta); bottom: -16vw; right: -12vw; animation: bgDriftB 32s ease-in-out infinite alternate; } @keyframes bgDriftA { from { transform: translate(0, 0) scale(1); opacity: 0.18; } to { transform: translate(4vw, 3vw) scale(1.15); opacity: 0.28; } } @keyframes bgDriftB { from { transform: translate(0, 0) scale(1); opacity: 0.16; } to { transform: translate(-3vw, -4vw) scale(1.12); opacity: 0.26; } } @media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } } /* z-index: -1 oben sorgt dafür, dass die Glow-Flecken IMMER hinter allen bisherigen Inhalten (.wrap, .app-shell, ...) liegen, unabhängig von deren eigener Stapelreihenfolge -- rein dekorativ, keine bestehende Seite muss dafür etwas anpassen. */ /* ============================================================ ANIMIERTER HEX-HINTERGRUND (ganzes Panel). NACHTRAG (23.08.2026, Nutzer-Wunsch anhand Referenzbild: "bekommen wir sowas ähnliches aber animiertes im gesammten Panel eingebaut als hintergrund ... Login Wartungsarbeiten im Panel selbst und die anderen seiten"): liegt auf ::before/::after statt auf , weil body::before/::after schon für die beiden Glow-Flecken oben belegt sind - html hatte noch keine eigenen Pseudo-Elemente. Beide sind "position: fixed" + negativer z-index, landen also automatisch HINTER dem propagierten body-Hintergrund (Browser-"Canvas") und hinter allen echten Inhalten, ohne dass irgendeine der ~34 Panel-Seiten (Login, Wartungsseite eingeschlossen, beide laden diese Datei ja bereits) selbst etwas einbauen muss - rein additiv, eine einzige Datei. html::before = das Hex-Waben-Muster selbst (SVG-Kachel, dieselbe violette Randfarbe wie --border), langsam driftend. NACHTRAG (23.08.2026, Nutzer-Feedback "bekommen wir die schrägen striche da weg? sonst sieht es geil aus"): die zusätzlichen diagonalen Cyan/Magenta-Leuchtstreifen (vorher html::after) waren zu auffällig/haben gestört - komplett entfernt, es bleibt nur noch das ruhige, langsam driftende Hex-Muster übrig. ============================================================ */ html::before { content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22138.00%22%20height%3D%2279.67%22%20viewBox%3D%220%200%20138.00%2079.67%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28155%2C92%2C255%2C0.18%29%22%20stroke-width%3D%221.1%22%3E%3Cpath%20d%3D%22M46.00%2C0.00%20L23.00%2C39.84%20L-23.00%2C39.84%20L-46.00%2C0.00%20L-23.00%2C-39.84%20L23.00%2C-39.84%20Z%22%2F%3E%3Cpath%20d%3D%22M115.00%2C39.84%20L92.00%2C79.67%20L46.00%2C79.67%20L23.00%2C39.84%20L46.00%2C0.00%20L92.00%2C0.00%20Z%22%2F%3E%3Cpath%20d%3D%22M184.00%2C0.00%20L161.00%2C39.84%20L115.00%2C39.84%20L92.00%2C0.00%20L115.00%2C-39.84%20L161.00%2C-39.84%20Z%22%2F%3E%3Cpath%20d%3D%22M-23.00%2C39.84%20L-46.00%2C79.67%20L-92.00%2C79.67%20L-115.00%2C39.84%20L-92.00%2C0.00%20L-46.00%2C0.00%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 138px 79.67px; background-repeat: repeat; opacity: 0.9; animation: hexDrift 70s linear infinite; } @keyframes hexDrift { from { background-position: 0 0; } to { background-position: 276px 159.34px; } } @media (prefers-reduced-motion: reduce) { html::before { animation: none; } } a { color: inherit; } .wrap { max-width: 980px; margin: 0 auto; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 20px; margin-bottom: 32px; } .brand .dot { color: var(--magenta); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 18px; /* NACHTRAG (17.08.2026, Redesign): dezenter Tiefen-Schatten in der Marken-Farbe statt eines flachen Kartenrands, passend zum "Glow"-Look der Vorlage - rein additiv, ändert weder Größe noch Abstand. */ box-shadow: 0 22px 50px -34px rgba(139,92,246,0.5); } .card h2 { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--text); } .btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--violet-2), var(--violet)); color: #fff; border: none; border-radius: 999px; padding: 12px 22px; font-family: var(--font-body); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; /* NACHTRAG (17.08.2026, Redesign): leuchtender Knopf-Schatten statt eines flachen Buttons, passend zum "Glow"-Look der Vorlage. */ box-shadow: 0 12px 26px -10px rgba(155,92,255,0.6); /* NACHTRAG (23.08.2026, Nutzer-Feedback "kein Hover", "helle Farben können dunkler sein"): .btn hatte im GESAMTEN Panel bisher gar keine :hover-Regel (Ursache für "da ändert sich nichts"). Jetzt: sanfter Übergang + beim Hover dunkler statt heller (ruhiger fürs Auge), und der Grundverlauf ist jetzt auch im Normalzustand ohnehin schon etwas gedämpfter (dunklerer Ton zuerst statt hellerer). */ transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } /* filter statt background-Überschreibung, weil sehr viele Buttons im Panel ihre Farbe per Inline-style setzen (rot fürs Bannen, "Glas"-Grau fürs Zurücksetzen usw. - grep bestätigt das für clips/livecontrol/modtools/ overlay-layout/overlay-editor). Eine :hover-Regel, die nur "background" setzt, wird von einem Inline-style NIE überschrieben (Inline gewinnt immer) - deshalb hatte bisher NUR ein Teil der Buttons (die ohne Inline- Farbe) überhaupt eine Chance auf Hover, und selbst die hatten keine Regel. "filter" wird dagegen unabhängig von der Hintergrundquelle immer korrekt abgedunkelt (wirkt auch auf den box-shadow-Schein mit) - funktioniert dadurch für WIRKLICH jeden Button im Panel gleich, egal welche Farbe. */ .btn:hover { filter: brightness(0.85); } .btn:active { filter: brightness(0.72); transform: translateY(1px); } .btn.secondary, .btn.btn-ghost { background: var(--surface-strong); border: 1px solid var(--border); color: var(--text); box-shadow: none; } .btn.secondary:hover, .btn.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: var(--border-hover); filter: none; } .btn.secondary:active, .btn.btn-ghost:active { background: rgba(255,255,255,0.05); transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; } /* NACHTRAG (23.08.2026, 3. Runde, Nutzer-Feedback "ich muss dennoch beim Login scrollen"): Ursache gefunden - .login-shell war selbst exakt "min-height:100vh" hoch (füllt den Viewport also schon ganz aus), ABER direkt danach kommt im HTML noch die Copyright-Zeile (.login-copyright) als GESCHWISTER-Element, nicht als Kind - die kommt also oben drauf und macht die Seite insgesamt höher als der Viewport (100vh Shell + Footer- Höhe), man musste also für ein paar Pixel Fußzeile immer scrollen, egal wie klein die Karte selbst war. Fix: body bekommt "auth-page-body" (siehe login.html/maintenance.html), macht body selbst zur festen 100vh-Flexspalte - die Shell füllt darin nur noch den ÜBRIGEN Platz (flex:1 statt eigenem min-height:100vh), der Footer kommt normal darunter, in Summe bleibt alles exakt bei 100vh statt "100vh + Footer". */ body.auth-page-body { display: flex; flex-direction: column; min-height: 100vh; } body.auth-page-body .login-shell { min-height: 0; flex: 1; } .login-shell { display: flex; align-items: center; justify-content: center; text-align: center; /* NACHTRAG (23.08.2026, Nutzer-Wunsch "das man Scrollen muss ... es soll wirklich schön aussehen"): vorher "min-height:80vh" ohne eigenes Padding - auf kleineren Fenstern klebte die Karte fast am Rand. Jetzt echtes 100vh + Innenabstand oben/unten, damit die (jetzt größere) Login-Karte immer Luft hat, egal ob sie ins Fenster passt oder man dafür scrollen muss. */ padding: 40px 20px; min-height: 100vh; } .login-card { position: relative; background: linear-gradient(155deg, rgba(30,14,58,0.55), rgba(10,6,22,0.5)); border: 1px solid var(--border-hover); border-radius: var(--radius); padding: 48px 40px; max-width: 420px; overflow: hidden; } /* Gleicher schimmernder Rand-Verlauf wie bei .glow-card (siehe unten) -- bewusst eine eigene Regel statt die Klasse zu kombinieren, damit das großzügige Login-Padding (48px/40px) unangetastet bleibt. */ .login-card::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius); padding: 1px; background: linear-gradient(120deg, var(--violet), transparent 35%, transparent 65%, var(--magenta)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6; pointer-events: none; } .login-card h1 { font-family: var(--font-display); font-size: 22px; margin-bottom: 10px; } .login-card p { color: var(--text-dim); font-size: 14px; margin-bottom: 28px; line-height: 1.5; } /* Login/Willkommens-Seite als richtige kleine Hero-Fläche statt einer engen Login-Box (siehe Nutzer-Feedback "eine Willkommen Seite wirklich") - eigene Modifier-Klasse auf .login-card, damit die schmale Variante oben (falls sie woanders noch gebraucht wird) unangetastet bleibt. */ /* NACHTRAG (23.08.2026, 2. Runde, Nutzer-Feedback "viel zu groß und der Hintergrund kann transparent sein"): der erste Anlauf (820px, fast blickdichter Glas-Verlauf) war schlicht zu wuchtig für eine Login-Seite - jetzt spürbar kompakter (echte Login-Card-Breite statt Dashboard-Hero) UND der Kartenhintergrund ist jetzt so transparent, dass das animierte Hex-Muster im Hintergrund klar durchscheint statt von einer fast blickdichten Fläche verdeckt zu werden - "backdrop-filter" sorgt trotzdem für genug Kontrast/Lesbarkeit (leichtes Glas, kein Milchglas). */ .login-card.hero { max-width: 460px; padding: 44px 38px; background: rgba(18,10,36,0.3); backdrop-filter: blur(18px) saturate(130%); box-shadow: 0 30px 70px -34px rgba(0,0,0,0.5); } /* NACHTRAG (23.08.2026, 2. Runde): der Glow-Fleck war für die vorherige 820px-Karte bemessen (320px Durchmesser) - auf der jetzt kompakten 460px-Karte eigene, kleinere Maße statt der Dashboard-Größe. */ .login-card.hero .hero-orb { opacity: 0.4; width: 220px; height: 220px; top: -80px; right: -60px; } .login-card.hero .hero-orb::before { width: 150px; height: 150px; top: 24px; left: -36px; } .login-card.hero .hero-orb::after { width: 70px; height: 70px; top: 46px; right: 34px; } /* NACHTRAG (20.08.2026, Logo-Austausch, Nutzer-Wunsch "das Neue log.png soll auch zusehen sein beim Login"): großes Logo-Artwork oben auf der Login-Hero-Karte, mit sanftem violettem Schein passend zum restlichen Glow-Look. */ /* NACHTRAG (23.08.2026, 2. Runde, "viel zu groß"): 128px Logo passte zur 820px-Karte, wirkt auf der jetzt kompakten 460px-Karte überdimensioniert - deutlich kleiner. */ .hero-logo { width: 82px; height: 82px; margin: 0 auto 14px; display: block; object-fit: contain; filter: drop-shadow(0 8px 22px rgba(155,92,255,0.5)); } .hero-kicker { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--magenta); margin-bottom: 10px; } .hero-title { font-family: var(--font-display); font-weight: 800; font-size: 25px; line-height: 1.25; margin-bottom: 10px; } /* NACHTRAG (23.08.2026, "es soll wirklich eine richtige Schöne Anmeldeseite werden"): "Mod-Panel" im Titel als sanfter Verlauf statt einfarbig - ein kleiner Blickfang, ohne dass der ganze Titel schreit. */ .hero-title .accent { background: linear-gradient(120deg, var(--violet), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { color: var(--text-dim); font-size: 13.5px; line-height: 1.55; max-width: 380px; margin: 0 auto 22px; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; } /* NACHTRAG (23.08.2026, Nutzer-Feedback "diese hintergrund farben bei den Icons können weg oder dunkler sein, desweiteren bei dem Twitch/Discord Button auch dunkler"): die vorher knallig-hellen Marken-Buttons (helles Blurple-Blau, magenta/violetter Verlauf) waren zu grell für die sonst dunkle, zurückhaltende Optik der Seite - jetzt dunkle "Glas"-Buttons: dezenter, halbtransparenter Marken-Farbton als Hintergrund + passender Rahmen, Icon/Text in einem helleren Ton derselben Farbe (currentColor färbt das SVG-Icon automatisch mit). Deutlich ruhiger, wirkt trotzdem klar erkennbar als "Discord" bzw. "Twitch" durch Icon-Form + Farbfamilie. */ .btn-brand { padding: 13px 26px; font-size: 14.5px; border: 1px solid transparent; } .btn-brand svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } .btn-discord { background: rgba(88,101,242,0.14); border-color: rgba(88,101,242,0.4); color: #b8beff; box-shadow: none; } .btn-discord:hover { background: rgba(88,101,242,0.22); border-color: rgba(88,101,242,0.6); } .btn-twitch { background: rgba(155,92,255,0.14); border-color: rgba(155,92,255,0.4); color: #d7c2ff; } .btn-twitch:hover { background: rgba(155,92,255,0.22); border-color: rgba(155,92,255,0.6); filter: none; } .hero-hint { font-size: 11.5px; color: var(--text-faint); max-width: 380px; margin: 0 auto 24px; line-height: 1.5; } /* NACHTRAG (23.08.2026, 2. Runde, "viel zu groß"): die vorherige 2x2-Karten- Vorschau (je mit eigener Beschreibungszeile) war der Hauptgrund für die Kartenhöhe - jetzt eine einzige schmale Zeile aus kleinen Icon-Chips, nur Symbol + Name, deutlich kompakter. Eigene Klassen statt .module-card/ .module-icon (die sind fürs eingeloggte Panel gedacht und größer/anders gebaut), damit hier nichts mitgezogen wird, was nicht passt. */ .hero-preview-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .preview-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 999px; padding: 7px 13px 7px 8px; font-size: 12px; font-weight: 600; color: var(--text-dim); } .preview-chip-icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.05); border: 1px solid var(--border); font-size: 12px; flex-shrink: 0; } /* Kleine Willkommens-Kopfzeile ganz oben im Dashboard (index.html) - nach dem Login soll sich die erste Seite nicht wie "einfach nur Dashboard" anfühlen, sondern wie eine echte Begrüßung. Nutzt die vorhandene .glow-card/.kicker-Basis, nur 2 neue Klassen für Titel/Untertext. */ .welcome-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; margin: 5px 0 7px; } .welcome-sub { color: var(--text-dim); font-size: 13.5px; line-height: 1.5; } /* NACHTRAG (23.08.2026, Nutzer-Feedback "sieht nicht mal ansatzweise so aus wie die Vorlage"): dichteres Kachel-Raster - vorher min. 220px, dadurch passten selbst auf breiten Screens oft nur 3-4 Kacheln pro Zeile und viel Luft blieb ungenutzt. Jetzt wie in der "Nexus Mod"-Vorlage: schmalere, kompaktere Kacheln, mehr pro Zeile, weniger Innenabstand/kleinere Schrift - dieselben echten Werte, nur enger zusammengepackt. */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .tile { background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 13px; } .tile .label { color: var(--text-faint); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; } .tile .value { font-family: var(--font-display); font-size: 17px; margin-top: 5px; } .tile.ok .value { color: var(--ok); } .tile.down .value { color: var(--down); } .tile.streamer .value { color: var(--warn); } .topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; } .user { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-dim); } .user img { width: 28px; height: 28px; border-radius: 50%; } /* Dashboard-Module als kompaktes Karten-Grid statt einer langen Liste (Nutzer-Feedback: "sobald man sich eingeloggt hat wird man erschlagen von Infos") -- weniger Zeilen auf einen Blick, klarer scanbar, wirkt nach echtem Dashboard statt einer Linkliste. */ .module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .module-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; } a.module-card:hover { border-color: var(--border-hover); transform: translateY(-2px); } .module-card .module-icon { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--violet), var(--magenta)); display: flex; align-items: center; justify-content: center; font-size: 17px; } .module-card .module-title { font-family: var(--font-display); font-weight: 700; font-size: 13.5px; } .module-card .module-desc { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; } .module-card.soon { opacity: .5; } .module-card.soon .module-icon { background: var(--surface-strong); border: 1px solid var(--border); } /* Live-Übersicht-Kacheln fürs Dashboard (Bans/Timeouts/Subs/Bits/Raids/ Follows, siehe activityLog.js/panelActivityApi.js) - eigene, größere Karten als .module-card, weil hier zusätzlich noch eine kurze Ereignis-Liste reinpasst. */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; } .stat-card { background: var(--surface-strong); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 2px; } /* NACHTRAG (23.08.2026, Nutzer-Frage "wieso is das noch da, hat das überhaupt Sinn?" zur Live-Übersicht): die Karte HAT einen echten Sinn (heutige Aktivität: Follows/Bans/Subs/... - einzige Stelle im Panel, die das zeigt), sah an ruhigen Tagen aber wie eine Wand toter Fläche aus, weil leere Kacheln ("Keine") genauso groß/hell wirkten wie welche mit echten Einträgen. Jetzt spürbar zurückgenommen (dezenter Rahmen, kein Icon-Verlauf, gedämpfter Text) statt gleichwertig neben aktiven Kacheln zu stehen - lenkt den Blick automatisch auf das, was wirklich passiert ist. Panel.js setzt/entfernt ".ok" schon (siehe renderStatCard), hier nur der Gegenpart für den Fall OHNE ".ok". */ .stat-card:not(.ok) { opacity: 0.55; } .stat-card:not(.ok) .stat-icon { background: var(--surface-strong); } /* NACHTRAG (23.08.2026, 3. Runde): war bisher identisch in giveaway.html UND poll.html als eigenes inline