修复消息气泡配色未跟设计稿核对过的问题:发出气泡改蓝底白字,接收气泡改浅灰,日期分隔去掉气泡背景

对照 docs/images/个人对话框(我的状态/对方的状态).png:发出=蓝色实心+白字,接收=浅灰+深字,
与其余相关截图口径一致;旧配色(接收浅绿#c4e0a3、发出用页面同款off-white)不匹配任何参考图,
是尚未跟设计稿核对过的原始默认值。顺带修了一个自查时发现的新问题:已读回执图标复用的.blue
工具类和新的蓝色发出气泡背景是同一个色值,之前会变成看不见的勾选图标,改为不透明白色。

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Your Name
2026-09-07 19:41:18 +08:00
co-authored by Claude Sonnet 5
parent a8b81a51e3
commit f0091fb146
2 changed files with 27 additions and 7 deletions
+26 -6
View File
@@ -133,15 +133,18 @@
--clr-input-invalid-shadow: light-dark(#e5737340, #1a0c0c40);
--clr-input-placeholder-text: var(--clr-text-placeholder);
/* Chat Bubbles */
--clr-bubble-left-bg: light-dark(#c4e0a3, #3e5c1f);
--clr-bubble-left-bg-flash: light-dark(#94a97c, #2c4517);
--clr-bubble-right-bg: var(--clr-background-off-white);
--clr-bubble-right-bg-flash: var(--clr-border-light);
/* Chat Bubbles -- docs/images/个人对话框(我的状态).png 与 ...(对方的状态).png:发出=蓝色实心+白字,
收到=浅灰+深字,这两份参考图和之前所有相关截图口径一致;旧值(收到浅绿#c4e0a3、发出用页面同款
off-white)不匹配任何一张参考图,是尚未跟设计稿核对过的原始默认值,这次改成实际设计要求的配色。 */
--clr-bubble-left-bg: light-dark(#f0f0f0, #2c2c2e);
--clr-bubble-left-bg-flash: light-dark(#d8d8d8, #3a3a3c);
--clr-bubble-right-bg: var(--clr-primary-accent);
--clr-bubble-right-bg-flash: var(--clr-primary-accent-hover);
--clr-bubble-text: light-dark(#212121, #bbc);
--clr-bubble-right-text: #fff;
--clr-bubble-meta-text: var(--clr-text-primary);
--clr-bubble-meta-deleted-bg: var(--clr-primary-wash);
--clr-bubble-meta-date-bg: light-dark(rgba(255 255 255 / 80%), rgba(40 40 40 / 80%));
--clr-bubble-meta-date-bg: transparent;
--clr-bubble-timestamp-text: light-dark(#777, #888);
--clr-bubble-author-text: light-dark(#777, #666);
@@ -4620,6 +4623,7 @@ video {
.right .bubble {
background-color: var(--clr-bubble-right-bg);
color: var(--clr-bubble-right-text);
margin-left: 1.75rem;
}
@@ -4776,6 +4780,22 @@ Font from 3x to almost normal, from 1 to 5 emojis in a message */
user-select: none;
}
/* --clr-bubble-timestamp-text is a mid-gray tuned for the light-gray received bubble; on the new
solid-blue sent bubble it reads as too low-contrast, so the sent side gets its own translucent
white instead of a second global token. */
.right .bubble .timestamp {
color: rgba(255, 255, 255, 0.85);
}
/* deliveryMarker()'s "read" checkmark uses the .blue utility class (lib/utils.js), which resolves
to --clr-primary-accent -- the exact same blue this bubble's background now is. Left as-is, a
read receipt on your own message would render an invisible checkmark. Opaque white keeps it a
shade brighter than the translucent timestamp text next to it, so "read" still reads as distinct
from plain "sent". */
.right .bubble .timestamp .blue {
color: #fff !important;
}
/* The name of the person who sent the message
* (group chat only)
*/