Der Chat bekommt Tiefe -- Lichtkante, Glas und Schatten statt flacher Flächen
Filipe: „ich will dass du die komplette seite viel geiler und moderner
machst. die komplette kachel. die chat liste und die chats selber. …
es soll komplett aus der rolle fahren und was was wir noch nie hatten,
ich will es wirklich übertrieben krass."
EIN SYSTEM, NICHT ZWANZIG EINFÄLLE. Alles Folgende geht auf dieselben
drei Regeln zurück, und deshalb passt es zusammen:
1. LICHTKANTE — jede Fläche hat oben eine haardünne helle Linie und
unten eine dunkle. Damit wird aus einer Fläche ein Körper: Licht
fällt von oben. Was VERTIEFT ist (Suchfeld, Knopfgruppe), bekommt
es genau andersherum.
2. TIEFENSCHATTEN — lang und weich, weit unterhalb. Er trägt, er
umrandet nicht.
3. GLAS — was oben liegt, ist leicht durchscheinend und verwischt,
was dahinter ist. Dadurch sieht man die Ebene, ohne eine Linie.
WAS DAS KONKRET HEISST
* Der Rahmen hat eine Kante statt eines Strichs; zwischen den beiden
Spalten stossen zwei Platten aneinander.
* Die Gesprächszeile HEBT sich beim Überfahren, statt sich zu färben
— der Unterschied zwischen einer Tabelle und einer Bedienung.
* Das Zeichen (Kreis mit Buchstabe) ist ein Körper mit Licht, Saum
und eigenem Schein in der Rollenfarbe.
* Die fünf Handgriffe unter jeder Blase waren unterstrichene Wörter
— im Netz heisst das seit dreissig Jahren „führt woandershin", und
genau das tun sie nicht. Jetzt leise Marken. Sie bleiben SICHTBAR:
Die Entscheidung vom 23.09. gilt weiter (auf dem Handy gibt es kein
Überfahren).
* Der Datumstrenner ist ein Schild auf der Linie statt nackter
Grossbuchstaben.
* Die Eingabe ist eine Konsole: Glas, Lichtkante, Schatten nach oben.
Die vier Buchstaben (F K U S) standen frei im Raum — jetzt Schalter
in einem Streifen über dem Schreibfeld.
* Der Verlauf hat einen weichen Saum: Nachrichten laufen UNTER Kopf
und Konsole, statt an einer harten Kante abzubrechen.
* Titel, Unterzeile und die vier Kopfknöpfe (jetzt eine Gruppe in
einer Mulde) bekommen eine Rangfolge.
WAS ABSICHTLICH UNANGETASTET BLEIBT: die FARBE der Blase. Sie ist die
persönliche Kachel und wird von pruef-chatkachel gemessen — die Prüfung
rechnet mit dem Farbwert selbst. Ein Verlauf oder Glas darauf hätte den
gemessenen und den gesehenen Wert auseinandergebracht, und zwar still.
Die Blase bekommt Tiefe über Kante und Schatten, nicht über den Grund.
DREI EIGENE FEHLER, VON DEN PRÜFUNGEN GEFUNDEN
* Die Formatknöpfe hatte ich auf 32 px verkleinert — hübscher, und
damit unter der Grenze von 44 px, unter der ein Daumen danebentrifft.
* Vier statt zwei Pixel Abstand dazwischen = sechs Pixel mehr an der
schmalsten Stelle. Die Zeile ist dort seit dem 23.09. auf den Pixel
voll.
* Meine erste Fassung der Gestaltungsleiste zerlegte die Konsole in
drei Zeilen.
UND EIN FEHLALARM, DER SEIT LANGEM ROT WAR: pruef-chat-optik verglich
die OBERKANTEN von Schreibfeld und Senden-Knopf. Die Zeile ist aber
unten bündig, das Feld zwei Zeilen hoch — die Oberkanten liegen
zwangsläufig 24 px auseinander, obwohl beide nebeneinander stehen.
Gemerkt habe ich es erst, als zwei Reparaturen die Zahl nicht bewegt
haben: Eine Zahl, die sich durch die Reparatur nicht ändert, misst
etwas anderes, als man denkt. Sie fragt jetzt nach der GEMEINSAMEN
Höhe (44 von 44) und ist damit strenger als vorher.
GEPRÜFT: chat-optik, chatkachel, chat-ausbau, chat, chat-neu,
chat-kanaele, css-klassen, tippziele, lesbarkeit — alle 0 Fehler.
Dazu mess-chat-optik.mjs: vier Bilder (Liste und Verlauf, 1440 und
412 px) auf eigener Wegwerf-Datenbank.
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+480
-56
@@ -89,6 +89,63 @@
|
||||
radial-gradient(120% 90% at 0% 0%, rgba(255, 255, 255, .03), transparent 55%),
|
||||
color-mix(in srgb, var(--flaeche) 88%, transparent);
|
||||
overflow: hidden;
|
||||
|
||||
/* ===================================================================
|
||||
TIEFE STATT FLAECHE (25.09.2026)
|
||||
|
||||
Filipe: „ich will dass du die komplette seite viel geiler und
|
||||
moderner machst … es soll komplett aus der rolle fahren und was
|
||||
was wir noch nie hatten, ich will es wirklich uebertrieben krass."
|
||||
|
||||
WAS VORHER DA WAR: zwei Spalten in EINEM Kasten, flach, mit einem
|
||||
Hauchrand. Alles darin lag auf derselben Ebene -- Liste, Verlauf,
|
||||
Blasen, Eingabe. Es war ordentlich und sah nach Formular aus.
|
||||
|
||||
WAS JETZT DAS SYSTEM IST -- und es ist EINES, nicht drei Ideen:
|
||||
|
||||
1. LICHTKANTE. Jede Flaeche bekommt oben eine haardünne helle
|
||||
Linie und unten eine dunkle. Das ist der ganze Trick, mit dem
|
||||
eine Flaeche zu einem Koerper wird: Licht faellt von oben.
|
||||
2. TIEFENSCHATTEN. Lang, weich, weit unterhalb -- kein harter
|
||||
Kasten-Schatten. Er traegt, er umrandet nicht.
|
||||
3. GLAS. Was ueber etwas liegt, ist leicht durchscheinend und
|
||||
verwischt, was dahinter ist. Dadurch sieht man, WAS oben
|
||||
liegt, ohne eine einzige Linie mehr.
|
||||
|
||||
DREI REGELN, DIE DABEI GELTEN:
|
||||
* KEIN NEON. Alle Toene bleiben gedeckt; die Akzentfarbe kommt
|
||||
nur als Saum vor, nie als Flaeche. Augenschonend ist Vorgabe.
|
||||
* KEINE BEWEGUNG OHNE GRUND, und jede laesst sich abbestellen
|
||||
(`prefers-reduced-motion` ganz unten in dieser Datei).
|
||||
* DIE BLASENFARBE BLEIBT DECKEND. Sie haengt an einer
|
||||
Kontrastmessung (pruef-chatkachel), die den Farbwert selbst
|
||||
prueft -- ein Verlauf oder Glas darauf wuerde die Messung
|
||||
still falsch machen. Deshalb bekommt die Blase Tiefe ueber
|
||||
Kante und Schatten, nicht ueber den Untergrund.
|
||||
=================================================================== */
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .085),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, .5),
|
||||
0 34px 70px -34px rgba(0, 0, 0, .95),
|
||||
0 6px 18px -10px rgba(0, 0, 0, .7);
|
||||
}
|
||||
|
||||
/* Die Fuge zwischen den Spalten ist keine Linie, sondern eine Kante:
|
||||
links dunkel, rechts hell -- so, wie zwei Bleche aneinanderstossen.
|
||||
Eine Linie haette gesagt "hier ist eine Grenze"; die Kante sagt
|
||||
"hier liegt eine Platte auf einer anderen". */
|
||||
.chat__spalte--liste {
|
||||
position: relative;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, .022) 0%, rgba(255, 255, 255, 0) 30%);
|
||||
}
|
||||
.chat__spalte--liste::after {
|
||||
content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 2px;
|
||||
background: linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--akzent) 26%, transparent) 0%,
|
||||
rgba(255, 255, 255, .05) 22%,
|
||||
rgba(0, 0, 0, .35) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.chat__spalte {
|
||||
@@ -106,8 +163,20 @@
|
||||
|
||||
.chat__kopf {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 15px 17px;
|
||||
border-bottom: 1px solid var(--rand);
|
||||
padding: 16px 17px 15px;
|
||||
/* KEINE LINIE, SONDERN EINE KANTE (25.09.2026) -- dieselbe
|
||||
Ueberlegung wie an der Fuge zwischen den Spalten: Der Kopf liegt
|
||||
UEBER dem, was darunter rollt. Unten dunkel, darueber ein Hauch
|
||||
hell: Damit sieht man die Ebene, statt sie zu lesen. */
|
||||
border-bottom: 0;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .06),
|
||||
0 1px 0 0 rgba(0, 0, 0, .45),
|
||||
0 2px 0 0 rgba(255, 255, 255, .035),
|
||||
0 14px 22px -20px rgba(0, 0, 0, .9);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, .035) 0%, rgba(255, 255, 255, .008) 100%);
|
||||
position: relative; z-index: 2;
|
||||
flex: none;
|
||||
/* UMBRECHEN STATT DEN NAMEN ZERDRUECKEN (20.09.2026).
|
||||
|
||||
@@ -142,14 +211,32 @@
|
||||
Rest. Wird er unterschritten, wandert die Knopfreihe eine Zeile
|
||||
tiefer -- das ist der Umbruch oben. */
|
||||
.chat__kopf-text { min-width: 0; flex: 1 1 8rem; }
|
||||
/* DER TITEL WAR SO GROSS WIE DIE VORSCHAUZEILE DARUNTER (25.09.2026).
|
||||
|
||||
Im Bildschirmfoto stand „VanVan" in derselben Staerke wie „Du:
|
||||
Perfekt, danke dir" in der Liste -- der Name des Gespraechs, in dem
|
||||
man steht, war nicht wichtiger als eine Vorschau. Jetzt groesser,
|
||||
fester und leicht enger gesetzt: Eine Ueberschrift darf wie eine
|
||||
aussehen.
|
||||
|
||||
`letter-spacing` NEGATIV und nicht positiv: Gesperrte Schrift wirkt
|
||||
bei grossen Graden ausgefranst; enger gesetzt wirkt sie gesetzt.
|
||||
Unter 1 rem waere es andersherum -- deshalb steht es hier und nicht
|
||||
an der Unterzeile. */
|
||||
.chat__titel {
|
||||
margin: 0;
|
||||
font-size: 1.02rem; font-weight: 650; color: var(--text);
|
||||
font-size: 1.22rem; font-weight: 750; letter-spacing: -.015em;
|
||||
color: #f4f8fd;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
/* Die Unterzeile sagt, WER sonst dabei ist. Sie stand in derselben
|
||||
Farbe wie jede andere Nebensache; jetzt leicht gesperrt und in
|
||||
Versalien -- damit liest sie sich als Angabe zum Titel und nicht
|
||||
als angefangener Satz. */
|
||||
.chat__unter {
|
||||
margin: 2px 0 0;
|
||||
font-size: .78rem; color: var(--text-still);
|
||||
margin: 3px 0 0;
|
||||
font-size: .72rem; color: var(--text-still);
|
||||
letter-spacing: .05em; text-transform: uppercase; font-weight: 600;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -209,16 +296,34 @@
|
||||
|
||||
PILLENFORM, weil darunter Zeilen mit 14px-Ecken stehen — ein
|
||||
scharfkantiger Kasten darüber wirkt wie von einer anderen Seite. */
|
||||
.chat__suche { padding: 10px 12px 6px; flex: none; }
|
||||
.chat__suche { padding: 12px 12px 8px; flex: none; }
|
||||
/* EINGELASSEN STATT AUFGELEGT. Ein Eingabefeld ist eine Vertiefung --
|
||||
Licht faellt hinein, nicht darauf. Deshalb hier der Schatten INNEN
|
||||
und oben, genau andersherum als bei allem, was obenauf liegt. Das
|
||||
ist derselbe Gedanke wie ueberall auf dieser Seite, nur umgedreht:
|
||||
Wo etwas liegt, liegt Licht oben; wo etwas fehlt, liegt Schatten
|
||||
oben. */
|
||||
.chat__suche input {
|
||||
width: 100%;
|
||||
padding-left: 36px;
|
||||
padding-left: 38px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(0, 0, 0, .45);
|
||||
background-color: rgba(4, 7, 12, .5);
|
||||
box-shadow:
|
||||
inset 0 2px 4px -1px rgba(0, 0, 0, .65),
|
||||
inset 0 -1px 0 rgba(255, 255, 255, .05);
|
||||
transition: box-shadow .18s ease, border-color .18s ease;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a5bb' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.2'/%3E%3Cpath d='m15.8 15.8 4 4'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: 12px 50%;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
.chat__suche input:focus {
|
||||
border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
|
||||
box-shadow:
|
||||
inset 0 2px 4px -1px rgba(0, 0, 0, .65),
|
||||
0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent);
|
||||
}
|
||||
|
||||
.chat__leer {
|
||||
margin: 0; padding: 20px 18px;
|
||||
@@ -246,15 +351,24 @@
|
||||
text-align: center;
|
||||
}
|
||||
.chat__leer-text { max-width: 30ch; }
|
||||
/* Der leere Verlauf ist die erste Flaeche, die man sieht, wenn man
|
||||
hereinkommt -- und bis heute war sie das Blasseste auf der Seite.
|
||||
Jetzt ein Koerper mit Licht, Saum und einem weichen Schein: Sie sagt
|
||||
"hier ist Platz", nicht "hier fehlt etwas". */
|
||||
.chat__leer-zeichen {
|
||||
display: grid; place-items: center;
|
||||
width: 82px; height: 82px;
|
||||
width: 92px; height: 92px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid color-mix(in srgb, var(--rand-hell) 55%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--akzent) 26%, transparent);
|
||||
background:
|
||||
radial-gradient(90% 90% at 50% 20%,
|
||||
color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
|
||||
rgba(255, 255, 255, .02);
|
||||
radial-gradient(90% 90% at 50% 18%,
|
||||
color-mix(in srgb, var(--akzent) 16%, transparent), transparent 72%),
|
||||
linear-gradient(170deg, rgba(255, 255, 255, .05), rgba(0, 0, 0, .18));
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .16),
|
||||
inset 0 -6px 14px -8px rgba(0, 0, 0, .7),
|
||||
0 0 0 8px color-mix(in srgb, var(--akzent) 5%, transparent),
|
||||
0 22px 44px -24px rgba(0, 0, 0, .95);
|
||||
}
|
||||
.chat__leer-zeichen svg {
|
||||
width: 34px; height: 34px;
|
||||
@@ -332,16 +446,31 @@
|
||||
das Raster nicht wieder um (siehe Punkt 1 oben). */
|
||||
display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
align-items: center; gap: 11px;
|
||||
padding: 10px 11px;
|
||||
padding: 11px 12px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 14px;
|
||||
border-radius: 16px;
|
||||
background: transparent;
|
||||
color: inherit; font: inherit; text-align: left; cursor: pointer;
|
||||
transition: background .16s ease, border-color .16s ease;
|
||||
/* DIE ZEILE HEBT SICH, SIE FAERBT SICH NICHT (25.09.2026). Eine
|
||||
Einfaerbung beim Ueberfahren sagt "markiert"; ein Anheben sagt
|
||||
"anfassbar". Das ist der Unterschied zwischen einer Tabelle und
|
||||
einer Bedienung -- und der Grund, warum `transform` hier steht.
|
||||
Ein Pixel genuegt: Mehr wackelt, weniger sieht niemand. */
|
||||
transition: background .18s ease, border-color .18s ease,
|
||||
transform .18s ease, box-shadow .18s ease;
|
||||
}
|
||||
.chat-raum__knopf:hover {
|
||||
background: rgba(255, 255, 255, .045);
|
||||
border-color: color-mix(in srgb, var(--rand-hell) 55%, transparent);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, .062) 0%, rgba(255, 255, 255, .022) 100%);
|
||||
border-color: color-mix(in srgb, var(--rand-hell) 60%, transparent);
|
||||
transform: translateY(-1px);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .07),
|
||||
0 10px 20px -14px rgba(0, 0, 0, .9);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.chat-raum__knopf { transition: background .18s ease, border-color .18s ease; }
|
||||
.chat-raum__knopf:hover { transform: none; }
|
||||
}
|
||||
.chat-raum__knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
||||
|
||||
@@ -379,14 +508,39 @@
|
||||
}
|
||||
|
||||
/* ---- Das Zeichen: Mensch, Gruppe, Kanal ----------------------------- */
|
||||
/* DAS ZEICHEN IST EIN KOERPER, KEIN KREIS (25.09.2026).
|
||||
|
||||
Vorher: ein flacher Kreis mit 13 % Farbe und einem Rand. Zwoelf
|
||||
davon untereinander lasen sich wie eine Lochreihe.
|
||||
|
||||
Jetzt liegt Licht darauf (oben hell, unten dunkel), und darum sitzt
|
||||
ein feiner Saum in der Rollenfarbe. Der Buchstabe bekommt einen
|
||||
eigenen leichten Schatten, damit er auf der Flaeche steht statt
|
||||
darin zu schwimmen. */
|
||||
.chat-raum__zeichen {
|
||||
flex: none;
|
||||
width: 44px; height: 44px; border-radius: 50%;
|
||||
position: relative;
|
||||
width: 46px; height: 46px; border-radius: 50%;
|
||||
display: grid; place-items: center;
|
||||
font-size: .86rem; font-weight: 700; letter-spacing: .02em;
|
||||
font-size: .9rem; font-weight: 750; letter-spacing: .02em;
|
||||
color: var(--r);
|
||||
background: color-mix(in srgb, var(--r) 13%, transparent);
|
||||
border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
|
||||
background:
|
||||
linear-gradient(162deg,
|
||||
color-mix(in srgb, var(--r) 26%, transparent) 0%,
|
||||
color-mix(in srgb, var(--r) 9%, transparent) 55%,
|
||||
rgba(0, 0, 0, .22) 100%);
|
||||
border: 1px solid color-mix(in srgb, var(--r) 34%, transparent);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .16),
|
||||
inset 0 -2px 4px -2px rgba(0, 0, 0, .6),
|
||||
0 0 0 1px rgba(0, 0, 0, .35),
|
||||
0 6px 14px -8px color-mix(in srgb, var(--r) 45%, transparent);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
|
||||
}
|
||||
/* Ist ein Bild drin (Profilbild), fuellt es den Kreis randlos aus --
|
||||
der Saum bleibt und haelt die Rollenfarbe. */
|
||||
.chat-raum__zeichen img {
|
||||
width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
|
||||
}
|
||||
/* Dieselben Rollenfarben wie überall im Haus. */
|
||||
.chat-raum__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||
@@ -456,14 +610,44 @@
|
||||
background: linear-gradient(160deg,
|
||||
color-mix(in srgb, var(--akzent) 92%, #ffffff),
|
||||
var(--akzent));
|
||||
/* Der Saum ringsum trennt die Marke vom Untergrund, auch wenn sie
|
||||
zufaellig auf einer gleich hellen Stelle liegt -- und der Schein
|
||||
darunter macht aus dem Fleck eine Marke, die aufliegt. */
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .55),
|
||||
0 0 0 1px rgba(0, 0, 0, .45),
|
||||
0 4px 10px -4px color-mix(in srgb, var(--akzent) 60%, transparent);
|
||||
}
|
||||
|
||||
/* ---------- Rechts: der Verlauf ------------------------------------------ */
|
||||
|
||||
/* =====================================================================
|
||||
DER VERLAUF HAT EINEN SAUM (25.09.2026)
|
||||
|
||||
Oben und unten liefen die Nachrichten bisher an einer harten Kante
|
||||
aus -- eine halbe Blase, dann Schluss. Das sieht aus wie ein
|
||||
Fehler, nicht wie ein Rand.
|
||||
|
||||
`mask-image` blendet die letzten Pixel weich aus: Die Nachricht
|
||||
laeuft UNTER den Kopf und unter die Konsole, statt an ihnen
|
||||
abgeschnitten zu werden. Es ist derselbe Gedanke wie beim Glas --
|
||||
man sieht, dass da noch etwas ist.
|
||||
|
||||
NUR 18 UND 14 PIXEL: Mehr, und der Text am Rand waere schlechter
|
||||
lesbar; das waere ein Schoenheitsgewinn auf Kosten der Lesbarkeit,
|
||||
und der geht in diesem Haus nie vor.
|
||||
|
||||
`-webkit-mask-image` daneben, weil Safari die Eigenschaft bis
|
||||
heute nur mit Praefix kennt -- ohne sie hat Safari gar keinen
|
||||
Saum (was harmlos ist: dann sieht es aus wie vorher). */
|
||||
.chat__verlauf {
|
||||
flex: 1; min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 18px 18px 8px;
|
||||
mask-image: linear-gradient(180deg,
|
||||
transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(180deg,
|
||||
transparent 0, #000 18px, #000 calc(100% - 14px), transparent 100%);
|
||||
display: flex; flex-direction: column; gap: 3px;
|
||||
/* IM VERLAUF DARF MEHR DURCHKOMMEN als in der Liste links: Hier steht
|
||||
jede Zeile auf einer eigenen, deckenden Kachel -- dazwischen ist
|
||||
@@ -504,8 +688,19 @@
|
||||
content: ""; flex: 1; height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--rand-hell), transparent);
|
||||
}
|
||||
/* Aus nacktem Text wird ein Schild auf der Linie: Es liegt darauf,
|
||||
statt sie zu unterbrechen. Derselbe Glas-Gedanke wie ueberall auf
|
||||
dieser Seite -- was obenauf liegt, ist leicht durchscheinend. */
|
||||
.chat-tag__text {
|
||||
flex: none;
|
||||
padding: 4px 12px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(255, 255, 255, .08);
|
||||
background: rgba(8, 12, 19, .62);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .07),
|
||||
0 4px 12px -8px rgba(0, 0, 0, .9);
|
||||
font-size: .72rem; font-weight: 700;
|
||||
letter-spacing: .07em; text-transform: uppercase;
|
||||
}
|
||||
@@ -572,10 +767,42 @@
|
||||
/* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */
|
||||
.chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; }
|
||||
|
||||
/* =====================================================================
|
||||
DIE BLASE BEKOMMT EINEN KOERPER (25.09.2026)
|
||||
|
||||
Filipe: „ich will es wirklich uebertrieben krass."
|
||||
|
||||
WAS SICH NICHT AENDERT -- UND WARUM NICHT: die FARBE. Sie ist die
|
||||
persoenliche Kachel und wird von pruef-chatkachel gemessen; die
|
||||
Pruefung rechnet mit dem FARBWERT selbst. Ein Verlauf, ein Glas
|
||||
oder eine Beimischung darauf wuerde den gemessenen Wert und den
|
||||
gesehenen auseinanderbringen -- und zwar still: Die Pruefung bliebe
|
||||
gruen. Genau so lag die eigene Blase schon einmal ausserhalb jeder
|
||||
Messung (siehe weiter unten, 22.09.2026). Also bleibt sie deckend.
|
||||
|
||||
WAS SICH AENDERT: alles um die Farbe herum.
|
||||
* Eine helle Haarlinie oben INNEN -- Licht faellt von oben auf
|
||||
einen Koerper. Sie liegt am oberen Rand, nicht hinter dem Text;
|
||||
am gemessenen Untergrund aendert sie nichts.
|
||||
* Eine dunkle unten innen -- die abgewandte Seite.
|
||||
* Ein langer, weicher Schatten darunter, in der Farbe der Blase
|
||||
selbst statt in Schwarz: Dadurch sieht die Blase aus, als
|
||||
leuchte sie schwach auf den Untergrund, statt auf ihm zu
|
||||
kleben. Das ist der eigentliche Unterschied zu vorher.
|
||||
* Ein feiner schwarzer Saum ganz aussen. Er trennt die Blase vom
|
||||
Hintergrundbild -- ohne ihn verschwimmt eine helle Kachel auf
|
||||
einer hellen Stelle des Fotos.
|
||||
===================================================================== */
|
||||
.chat-nachricht__blase {
|
||||
grid-column: 2;
|
||||
padding: 11px 15px 8px;
|
||||
padding: 12px 16px 9px;
|
||||
border: 1px solid rgba(255, 255, 255, .13);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .22),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, .28),
|
||||
0 0 0 1px rgba(0, 0, 0, .32),
|
||||
0 14px 26px -16px color-mix(in srgb, var(--kachel, var(--kachel-standard)) 60%, transparent),
|
||||
0 4px 10px -6px rgba(0, 0, 0, .55);
|
||||
/* RUNDER (22.09.2026). Filipe: „die chat bubble wo die text drin
|
||||
sind sollen auch viel geiler aussehen, mit runden kanten."
|
||||
22 px statt 14; nur die Ecke zur Person bleibt spitz -- sie ist
|
||||
@@ -772,13 +999,11 @@
|
||||
Ein Knopf, den man nicht findet, schuetzt niemanden -- er
|
||||
verhindert nur, dass jemand ihn absichtlich benutzt.
|
||||
===================================================================== */
|
||||
.chat-nachricht__weg-knopf {
|
||||
padding: 0; border: 0; background: none;
|
||||
font: inherit; font-size: .75rem;
|
||||
color: inherit; cursor: pointer;
|
||||
transition: color .16s ease;
|
||||
}
|
||||
.chat-nachricht__weg-knopf:hover { color: var(--warn); }
|
||||
/* Nur noch das, was diesem Knopf allein gehoert: die Warnfarbe beim
|
||||
Ueberfahren. Form, Polsterung und Rundung kommen aus der
|
||||
gemeinsamen Marken-Regel weiter unten -- eine Form fuer vier
|
||||
Handgriffe, nicht vier Formen. */
|
||||
.chat-nachricht__weg-knopf:hover { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
|
||||
.chat-nachricht__weg-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||||
|
||||
/* DAS NOTFALL-LOESCHEN SIEHT ANDERS AUS ALS DAS EIGENE -- ABER NICHT
|
||||
@@ -845,9 +1070,27 @@
|
||||
`flex-basis: 100%` immer die ganze Zeile. Eine feste Breite waere
|
||||
wieder eine Rechnung von gestern. */
|
||||
flex-wrap: wrap;
|
||||
padding: 12px 14px 14px;
|
||||
border-top: 1px solid var(--rand);
|
||||
background: rgba(0, 0, 0, .2);
|
||||
padding: 13px 14px 15px;
|
||||
/* AUS EINER ZEILE WIRD EINE KONSOLE (25.09.2026).
|
||||
|
||||
Vorher: eine Linie oben und ein dunkler Streifen. Das las sich wie
|
||||
"hier hoert die Seite auf". Jetzt liegt sie erkennbar VOR dem
|
||||
Verlauf -- Lichtkante oben, Glas dahinter, ein Schatten nach oben,
|
||||
der den Verlauf darunter durchscheinen laesst.
|
||||
|
||||
`backdrop-filter` und nicht einfach dunkler: Was hinter der
|
||||
Konsole durchlaeuft, soll man ahnen, aber nicht lesen. Ein
|
||||
deckender Streifen haette den Verlauf abgeschnitten; so wirkt die
|
||||
Flaeche wie eine Scheibe darueber. */
|
||||
border-top: 0;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(10, 14, 22, .74) 0%, rgba(6, 9, 15, .86) 100%);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .07),
|
||||
0 -1px 0 0 rgba(0, 0, 0, .5),
|
||||
0 -18px 28px -24px rgba(0, 0, 0, .95);
|
||||
position: relative; z-index: 2;
|
||||
}
|
||||
.chat__eingabe-schild {
|
||||
position: absolute; width: 1px; height: 1px; margin: -1px;
|
||||
@@ -915,14 +1158,30 @@
|
||||
min-height: 42px; max-height: 160px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
/* Der eine Knopf, den man in diesem Fenster am haeufigsten drueckt --
|
||||
und er sah aus wie die Bueroklammer daneben. Jetzt ist er der
|
||||
hellste Punkt der Konsole: gefuellt statt umrandet, mit Lichtkante
|
||||
und einem weichen Schein darunter. Gedeckt bleibt er trotzdem, die
|
||||
Akzentfarbe ist entsaettigt gewaehlt (augenschonend ist Vorgabe). */
|
||||
.chat__senden {
|
||||
flex: none;
|
||||
/* 42 UND NICHT 44 (nachgebessert 25.09.2026). Zwei Pixel mehr, und
|
||||
auf 390 px passte die Reihe nicht mehr: "Senden" rutschte unter
|
||||
das Schreibfeld (gemessen y 844 statt 820). Genau die Rechnung,
|
||||
die am 23.09. schon einmal aufging -- die Zeile ist dort auf den
|
||||
Pixel voll. Wer hier etwas breiter macht, misst es nach. */
|
||||
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);
|
||||
border: 1px solid color-mix(in srgb, var(--akzent) 55%, transparent);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(168deg,
|
||||
color-mix(in srgb, var(--akzent) 42%, transparent) 0%,
|
||||
color-mix(in srgb, var(--akzent) 22%, transparent) 100%);
|
||||
color: color-mix(in srgb, var(--akzent) 30%, #ffffff);
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, .2),
|
||||
inset 0 -2px 6px -3px rgba(0, 0, 0, .55),
|
||||
0 10px 20px -12px color-mix(in srgb, var(--akzent) 65%, transparent);
|
||||
cursor: pointer;
|
||||
transition: background .16s ease, color .16s ease;
|
||||
}
|
||||
@@ -1352,15 +1611,56 @@
|
||||
und keine vierte Abschrift: Neben antworten, anheften und kopieren
|
||||
waere sie die vierte fast gleiche, und die vierte ist die, die
|
||||
irgendwann eine Zeile anders hat. */
|
||||
/* =====================================================================
|
||||
DIE HANDGRIFFE SIND MARKEN, KEINE LINKS MEHR (25.09.2026)
|
||||
|
||||
Unter jeder Blase standen fuenf unterstrichene Woerter nebeneinander
|
||||
-- „antworten reagieren loeschen anheften kopieren". Unterstrichener
|
||||
Text heisst im Netz seit dreissig Jahren „das fuehrt woandershin",
|
||||
und genau das tun sie nicht: Sie tun etwas HIER. Im Bildschirmfoto
|
||||
war das die unruhigste Stelle der ganzen Seite.
|
||||
|
||||
SIE BLEIBEN SICHTBAR -- das ist keine Nebensache, sondern eine
|
||||
Entscheidung vom 23.09.2026, die weiter gilt: Auf einem Handy gibt
|
||||
es kein Ueberfahren, und ein Knopf, den man dort nicht erreicht,
|
||||
gibt es dort nicht. Also nicht verstecken, sondern LEISER machen.
|
||||
|
||||
Als Marke: kein Unterstrich, ein kaum sichtbarer Rahmen, gedaempfte
|
||||
Farbe. Beim Ueberfahren oder mit der Tastatur wird sie deutlich --
|
||||
dann, wenn man sie meint. Die Flaeche waechst dabei auf ueber
|
||||
24x24 px; vorher war ein Wort nur so hoch wie seine Schrift.
|
||||
===================================================================== */
|
||||
.chat-nachricht__antwort-knopf,
|
||||
.chat-nachricht__reag-knopf {
|
||||
border: 0; background: none; padding: 0;
|
||||
font: inherit; font-size: .72rem;
|
||||
.chat-nachricht__reag-knopf,
|
||||
.chat-nachricht__kopie-knopf,
|
||||
.chat-nachricht__weg-knopf {
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
font: inherit; font-size: .72rem; font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: inherit; cursor: pointer;
|
||||
text-decoration: underline; text-underline-offset: 2px;
|
||||
text-decoration: none;
|
||||
opacity: .72;
|
||||
transition: opacity .16s ease, background-color .16s ease,
|
||||
border-color .16s ease, color .16s ease;
|
||||
}
|
||||
.chat-nachricht__antwort-knopf:hover,
|
||||
.chat-nachricht__reag-knopf:hover { color: var(--text); }
|
||||
.chat-nachricht__reag-knopf:hover,
|
||||
.chat-nachricht__kopie-knopf:hover,
|
||||
.chat-nachricht__weg-knopf:hover {
|
||||
opacity: 1;
|
||||
color: var(--blase-text);
|
||||
background: rgba(255, 255, 255, .14);
|
||||
border-color: rgba(255, 255, 255, .22);
|
||||
}
|
||||
.chat-nachricht__antwort-knopf:focus-visible,
|
||||
.chat-nachricht__reag-knopf:focus-visible,
|
||||
.chat-nachricht__kopie-knopf:focus-visible,
|
||||
.chat-nachricht__weg-knopf:focus-visible {
|
||||
opacity: 1; outline: 2px solid var(--akzent); outline-offset: 1px;
|
||||
}
|
||||
.chat-nachricht__reag-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
|
||||
|
||||
/* =====================================================================
|
||||
@@ -1393,13 +1693,18 @@
|
||||
/* Der Kopier-Knopf sieht aus wie "antworten" -- es ist dieselbe Sorte
|
||||
Handgriff an derselben Stelle. Ein anders gestalteter Knopf daneben
|
||||
waere eine zweite Sprache in derselben Zeile. */
|
||||
.chat-nachricht__kopie-knopf {
|
||||
appearance: none; border: 0; background: none; padding: 0;
|
||||
font: inherit; font-size: .72rem; font-weight: 600;
|
||||
color: inherit; cursor: pointer;
|
||||
text-decoration: underline; text-underline-offset: 2px;
|
||||
}
|
||||
.chat-nachricht__kopie-knopf:hover { color: var(--text); }
|
||||
/* DIESER BLOCK STAND HIER UND HAT DEN NEUEN UEBERSCHRIEBEN
|
||||
(bereinigt 25.09.2026). Er kam SPAETER in der Datei als die
|
||||
gemeinsame Marken-Regel weiter oben und hat deren Rahmen, Polsterung
|
||||
und Rundung wieder weggenommen -- ausgerechnet bei "kopieren".
|
||||
Aufgefallen ist es nicht beim Lesen, sondern weil ein Knopf von
|
||||
fuenfen anders aussah.
|
||||
|
||||
Was hier bleiben MUSS, ist `appearance: none` (Safari zeichnet
|
||||
sonst seinen eigenen Knopf) und die Rundung des Fokusrahmens. Alles
|
||||
andere steht oben, einmal, fuer alle vier. */
|
||||
.chat-nachricht__kopie-knopf { appearance: none; }
|
||||
.chat-nachricht__kopie-knopf:hover { color: var(--blase-text); }
|
||||
.chat-nachricht__kopie-knopf:focus-visible {
|
||||
outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px;
|
||||
}
|
||||
@@ -1723,9 +2028,31 @@
|
||||
.reagieren-tafel__katalog { max-height: 44vh; }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
VIER EINZELNE KNOEPFE WERDEN EINE GRUPPE (25.09.2026)
|
||||
|
||||
Rechts oben standen vier gleich aussehende Kaestchen mit vier
|
||||
Abstaenden dazwischen -- Telefon, Video, Loeschen, Hilfe. Vier
|
||||
Dinge, die nebeneinander nichts verbindet, liest man als vier
|
||||
Sachen; als Gruppe liest man sie als EIN Werkzeug mit vier
|
||||
Griffen.
|
||||
|
||||
DIE GRUPPE IST EINE MULDE: eingelassen, mit Lichtkante oben. Die
|
||||
Knoepfe darin behalten ihre eigene Form und heben sich beim
|
||||
Ueberfahren heraus -- derselbe Gedanke wie ueberall auf dieser
|
||||
Seite, nur eine Ebene tiefer.
|
||||
===================================================================== */
|
||||
.chat__kopf-knoepfe {
|
||||
flex: none; margin-left: auto;
|
||||
display: flex; align-items: center; gap: 6px;
|
||||
display: flex; align-items: center; gap: 4px;
|
||||
padding: 4px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, .06);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 0, 0, .34) 0%, rgba(255, 255, 255, .025) 100%);
|
||||
box-shadow:
|
||||
inset 0 2px 5px -2px rgba(0, 0, 0, .7),
|
||||
0 1px 0 rgba(255, 255, 255, .05);
|
||||
}
|
||||
.chat__weg {
|
||||
flex: none;
|
||||
@@ -1992,13 +2319,36 @@
|
||||
|
||||
/* Der Anheften-Knopf sieht aus wie "antworten" daneben -- dieselbe
|
||||
Sorte Handgriff, dieselbe Zeile, dieselbe Lautstärke. */
|
||||
/* „ANHEFTEN" GEHOERT ZUR SELBEN FAMILIE (25.09.2026).
|
||||
|
||||
Es war der fuenfte Handgriff unter der Blase -- und der einzige, der
|
||||
nach dem Umbau noch unterstrichen dastand, weil er eine eigene
|
||||
Klasse hat. Im Bildschirmfoto sah man genau das: vier ruhige Marken
|
||||
und ein Link dazwischen.
|
||||
|
||||
Gelernt daran: Eine Familie erkennt man nicht am Aussehen, sondern
|
||||
an der Aufzaehlung. Wer einen fuenften Knopf baut, muss ihn hier
|
||||
eintragen -- deshalb stehen alle fuenf Namen jetzt an EINER Stelle
|
||||
beieinander (siehe die gemeinsame Regel weiter oben). */
|
||||
.chat-nachricht__pin-knopf {
|
||||
appearance: none; border: 0; background: none; padding: 0;
|
||||
appearance: none;
|
||||
border: 1px solid transparent;
|
||||
background: none;
|
||||
padding: 3px 8px;
|
||||
border-radius: 999px;
|
||||
font: inherit; font-size: .72rem; font-weight: 600;
|
||||
line-height: 1.5;
|
||||
color: inherit; cursor: pointer;
|
||||
text-decoration: underline; text-underline-offset: 2px;
|
||||
text-decoration: none;
|
||||
opacity: .72;
|
||||
transition: opacity .16s ease, background-color .16s ease,
|
||||
border-color .16s ease, color .16s ease;
|
||||
}
|
||||
.chat-nachricht__pin-knopf:hover {
|
||||
opacity: 1; color: var(--pin);
|
||||
background: color-mix(in srgb, var(--pin) 16%, transparent);
|
||||
border-color: color-mix(in srgb, var(--pin) 34%, transparent);
|
||||
}
|
||||
.chat-nachricht__pin-knopf:hover { color: var(--pin); }
|
||||
.chat-nachricht__pin-knopf:focus-visible {
|
||||
outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 4px;
|
||||
}
|
||||
@@ -2858,14 +3208,23 @@
|
||||
Personen sind in diesem Haus überall rund (Gesicht in der Liste, im
|
||||
Verlauf, in der Kopfleiste). Der Ring darum ist derselbe wie am
|
||||
Gesicht — man erkennt die Verwandtschaft, ohne sie zu lernen. */
|
||||
/* Er zeigt die eigene Kachelfarbe. Vorher war das ein farbiger Fleck
|
||||
mit einem Ring -- im Bildschirmfoto ein blauer Punkt, dem man nicht
|
||||
ansah, dass er ein Knopf ist. Jetzt sitzt die Probe in einer
|
||||
gefassten Mulde: Licht oben, Schatten innen, ein feiner Saum in der
|
||||
Farbe selbst. Man sieht, dass etwas DRIN liegt. */
|
||||
.chat__kachelknopf {
|
||||
flex: 0 0 auto;
|
||||
margin-left: auto;
|
||||
width: 32px; height: 32px;
|
||||
width: 34px; height: 34px;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--rand-hell);
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
background: linear-gradient(180deg,
|
||||
rgba(0, 0, 0, .4) 0%, rgba(255, 255, 255, .04) 100%);
|
||||
box-shadow:
|
||||
inset 0 2px 4px -2px rgba(0, 0, 0, .8),
|
||||
0 1px 0 rgba(255, 255, 255, .06);
|
||||
cursor: pointer;
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
transition: border-color .16s ease, box-shadow .16s ease;
|
||||
@@ -2978,7 +3337,72 @@
|
||||
-1 Gestaltung womit schreibe ich
|
||||
0 Klammer, Feld, Emoji, Senden -- die eigentliche Zeile */
|
||||
.chat__eingabe .antwort-leiste { order: -2; }
|
||||
.chat__eingabe .textform { order: -1; flex: 1 0 100%; margin-bottom: 2px; }
|
||||
/* =====================================================================
|
||||
DIE GESTALTUNGSLEISTE SITZT IN DER KONSOLE (25.09.2026)
|
||||
|
||||
Vorher: vier Buchstaben (F K U S) schwebten mittig ueber dem
|
||||
Schreibfeld, ohne Flaeche, ohne Bezug. Man sah vier Zeichen und
|
||||
nicht, wozu sie gehoeren -- im Bildschirmfoto war es die einzige
|
||||
Stelle, an der etwas ohne Grund im Raum stand.
|
||||
|
||||
Jetzt eine Schaltergruppe links oben in der Konsole: eine eigene
|
||||
kleine Flaeche mit Lichtkante, buendig mit dem Schreibfeld darunter.
|
||||
Sie gehoert damit sichtbar zur Eingabe.
|
||||
|
||||
LINKS UND NICHT MITTIG: Sie gehoert zum Text, und der beginnt
|
||||
links. Mittig stand sie ueber nichts. */
|
||||
.chat__eingabe .textform {
|
||||
/* DIE GANZE ZEILE BLEIBT SIE -- `flex: 1 0 100%` ist kein
|
||||
Schoenheitswert, sondern die Sicherung von 23.09.2026: Ohne sie
|
||||
nimmt die Leiste ihren Platz NEBEN dem Schreibfeld, und das
|
||||
schrumpft dann auf Buchstabenbreite ("defi / niti / v"). Beim
|
||||
ersten Anlauf heute habe ich genau das gemacht und die Konsole in
|
||||
drei Zeilen zerlegt.
|
||||
|
||||
STATT EINER PLATTE EIN STREIFEN: Die Gruppe steht linksbuendig
|
||||
ueber dem Schreibfeld, getrennt durch eine Haarlinie. Eine eigene
|
||||
Flaeche haette ueber die ganze Breite gehen muessen -- und das
|
||||
waere ein Balken ueber nichts. */
|
||||
order: -1; flex: 1 0 100%;
|
||||
justify-content: flex-start;
|
||||
margin: 0 0 9px; padding: 0 0 9px;
|
||||
/* 2 UND NICHT 4 (nachgemessen 25.09.2026). Vier Knoepfe zu je
|
||||
44 px Mindestbreite haben drei Abstaende dazwischen -- aus 4
|
||||
statt 2 Pixeln werden also SECHS Pixel mehr, die die schmalste
|
||||
Stelle der Zeile braucht. Auf 390 px hat das gereicht, um
|
||||
"Senden" unter das Schreibfeld zu schieben (gemessen y 844 statt
|
||||
820). Sechs Pixel. Genau deshalb wird an dieser Zeile gemessen
|
||||
und nicht geschaetzt; sie ist seit dem 23.09. auf den Pixel
|
||||
voll. */
|
||||
gap: 2px;
|
||||
border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
|
||||
border-radius: 0; background: none; box-shadow: none;
|
||||
}
|
||||
/* Die vier Buchstaben werden Schalter: eine Mulde, in die sie
|
||||
hineinpassen, statt vier nackter Zeichen im Raum. */
|
||||
/* 44 UND NICHT 32 (nachgebessert 25.09.2026).
|
||||
|
||||
Der erste Entwurf setzte sie auf 32x28 -- huebscher, und genau
|
||||
deshalb falsch: `pruef-chat-optik` misst jedes Bedienelement gegen
|
||||
44x44 und meldete "textform__knopf 32x44". Das ist die Groesse,
|
||||
unter der ein Daumen daneben trifft; sie steht in module.css seit
|
||||
jeher an dieser Stelle und ist keine Empfehlung.
|
||||
|
||||
Die Mulde sieht trotzdem kleiner aus als die Flaeche ist: Der
|
||||
Rahmen sitzt innen, der Rest ist Griffflaeche. So bleibt beides --
|
||||
das ruhige Bild und der treffbare Knopf. */
|
||||
.chat__eingabe .textform__knopf {
|
||||
min-width: 44px; min-height: 44px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, .07);
|
||||
background: linear-gradient(180deg,
|
||||
rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .012) 100%);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
|
||||
}
|
||||
.chat__eingabe .textform__knopf:hover {
|
||||
border-color: color-mix(in srgb, var(--akzent) 45%, transparent);
|
||||
background: color-mix(in srgb, var(--akzent) 14%, transparent);
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
SPRACHNACHRICHTEN (23.09.2026)
|
||||
|
||||
Reference in New Issue
Block a user