138 lines
8.7 KiB
CSS
138 lines
8.7 KiB
CSS
/* Chat im Ticketsystem (Messenger und Reiter "Chat") im weissen Design.
|
|
Eingabezeile, Anhaenge und Sprachnachrichten kommen als Baustein aus dem Kundenportal (chat-composer.css, window.ChatComposer).
|
|
Dessen CSS laedt zur Laufzeit zuletzt, bei gleicher Spezifitaet gewinnt es. Darum ist jede Regel fuer Elemente des Bausteins
|
|
strikt spezifischer als die Portal-Regel (Praefix .woms-chat, Spezifitaeten in den Kommentaren: Eigen > Fremd) und es gibt kein
|
|
!important. Einzige Ausnahme mit Absicht: .chat-tray-item, dessen rote Fehlervariante des Portals (gleiche Spezifitaet, spaeter
|
|
geladen) gewinnen soll. Das Seitenlayout (.chat-page, .chat-side, .chat-list*, .chat-main, .chat-back) hat kein Praefix.
|
|
Bildansicht und Kamera haengen am body und bleiben dunkel (Medienbetrachter, vom Praefix nicht erreichbar). */
|
|
|
|
/* Variablen des Bausteins: weisses Design statt Portal-Lila (P1), dazu Blasen und Spur der Audioleiste (P6) */
|
|
.woms-chat {
|
|
--chat-accent: var(--accent);
|
|
--chat-accent-hover: var(--accent-hover);
|
|
--chat-accent-soft: var(--accent-soft);
|
|
--chat-accent-line: rgba(17, 17, 17, 0.14);
|
|
--chat-accent-text: var(--accent);
|
|
--chat-on-accent: #ffffff;
|
|
--chat-surface: var(--bg);
|
|
--chat-line: var(--line-strong);
|
|
--chat-muted: var(--text-2);
|
|
--chat-bubble-in: var(--bg-hover);
|
|
--chat-bubble-out: var(--grey-bg);
|
|
--chat-track: rgba(26, 31, 54, 0.2);
|
|
display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
|
|
}
|
|
|
|
/* Verlauf: scrollt in sich, ohne Rand und Hintergrund */
|
|
.woms-chat .chat-messages {
|
|
display: flex; flex-direction: column; gap: 8px; min-height: 280px; max-height: 60vh; overflow-y: auto; padding: 4px 0;
|
|
}
|
|
|
|
/* Blasen: fremde hellgrau, eigene etwas dunkler und rechts, kein Rand. .chat-bubble 0,2,0 > 0,1,0 */
|
|
.woms-chat .chat-bubble {
|
|
align-self: flex-start; max-width: 78%; padding: 8px 12px; border: 0; border-radius: var(--radius-lg);
|
|
background: var(--chat-bubble-in); color: var(--text); overflow-wrap: anywhere;
|
|
}
|
|
.woms-chat .chat-bubble.mine { align-self: flex-end; background: var(--chat-bubble-out); }
|
|
.woms-chat .chat-meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-2); }
|
|
.woms-chat .chat-notice { font-size: 12px; color: var(--text-2); }
|
|
|
|
/* Datei-Chip: weiss mit Ring (die Blase ist selbst --bg-hover). .chat-att-file 0,2,0 > 0,1,0, :hover 0,3,0 > 0,2,0 */
|
|
.woms-chat .chat-att-file { border: 0; background: var(--bg); box-shadow: var(--ring); }
|
|
.woms-chat .chat-att-file:hover { background: var(--bg-hover); }
|
|
|
|
/* Audioleiste und Fokus. .chat-audio-bar 0,2,0 > 0,1,0; :focus-visible 0,3,0 > 0,2,0 (Portal: weisser Ring) */
|
|
.woms-chat .chat-audio-bar { background: var(--chat-track); }
|
|
.woms-chat .chat-att-image:focus-visible,
|
|
.woms-chat .chat-audio-bar:focus-visible { outline: 2px solid var(--accent); }
|
|
/* Abspielen in der eigenen Blase: schwarz mit weisser Schrift statt Portal-Weiss. 0,4,0 > 0,3,0 */
|
|
.woms-chat .chat-bubble.mine .chat-audio-play { background: var(--chat-accent); color: var(--chat-on-accent); }
|
|
.woms-chat .chat-audio-dl:hover { background: var(--accent-soft); }
|
|
|
|
/* Meldungen des Bausteins: Fehler rot (--red-fg), Info grau. .chat-composer-note 0,2,0 > 0,1,0; die Zeitanzeige 0,4,0 > 0,3,0 */
|
|
.woms-chat .chat-composer-note,
|
|
.woms-chat .chat-tray-item.is-error .chat-file-size,
|
|
.woms-chat .chat-audio.is-error .chat-audio-time { color: var(--red-fg); }
|
|
.woms-chat .chat-composer-note.is-info { color: var(--text-2); }
|
|
|
|
/* Eingabefeld: Ring statt Rand, Hoehe und Radius wie bisher. 0,2,1 > 0,1,1; :focus 0,3,1 */
|
|
.woms-chat .chat-input-row textarea {
|
|
resize: none; min-height: 46px; max-height: 130px; padding: 11px 14px; border: 0; border-radius: 14px;
|
|
background: var(--bg); color: var(--text); box-shadow: var(--ring); font: inherit; line-height: 1.4;
|
|
}
|
|
.woms-chat .chat-input-row textarea:focus { outline: none; box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-ring); }
|
|
/* "font: inherit" hebt die Portal-Regel gegen das iOS-Zoomen auf: am Handy wieder 16 px */
|
|
@media (max-width: 640px) {
|
|
.woms-chat .chat-input-row textarea { font-size: 16px; }
|
|
}
|
|
|
|
/* Icon-Knoepfe (Anhang, Mikrofon) und Senden. .chat-icon-btn 0,2,0 > 0,1,0; :hover:not(:disabled) 0,4,0 > 0,3,0;
|
|
[aria-expanded] 0,3,0 > 0,2,0; :disabled 0,3,0 > 0,2,0; .chat-send.is-busy:disabled 0,4,0 > 0,3,0.
|
|
Senden bleibt ueber --chat-accent (P1) schwarz mit weisser Schrift. */
|
|
.woms-chat .chat-icon-btn { border: 0; background: var(--bg); color: var(--text); box-shadow: var(--ring); }
|
|
.woms-chat .chat-icon-btn:hover:not(:disabled) { background: var(--bg-hover); }
|
|
.woms-chat .chat-icon-btn[aria-expanded="true"],
|
|
.woms-chat .chat-icon-btn[aria-expanded="true"]:hover:not(:disabled) { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
|
|
.woms-chat .chat-icon-btn:disabled,
|
|
.woms-chat .chat-send:disabled { opacity: 0.55; cursor: not-allowed; }
|
|
.woms-chat .chat-send.is-busy:disabled { opacity: 0.8; cursor: progress; }
|
|
|
|
/* Sprachaufnahme: Knoepfe ohne Ring und Hintergrund, Rot ueber --danger. .chat-rec .chat-icon-btn 0,3,0 > 0,2,0; :hover 0,4,0 > 0,3,0.
|
|
.chat-rec-stop steht hinter der Icon-Knopf-Regel (gleiche Spezifitaet 0,2,0), sonst gewinnt deren Farbe. */
|
|
.woms-chat .chat-rec { border-color: var(--danger-ring); background: var(--red-bg); }
|
|
.woms-chat .chat-rec .chat-icon-btn { background: transparent; box-shadow: none; }
|
|
.woms-chat .chat-rec .chat-icon-btn:hover { background: var(--accent-soft); }
|
|
.woms-chat .chat-rec-stop { color: var(--danger); }
|
|
.woms-chat .chat-rec-wave { color: var(--danger); }
|
|
.woms-chat .chat-rec-dot { background: var(--danger); }
|
|
|
|
/* Anhang-Menue: ohne Rand, mit Schatten; Hover und Tastaturfokus --bg-hover, Fokus zusaetzlich mit Umriss (Portal: outline none).
|
|
.chat-menu 0,2,0 > 0,1,0; .chat-menu button 0,2,1 > 0,1,1; :hover/:focus-visible 0,3,1 > 0,2,1 */
|
|
.woms-chat .chat-menu { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); }
|
|
.woms-chat .chat-menu button { border-radius: var(--radius); }
|
|
.woms-chat .chat-menu button:hover,
|
|
.woms-chat .chat-menu button:focus-visible { background: var(--bg-hover); }
|
|
.woms-chat .chat-menu button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
|
|
|
|
/* Vorschau der Anhaenge vor dem Senden. .chat-tray-item 0,2,0 = Portal-Fehlervariante .chat-tray-item.is-error (0,2,0, spaeter
|
|
geladen): die rote Variante bleibt absichtlich. */
|
|
.woms-chat .chat-tray-item { border: 1px solid transparent; background: var(--bg-hover); }
|
|
|
|
/* Dateien ablegen. .chat-drop-active::after 0,2,1 > 0,1,1 */
|
|
.woms-chat.chat-drop-active::after { background: rgba(255, 255, 255, 0.92); color: var(--text); border-color: var(--text-3); }
|
|
|
|
/* ------------------------------------------------------------------ Seite: Liste und Verlauf (ohne Praefix) --- */
|
|
.chat-page { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; }
|
|
.chat-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; padding-right: var(--sp-4); border-right: 1px solid var(--line); }
|
|
.chat-main { min-width: 0; padding-left: var(--sp-5); }
|
|
.chat-list { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
|
|
.chat-list-item {
|
|
display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 8px;
|
|
width: 100%; padding: 10px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
|
|
background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
|
|
}
|
|
.chat-list-item:first-child { border-top: 1px solid var(--line); }
|
|
.chat-list-item:hover { background: var(--bg-subtle); }
|
|
.chat-list-item[aria-current="true"] { background: var(--accent-soft); }
|
|
.chat-list-top { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
|
|
.chat-list-top strong { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
|
|
.chat-list-last { grid-column: 1; min-width: 0; color: var(--text-2); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.chat-list-time { flex: none; color: var(--text-2); font-size: 12px; }
|
|
.chat-unread { grid-column: 2; color: var(--accent); font-size: 12px; font-weight: 700; }
|
|
.chat-page .chat-back { display: none; }
|
|
|
|
@media (max-width: 1100px) {
|
|
.chat-page { grid-template-columns: 260px minmax(0, 1fr); }
|
|
}
|
|
|
|
/* Handy: eine Spalte, entweder die Liste oder der Verlauf. .chat-page .chat-back 0,2,0 > .btn 0,1,0 */
|
|
@media (max-width: 860px) {
|
|
.chat-page { grid-template-columns: minmax(0, 1fr); }
|
|
.chat-page.has-thread .chat-side { display: none; }
|
|
.chat-page:not(.has-thread) .chat-main { display: none; }
|
|
.chat-page .chat-side,
|
|
.chat-page .chat-main { padding: 0; border: 0; }
|
|
.chat-page .chat-back { display: inline-flex; margin-bottom: var(--sp-3); }
|
|
.woms-chat .chat-bubble { max-width: 90%; }
|
|
}
|