/* ========================================================= VANTEX Dashboard-Theme Farben, Abstände, Schriftgrößen, Radien und Bewegung stehen in `static/tokens.css` und werden von `base.html` davor eingebunden – dieselbe Datei nutzt die Verkaufsseite. Hier steht nur, was das Dashboard allein hat: Ebenen, Zustandsflächen, Topbar-Höhe. ========================================================= */ :root { /* ---- Ebenen --------------------------------------------------------- Jede Fläche war `--surface` mit 1 px `--surface-2` – eine Karte in einer Karte war von ihrer Umgebung nicht zu unterscheiden, und die Tiefe kam aus 19 einzeln hingeschriebenen Schatten. Drei Flächen, drei Schatten: `--shadow-1` für Erhebungen im Textfluss, `--shadow-2` für alles, was über dem Inhalt schwebt (Menü, Panel), `--shadow-3` für das, was den Rest verdeckt (Befehlspalette, Dialog). Sie bleiben hier und nicht in `tokens.css`: Tiefe braucht eine Seite, die Karten stapelt – die Verkaufsseite ist eine durchgehende Fläche. */ --surface-sunken: #14141C; /* tiefer: Eingabefelder, Zellen, Log */ --surface-raised: #22222E; /* höher: Karte in Karte, Zeilen, Chips */ --shadow-1: 0 2px 8px rgba(0, 0, 0, .28); --shadow-2: 0 18px 40px rgba(0, 0, 0, .45); --shadow-3: 0 30px 70px rgba(0, 0, 0, .6); /* Der Ring beim Tastaturfokus – dieselbe Stärke überall, sonst wandert das Auge beim Durchtabben. */ --focus-ring: 0 0 0 3px rgba(123, 92, 255, .2); --danger-ring: 0 0 0 3px rgba(239, 68, 68, .2); /* Höhe der Topbar. Alles, was beim Scrollen stehen bleibt (Tabellenkopf, Server-Navigation), setzt darauf auf, sonst verschwände es dahinter. `dashboard.js` misst den echten Wert und schreibt ihn an ``; dieser Vorgabewert gilt ohne JavaScript und ist bewusst großzügig. */ --topbar-h: 76px; /* Einziges Icon, das nicht als Element im Markup steht: es sitzt vor Dateinamen, die auch von JavaScript als reiner Text gesetzt werden (siehe `.ticket-att-link::before` weiter unten). */ --icon-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.4 11.6 12 18a4 4 0 0 1-5.7-5.7l7.4-7.4a2.7 2.7 0 0 1 3.8 3.8l-7.4 7.4a1.35 1.35 0 0 1-1.9-1.9l6.6-6.6'/%3E%3C/svg%3E"); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; font-family: "Raleway", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; } /* Hintergrund Das Foto (`dashboard-bg.jpg`, 125 KB) lag als `cover fixed` unter *jeder* Seite – also auch unter jeder Datentabelle und jedem zwölfteiligen Formular. Ein Foto hinter einer Zahlenkolonne macht die Zahlen nicht schöner, nur unruhiger, und `background-attachment: fixed` lässt mobile Browser bei jedem Scrollschritt neu zeichnen. Der Regelfall ist deshalb ein ruhiger Schimmer in den Markenfarben. Er sitzt auf einer eigenen, fest stehenden Ebene statt am `body`: so wird er einmal gezeichnet und beim Scrollen nicht neu berechnet. Das Foto bleibt dort, wo eine Seite Fläche und keine Daten zeigt – Anmeldung und Serverauswahl (``). */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1100px 620px at 12% -8%, var(--primary-bg-strong), transparent 62%), radial-gradient(900px 520px at 92% 2%, var(--info-bg), transparent 60%); } body.mit-bild::before { /* Dunkles Overlay über dem Foto, damit Karten und Text lesbar bleiben. */ background: linear-gradient(rgba(13, 13, 20, .58), rgba(13, 13, 20, .8)), url("dashboard-bg.jpg") center top / cover no-repeat; } a { color: inherit; text-decoration: none; } /* Icons (siehe templates/_icons.html) Größe und Farbe kommen vom umgebenden Text – ein Icon in einer Überschrift wächst also mit, eines in einem roten Knopf wird rot. `flex: none` hält es davon ab, in Flex-Zeilen zusammengequetscht zu werden. */ .icon { width: 1.05em; height: 1.05em; flex: none; vertical-align: -.16em; } /* `.icon-btn` stand hier, um ein Icon ohne Beschriftung mittig zu setzen. Seit `.btn` selbst `inline-flex` ist, tut das die Basis – die Klasse hatte nur noch eine Aufgabe: die Grundlinienverschiebung des Icons zurückzunehmen, die in einer Flex-Zeile ohnehin nicht greift. */ /* Hinweiszeile mit Warnzeichen: die Farbe schlägt das graue `.subtle` */ .note-warn { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--warning); } /* Topbar */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); background: rgba(26, 26, 36, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--surface-2); position: sticky; top: 0; z-index: 50; } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 800; font-size: var(--fs-md); letter-spacing: .28em; } .brand svg { width: 26px; height: 26px; } .user-box { display: flex; align-items: center; gap: var(--sp-4); } .user-name { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; } /* ------------------------------------------------------------- Inhaltsbreite – zwei, nach dem, was auf der Seite steht Es gab eine: 860 px, ab 1024 px wachsend. Für eine Liste mit sechs Spalten zu wenig, für ein Formular mit einer Spalte zu viel – eine Seite wie „Mein Konto" war auf einem breiten Bildschirm eine 1280 px breite Karte mit einer 460-px-Spalte darin und einer leeren rechten Hälfte. Die Vorgabe ist die **breite** Spalte (Listen, Tabellen, die Konfiguration); Seiten, die nur ein Formular oder einen kurzen Text zeigen, sagen im Template `{% block breite %}container-schmal{% endblock %}`. Eine Seite mit Tabelle darf das nicht – festgehalten in `tests/test_breiten.py`. Der Sprung liegt jetzt auf der Stufe M (900 px) statt auf 1024: dort wird die Server-Navigation zur 210-px-Seitenspalte. Zwischen 900 und 1024 nahm sie dem Inhalt bisher ein Viertel weg, ohne dass die Spalte dafür breiter wurde. `clamp` hält die Untergrenze: die Rechnung darf die Spalte nie schmaler machen als die 860 px darunter. */ .container { max-width: 860px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); } @media (min-width: 900px) { .container { max-width: clamp(860px, calc(100vw - 160px), 1280px); } } /* Ein Formular hat eine Spalte, egal wie breit das Fenster ist. Die Karte hört deshalb bei 620 px auf – und das Formular darin nimmt dann die volle Breite, statt sich ein zweites Mal auf 460 zu begrenzen. Die Regel steht **nach** der Media Query: gleiche Spezifität, spätere Zeile, also gilt sie auch auf breiten Fenstern. */ .container-schmal { max-width: 620px; } .container-schmal .stack-form { max-width: none; } /* Die drei Stufen stehen jetzt wieder auseinander (1.75 / 1.375 / 1.125 rem). Vorher lagen sie bei 1.6 / 1.15 / 1.0 – ein h3 war von Fließtext nur an der Schriftstärke zu erkennen. Große Zeilen brauchen weniger Durchschuss als `body` mit 1.5: sonst fällt eine zweizeilige Überschrift auseinander. */ h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: 0 0 var(--sp-2); font-weight: 800; } h2 { font-size: var(--fs-xl); line-height: 1.25; margin: 0 0 var(--sp-4); font-weight: 800; } h3 { font-size: var(--fs-lg); line-height: 1.3; margin: var(--sp-5) 0 var(--sp-3); font-weight: 700; } .subtle { color: var(--muted); font-size: var(--fs-sm); } /* ------------------------------------------------------------- Knöpfe Hier standen zwei Systeme nebeneinander. `.btn-small` war keine Größe von `.btn`, sondern eine eigenständige Regel weiter unten – 30-mal ohne `.btn` benutzt, `.btn` 25-mal ohne sie. Wo beide zusammentrafen, gewann schlicht die spätere Regel: - `btn btn-ghost btn-small` (8×) bekam von `.btn-small` wieder `border: none` und eine Füllung – der Umriss-Knopf sah aus wie ein gefüllter, „Suche aufheben" wie „Suchen". - `btn btn-primary btn-small` (3×, darunter „Ausführen" in der Mod-Queue) verlor den Verlauf an `.btn-small`s Füllung. Die wichtigste Aktion der Seite sah aus wie eine Nebensache. - `class="btn"` allein (Antwort im Ticket) hatte gar keine Fläche: weiße Schrift auf der grauen Vorgabefläche des Browsers. Jetzt eine Basis und drei Achsen, die sich nicht ins Gehege kommen – Fläche, Größe, Form. Eine Fläche gehört immer dazu: Fläche .btn-primary | .btn-neutral | .btn-ghost | .btn-danger Größe (Vorgabe) | .btn-sm | .btn-lg Form .btn-round (der 22-px-Kreis in Listen) Festgenagelt in `tests/test_knoepfe.py`. */ .btn { /* `inline-flex` statt `inline-block`: der Abstand zwischen Icon und Beschriftung kommt damit aus `gap` und muss nicht als Rand am Icon hängen (das traf sonst auch Icons ohne Beschriftung). */ display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); /* Waagerecht zwei Stufen mehr als senkrecht – ein Knopf mit gleichem Abstand ringsum wirkt gedrungen. */ padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-md); /* Durchsichtige Kante statt gar keiner: sonst wäre der Umriss-Knopf 2 px höher als der gefüllte daneben. */ border: 1px solid transparent; font: inherit; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; white-space: nowrap; cursor: pointer; color: #fff; transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } /* ---- Größe */ .btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-xs); border-radius: var(--radius-sm); } .btn-lg { padding: var(--sp-4) var(--sp-6); font-size: var(--fs-md); } /* ---- Fläche */ .btn-primary { background: var(--grad-text); box-shadow: 0 4px 18px var(--primary-glow); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 26px var(--primary-glow-strong); } /* Der Regelfall in Listen und Tabellen: sichtbar, aber ohne Anspruch auf die Hauptrolle. Das war die Fläche, die `.btn-small` mitbrachte. */ .btn-neutral { background: var(--tint-3); } .btn-neutral:hover { background: var(--tint-4); } .btn-ghost { background: transparent; border-color: var(--surface-2); color: var(--text); } .btn-ghost:hover { border-color: var(--primary); color: var(--link); } .btn-danger { background: var(--danger-fill); } .btn-danger:hover { background: var(--danger-fill-hover); } /* ---- Form: der runde Kleinstknopf am Ende einer Zeile (Wort entfernen, Verwarnung löschen). Kein Platz für Beschriftung, deshalb braucht er ein `aria-label` – geprüft in `tests/test_barrierefreiheit.py`. */ .btn-round { width: 22px; height: 22px; padding: 0; border-radius: 50%; font-size: var(--fs-2xs); } .btn-round .icon { width: 12px; height: 12px; } /* Ein Knopf, der nicht kann, hebt sich auch nicht an. */ .btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; } .btn:disabled:hover, .btn[disabled]:hover { transform: none; } /* Rückmeldungen nach einer Aktion Die Kategorie (success / error / warning / info) steuert Farbe und Zeichen. `.flash` ohne Kategorie bleibt grün – so sehen die fest im Template stehenden Hinweisbanner aus, die keine Aktionsmeldung sind. */ .flash { display: flex; align-items: flex-start; gap: var(--sp-3); background: var(--success-bg); border: 1px solid var(--success); color: var(--success); font-weight: 600; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); margin-bottom: var(--sp-3); } .flash-text { flex: 1; min-width: 0; word-break: break-word; } .flash-icon { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 800; /* Gefüllter Kreis in der Farbe der Kategorie … */ background: currentColor; } /* … das Zeichen darin in der Hintergrundfarbe ausgestanzt. Die Farbe muss am ::before hängen: auf dem Kreis selbst würde sie `currentColor` und damit auch dessen Füllung überschreiben. */ .flash-icon::before { content: "i"; color: var(--bg); } .flash-success { background: var(--success-bg); border-color: var(--success); color: var(--success); } .flash-success .flash-icon::before { content: "✓"; } .flash-error { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-text); } .flash-error .flash-icon::before { content: "✕"; } .flash-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); } .flash-warning .flash-icon::before { content: "!"; } .flash-info { background: var(--info-bg); border-color: var(--secondary); color: var(--secondary); } .flash-close { flex: none; border: none; background: none; color: inherit; opacity: .55; font-size: 1.25rem; line-height: 1; padding: 0 var(--sp-0); cursor: pointer; } .flash-close:hover { opacity: 1; } /* Ohne JavaScript hat der Knopf keine Wirkung – dann gar nicht erst zeigen */ html:not(.js) .flash-close { display: none; } /* Erfolgsmeldungen blenden sich nach ein paar Sekunden selbst aus */ .flash.is-fading { opacity: 0; transition: opacity var(--motion-slow) var(--ease); } /* Login */ .login-card { max-width: 420px; margin: var(--sp-8) auto; text-align: center; background: var(--surface); padding: var(--sp-6); border-radius: var(--radius-lg); border: 1px solid var(--surface-2); box-shadow: var(--shadow-2); } /* Bot-Status (Heartbeat) */ .status-card { display: flex; align-items: center; gap: var(--sp-4); background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); } .status-card.status-online { border-color: var(--success-border); } .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); flex-shrink: 0; } .status-online .status-dot { background: var(--success); box-shadow: 0 0 10px var(--success); } .status-offline .status-dot { background: var(--danger); box-shadow: 0 0 8px rgba(239, 68, 68, .6); } .status-head { display: flex; flex-direction: column; } .status-head strong { font-size: var(--fs-md); } .status-label { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; } .status-online .status-label { color: var(--success); } .status-offline .status-label { color: var(--danger-text); } .status-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-left: auto; color: var(--muted); font-size: var(--fs-sm); } .status-metrics span { display: inline-flex; align-items: center; gap: var(--sp-2); } /* Guild grid */ .guild-section { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-6) 0 0; font-size: var(--fs-lg); } .guild-count { background: var(--surface-2); color: var(--muted); border-radius: var(--radius-pill); padding: 1px var(--sp-2); font-size: var(--fs-xs); font-weight: 700; } .guild-section-hint { margin: var(--sp-2) 0 0; } .guild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); } /* Die ganze Karte ist der Link – gleiche Höhe je Reihe, Knopf unten bündig, damit lange Servernamen die Reihe nicht verspringen lassen. */ .guild-card { display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: var(--sp-5) var(--sp-4) var(--sp-4); text-align: center; color: var(--text); transition: transform var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } /* Kopfband hinter dem Serverbild. Vorher waren die Karten eine gleichmäßig graue Fläche mit einem Kreis darauf – dieselbe Fläche, derselbe Rand, zwölfmal nebeneinander. Das Band gibt der Karte oben und unten, statt sie nur zu füllen; es liegt hinter dem Inhalt und ist beim Zeigen deutlicher. */ .guild-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 64px; background: linear-gradient(var(--primary-bg), transparent); transition: opacity var(--motion-fast) var(--ease); opacity: .7; } .guild-card > * { position: relative; } .guild-card:hover { transform: translateY(-2px); border-color: var(--primary-border); box-shadow: var(--shadow-2); color: var(--text); } .guild-card:hover::before { opacity: 1; } .guild-icon { margin-bottom: var(--sp-3); line-height: 0; } /* Der Ring hebt das Serverbild vom Kopfband ab – gerade dunkle Logos verschwammen sonst damit. */ .guild-icon .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--primary-border); } .guild-name { font-weight: 700; margin-bottom: var(--sp-4); word-break: break-word; line-height: 1.3; } /* Knopf-Optik ohne eigenes (die Karte ist bereits der Link) */ .guild-cta { margin-top: auto; width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 700; border: 1px solid var(--surface-2); color: var(--muted); } .guild-cta-open { background: var(--grad-text); border-color: transparent; color: #fff; } .guild-card:hover .guild-cta { border-color: var(--primary); color: var(--text); } .guild-card:hover .guild-cta-open { color: #fff; } /* Server ohne Bot treten zurück, bleiben aber lesbar. Der gestrichelte Rand sagt „hier fehlt noch etwas" – deutlicher als eine bloß blassere Karte, die man für einen Ladezustand halten kann. Kein Kopfband, kein Schatten: die Karte liegt noch nicht auf der Seite. */ .guild-card-invite { background: transparent; border-style: dashed; box-shadow: none; } .guild-card-invite::before { display: none; } .guild-card-invite .avatar { opacity: .7; box-shadow: none; } .guild-card-invite:hover { box-shadow: var(--shadow-1); } .guild-card-invite:hover .avatar { opacity: 1; } .empty { text-align: center; margin-top: var(--sp-8); color: var(--muted); } /* ------------------------------------------------------------- Seitenkopf: Krümelpfad und Überschrift (`_seitenkopf.html`) Vorher: ein einzelner Rückweg und darunter eine `

` mit dem Namen des Servers – auf 22 Seiten dieselbe. Der Pfad sagt beides zugleich: wo man ist und wie man stufenweise zurückkommt. Er steht **über** der Überschrift und ist leise: er ist Orientierung, nicht Inhalt. Die Stufen tragen keine Linkfarbe, sondern werden erst beim Zeigen deutlich – dieselbe Zurückhaltung wie beim Personen-Link. ------------------------------------------------------------- */ .seitenkopf { margin-bottom: var(--sp-5); } .kruemel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); } .kruemel a { color: var(--muted); } .kruemel a:hover { color: var(--link); } /* Das Trennzeichen steht noch leiser als die Stufen: es trägt keine Bedeutung, es hält sie auseinander. */ .kruemel-trenner { color: var(--surface-2); } /* Die Zahl neben der Überschrift (vorher ein Abzeichen in der `

` der Karte darunter): sie gehört zur Überschrift, ist aber nicht die Überschrift. */ .seitenkopf-zusatz { margin-left: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; color: var(--muted); } /* ------------------------------------------------------------- Kartenkopf: Überschrift links, Zusatz rechts Dieselbe Zeile war dreimal beschrieben – `.chart-head`, `.setup-head` und `.keys-head`, jede mit eigenem `gap` (8 / 12 / 12 px) und eigener Ausrichtung. Nebeneinander sah man den Unterschied nicht, hintereinander schon: die Überschrift der Statistik saß zwei Pixel anders als die der Einrichtung. Dazu ein `style="margin:0"` von Hand im Template, weil `h2` seinen unteren Abstand mitbrachte. Gezeichnet wird der Kopf über `kartenkopf()` aus `_karte.html`; wer eine neue Karte mit Zusatz baut, soll nicht wieder `.foo-head` erfinden. ------------------------------------------------------------- */ .card-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-4); } /* Der Abstand nach unten gehört jetzt dem Kopf, nicht der Überschrift – sonst schöbe die Überschrift die Zeile auseinander, in der sie steht. */ .card-head h2 { margin: 0; } .card-head h2 .icon { margin-right: var(--sp-2); } /* Was rechts steht, ist der leisere Teil: Legende, Zähler, Zeitraum. Die Farbe hing vorher an `.chart-legend` bzw. `.setup-count` – zwei Klassen für dieselbe Rolle. Wer lauter sein muss (die aktive Zeitraum-Pille), sagt es selbst. */ .card-head-neben { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); color: var(--muted); font-size: var(--fs-xs); } .card { background: var(--surface); border: 1px solid var(--surface-2); border-radius: var(--radius-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); /* Die Karte liegt auf der Seite, sie ist nicht Teil von ihr. Bisher trug das allein die 1-px-Kante – auf dem Hintergrundbild war sie oft kaum auszumachen. */ box-shadow: var(--shadow-1); } /* Karte in einer Karte: die innere trägt keinen zweiten Schatten, sondern die höhere Fläche. Zwei Schatten übereinander sehen aus wie ein Fehler. */ .card .card { box-shadow: none; background: var(--surface-raised); } /* ------------------------------------------------------------- Formulare: ein Stapel, ein Feld, eine Reihe Es waren drei Systeme für dieselbe Sache „Beschriftung über dem Feld": `.fields` mit `.field`-Blöcken (4 Templates), `.stack-form` mit umschließenden `