DogFatherGitandClaude Opus 5
372a0eb95a
Der Wunsch: "der Creator sieht, ob es gut ist oder schlecht. Und wenn nicht gut, dann muss es verbessert werden -- und nur der Ansprechpartner kann das aendern. Die Creator koennen nur Nachrichten hinterlassen zum Kommunizieren." ZWEI GETRENNTE DINGE, und sie getrennt zu halten ist der ganze Punkt: DIE AMPEL ist eine Beurteilung. Sie gehoert dem Betreuer, und nur er setzt sie. Koennte ein Creator sich selbst auf gruen stellen, waere sie wertlos -- dann stuende ueberall gruen. Der Server lehnt es mit 403 ab und sagt dabei, wer es kann. DIE NACHRICHT ist ein Gespraech. Sie gehoert beiden. Ein Creator, der auf eine Bewertung nicht antworten kann, bekommt ein Urteil statt einer Betreuung. DREI STUFEN, NICHT FUENF. Eine Zahl von 1 bis 5 klingt genauer und ist es nicht: Niemand kann den Unterschied zwischen 3 und 4 erklaeren, und am Ende steht ueberall die 3. Die Frage lautet "reicht das schon?", und darauf gibt es drei ehrliche Antworten -- passt so, noch verbessern, noch nicht angesehen. "NOCH VERBESSERN" VERLANGT EINE BEGRUENDUNG. Eine Bewertung, mit der der Creator nichts anfangen kann, ist nicht streng, sondern nur entmutigend. Der Server lehnt sie ohne Grund ab; die Oberflaeche fragt deshalb gleich danach, statt hinterher eine Fehlermeldung zu zeigen. "Passt so" braucht keinen -- da gibt es nichts zu erklaeren. Die Stufe steht IMMER an der Karte, auch fuer den Creator, auch wenn sie "noch nicht angesehen" lautet. Er soll sehen, wo er steht, ohne fragen zu muessen. Der Grund steht daneben in voller Breite, nicht in einer Ecke. FREMDE NACHRICHTEN BLEIBEN STEHEN -- auch fuer DogFather. Ein Gespraech nachtraeglich umzuschreiben waere schlimmer, als eine unbedachte Aeusserung stehen zu lassen. Wer etwas richtigstellen will, schreibt eine neue. VORLAGEN AUCH FUER COMMUNITY UND TECHNIK (Screens 11 und 12): 14 Moderations-, Aktions- und Konfliktpunkte, 12 Technikpunkte. Ton steht vorn, weil schlechter Ton der Grund Nummer eins ist, warum Leute einen Stream verlassen. Die drei Bereiche laufen jetzt ueber EINE Zuordnung statt drei fast gleicher Bloecke -- sonst weicht der dritte irgendwann ab. Die beiden alten Zweige wurden entfernt: Toter Code, den man stehen laesst, wird beim naechsten Mal fuer lebenden gehalten. Die Ampeln einer ganzen Liste kommen in EINER Abfrage. Zwanzig Eintraege einzeln zu fragen waeren zwanzig Anfragen, und die Seite ruckelte sichtbar beim Aufbau. Die Sichtbarkeitspruefung laeuft dabei je Eintrag, nicht einmal pauschal -- ein fremder Eintrag taucht auch in der Sammelabfrage nicht auf. Co-Authored-By: Claude Opus 5 <[email protected]>
306 lines
11 KiB
CSS
306 lines
11 KiB
CSS
/* ===================================================================
|
|
Gemeinsame Ansicht für LIVE, Content, Technik, Community und Schutz.
|
|
=================================================================== */
|
|
|
|
.eintrag-karte {
|
|
padding: 15px 17px; margin-bottom: 10px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.eintrag-karte[data-dringlich="hoch"] { border-left-color: #d8656e; }
|
|
.eintrag-karte[data-dringlich="mittel"] { border-left-color: #4b6c8a; }
|
|
.eintrag-karte[data-dringlich="niedrig"] { border-left-color: #3c4a5a; }
|
|
.eintrag-karte[data-status="erledigt"] { opacity: .55; }
|
|
|
|
.eintrag-kopf {
|
|
display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
|
|
}
|
|
.eintrag-titel { font-weight: 600; font-size: .96rem; flex: 1 1 240px; }
|
|
|
|
.marke-art {
|
|
padding: 1px 9px; border-radius: 999px;
|
|
background: rgba(63, 189, 245, .14); color: #7fd2fb;
|
|
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Bewertung als Punktreihe statt als Zahl -- auf einen Blick erfassbar,
|
|
und ohne Sterne, die im Dunkeln flimmern. */
|
|
.bewertung { display: inline-flex; gap: 3px; align-items: center; }
|
|
.bewertung__punkt {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: rgba(150, 186, 220, .22);
|
|
}
|
|
.bewertung__punkt[data-voll="ja"] { background: var(--akzent); }
|
|
|
|
.eintrag-text {
|
|
margin: 9px 0 0; font-size: .87rem; color: var(--text-leise);
|
|
line-height: 1.55; white-space: pre-wrap;
|
|
}
|
|
|
|
.eintrag-fuss {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-top: 11px; font-size: .77rem; color: var(--text-still);
|
|
}
|
|
.eintrag-knoepfe { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
|
|
|
|
.filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
|
|
.filter .schritt[aria-pressed="true"] {
|
|
/* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
|
|
hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
|
|
--f: var(--akzent);
|
|
color: #fff;
|
|
background:
|
|
linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
|
|
color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
|
|
linear-gradient(150deg, var(--f),
|
|
color-mix(in srgb, var(--f) 45%, transparent)) border-box;
|
|
box-shadow: 0 4px 16px -9px var(--f);
|
|
}
|
|
|
|
|
|
@media (max-width: 620px) {
|
|
.eintrag-knoepfe { margin-left: 0; width: 100%; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
UNTERWEISUNGEN — beidseitig bestaetigen
|
|
|
|
Drei Stufen, drei Farben. Die mittlere ("halb") ist die wichtigste:
|
|
Ein Nachweis, bei dem nur einer unterschrieben hat, ist KEIN Nachweis.
|
|
Wer das nicht sieht, haelt ihn fuer fertig -- und merkt es erst, wenn
|
|
jemand danach fragt. Deshalb bekommt sie eine eigene, warnende Farbe
|
|
und nicht einfach ein blasses Gruen.
|
|
===================================================================== */
|
|
|
|
.schulung { margin: 0 0 30px; }
|
|
.schulung__kopf {
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
|
|
}
|
|
.schulung__unter {
|
|
margin: 4px 0 0; max-width: 68ch;
|
|
font-size: .86rem; line-height: 1.55; color: var(--text-leise);
|
|
}
|
|
.schulung__wahl { display: grid; gap: 4px; min-width: 0; }
|
|
.schulung__liste { display: grid; gap: 11px; }
|
|
|
|
.unterweisung {
|
|
--stufe-ton: var(--text-still);
|
|
position: relative; overflow: hidden;
|
|
padding: 15px 17px 14px;
|
|
border: 1px solid color-mix(in srgb, var(--stufe-ton) 26%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--stufe-ton) 8%, transparent), transparent 55%),
|
|
var(--flaeche);
|
|
}
|
|
.unterweisung::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--stufe-ton),
|
|
color-mix(in srgb, var(--stufe-ton) 30%, transparent));
|
|
}
|
|
.unterweisung[data-stufe="offen"] { --stufe-ton: #6f89a8; }
|
|
/* Bewusst warnend: halb bestaetigt sieht nach fertig aus, ist es aber
|
|
nicht. Diese Verwechslung ist genau die, die einen Nachweis wertlos
|
|
macht. */
|
|
.unterweisung[data-stufe="halb"] { --stufe-ton: #e0a33c; }
|
|
.unterweisung[data-stufe="fertig"] { --stufe-ton: #4dab77; }
|
|
|
|
.unterweisung__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between;
|
|
gap: 14px; margin-bottom: 12px;
|
|
}
|
|
.unterweisung__titel { margin: 0 0 3px; font-size: .98rem; font-weight: 650; color: var(--text); }
|
|
.unterweisung__datei { margin: 0; font-size: .8rem; color: var(--ton, var(--akzent)); }
|
|
.unterweisung__text { margin: 5px 0 0; font-size: .85rem; color: var(--text-leise); }
|
|
.unterweisung__marke {
|
|
flex: none; padding: 3px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--stufe-ton) 36%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--stufe-ton) 12%, transparent);
|
|
color: var(--stufe-ton);
|
|
font-size: .72rem; letter-spacing: .06em;
|
|
}
|
|
|
|
/* Die beiden Unterschriften nebeneinander -- man soll auf einen Blick
|
|
sehen, WER fehlt, nicht nur DASS etwas fehlt. */
|
|
.unterschriften {
|
|
display: grid; gap: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
|
|
margin-bottom: 12px;
|
|
}
|
|
.unterschrift {
|
|
display: grid; gap: 2px;
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--rand); border-radius: 8px;
|
|
background: rgba(0, 0, 0, .18);
|
|
}
|
|
.unterschrift[data-da="ja"] {
|
|
border-color: rgba(80, 167, 130, .32);
|
|
background: rgba(80, 167, 130, .07);
|
|
}
|
|
.unterschrift__wer {
|
|
font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.unterschrift__wann { font-size: .84rem; color: var(--text); }
|
|
.unterschrift[data-da="nein"] .unterschrift__wann { color: var(--text-still); font-style: italic; }
|
|
|
|
.unterweisung__fuss { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.unterweisung__fest { font-size: .82rem; color: #6fbd95; }
|
|
.unterweisung__wartet { font-size: .82rem; color: #e0b45c; }
|
|
/* Ausgetauschtes Dokument: Das ist der einzige Fall, in dem ein
|
|
abgeschlossener Nachweis seinen Wert verliert -- und dann muss es
|
|
auch laut sein. */
|
|
.unterweisung__warnung {
|
|
padding: 3px 10px;
|
|
border: 1px solid rgba(255, 154, 162, .4); border-radius: 999px;
|
|
background: rgba(255, 154, 162, .1);
|
|
color: var(--warn); font-size: .8rem; font-weight: 600;
|
|
}
|
|
|
|
.schulung__neu {
|
|
margin-top: 18px; padding: 16px 17px;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.schulung__neu .neu__raster { margin-top: 12px; }
|
|
.schulung__neu .knopf { margin-top: 12px; }
|
|
|
|
@media (max-width: 560px) {
|
|
.schulung__kopf { flex-direction: column; align-items: stretch; }
|
|
.unterweisung__kopf { flex-direction: column; }
|
|
.unterweisung__marke { align-self: flex-start; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
AMPEL UND RUECKMELDUNG
|
|
|
|
Drei Stufen, drei Farben. Die Stufe steht IMMER da -- auch fuer den
|
|
Creator, auch wenn sie "noch nicht angesehen" lautet. Das ist der
|
|
ganze Sinn: Er soll sehen, wo er steht, ohne fragen zu muessen.
|
|
===================================================================== */
|
|
|
|
.ampel {
|
|
--a-ton: #6f89a8;
|
|
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
|
|
margin-top: 11px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.ampel[data-stufe="gut"] { --a-ton: #4dab77; }
|
|
.ampel[data-stufe="verbessern"] { --a-ton: #e0a33c; }
|
|
.ampel[data-stufe="offen"] { --a-ton: #6f89a8; }
|
|
|
|
.ampel__marke {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
padding: 3px 11px;
|
|
border: 1px solid color-mix(in srgb, var(--a-ton) 38%, transparent);
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--a-ton) 13%, transparent);
|
|
color: var(--a-ton);
|
|
font-size: .76rem; font-weight: 600;
|
|
}
|
|
.ampel__marke::before {
|
|
content: ""; width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--a-ton);
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--a-ton) 70%, transparent);
|
|
}
|
|
.ampel__von { font-size: .76rem; color: var(--text-still); }
|
|
/* Der Grund steht auf einer eigenen Zeile und in voller Breite --
|
|
"noch verbessern" ohne Grund ist nicht umsetzbar, nur entmutigend.
|
|
Deshalb darf er nicht in eine Ecke gequetscht werden. */
|
|
.ampel__grund {
|
|
flex-basis: 100%; margin: 4px 0 0;
|
|
padding: 8px 11px;
|
|
border-left: 2px solid var(--a-ton);
|
|
border-radius: 0 6px 6px 0;
|
|
background: color-mix(in srgb, var(--a-ton) 8%, transparent);
|
|
font-size: .85rem; line-height: 1.5; color: var(--text);
|
|
}
|
|
.ampel .schritt { margin-left: auto; }
|
|
|
|
/* ---------- Der ausgeklappte Bereich ------------------------------------ */
|
|
.rueckmeldung {
|
|
margin-top: 11px; padding: 13px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
.rueckmeldung__hinweis {
|
|
margin: 0 0 12px; font-size: .84rem; color: var(--text-leise);
|
|
}
|
|
.rueckmeldung__bewerten { margin-bottom: 14px; }
|
|
.ampel__wahl { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
|
|
.ampel__knopf {
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .84rem; cursor: pointer;
|
|
transition: border-color .18s ease, color .18s ease, background .18s ease;
|
|
}
|
|
.ampel__knopf[data-stufe="gut"]:hover,
|
|
.ampel__knopf[data-stufe="gut"][data-an="ja"] {
|
|
border-color: rgba(77, 171, 119, .5); color: #6fbd95;
|
|
background: rgba(77, 171, 119, .12);
|
|
}
|
|
.ampel__knopf[data-stufe="verbessern"]:hover,
|
|
.ampel__knopf[data-stufe="verbessern"][data-an="ja"] {
|
|
border-color: rgba(224, 163, 60, .5); color: #e0b45c;
|
|
background: rgba(224, 163, 60, .12);
|
|
}
|
|
|
|
/* ---------- Das Gespraech ------------------------------------------------ */
|
|
.nachrichten { display: grid; gap: 8px; margin-bottom: 12px; }
|
|
.nachrichten__leer { margin: 0; font-size: .84rem; color: var(--text-still); }
|
|
.nachricht {
|
|
padding: 9px 12px;
|
|
border: 1px solid var(--rand); border-radius: 9px;
|
|
background: var(--flaeche);
|
|
}
|
|
/* Eigene Nachrichten heben sich ab -- in einem Gespraech will man auf
|
|
einen Blick sehen, was man selbst gesagt hat. */
|
|
.nachricht[data-eigen="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 26%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
|
|
}
|
|
.nachricht__kopf {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.nachricht__von { font-size: .8rem; font-weight: 650; color: var(--text); }
|
|
.nachricht__wann { font-size: .74rem; color: var(--text-still); }
|
|
.nachricht__weg {
|
|
margin-left: auto;
|
|
width: 24px; height: 24px;
|
|
border: 0; border-radius: 6px;
|
|
background: none; color: var(--text-still);
|
|
font-size: 1rem; line-height: 1; cursor: pointer;
|
|
}
|
|
.nachricht__weg:hover { color: var(--warn); background: rgba(255, 154, 162, .1); }
|
|
.nachricht__text {
|
|
margin: 0; font-size: .87rem; line-height: 1.55; color: var(--text);
|
|
white-space: pre-wrap; overflow-wrap: anywhere;
|
|
}
|
|
|
|
.nachricht-neu { display: grid; gap: 8px; }
|
|
.nachricht-neu textarea {
|
|
width: 100%; resize: vertical; min-height: 44px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--rand); border-radius: 9px;
|
|
background: rgba(0, 0, 0, .25); color: var(--text);
|
|
font: inherit; font-size: .88rem;
|
|
}
|
|
.nachricht-neu textarea:focus {
|
|
outline: none;
|
|
border-color: color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
.nachricht-neu .knopf { justify-self: start; }
|
|
|
|
@media (max-width: 560px) {
|
|
.ampel .schritt { margin-left: 0; }
|
|
.ampel__knopf { flex: 1 1 auto; text-align: center; }
|
|
}
|