JUSN/tickte-system
0
0 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Chat im Ticketsystem: Messenger unter Kunden, Reiter Chat auf der Kundenseite

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-10-01 23:35:59 +00:00
1 parent 005875d970
commit eb0b889203
7 files changed
+299 -3
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/styles/chat.css
+52
View File
@@ -0,0 +1,52 @@
/* Chat im Ticketsystem (Messenger und Reiter "Chat"). Eingabezeile, Anhaenge und Sprachnachrichten kommen aus
chat-composer.css des Kundenportals; hier Farben (--chat-*), Verlauf, Sprechblasen und die Liste. */
.woms-chat {
--chat-accent: var(--accent);
--chat-accent-hover: var(--accent-2);
--chat-accent-soft: var(--accent-soft);
--chat-accent-line: rgba(16, 185, 129, 0.5);
--chat-accent-text: var(--accent);
--chat-on-accent: #04130d;
--chat-surface: var(--surface-2);
display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0;
}
.woms-chat .chat-messages {
display: flex; flex-direction: column; gap: 8px; min-height: 280px; max-height: 60vh; overflow-y: auto;
padding: 12px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.woms-chat .chat-bubble {
align-self: flex-start; max-width: 78%; padding: 8px 12px; border-radius: 14px;
background: var(--surface-2); color: var(--text); overflow-wrap: anywhere;
}
.woms-chat .chat-bubble.mine { align-self: flex-end; background: var(--accent-soft); border: 1px solid rgba(16, 185, 129, 0.35); }
.woms-chat .chat-meta { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-muted); }
.woms-chat .chat-notice { font-size: 12px; }
/* Eingabefeld: Grundstil wie im Admin-Panel (chat-composer.css setzt nur das Layout) */
.woms-chat .chat-input-row textarea {
resize: none; min-height: 46px; max-height: 130px; padding: 11px 14px; border-radius: 14px;
border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; line-height: 1.4;
}
.woms-chat .chat-input-row textarea:focus { outline: none; border-color: var(--accent); }
.chat-page { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.chat-side { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.chat-list { display: flex; flex-direction: column; max-height: 70vh; overflow-y: auto; }
.chat-list-item {
display: grid; gap: 2px; padding: 10px 14px; border: none; border-bottom: 1px solid var(--border);
background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.chat-list-item:hover { background: var(--surface-2); }
.chat-list-item.active { background: var(--accent-soft); }
.chat-list-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.chat-list-last { color: var(--text-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-list-time { color: var(--text-faint); font-size: 11.5px; }
.chat-main { min-width: 0; }
.chat-back { display: none; }
@media (max-width: 720px) {
.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-back { display: inline-flex; }
.woms-chat .chat-bubble { max-width: 90%; }
}