337 lines
7.5 KiB
CSS
337 lines
7.5 KiB
CSS
.date-separator {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 12px 0 8px;
|
|
}
|
|
|
|
.date-separator span {
|
|
background: rgba(0,0,0,0.06);
|
|
padding: 4px 12px;
|
|
border-radius: 12px;
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.system-message {
|
|
text-align: center;
|
|
font-size: 12px;
|
|
color: var(--text-tertiary);
|
|
font-style: italic;
|
|
margin: 6px 0;
|
|
padding: 0 24px;
|
|
}
|
|
|
|
[data-theme="dark"] .system-message {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.msg-link {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
word-break: break-all;
|
|
}
|
|
.msg-link:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Own bubble (primary background) — link must be white */
|
|
.msg-bubble.out .msg-link {
|
|
color: white;
|
|
text-decoration: underline;
|
|
opacity: 0.9;
|
|
}
|
|
.msg-bubble.out .msg-link:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Incoming bubble — link should be a dark/contrasting tone, not the same blue as bubble */
|
|
.msg-bubble.in .msg-link {
|
|
color: var(--primary-dark, #1565c0);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.message-wrapper {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 8px;
|
|
padding: 1px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.message-wrapper.own { flex-direction: row-reverse; }
|
|
.message-wrapper.grouped { margin-top: 2px; }
|
|
.message-wrapper:not(.grouped) { margin-top: 10px; }
|
|
|
|
.avatar-spacer { width: 32px; flex-shrink: 0; }
|
|
|
|
.msg-avatar { flex-shrink: 0; }
|
|
|
|
.message-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 65%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.own .message-body { align-items: flex-end; }
|
|
|
|
.msg-name {
|
|
font-size: calc(0.75rem * var(--font-scale));
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 3px;
|
|
padding: 0 12px;
|
|
}
|
|
|
|
/* Reply preview */
|
|
.reply-preview {
|
|
display: flex;
|
|
gap: 8px;
|
|
background: rgba(0,0,0,0.05);
|
|
border-radius: 8px 8px 0 0;
|
|
padding: 6px 10px;
|
|
margin-bottom: -4px;
|
|
max-width: 280px;
|
|
}
|
|
|
|
.reply-bar { width: 3px; background: var(--primary); border-radius: 2px; flex-shrink: 0; }
|
|
|
|
.reply-name { font-size: calc(0.6875rem * var(--font-scale)); font-weight: 600; color: var(--primary); }
|
|
.reply-text { font-size: calc(0.75rem * var(--font-scale)); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
|
|
|
|
/* Bubble row */
|
|
.msg-bubble-wrap {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 6px;
|
|
}
|
|
|
|
.own .msg-bubble-wrap {
|
|
position: relative; flex-direction: row-reverse; }
|
|
|
|
/* Wrapper that holds the actions toolbar + bubble together */
|
|
.msg-bubble-with-actions {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Actions toolbar — floats above the bubble */
|
|
.msg-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 4px 6px;
|
|
box-shadow: var(--shadow-md);
|
|
position: absolute;
|
|
top: -36px;
|
|
z-index: 20;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Own messages: toolbar anchors to the right edge of bubble */
|
|
.msg-actions.actions-left { right: 0; }
|
|
/* Other messages: toolbar anchors to the left edge of bubble */
|
|
.msg-actions.actions-right { left: 0; }
|
|
|
|
.quick-emoji {
|
|
font-size: 16px;
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
}
|
|
.quick-emoji:hover { background: var(--background); transform: scale(1.2); }
|
|
|
|
.action-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
color: var(--text-secondary);
|
|
}
|
|
.action-btn:hover { color: var(--text-primary); }
|
|
.action-btn.danger:hover { color: var(--error); }
|
|
|
|
/* Emoji picker — anchored relative to the toolbar */
|
|
.emoji-picker-wrap {
|
|
position: absolute;
|
|
top: -360px; /* above the toolbar by default */
|
|
z-index: 100;
|
|
}
|
|
.emoji-picker-wrap.picker-right { left: 0; }
|
|
.emoji-picker-wrap.picker-left { right: 0; }
|
|
/* When message is near top of window, open picker downward instead */
|
|
.emoji-picker-wrap.picker-down {
|
|
top: 36px;
|
|
}
|
|
|
|
/* Bubble */
|
|
.msg-bubble {
|
|
padding: 8px 12px;
|
|
border-radius: 18px;
|
|
max-width: 100%;
|
|
word-break: break-word;
|
|
position: relative;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.msg-bubble {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
}
|
|
}
|
|
|
|
.msg-bubble.out {
|
|
background: var(--primary);
|
|
color: white;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
.msg-bubble.in {
|
|
background: var(--bubble-in);
|
|
color: var(--text-primary);
|
|
border-bottom-left-radius: 4px;
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.msg-bubble.deleted {
|
|
background: transparent !important;
|
|
border: 1px dashed var(--border);
|
|
}
|
|
|
|
.deleted-text { font-size: calc(0.8125rem * var(--font-scale)); color: var(--text-tertiary); font-style: italic; }
|
|
|
|
.msg-text {
|
|
font-size: calc(0.875rem * var(--font-scale));
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.mention {
|
|
color: #1a5ca8;
|
|
font-weight: 600;
|
|
background: rgba(26,92,168,0.1);
|
|
border-radius: 3px;
|
|
padding: 0 2px;
|
|
}
|
|
|
|
/* Sender bubble — primary colour is the background, so mention must contrast against it */
|
|
.out .mention {
|
|
color: #ffffff;
|
|
background: rgba(255,255,255,0.22);
|
|
}
|
|
|
|
.msg-image {
|
|
max-width: 240px;
|
|
max-height: 240px;
|
|
border-radius: 12px;
|
|
display: block;
|
|
cursor: pointer;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.msg-time {
|
|
font-size: calc(0.6875rem * var(--font-scale));
|
|
color: var(--text-tertiary);
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
/* Reactions */
|
|
.reactions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
margin-top: 4px;
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.reaction-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 3px 8px;
|
|
border-radius: 12px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
font-size: calc(0.875rem * var(--font-scale));
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
}
|
|
.reaction-count { font-size: calc(0.75rem * var(--font-scale)); color: var(--text-secondary); }
|
|
.reaction-btn.active { background: var(--primary-light); border-color: var(--primary); }
|
|
.reaction-btn.active .reaction-count { color: var(--primary); }
|
|
.reaction-btn:hover { background: var(--primary-light); }
|
|
.reaction-remove {
|
|
font-size: 13px;
|
|
color: var(--primary);
|
|
font-weight: 700;
|
|
margin-left: 1px;
|
|
line-height: 1;
|
|
opacity: 0;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.reaction-btn:hover .reaction-remove { opacity: 1; }
|
|
|
|
/* Link preview */
|
|
.link-preview {
|
|
display: flex;
|
|
gap: 10px;
|
|
background: rgba(0,0,0,0.06);
|
|
border-radius: 10px;
|
|
padding: 10px;
|
|
margin-top: 6px;
|
|
text-decoration: none;
|
|
max-width: 280px;
|
|
overflow: hidden;
|
|
transition: var(--transition);
|
|
}
|
|
.link-preview:hover { background: rgba(0,0,0,0.1); }
|
|
|
|
.link-preview-img {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 6px;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.link-preview-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.link-site { font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.link-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
.link-desc { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
.out .link-preview { background: rgba(255,255,255,0.15); }
|
|
.out .link-title { color: white; }
|
|
.out .link-desc { color: rgba(255,255,255,0.8); }
|
|
|
|
/* Emoji-only messages: no bubble background, large size */
|
|
.msg-bubble.emoji-only {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 2px 4px;
|
|
}
|
|
.msg-bubble.emoji-only::after { display: none; }
|
|
|
|
.msg-text.emoji-msg {
|
|
font-size: 3em;
|
|
line-height: 1.1;
|
|
margin: 0;
|
|
user-select: text;
|
|
}
|
|
|