adam/mc-webui
1
0
Fork 0
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-08-06 16:53:21 +02:00
Code Issues Packages Projects Releases Wiki Activity

style(dm): move timestamp above bubble, improve meta readability

Browse Source 
Move DM timestamp+status row above the message bubble (consistent with
group messages). Increase delivery/SNR meta font size and adjust color
for better readability in both light and dark themes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-03-29 20:32:36 +02:00
parent 10c232fc7d
commit a983210e10
3 changed files with 83 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/css/style.css
+40 -13
View File
@@ -492,7 +492,7 @@ main {
font-size: 0.8rem;
}
.dm-message {
.dm-message-wrapper {
max-width: 85%;
}
@@ -683,31 +683,58 @@ main {
}
}
/* DM Message Bubbles */
.dm-message {
/* DM Message Wrapper - timestamp + bubble */
.dm-message-wrapper {
max-width: 70%;
padding: 0.75rem 1rem;
border-radius: 1rem;
word-wrap: break-word;
display: flex;
flex-direction: column;
animation: fadeIn 0.3s ease-in;
}
.dm-message.own {
.dm-message-wrapper.own {
align-self: flex-end;
}
.dm-message-wrapper.other {
align-self: flex-start;
}
/* DM Time Row - above bubble */
.dm-time-row {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.7rem;
color: var(--text-muted);
margin-bottom: 0.2rem;
padding: 0 0.25rem;
}
.dm-message-wrapper.own .dm-time-row {
justify-content: flex-end;
}
/* DM Message Bubbles */
.dm-message {
padding: 0.75rem 1rem;
border-radius: 1rem;
word-wrap: break-word;
}
.dm-message.own {
background-color: var(--msg-own-bg);
border: 1px solid var(--msg-own-border);
}
.dm-message.other {
align-self: flex-start;
background-color: var(--msg-other-bg);
border: 1px solid var(--msg-border);
}
/* DM Message Metadata */
.dm-meta {
font-size: 0.65rem;
color: var(--text-meta);
font-size: 0.75rem;
color: var(--dm-meta-color);
margin-top: 0.25rem;
}
@@ -743,8 +770,8 @@ main {
}
.dm-delivery-meta {
font-size: 0.65rem;
color: var(--text-meta);
font-size: 0.75rem;
color: var(--dm-meta-color);
margin-top: 0.1rem;
}
@@ -1577,7 +1604,7 @@ main {
/* Hidden messages when filtering */
.message-wrapper.filter-hidden,
.dm-message.filter-hidden {
.dm-message-wrapper.filter-hidden {
display: none !important;
}
app/static/css/theme.css
+2
View File
@@ -23,6 +23,7 @@
--text-secondary: #495057;
--text-muted: #6c757d;
--text-meta: #adb5bd;
--dm-meta-color: #8b939b;
/* Borders */
--border-color: #dee2e6;
@@ -176,6 +177,7 @@
--text-secondary: #94a3b8;
--text-muted: #64748b;
--text-meta: #475569;
--dm-meta-color: #5c6d82;
/* Borders */
--border-color: #334155;