1020 lines
26 KiB
Text
1020 lines
26 KiB
Text
/* 🎨 现代化聊天页面样式 - 深色主题 2025 */
|
||
|
||
/* 🎨 CSS变量定义 - 黑色主题（本文件局部覆盖） */
|
||
page {
|
||
--primary-color: #0A84FF; /* accent */
|
||
--primary-light: #3EA8FF;
|
||
--primary-dark: #0056CC;
|
||
--background-color: #070709; /* 页面背景主色（几乎黑） */
|
||
--surface-color: #0F0F11; /* 气泡/卡片背景 */
|
||
--text-primary: #ECECEC; /* 主要文字-浅色 */
|
||
--text-secondary: #A8A8A8; /* 次要文字 */
|
||
--text-tertiary: #7A7A7A;
|
||
--border-color: rgba(255,255,255,0.06);
|
||
--shadow-light: 0 1rpx 6rpx rgba(0, 0, 0, 0.6);
|
||
--shadow-medium: 0 6rpx 18rpx rgba(0, 0, 0, 0.7);
|
||
--radius-small: 8rpx;
|
||
--radius-medium: 12rpx;
|
||
--radius-large: 20rpx;
|
||
}
|
||
|
||
/* ===== 浅色主题覆盖（当根元素包含 .theme-light 时生效） ===== */
|
||
.theme-light {
|
||
--primary-color: #007AFF;
|
||
--primary-light: #5AC8FA;
|
||
--primary-dark: #0051D5;
|
||
--background-color: #F2F2F7;
|
||
--surface-color: #FFFFFF;
|
||
--text-primary: #000000;
|
||
--text-secondary: #8E8E93;
|
||
--text-tertiary: #C7C7CC;
|
||
--border-color: #E5E5EA;
|
||
--shadow-light: 0 1rpx 3rpx rgba(0,0,0,0.1);
|
||
--shadow-medium: 0 4rpx 12rpx rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* 关键覆盖，修正本文件中使用硬编码深色的选择器 */
|
||
.theme-light .message-wrapper.other .message-content {
|
||
background: var(--surface-color);
|
||
color: var(--text-primary);
|
||
border: 1rpx solid var(--border-color);
|
||
box-shadow: var(--shadow-medium);
|
||
}
|
||
|
||
.theme-light .message-wrapper.self .message-content {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 4rpx 16rpx rgba(0, 122, 255, 0.3);
|
||
}
|
||
|
||
.theme-light .avatar-placeholder {
|
||
background: #C8C8CD;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.theme-light .message-wrapper.self .avatar-placeholder {
|
||
background: #576B95;
|
||
color: #FFFFFF;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.theme-light .input-area {
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.95) 100%);
|
||
border-top: 1rpx solid var(--border-color);
|
||
box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.theme-light .text-input {
|
||
background: rgba(0,0,0,0.02);
|
||
border: 1rpx solid var(--border-color);
|
||
color: var(--text-primary);
|
||
width: 100%;
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
white-space: pre-wrap;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
box-sizing: border-box;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.theme-light .text-input:focus {
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06);
|
||
}
|
||
|
||
.theme-light .tool-btn {
|
||
border: 1rpx solid var(--border-color);
|
||
background: rgba(0,0,0,0.02);
|
||
}
|
||
|
||
.theme-light .tool-btn:active {
|
||
background: rgba(0,0,0,0.05);
|
||
}
|
||
|
||
.theme-light .emoji-panel,
|
||
.theme-light .more-panel {
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(248,248,248,0.95) 100%);
|
||
border-top: 1rpx solid var(--border-color);
|
||
box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.1);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.theme-light .emoji-item {
|
||
background: rgba(0,0,0,0.03);
|
||
}
|
||
|
||
.theme-light .emoji-item:active {
|
||
background: rgba(0,0,0,0.08);
|
||
}
|
||
|
||
.theme-light .loading-container {
|
||
background: rgba(255,255,255,0.95);
|
||
color: #333;
|
||
box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.15);
|
||
}
|
||
|
||
.theme-light .time-text {
|
||
background: var(--surface-color);
|
||
color: var(--text-secondary);
|
||
box-shadow: var(--shadow-light);
|
||
}
|
||
|
||
/* 主题覆盖：当 chat container 同时有 .theme-light 时，强制浅色背景覆盖 */
|
||
.chat-container.theme-light {
|
||
background: linear-gradient(180deg, var(--background-color) 0%, #F8F8F8 100%);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* 反向：确保 theme-dark 明确覆盖（保守写法） */
|
||
.chat-container.theme-dark {
|
||
background: linear-gradient(180deg, var(--background-color) 0%, #0B0B0D 100%);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
/* === 主题切换过渡（类 Telegram）=== */
|
||
.chat-container {
|
||
transition: background-color 280ms ease, color 280ms ease, background 280ms ease;
|
||
}
|
||
.chat-container.theme-transitioning {
|
||
/* 轻微的亮度过渡，模拟 Telegram 的柔和切换 */
|
||
transition: background 320ms ease, color 320ms ease, filter 320ms ease;
|
||
}
|
||
|
||
/* 消息气泡、输入区等关键区域同步过渡，避免突变 */
|
||
.message-content,
|
||
.input-area,
|
||
.emoji-panel,
|
||
.more-panel,
|
||
.time-text,
|
||
.tool-btn,
|
||
.message-wrapper.self .message-content,
|
||
.message-wrapper.other .message-content {
|
||
transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
|
||
}
|
||
|
||
/* 现代化导航栏 */
|
||
.custom-navbar {
|
||
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
box-shadow: var(--shadow-medium);
|
||
backdrop-filter: blur(12rpx);
|
||
}
|
||
|
||
.navbar-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 44px;
|
||
padding: 0 32rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.navbar-left, .navbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.navbar-left {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
justify-content: center;
|
||
border-radius: var(--radius-medium);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.navbar-right {
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.navbar-left:active, .navbar-right:active {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.navbar-center {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 20rpx;
|
||
}
|
||
|
||
.navbar-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: white;
|
||
max-width: 400rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.4);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.navbar-subtitle {
|
||
font-size: 24rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.icon-back {
|
||
font-size: 44rpx;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon-search, .icon-more {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-medium);
|
||
transition: all 0.3s ease;
|
||
font-size: 32rpx;
|
||
color: white;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.icon-search:active, .icon-more:active {
|
||
background: rgba(255, 255, 255, 0.02);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 🎨 现代化消息列表 */
|
||
.message-list {
|
||
flex: 1;
|
||
padding: 20rpx 0;
|
||
margin-bottom: 200rpx;
|
||
background: transparent;
|
||
position: relative;
|
||
}
|
||
|
||
.message-item {
|
||
margin-bottom: 32rpx;
|
||
padding: 0 32rpx;
|
||
animation: messageSlideIn 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes messageSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 现代化时间分隔线 */
|
||
.time-divider {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 40rpx 0 32rpx 0;
|
||
}
|
||
|
||
.time-text {
|
||
background: rgba(255,255,255,0.03);
|
||
color: var(--text-secondary);
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
padding: 12rpx 24rpx;
|
||
border-radius: 999rpx;
|
||
letter-spacing: 0.5rpx;
|
||
box-shadow: none;
|
||
backdrop-filter: blur(6rpx);
|
||
}
|
||
|
||
/* 消息容器 - 布局 */
|
||
.message-wrapper {
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
/* 对方消息：头像在左 */
|
||
.message-wrapper.other {
|
||
flex-direction: row !important;
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
/* 我的消息：头像在右 */
|
||
.message-wrapper.self {
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
/* 头像样式 */
|
||
.avatar {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.message-wrapper.other .avatar {
|
||
margin: 0 20rpx 0 0;
|
||
}
|
||
|
||
.message-wrapper.self .avatar {
|
||
margin: 0 0 0 20rpx;
|
||
}
|
||
|
||
.avatar-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar-image image {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg,#1B1B1D 0%, #101012 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: var(--text-primary);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.message-wrapper.self .avatar-placeholder {
|
||
background: linear-gradient(135deg,#0A274E 0%, #05203A 100%);
|
||
color: #FFFFFF;
|
||
font-weight: 700;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* 消息主体 */
|
||
.message-body {
|
||
flex: 1;
|
||
max-width: 480rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.message-wrapper.other .message-body {
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.message-wrapper.self .message-body {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
/* 发送者名称（群聊） */
|
||
.sender-name {
|
||
font-size: 24rpx;
|
||
color: var(--text-secondary);
|
||
margin-bottom: 8rpx;
|
||
padding: 0 16rpx;
|
||
}
|
||
|
||
/* 消息气泡 */
|
||
.message-content {
|
||
border-radius: var(--radius-large);
|
||
padding: 20rpx 28rpx 36rpx 28rpx; /* 为气泡内时间预留底部空间 */
|
||
position: relative;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
max-width: 520rpx;
|
||
line-height: 1.6;
|
||
font-size: 32rpx;
|
||
box-shadow: none;
|
||
backdrop-filter: blur(6rpx);
|
||
transition: all 0.15s ease;
|
||
}
|
||
|
||
/* 对方消息气泡（深色） */
|
||
.message-wrapper.other .message-content {
|
||
background: #141416;
|
||
color: var(--text-primary);
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
border-top-left-radius: var(--radius-small);
|
||
}
|
||
|
||
.message-wrapper.other .message-content:hover {
|
||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
/* 我的消息气泡（偏蓝） */
|
||
.message-wrapper.self .message-content {
|
||
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
||
color: #FFFFFF;
|
||
border-top-right-radius: var(--radius-small);
|
||
box-shadow: 0 6rpx 20rpx rgba(10,132,255,0.18);
|
||
}
|
||
|
||
.message-wrapper.self .message-content:hover {
|
||
box-shadow: 0 8rpx 28rpx rgba(10,132,255,0.14);
|
||
}
|
||
|
||
/* 为气泡内时间/状态预留右侧空间，避免短消息换行抖动 */
|
||
.message-wrapper.self .message-content { padding-right: 120rpx; }
|
||
.message-wrapper.other .message-content { padding-right: 88rpx; }
|
||
|
||
/* 气泡内时间与状态（右下角） */
|
||
.bubble-meta {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
bottom: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
opacity: 0.75;
|
||
}
|
||
.bubble-meta { white-space: nowrap; }
|
||
.bubble-time {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.75);
|
||
}
|
||
.message-wrapper.other .bubble-time { color: var(--text-secondary); }
|
||
|
||
.meta-status { font-size: 22rpx; line-height: 1; }
|
||
.meta-read { color: #B2E5FF; }
|
||
.meta-delivered { color: rgba(255,255,255,0.9); }
|
||
.meta-sending { color: var(--text-tertiary); animation: pulse 1.5s ease-in-out infinite; }
|
||
.meta-failed { color: #ff6b6b; font-weight: 700; }
|
||
|
||
/* 强制把自己消息的头像固定在右侧 */
|
||
.message-wrapper.self {
|
||
position: relative;
|
||
}
|
||
|
||
.message-wrapper.self .avatar {
|
||
position: absolute;
|
||
right: 16rpx;
|
||
top: 8rpx;
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
}
|
||
|
||
.message-wrapper.self .message-body {
|
||
margin-right: 120rpx;
|
||
}
|
||
|
||
/* 失败重发行：显示在自己消息气泡下方靠右 */
|
||
.resend-row {
|
||
display: flex;
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
margin-top: 8rpx;
|
||
padding-right: 120rpx; /* 与头像空隙对齐 */
|
||
}
|
||
.resend-action {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
padding: 8rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
color: #ff6b6b;
|
||
background: rgba(255,107,107,0.1);
|
||
border: 1rpx solid rgba(255,107,107,0.2);
|
||
}
|
||
.resend-action:active { transform: scale(0.98); background: rgba(255,107,107,0.14); }
|
||
.resend-icon { font-size: 22rpx; font-weight: 700; }
|
||
.resend-text { font-size: 24rpx; color: #ff7b7b; }
|
||
|
||
.theme-light .resend-action { color: #c62828; background: rgba(198,40,40,0.08); border-color: rgba(198,40,40,0.2); }
|
||
.theme-light .resend-text { color: #d32f2f; }
|
||
|
||
/* 文本、图片等样式保持，但颜色适配深色 */
|
||
.text-content {
|
||
font-size: 32rpx;
|
||
line-height: 1.6;
|
||
font-weight: 400;
|
||
letter-spacing: 0.5rpx;
|
||
color: inherit;
|
||
}
|
||
|
||
/* 撤回消息样式 */
|
||
.recalled-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
font-size: 28rpx;
|
||
color: var(--text-tertiary);
|
||
text-align: center;
|
||
padding: 20rpx 30rpx;
|
||
background: transparent;
|
||
border: 1rpx dashed var(--border-color);
|
||
border-radius: var(--radius-medium);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* 上传进度条样式 */
|
||
.upload-progress {
|
||
margin-top: 8rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
.upload-progress-bar {
|
||
width: 240rpx;
|
||
height: 8rpx;
|
||
background: rgba(255,255,255,0.1);
|
||
border-radius: 8rpx;
|
||
overflow: hidden;
|
||
}
|
||
.theme-light .upload-progress-bar {
|
||
background: rgba(0,0,0,0.08);
|
||
}
|
||
.upload-progress-fill {
|
||
height: 100%;
|
||
background: var(--primary-color);
|
||
}
|
||
.upload-progress-text {
|
||
font-size: 22rpx;
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.recalled-icon {
|
||
font-size: 24rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.recalled-text {
|
||
font-style: italic;
|
||
}
|
||
|
||
.message-content.recalled {
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border: none !important;
|
||
min-width: 240rpx;
|
||
}
|
||
|
||
.theme-light .recalled-content {
|
||
color: var(--text-secondary);
|
||
border-color: var(--border-color);
|
||
}
|
||
|
||
.image-content {
|
||
max-width: 420rpx; /* 缩小图片显示宽度 */
|
||
max-height: 360rpx; /* 限制图片高度，避免占满屏 */
|
||
border-radius: var(--radius-medium);
|
||
background: linear-gradient(45deg, #151515, #222);
|
||
box-shadow: var(--shadow-light);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.image-content:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
.error-content {
|
||
padding: 20rpx;
|
||
background: rgba(255, 60, 60, 0.08);
|
||
border: 1px solid rgba(255,60,60,0.12);
|
||
border-radius: 12rpx;
|
||
max-width: 400rpx;
|
||
}
|
||
|
||
.error-text { color: #ff6b6b; }
|
||
.error-detail { color: #ffb86b; }
|
||
.error-original { color: var(--text-secondary); }
|
||
|
||
/* 文件消息 */
|
||
.file-content {
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 240rpx;
|
||
padding: 20rpx;
|
||
background: rgba(255,255,255,0.02);
|
||
border-radius: var(--radius-medium);
|
||
backdrop-filter: blur(6rpx);
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.file-content:active {
|
||
transform: scale(0.98);
|
||
background: rgba(255,255,255,0.03);
|
||
}
|
||
|
||
/* 卡片、贴纸等 */
|
||
.card-content { background: rgba(255,255,255,0.02); }
|
||
.card-name, .file-name { color: var(--text-primary); }
|
||
.card-phone, .file-size { color: var(--text-secondary); }
|
||
|
||
.system-content { background: rgba(255,255,255,0.02); color: var(--text-secondary); }
|
||
|
||
.video-content { max-width: 420rpx; max-height: 360rpx; border-radius: 12rpx; }
|
||
/* 音频、视频、位置等适配 */
|
||
.audio-content, .location-content { background: rgba(255,255,255,0.02); border: 1rpx solid rgba(255,255,255,0.03); }
|
||
.audio-icon, .file-icon { color: var(--text-secondary); }
|
||
|
||
@keyframes pulse { 0%,100%{transform:scale(1)}50%{transform:scale(1.05)} }
|
||
|
||
/* Telegram风格的消息状态指示器 */
|
||
.message-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 6rpx;
|
||
margin-right: 8rpx;
|
||
font-size: 24rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 发送中状态 */
|
||
.status-sending {
|
||
color: var(--text-tertiary);
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
/* 发送失败状态 */
|
||
.status-failed {
|
||
color: #ff6b6b;
|
||
background: rgba(255,107,107,0.1);
|
||
border-radius: 50%;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
/* 已送达状态（单勾） */
|
||
.status-delivered {
|
||
color: var(--text-secondary);
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 已读状态（双勾） */
|
||
.status-read {
|
||
color: var(--primary-color);
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 等待状态 */
|
||
.status-pending {
|
||
color: var(--text-tertiary);
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
/* 浅色主题下的状态样式 */
|
||
.theme-light .status-delivered {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.theme-light .status-read {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.theme-light .status-sending,
|
||
.theme-light .status-pending {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
.loading-dots .dot { background: var(--text-secondary); }
|
||
|
||
.load-more-top {
|
||
text-align: center;
|
||
padding: 18rpx 28rpx;
|
||
background: rgba(255,255,255,0.02);
|
||
margin-bottom: 18rpx;
|
||
border-radius: 12rpx;
|
||
margin: 0 16rpx 18rpx 16rpx;
|
||
}
|
||
|
||
.load-more-text { color: var(--text-secondary); font-size: 26rpx; }
|
||
|
||
/* 输入区域 */
|
||
.input-area {
|
||
background: linear-gradient(180deg, rgba(12,12,14,0.98) 0%, rgba(10,10,12,0.98) 100%);
|
||
border-top: 1rpx solid rgba(255,255,255,0.03);
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
backdrop-filter: blur(10rpx);
|
||
box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.7);
|
||
max-height: 30vh; /* 限制最大高度为屏幕的30% */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.input-row {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding: 20rpx 24rpx;
|
||
min-height: 100rpx;
|
||
max-height: 200rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
min-height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
border-radius: var(--radius-medium);
|
||
margin-right: 16rpx;
|
||
flex-shrink: 0;
|
||
transition: all 0.2s ease;
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
}
|
||
|
||
.tool-btn:active { transform: scale(0.95); background: rgba(255,255,255,0.02); }
|
||
|
||
.text-input-wrapper {
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
min-width: 0; /* 确保能够收缩 */
|
||
max-width: calc(100% - 160rpx); /* 为左右按钮预留空间 */
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.text-input {
|
||
background: rgba(255,255,255,0.02);
|
||
border: 1rpx solid rgba(255,255,255,0.03);
|
||
border-radius: var(--radius-large);
|
||
padding: 18rpx 24rpx;
|
||
font-size: 32rpx;
|
||
min-height: 44rpx;
|
||
max-height: 120rpx;
|
||
width: 100%;
|
||
color: var(--text-primary);
|
||
transition: all 0.18s ease;
|
||
resize: none;
|
||
line-height: 1.4;
|
||
word-wrap: break-word;
|
||
word-break: break-word;
|
||
white-space: pre-wrap;
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
box-sizing: border-box;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.text-input:focus { border-color: var(--primary-color); box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06); }
|
||
|
||
/* 语音输入容器与文本输入保持同样的伸展规则 */
|
||
.voice-input-wrapper {
|
||
flex: 1;
|
||
margin-right: 16rpx;
|
||
min-width: 0; /* 允许收缩，避免被按钮挤出 */
|
||
max-width: calc(100% - 160rpx); /* 为左右按钮预留空间，和 text-input-wrapper 保持一致 */
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.voice-btn {
|
||
background: rgba(255,255,255,0.02);
|
||
color: var(--text-primary);
|
||
flex-shrink: 0;
|
||
min-height: 76rpx;
|
||
border-radius: var(--radius-medium);
|
||
border: none;
|
||
font-size: 28rpx;
|
||
align-self: flex-end;
|
||
width: 100%; /* 占满容器宽度 */
|
||
box-sizing: border-box;
|
||
padding: 18rpx 24rpx; /* 与文本输入视觉统一 */
|
||
}
|
||
.voice-btn.recording { background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%); color: white; }
|
||
|
||
.send-btn {
|
||
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
||
color: white;
|
||
padding: 18rpx 30rpx;
|
||
border-radius: var(--radius-medium);
|
||
border: none;
|
||
font-size: 28rpx;
|
||
align-self: flex-end;
|
||
margin-bottom: 2rpx;
|
||
flex-shrink: 0;
|
||
min-height: 76rpx;
|
||
}
|
||
|
||
/* 表情面板 */
|
||
.emoji-panel {
|
||
background: linear-gradient(180deg, rgba(16,16,18,0.98) 0%, rgba(12,12,14,0.98) 100%);
|
||
border-top: 1rpx solid rgba(255,255,255,0.03);
|
||
padding: 24rpx 20rpx;
|
||
max-height: 400rpx;
|
||
backdrop-filter: blur(12rpx);
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.emoji-scroll {
|
||
height: 100%;
|
||
max-height: 352rpx; /* 400rpx - 48rpx padding */
|
||
}
|
||
|
||
.emoji-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
gap: 16rpx;
|
||
padding: 8rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0; /* 为底部安全区留白，避免被遮挡 */
|
||
}
|
||
|
||
.emoji-item {
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 52rpx;
|
||
border-radius: var(--radius-medium);
|
||
background: rgba(255,255,255,0.02);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.emoji-item:active {
|
||
background: rgba(255,255,255,0.08);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
/* 表情滚动底部占位，提供安全区滚动空间 */
|
||
.emoji-bottom-spacer { height: env(safe-area-inset-bottom); }
|
||
|
||
/* 更多面板 */
|
||
.more-panel-overlay {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
align-items: flex-end; /* panel at bottom */
|
||
justify-content: center;
|
||
background: rgba(0,0,0,0.6);
|
||
z-index: 2300; /* above input-area (1000) and other floating widgets */
|
||
}
|
||
|
||
.more-panel {
|
||
background: var(--surface-color, #0B0B0D);
|
||
color: var(--text-primary);
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 12rpx 0 24rpx 0;
|
||
width: 100%;
|
||
max-height: 60vh;
|
||
box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.6);
|
||
z-index: 2400; /* ensure panel sits above overlay and any page floats */
|
||
}
|
||
|
||
/* theme-light overrides for panel */
|
||
.theme-light .more-panel-overlay { background: rgba(0,0,0,0.35); }
|
||
.theme-light .more-panel { background: linear-gradient(180deg, var(--background-color) 0%, #F8F8F8 100%); color: var(--text-primary); box-shadow: 0 -8rpx 32rpx rgba(0,0,0,0.08); }
|
||
.more-panel-header { display:flex; justify-content:space-between; align-items:center; padding:24rpx 28rpx; border-bottom:1rpx solid rgba(255,255,255,0.03); }
|
||
.more-panel-title { font-size:36rpx; font-weight:600; color:var(--text-primary); }
|
||
.more-panel-header { position: relative; }
|
||
.more-panel-close { width:56rpx; height:56rpx; position:absolute; right:16rpx; top:12rpx; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.12); border-radius:28rpx; font-size:28rpx; color:var(--text-secondary); }
|
||
.more-panel-close:active { background: rgba(0,0,0,0.16); transform:scale(0.96); }
|
||
|
||
/* small drag handle */
|
||
.more-panel-handle {
|
||
width: 64rpx;
|
||
height: 8rpx;
|
||
background: rgba(255,255,255,0.06);
|
||
border-radius: 8rpx;
|
||
margin: 8rpx auto 12rpx auto;
|
||
}
|
||
|
||
/* more panel content layout */
|
||
.more-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 20rpx 24rpx;
|
||
padding: 8rpx 20rpx 12rpx 20rpx;
|
||
justify-content: space-around; /* center items evenly */
|
||
align-items: center;
|
||
}
|
||
|
||
.more-item {
|
||
min-width: 84rpx;
|
||
width: 22%;
|
||
max-width: 120rpx;
|
||
height: 96rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(255,255,255,0.02);
|
||
border-radius: 16rpx;
|
||
box-shadow: var(--shadow-light);
|
||
color: var(--text-primary);
|
||
text-align: center;
|
||
padding: 6rpx;
|
||
}
|
||
|
||
.more-item:active { transform: scale(0.96); background: rgba(255,255,255,0.03); }
|
||
|
||
.more-icon { font-size: 44rpx; margin-bottom: 6rpx; }
|
||
.more-text { font-size: 22rpx; color: var(--text-secondary); line-height: 1.1; }
|
||
|
||
/* ensure panel respects safe-area at bottom */
|
||
.more-panel { padding-bottom: calc(env(safe-area-inset-bottom) + 16rpx); }
|
||
|
||
/* 录音提示 */
|
||
.recording-tips { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background: rgba(0,0,0,0.85); color:var(--text-primary); padding:28rpx 36rpx; border-radius:12rpx; font-size:30rpx; z-index:2000; }
|
||
|
||
/* 加载 */
|
||
.loading-container { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2000; background: rgba(0,0,0,0.75); border-radius:16rpx; padding:28rpx; box-shadow:0 12rpx 36rpx rgba(0,0,0,0.7); backdrop-filter: blur(12rpx); }
|
||
.loading-spinner { width:56rpx; height:56rpx; border:4rpx solid rgba(255,255,255,0.08); border-top:4rpx solid var(--primary-color); border-radius:50%; animation:spin 1s linear infinite; margin-bottom:12rpx; }
|
||
.loading-text { font-size:26rpx; color:var(--text-secondary); font-weight:500; }
|
||
|
||
@keyframes spin { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
|
||
|
||
/* 滚动到底部按钮 */
|
||
|
||
/* === 主题切换径向遮罩动画 === */
|
||
.theme-overlay {
|
||
position: fixed;
|
||
left: 0; top: 0; right: 0; bottom: 0;
|
||
pointer-events: none;
|
||
z-index: 3000;
|
||
}
|
||
.theme-overlay-circle {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
background: var(--background-color);
|
||
transform: scale(0.001);
|
||
opacity: 0;
|
||
}
|
||
.theme-overlay-circle.play {
|
||
animation: themeExpand 380ms ease forwards;
|
||
}
|
||
@keyframes themeExpand {
|
||
0% { transform: scale(0.001); opacity: 0; }
|
||
20% { opacity: 1; }
|
||
100% { transform: scale(1); opacity: 1; }
|
||
}
|
||
.scroll-to-bottom-btn { position:fixed; right:32rpx; bottom:240rpx; width:88rpx; height:88rpx; background: rgba(255,255,255,0.06); border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; transform:translateY(20rpx) scale(0.8); transition:all 0.3s cubic-bezier(0.4,0,0.2,1); backdrop-filter: blur(10rpx); box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.6); }
|
||
.scroll-to-bottom-btn.show { opacity:1; transform:translateY(0) scale(1); }
|
||
.scroll-to-bottom-btn:active { transform: translateY(0) scale(0.95); background: rgba(255,255,255,0.08); }
|
||
.btn-icon { color: var(--text-primary); font-size:36rpx; font-weight:bold; text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.6); }
|
||
|
||
/* 其他小节样式保持原逻辑，颜色使用变量或深色背景 */
|
||
|
||
/* ===== 兼容性修正：避免底部白色撕裂条 ===== */
|
||
/* 将容器改为 column flex，使 scroll-view 能正确填满剩余高度（避免 calc(100vh - px) 的子像素或安全区差异） */
|
||
.chat-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh; /* fixed viewport height so absolute child heights compute */
|
||
position: relative; /* make absolute children position relative to this container */
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* message-list 使用 flex 布局，自行保留底部内边距以避开固定的 input-area */
|
||
.message-list {
|
||
/* Use flex so scroll-view fills remaining space and supports touch scrolling */
|
||
position: relative;
|
||
flex: 1 1 auto;
|
||
height: 100%;
|
||
padding: 20rpx 0 240rpx 0; /* 保留底部空间给输入区 */
|
||
margin: 0;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 当表情面板展开时，给消息列表增加额外底部留白，避免被表情面板遮挡 */
|
||
.with-emoji .message-list {
|
||
/* 输入区保留 40rpx + 表情面板大约 400rpx + 安全区 */
|
||
padding-bottom: calc(40rpx + 400rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
/* 确保输入区域视觉上与页面背景融合，避免产生可见缝隙 */
|
||
.input-area {
|
||
background: linear-gradient(180deg, rgba(12,12,14,0.98) 0%, rgba(10,10,12,0.98) 100%);
|
||
border-top: 1rpx solid rgba(255,255,255,0.03);
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 1000;
|
||
backdrop-filter: blur(10rpx);
|
||
box-shadow: 0 -8rpx 30rpx rgba(0, 0, 0, 0.7);
|
||
background-clip: padding-box;
|
||
}
|