dialog: UX-Pass — Lade-Skelette, Avatar-Farben, Links, Cmd+Enter
- Dezente Lade-Skelette (Shimmer) in Übersicht/Forum/Thread statt leerem Pop-in - Deterministische, ruhige Avatar-Farbe aus dem Namen (statt einheitlichem Grau) - URLs in Wortmeldungen klickbar (sicher, ohne innerHTML) - ⌘/Ctrl+Enter sendet; Textarea wächst mit dem Inhalt; Hinweis im Composer - Enter im Thread-Titel springt ins Textfeld - prefers-reduced-motion respektiert Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -704,6 +704,21 @@ a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
|
||||
.dialog-logout { font: inherit; cursor: pointer; padding: 0.55em 1.1em; border-radius: 999px; background: none; border: 1px solid var(--color-border); color: var(--color-text-muted); }
|
||||
.dialog-replychip { align-self: flex-start; font-size: var(--font-size-small); cursor: pointer; padding: 0.25em 0.8em; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); background: none; }
|
||||
|
||||
/* ── Dialog: Lade-Skelett, Links im Text, Composer-Hinweis ── */
|
||||
.dialog-skel { display: flex; flex-direction: column; gap: 1.1em; padding: 0.7em 0; }
|
||||
.dialog-skel-line {
|
||||
height: 1.05em; width: 100%; border-radius: 6px;
|
||||
background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg-secondary) 37%, var(--color-border) 63%);
|
||||
background-size: 400% 100%; animation: dialog-shimmer 1.4s ease infinite;
|
||||
}
|
||||
.dialog-skel-line:nth-child(3n) { width: 68%; }
|
||||
.dialog-skel-line:nth-child(3n+1) { width: 92%; }
|
||||
@keyframes dialog-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
|
||||
@media (prefers-reduced-motion: reduce) { .dialog-skel-line { animation: none; } }
|
||||
.dialog-body .dialog-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
|
||||
.dialog-hint { font-size: var(--font-size-small); color: var(--color-text-muted); align-self: center; opacity: 0.7; }
|
||||
.dialog-spacer { flex: 1; }
|
||||
|
||||
/* ------------------------------------------------------------------------
|
||||
Journal entries — three Republik-style layouts (set in front matter
|
||||
via `layout: image|icon|text`). Every entry is a full-bleed coloured
|
||||
|
||||
Reference in New Issue
Block a user