DogFatherGitandClaude Opus 5
953c3f5721
Der Server konnte seit gestern rechnen -- und niemand konnte etwas
eintragen. Ein Rechenwerk ohne Oberflaeche ist kein Modul, sondern ein
Versprechen. Das ist jetzt eingeloest:
* leistung.html: Wochenkarten (Wert, Vergleich zur Vorwoche,
Verlaufslinie), Ziele als Fortschrittsbalken, die letzten 14 Tage
zum Eintragen -- auch die LEEREN, denn eine Luecke ist selbst die
Auskunft. Import aus dem TikTok-Export mit Vorschau VOR dem
Schreiben.
* Kachel "Zahlen" als erste der Gruppe "Rund um den Creator", eigenes
Zeichen (steigende Linie, kein zweites Balkendiagramm).
* Dashboard: jede Creator-Karte traegt jetzt Diamanten, LIVE-Tage und
Verweildauer. Bis heute zeigte sie ausschliesslich ARBEIT -- ein
Creator konnte null ueberfaellige Aufgaben haben und gleichzeitig
seit drei Wochen einbrechen, und die Karte sah tadellos aus.
* Die Fruehwarnung steht oben im Dashboard. Sechs benannte Signale im
Klartext mit Beleg, bewusst OHNE Punktzahl -- ein Wert wie
"Abwanderungsrisiko 73" klingt nach Wissenschaft und ist eine
Behauptung, der man nicht widersprechen kann.
* chat.html?mit=<person>: der Weg von der Warnung ins Gespraech. Gab
es vorher nicht; ein Hinweis ohne Weg dahin ist nur ein schlechtes
Gewissen.
GEFUNDEN VON DEN PRUEFUNGEN, nicht von der Theorie:
1. Die Verlaufslinie zeichnete fuer vier der sieben Groessen NICHTS.
Der Server liefert im Verlauf nur drei Reihen; fuer den Rest kam
undefined an. `=== null` faengt das nicht, Number(undefined) ist
NaN, und ein <polyline points="NaN,NaN"> ist im DOM vorhanden und
auf dem Bildschirm unsichtbar -- ohne Fehlermeldung. Die Pruefung
misst deshalb die PUNKTE, nicht die Anwesenheit des Elements.
2. Fuenf Schriftgroessen im CHAT lagen unter 11,5 px (.68/.7 rem) und
waren seit vorgestern drin. Die Grundlinie der Groessenpruefung
stand auf 43, gemessen wurden 48. Nicht die Grundlinie angehoben,
sondern die fuenf Stellen behoben: Eine Grundlinie, die mitwaechst,
ist keine mehr.
pruef-leistung-optik.mjs: 57 Pruefungen, zwei echte Browser, Gegenprobe
zu jeder Aussage -- auch dazu, dass die Vorschau vor dem Bestaetigen
wirklich noch nichts geschrieben hat und dass ein Creator seine Zahlen
zwar SIEHT, sie aber weder eintragen noch die Fruehwarnung ueber sich
lesen kann (auch nicht ueber eine von Hand gebaute Anfrage).
Co-Authored-By: Claude Opus 5 <[email protected]>
483 lines
18 KiB
CSS
483 lines
18 KiB
CSS
/* =====================================================================
|
|
chat.css — Gespräche im Workspace.
|
|
|
|
Wunsch Filipe, 06.09.2026: *"richtig krass, richtig hochwertig,
|
|
professionell und ultra geil."*
|
|
|
|
WAS DAS HIER HEISST — und was nicht:
|
|
|
|
Nicht mehr Effekte. Ein Chat wird täglich benutzt und oft lange
|
|
angesehen; was beim ersten Blick beeindruckt, stört beim hundertsten.
|
|
Die Wirkung kommt aus vier Dingen:
|
|
|
|
1. EINE FLÄCHE, kein scrollendes Dokument. Die Seite hat die Höhe
|
|
des Fensters, gescrollt wird nur INNERHALB der Spalten. Das
|
|
Eingabefeld steht immer an derselben Stelle -- man muss es nie
|
|
suchen.
|
|
2. RUHE IM VERLAUF. Fast schwarzer Grund, die eigenen Nachrichten
|
|
in einem gedeckten Blau, fremde in einem neutralen Grau. Kein
|
|
Farbverlauf in der Blase; er macht Text unruhig zu lesen.
|
|
3. GRUPPIERUNG. Mehrere Nachrichten derselben Person rücken
|
|
zusammen und wiederholen den Namen nicht. Ein Datumstrenner
|
|
gliedert den Verlauf.
|
|
4. GENUG LUFT. Zeilenhöhe 1.5, Blasen mit ordentlichem Innenabstand.
|
|
Enge sieht auf einem Bildschirmfoto ordentlich aus und liest
|
|
sich schlecht.
|
|
|
|
Augenschonend ist Hausregel: keine harten Weißflächen, keine
|
|
Neonränder, Bewegung nur als kurze Blende.
|
|
===================================================================== */
|
|
|
|
/* ---------- Die Fläche --------------------------------------------------- */
|
|
|
|
.chat-seite {
|
|
/* Der Rest des Hauses scrollt; hier soll die Seite stehen.
|
|
|
|
100dvh statt 100vh: Auf dem Handy ändert sich die sichtbare Höhe,
|
|
wenn die Adresszeile ein- und ausfährt -- mit vh springt das
|
|
Eingabefeld dabei aus dem Bild.
|
|
|
|
--kopf-hoehe WIRD GEMESSEN, nicht geraten (chat.js). Der erste
|
|
Entwurf hatte hier 62 px stehen; am Handy ist die Kopfleiste aber
|
|
zweizeilig und gut doppelt so hoch. Folge: Die Seite war zu lang,
|
|
und das Eingabefeld stand halb unterhalb des Bildschirmrands --
|
|
ausgerechnet das Feld, um das es geht. Der Rückfallwert bleibt
|
|
stehen für den Moment vor der ersten Messung. */
|
|
height: calc(100dvh - var(--kopf-hoehe, 62px));
|
|
display: flex; flex-direction: column;
|
|
padding-bottom: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat {
|
|
flex: 1;
|
|
min-height: 0; /* sonst wächst das Raster über die Fläche */
|
|
display: grid;
|
|
grid-template-columns: minmax(240px, 320px) 1fr;
|
|
gap: 0;
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
background:
|
|
radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), transparent 55%),
|
|
var(--flaeche);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.chat__spalte {
|
|
display: flex; flex-direction: column;
|
|
min-height: 0; min-width: 0;
|
|
}
|
|
/* Der Trenner zwischen Liste und Verlauf. Läuft oben und unten aus --
|
|
eine durchgehende Linie zerschneidet die Kachel in zwei. */
|
|
.chat__spalte--verlauf { position: relative; }
|
|
.chat__spalte--verlauf::before {
|
|
content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px;
|
|
background: linear-gradient(180deg,
|
|
transparent, var(--rand-hell) 15%, var(--rand-hell) 85%, transparent);
|
|
}
|
|
|
|
.chat__kopf {
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 15px 17px;
|
|
border-bottom: 1px solid var(--rand);
|
|
flex: none;
|
|
}
|
|
.chat__kopf-text { min-width: 0; }
|
|
.chat__titel {
|
|
margin: 0;
|
|
font-size: 1.02rem; font-weight: 650; color: var(--text);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.chat__unter {
|
|
margin: 2px 0 0;
|
|
font-size: .78rem; color: var(--text-still);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.chat__kopf .knopf { margin-left: auto; flex: none; }
|
|
|
|
/* Der Zurück-Pfeil gehört dem Handy. Am Rechner stehen beide Spalten
|
|
nebeneinander, da gibt es nichts, wohin man zurückkönnte. */
|
|
.chat__zurueck {
|
|
display: none;
|
|
flex: none;
|
|
width: 34px; height: 34px;
|
|
align-items: center; justify-content: center;
|
|
border: 1px solid var(--rand); border-radius: 10px;
|
|
background: rgba(255, 255, 255, .04);
|
|
color: var(--text-leise); cursor: pointer;
|
|
}
|
|
.chat__zurueck svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
|
|
.chat__zurueck:hover { color: var(--text); border-color: var(--rand-hell); }
|
|
|
|
.chat__suche { padding: 10px 14px 4px; flex: none; }
|
|
.chat__suche input { width: 100%; }
|
|
|
|
.chat__leer {
|
|
margin: 0; padding: 20px 18px;
|
|
font-size: .86rem; color: var(--text-still); line-height: 1.55;
|
|
}
|
|
|
|
/* ---------- Links: die Gespräche ----------------------------------------- */
|
|
|
|
.chat__liste {
|
|
flex: 1; min-height: 0;
|
|
overflow-y: auto;
|
|
margin: 0; padding: 8px; list-style: none;
|
|
display: grid; gap: 3px; align-content: start;
|
|
}
|
|
|
|
.chat-raum__knopf {
|
|
--r: var(--akzent);
|
|
width: 100%;
|
|
display: grid; grid-template-columns: auto 1fr auto;
|
|
align-items: center; gap: 11px;
|
|
padding: 10px 11px;
|
|
border: 1px solid transparent; border-radius: 12px;
|
|
background: transparent;
|
|
color: inherit; font: inherit; text-align: left; cursor: pointer;
|
|
transition: background .16s ease, border-color .16s ease;
|
|
}
|
|
.chat-raum__knopf:hover { background: rgba(255, 255, 255, .04); }
|
|
.chat-raum__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
|
|
/* Das offene Gespräch bleibt sichtbar markiert -- sonst weiß man nach
|
|
dem Scrollen nicht mehr, wo man ist. */
|
|
.chat-raum[data-offen="ja"] .chat-raum__knopf {
|
|
background: color-mix(in srgb, var(--akzent) 11%, transparent);
|
|
border-color: color-mix(in srgb, var(--akzent) 32%, transparent);
|
|
}
|
|
|
|
.chat-raum__zeichen {
|
|
flex: none;
|
|
width: 38px; height: 38px; border-radius: 50%;
|
|
display: grid; place-items: center;
|
|
font-size: .82rem; font-weight: 700;
|
|
color: var(--r);
|
|
background: color-mix(in srgb, var(--r) 13%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
|
|
}
|
|
/* Dieselben Rollenfarben wie überall im Haus. */
|
|
.chat-raum__zeichen[data-rolle="admin"] { --r: #e8c07d; }
|
|
.chat-raum__zeichen[data-rolle="manager"] { --r: #8a76ff; }
|
|
.chat-raum__zeichen[data-rolle="scout"] { --r: #5fc99a; }
|
|
.chat-raum__zeichen[data-rolle="creator"] { --r: #3fbdf5; }
|
|
/* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der
|
|
Gruppe steht ohnehin daneben. */
|
|
.chat-raum__zeichen[data-gruppe="ja"] {
|
|
--r: #a0aec4;
|
|
border-radius: 12px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.chat-raum__mitte { min-width: 0; }
|
|
.chat-raum__oben { display: flex; align-items: baseline; gap: 8px; }
|
|
.chat-raum__name {
|
|
flex: 1; min-width: 0;
|
|
font-size: .89rem; font-weight: 600; color: var(--text-leise);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.chat-raum__zeit {
|
|
flex: none;
|
|
font-size: .75rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.chat-raum__vorschau {
|
|
display: block; margin-top: 2px;
|
|
font-size: .78rem; color: var(--text-still);
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.chat-raum__vorschau[data-weg="ja"] { font-style: italic; opacity: .8; }
|
|
|
|
/* Ungelesen: die Zahl UND ein kräftigerer Name. Nur eine Zahl übersieht
|
|
man beim Überfliegen. */
|
|
.chat-raum[data-neu="ja"] .chat-raum__name { color: var(--text); font-weight: 700; }
|
|
.chat-raum[data-neu="ja"] .chat-raum__vorschau { color: var(--text-leise); }
|
|
.chat-raum__zahl {
|
|
flex: none;
|
|
min-width: 21px; height: 21px; padding: 0 6px;
|
|
display: grid; place-items: center;
|
|
border-radius: 999px;
|
|
font-size: .72rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
color: #0b0f16;
|
|
background: var(--akzent);
|
|
}
|
|
|
|
/* ---------- Rechts: der Verlauf ------------------------------------------ */
|
|
|
|
.chat__verlauf {
|
|
flex: 1; min-height: 0;
|
|
overflow-y: auto;
|
|
padding: 18px 18px 8px;
|
|
display: flex; flex-direction: column; gap: 3px;
|
|
/* Ein weicher Schleier am oberen Rand: Der Verlauf scrollt unter den
|
|
Kopf, statt an einer harten Kante abgeschnitten zu wirken. */
|
|
mask-image: linear-gradient(180deg, transparent, #000 14px);
|
|
}
|
|
|
|
/* KURZE GESPRÄCHE LIEGEN UNTEN AN.
|
|
|
|
Bei drei Nachrichten standen sie oben, und darunter klaffte der halbe
|
|
Bildschirm -- man sucht die neueste dann am falschen Ende. Jeder
|
|
Messenger legt sie ans untere Ende, direkt über das Eingabefeld, und
|
|
das ist kein Geschmack: Dort schaut man hin, wenn man antworten will.
|
|
|
|
`margin-top: auto` auf dem ERSTEN Kind statt `justify-content:
|
|
flex-end` am Behälter. Der naheliegende Weg hat einen bekannten
|
|
Haken: In einem scrollbaren Flex-Behälter wird der obere Teil damit
|
|
unerreichbar, sobald der Inhalt überläuft -- man käme an die ältesten
|
|
Nachrichten nicht mehr heran. */
|
|
.chat__verlauf > :first-child { margin-top: auto; }
|
|
|
|
/* Der Datumstrenner. */
|
|
.chat-tag {
|
|
display: flex; align-items: center; gap: 10px;
|
|
margin: 14px 0 10px;
|
|
color: var(--text-still);
|
|
}
|
|
.chat-tag::before, .chat-tag::after {
|
|
content: ""; flex: 1; height: 1px;
|
|
background: linear-gradient(90deg, transparent, var(--rand-hell), transparent);
|
|
}
|
|
.chat-tag__text {
|
|
flex: none;
|
|
font-size: .72rem; font-weight: 700;
|
|
letter-spacing: .07em; text-transform: uppercase;
|
|
}
|
|
|
|
.chat-nachricht {
|
|
display: grid;
|
|
grid-template-columns: 30px 1fr;
|
|
gap: 9px;
|
|
align-items: flex-end;
|
|
max-width: 76%;
|
|
margin-top: 9px;
|
|
}
|
|
/* Folgt eine Nachricht derselben Person, rückt sie näher und lässt den
|
|
Kreis weg -- der Platz bleibt frei, damit die Blasen fluchten. */
|
|
.chat-nachricht[data-folge="ja"] { margin-top: 2px; }
|
|
.chat-nachricht[data-selbst="ja"] {
|
|
grid-template-columns: 1fr;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.chat-nachricht__zeichen {
|
|
--r: #a0aec4;
|
|
grid-column: 1;
|
|
width: 30px; height: 30px; border-radius: 50%;
|
|
display: grid; place-items: center;
|
|
font-size: .75rem; font-weight: 700;
|
|
color: var(--r);
|
|
background: color-mix(in srgb, var(--r) 13%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--r) 28%, transparent);
|
|
}
|
|
.chat-nachricht__zeichen[data-rolle="admin"] { --r: #e8c07d; }
|
|
.chat-nachricht__zeichen[data-rolle="manager"] { --r: #8a76ff; }
|
|
.chat-nachricht__zeichen[data-rolle="scout"] { --r: #5fc99a; }
|
|
.chat-nachricht__zeichen[data-rolle="creator"] { --r: #3fbdf5; }
|
|
/* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */
|
|
.chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; }
|
|
|
|
.chat-nachricht__blase {
|
|
grid-column: 2;
|
|
padding: 10px 13px 7px;
|
|
border: 1px solid var(--rand);
|
|
border-radius: 14px 14px 14px 4px;
|
|
background: rgba(255, 255, 255, .045);
|
|
min-width: 0;
|
|
}
|
|
.chat-nachricht[data-folge="ja"] .chat-nachricht__blase { border-radius: 14px 14px 14px 8px; }
|
|
|
|
/* Die eigenen: gedecktes Blau, Ecke rechts. Kein Verlauf in der Fläche
|
|
-- Text auf einem Farbverlauf liest sich unruhig. */
|
|
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase {
|
|
grid-column: 1;
|
|
border-radius: 14px 14px 4px 14px;
|
|
background: color-mix(in srgb, var(--akzent) 16%, transparent);
|
|
border-color: color-mix(in srgb, var(--akzent) 30%, transparent);
|
|
}
|
|
.chat-nachricht[data-selbst="ja"][data-folge="ja"] .chat-nachricht__blase {
|
|
border-radius: 14px 14px 8px 14px;
|
|
}
|
|
|
|
.chat-nachricht__von {
|
|
margin: 0 0 3px;
|
|
font-size: .74rem; font-weight: 700;
|
|
color: color-mix(in srgb, var(--text-leise) 85%, transparent);
|
|
}
|
|
.chat-nachricht__text {
|
|
margin: 0;
|
|
font-size: .92rem; color: var(--text);
|
|
/* pre-wrap: Zeilenumbrüche aus der Eingabe bleiben erhalten, ohne
|
|
dass dafür HTML erzeugt werden müsste (das wäre der Weg, über den
|
|
jemand Auszeichnung einschleust). */
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere; /* eine lange Adresse sprengt nichts */
|
|
line-height: 1.5;
|
|
}
|
|
.chat-nachricht__weg { color: var(--text-still); font-style: italic; }
|
|
.chat-nachricht[data-weg="ja"] .chat-nachricht__blase {
|
|
background: transparent;
|
|
border-style: dashed;
|
|
}
|
|
|
|
.chat-nachricht__fuss {
|
|
display: flex; align-items: center; gap: 9px;
|
|
margin-top: 4px;
|
|
}
|
|
.chat-nachricht__zeit {
|
|
font-size: .75rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Der Zurücknehmen-Knopf erscheint erst beim Darüberfahren -- er ist
|
|
die seltene Handlung und soll nicht in jeder Zeile mitlaufen. Auf
|
|
Geräten ohne Zeiger steht er immer da (siehe unten). */
|
|
.chat-nachricht__weg-knopf {
|
|
padding: 0; border: 0; background: none;
|
|
font: inherit; font-size: .75rem;
|
|
color: var(--text-still); cursor: pointer;
|
|
opacity: 0; transition: opacity .16s ease, color .16s ease;
|
|
}
|
|
.chat-nachricht:hover .chat-nachricht__weg-knopf,
|
|
.chat-nachricht__weg-knopf:focus-visible { opacity: 1; }
|
|
.chat-nachricht__weg-knopf:hover { color: var(--warn); }
|
|
|
|
/* Unterwegs und gescheitert -- der Unterschied muss sichtbar sein. */
|
|
.chat-nachricht__blase:has(+ *) { /* Platzhalter, damit :has unterstützt bleibt */ }
|
|
|
|
/* ---------- Das Eingabefeld ---------------------------------------------- */
|
|
|
|
.chat__eingabe {
|
|
flex: none;
|
|
display: flex; align-items: flex-end; gap: 10px;
|
|
padding: 12px 14px 14px;
|
|
border-top: 1px solid var(--rand);
|
|
background: rgba(0, 0, 0, .2);
|
|
}
|
|
.chat__eingabe-schild {
|
|
position: absolute; width: 1px; height: 1px; margin: -1px;
|
|
overflow: hidden; clip-path: inset(50%); white-space: nowrap;
|
|
}
|
|
.chat__eingabe textarea {
|
|
flex: 1; min-width: 0;
|
|
resize: none;
|
|
min-height: 42px; max-height: 160px;
|
|
line-height: 1.5;
|
|
}
|
|
.chat__senden {
|
|
flex: none;
|
|
width: 42px; height: 42px;
|
|
display: grid; place-items: center;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
border-radius: 12px;
|
|
background: color-mix(in srgb, var(--akzent) 18%, transparent);
|
|
color: color-mix(in srgb, var(--akzent) 55%, #ffffff);
|
|
cursor: pointer;
|
|
transition: background .16s ease, color .16s ease;
|
|
}
|
|
.chat__senden svg { width: 20px; height: 20px; fill: currentColor; }
|
|
.chat__senden:hover {
|
|
background: color-mix(in srgb, var(--akzent) 28%, transparent);
|
|
color: #fff;
|
|
}
|
|
.chat__senden:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
|
|
|
/* ---------- Die Wahl im Neu-Dialog --------------------------------------- */
|
|
|
|
.chat-wahl { margin: 4px 0 6px; max-height: 46vh; overflow-y: auto; }
|
|
.chat-wahl__gruppe + .chat-wahl__gruppe { margin-top: 13px; }
|
|
.chat-wahl__titel {
|
|
margin: 0 0 7px;
|
|
display: flex; align-items: center; gap: 7px;
|
|
font-size: .75rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.chat-wahl__punkt {
|
|
width: 7px; height: 7px; border-radius: 50%;
|
|
background: var(--r, var(--text-still)); flex: none;
|
|
}
|
|
.chat-wahl__gruppe[data-rolle="admin"] { --r: #e8c07d; }
|
|
.chat-wahl__gruppe[data-rolle="manager"] { --r: #8a76ff; }
|
|
.chat-wahl__gruppe[data-rolle="scout"] { --r: #5fc99a; }
|
|
.chat-wahl__gruppe[data-rolle="creator"] { --r: #3fbdf5; }
|
|
|
|
.chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; }
|
|
.chat-wahl__knopf {
|
|
--r: rgba(255, 255, 255, .5);
|
|
display: inline-flex; align-items: center; gap: 9px;
|
|
min-height: 40px;
|
|
padding: 5px 14px 5px 6px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: rgba(255, 255, 255, .035);
|
|
color: var(--text-leise); font: inherit; cursor: pointer;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.chat-wahl__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
|
.chat-wahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
|
.chat-wahl__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
|
.chat-wahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
|
.chat-wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
|
.chat-wahl__knopf:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
|
|
.chat-wahl__zeichen {
|
|
flex: none;
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
display: grid; place-items: center;
|
|
font-size: .74rem; font-weight: 700;
|
|
color: var(--r);
|
|
background: color-mix(in srgb, var(--r) 14%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
|
}
|
|
.chat-wahl__name { font-size: .86rem; font-weight: 550; }
|
|
.chat-wahl__knopf[data-an="ja"] {
|
|
color: var(--text); font-weight: 600;
|
|
border-color: color-mix(in srgb, var(--r) 55%, transparent);
|
|
background: color-mix(in srgb, var(--r) 13%, transparent);
|
|
}
|
|
.chat-wahl__knopf[data-an="ja"] .chat-wahl__zeichen {
|
|
color: #12151b; background: var(--r); border-color: var(--r);
|
|
}
|
|
|
|
/* ---------- Handy --------------------------------------------------------
|
|
|
|
EINE Spalte, umgeschaltet über data-ansicht. Zwei Spalten auf 390
|
|
Pixeln hiessen zwei unbenutzbare Hälften. */
|
|
@media (max-width: 860px) {
|
|
.chat { grid-template-columns: 1fr; }
|
|
.chat__spalte--verlauf::before { display: none; }
|
|
.chat__zurueck { display: flex; }
|
|
|
|
.chat[data-ansicht="liste"] .chat__spalte--verlauf { display: none; }
|
|
.chat[data-ansicht="verlauf"] .chat__spalte--liste { display: none; }
|
|
|
|
/* Mehr Breite für die Blasen -- auf einem schmalen Schirm sind 76 %
|
|
drei Wörter je Zeile. */
|
|
.chat-nachricht { max-width: 88%; }
|
|
/* Ohne Zeiger gibt es kein "Darüberfahren": Der Knopf steht immer da,
|
|
sonst wäre er auf dem Handy gar nicht erreichbar. */
|
|
.chat-nachricht__weg-knopf { opacity: .75; }
|
|
}
|
|
|
|
@media (hover: none) {
|
|
.chat-nachricht__weg-knopf { opacity: .75; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.chat-raum__knopf, .chat__senden, .chat-wahl__knopf,
|
|
.chat-nachricht__weg-knopf { transition: none; }
|
|
}
|
|
|
|
/* Ohne Farbverläufe tragen Kanten und Formen allein. Die eigenen
|
|
Nachrichten sind dann nur noch an der Ecke und der Ausrichtung zu
|
|
erkennen -- deshalb bekommen sie hier einen kräftigeren Rand. */
|
|
@media (forced-colors: active) {
|
|
.chat { border: 1px solid CanvasText; }
|
|
.chat__spalte--verlauf::before { background: CanvasText; }
|
|
.chat-nachricht__blase { border: 1px solid CanvasText; }
|
|
.chat-nachricht[data-selbst="ja"] .chat-nachricht__blase { border-width: 2px; }
|
|
.chat-raum__zeichen, .chat-nachricht__zeichen { border: 1px solid CanvasText; }
|
|
.chat-raum__zahl { border: 1px solid CanvasText; }
|
|
.chat-tag::before, .chat-tag::after { background: CanvasText; }
|
|
.chat__verlauf { mask-image: none; }
|
|
}
|