DogFatherGitandClaude Opus 5
1894395d8f
Die "Letzten Ereignisse" im Personen-Bereich fuellten mit 25 Zeilen die
halbe Seite, obwohl sie Nachschlagewerk sind und kein Startbild. Jetzt
stehen nur die vier neuesten da, der Rest kommt auf Knopfdruck.
Der Knopf sagt, was er TUT ("Alle 25 zeigen" / "Nur die letzten 4") und
nennt die Zahl, damit man weiss, was dahintersteckt. Bei hoechstens vier
Eintraegen bleibt er ganz weg -- ein Knopf, der nichts verbirgt, verwirrt
nur. Der Pfeil dreht sich, aria-expanded stimmt.
Gemeinsamer Helfer in kopf.js statt zweimal derselbe Block: Dieselbe
Liste gab es auf der Automationen-Seite ("Zuletzt automatisch passiert"),
die verhaelt sich jetzt genauso. Zugeklappt wird per CSS
([data-klapp="zu"]) statt durch Entfernen von Zeilen -- das Aufklappen
braucht so weder Neuaufbau noch zweite Abfrage.
Der Zuhoerer wird nur einmal gesetzt (die Listen werden bei jeder
Aktualisierung neu aufgebaut), und die Anzahl wird bei jedem Umschalten
frisch gelesen statt in der Fassung des ersten Durchlaufs festzuhaengen.
Geprueft: beide Seiten, Computer und Handy, zweimaliges Hin- und
Herklappen, Gegenprobe mit drei Eintraegen -- server/pruef-protokoll-klappe.mjs
Co-Authored-By: Claude Opus 5 <[email protected]>
167 lines
6.6 KiB
CSS
167 lines
6.6 KiB
CSS
/* ===================================================================
|
|
Personenverwaltung.
|
|
=================================================================== */
|
|
|
|
.person {
|
|
display: grid; gap: 4px 16px; align-items: center;
|
|
grid-template-columns: 1fr auto;
|
|
padding: 14px 16px; margin-bottom: 9px;
|
|
background: rgba(255, 255, 255, .03);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.person[data-aktiv="nein"] { opacity: .58; }
|
|
|
|
.person__name { font-weight: 600; font-size: .98rem; }
|
|
|
|
.person__zeile {
|
|
display: flex; flex-wrap: wrap; gap: 8px;
|
|
margin-top: 2px; font-size: .79rem; color: var(--text-still);
|
|
}
|
|
|
|
.marke-rolle {
|
|
padding: 1px 9px; border-radius: 999px;
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
|
}
|
|
.marke-rolle[data-rolle="admin"] { background: rgba(63, 189, 245, .16); color: #7fd2fb; }
|
|
.marke-rolle[data-rolle="creator"] { background: rgba(138, 118, 255, .16); color: #b3a6ff; }
|
|
.marke-rolle[data-rolle="scout"] { background: rgba(77, 171, 119, .16); color: #79d1a2; }
|
|
|
|
.person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
|
|
|
|
/* ---------- Code-Anzeige ---------------------------------------------- */
|
|
|
|
.code-kasten {
|
|
margin: 0 0 26px; padding: 20px 22px;
|
|
background: linear-gradient(100deg, rgba(63, 189, 245, .12), rgba(138, 118, 255, .09));
|
|
border: 1px solid rgba(63, 189, 245, .5);
|
|
border-radius: var(--radius);
|
|
}
|
|
.code-kasten__schild {
|
|
margin: 0 0 8px; font-size: .78rem; font-weight: 600;
|
|
letter-spacing: .06em; text-transform: uppercase; color: var(--text-leise);
|
|
}
|
|
.code-kasten__code {
|
|
margin: 0 0 12px;
|
|
font-family: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
|
|
font-size: clamp(1.3rem, 3.4vw, 1.9rem); font-weight: 700;
|
|
letter-spacing: .12em; color: #eaf4fd;
|
|
user-select: all; /* ein Klick markiert den ganzen Code */
|
|
word-break: break-all;
|
|
}
|
|
.code-kasten__hinweis { margin: 0 0 14px; font-size: .85rem; color: var(--text-leise); }
|
|
|
|
/* ---------- Protokoll --------------------------------------------------- */
|
|
|
|
.protokoll-block { margin-top: 44px; }
|
|
|
|
/* Das Auf- und Zuklappen selbst steht in start.css (.klapp-kopf,
|
|
.klapp-pfeil, [data-klapp="zu"]) -- es wird auch auf der
|
|
Automationen-Seite gebraucht. */
|
|
|
|
.protokoll-zeile {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: 128px 190px 1fr auto;
|
|
padding: 7px 10px;
|
|
font-size: .8rem; color: var(--text-leise);
|
|
border-bottom: 1px solid rgba(150, 186, 220, .08);
|
|
}
|
|
.protokoll-zeile:first-child { border-top: 1px solid rgba(150, 186, 220, .08); }
|
|
.protokoll-zeit { color: var(--text-still); font-variant-numeric: tabular-nums; }
|
|
.protokoll-ip { color: var(--text-still); font-variant-numeric: tabular-nums; }
|
|
|
|
@media (max-width: 760px) {
|
|
.person { grid-template-columns: 1fr; }
|
|
.person__knoepfe { justify-content: flex-start; margin-top: 10px; }
|
|
.protokoll-zeile { grid-template-columns: 1fr; gap: 2px; padding: 10px; }
|
|
}
|
|
|
|
|
|
/* ---------- Zuständigkeit ------------------------------------------------
|
|
Wer betreut welchen Creator. Bewusst direkt in der Personenzeile und
|
|
nicht auf einer eigenen Seite: Es ist eine Eigenschaft der Person, kein
|
|
eigener Vorgang. */
|
|
.betreuung { display: flex; align-items: center; gap: 9px; margin-top: 9px; flex-wrap: wrap; }
|
|
.betreuung__schild {
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
.betreuung__wahl {
|
|
padding: 6px 10px; min-width: 165px;
|
|
background: rgba(255, 255, 255, .05);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; font-size: .84rem;
|
|
}
|
|
.betreuung__wahl:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .65);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
|
|
}
|
|
|
|
/* ===================================================================
|
|
Rollenwahl (28.08.2026).
|
|
|
|
Ersetzt ein <select>. Bei vier Moeglichkeiten ist eine sichtbare Wahl
|
|
schneller -- und vor allem: Das aufgeklappte Systemmenue laesst sich
|
|
nicht gestalten, es kam in Windows-Weiss daher, mitten in einer
|
|
dunklen Oberflaeche. Hier steht ausserdem gleich dabei, was die Rolle
|
|
bedeutet; das ist bei "Manager" gegen "DogFather" der Unterschied
|
|
zwischen Raten und Wissen.
|
|
=================================================================== */
|
|
|
|
.rollenwahl-block { grid-column: 1 / -1; }
|
|
.rollenwahl {
|
|
display: grid; gap: 8px; margin-top: 2px;
|
|
grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
|
|
}
|
|
|
|
.rollenwahl__knopf {
|
|
--r: var(--text-still);
|
|
display: flex; align-items: flex-start; gap: 12px; text-align: left;
|
|
padding: 12px 14px; cursor: pointer;
|
|
background: linear-gradient(#151d2a, #111925);
|
|
border: 1px solid var(--rand); border-radius: 12px;
|
|
color: var(--text-leise); font: inherit;
|
|
transition: border-color .16s ease, background .16s ease, color .16s ease;
|
|
}
|
|
.rollenwahl__knopf:hover { border-color: rgba(255, 255, 255, .22); color: var(--text); }
|
|
.rollenwahl__knopf:focus-visible {
|
|
outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--r) 32%, transparent);
|
|
}
|
|
|
|
/* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */
|
|
.rollenwahl__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
|
.rollenwahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
|
.rollenwahl__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
|
.rollenwahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
|
|
|
.rollenwahl__knopf[data-an="ja"] {
|
|
color: #fff;
|
|
border-color: color-mix(in srgb, var(--r) 60%, transparent);
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--r) 16%, #151d2a),
|
|
color-mix(in srgb, var(--r) 9%, #111925));
|
|
box-shadow: 0 4px 16px -10px var(--r);
|
|
}
|
|
|
|
.rollenwahl__symbol {
|
|
width: 22px; height: 22px; flex: none; margin-top: 1px;
|
|
fill: none; stroke: var(--r); stroke-width: 1.6;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
.rollenwahl__text { display: grid; gap: 2px; min-width: 0; }
|
|
.rollenwahl__name { font-size: .92rem; font-weight: 650; }
|
|
.rollenwahl__erklaerung { font-size: .76rem; color: var(--text-still); line-height: 1.42; }
|
|
.rollenwahl__knopf[data-an="ja"] .rollenwahl__erklaerung { color: var(--text-leise); }
|
|
|
|
/* Rollenmarke in der Liste bekommt dieselben Farben. */
|
|
.marke-rolle[data-rolle="manager"] {
|
|
color: #b6a9ff; border-color: rgba(138, 118, 255, .42); background: rgba(138, 118, 255, .12);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { .rollenwahl__knopf { transition: none; } }
|
|
|
|
/* Die Betreuungs-Auswahl bleibt ein Systemmenue -- bei wechselnd vielen
|
|
Scouts waere eine feste Schalterreihe unpraktisch. Sie bekommt aber
|
|
genug Breite, damit kein Name abgeschnitten wird. */
|
|
.betreuung__wahl { min-width: 190px; }
|