下面是本应用可直接使用的完整示例,改数值即可生效。点击底部按钮可一键填入上方输入框。
.message-row.user { } /* 我的消息 */
.message-row.reply { } /* 对方消息 */
.bubble-row { } /* 气泡行 */
.bubble { } /* 所有气泡通用 */
.bubble.message-sent { } /* 我方气泡 */
.bubble.message-received { } /* 对方气泡 */
.bubble.question-bubble { } /* 抉择小卡片 */
.bubble { font-size: 13px; color: #2b2b2b; }
.time { font-size: 9px; color: #b0b0b0; } /* 时间 */
.bubble { border-radius: 12px; }
.bubble::after { } /* 需要时自行添加尾巴 */
:root { --user-bubble-bg:#F5F5F5; --reply-bubble-bg:#FEFEFE; }
:root { --user-bubble-border:#E7E7E7; --reply-bubble-border:#E4E4E4; }
:root { --chat-font-color:#2b2b2b; --bubble-radius:12px; }
/* 完整示例:可直接粘贴 */
.message-row.user .bubble{
background:#F5F5F5;
border:1px solid #E7E7E7;
border-radius:12px;
color:#2b2b2b;
}
.message-row.reply .bubble{
background:#FEFEFE;
border:1px solid #E4E4E4;
border-radius:12px;
color:#2b2b2b;
}
.bubble.question-bubble{
background:#fbfbfa;
border:1px solid #e3e3dd;
}
.time{ font-size:9px; color:#b0b0b0; }
.input-field-wrap input{ color:#333; }
包含字卡、表情包、聊天记录、外观设置等全部内容。导入会覆盖当前数据并刷新页面。