515 lines
12 KiB
Text
515 lines
12 KiB
Text
/* 🎨 现代化消息页面设计 - 深色主题 */
|
||
|
||
/* 🎨 CSS变量定义 - 黑色主题 */
|
||
page {
|
||
--primary-color: #0A84FF;
|
||
--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;
|
||
--safe-area-bottom: env(safe-area-inset-bottom);
|
||
}
|
||
|
||
/* 🌙 深色模式支持 */
|
||
@media (prefers-color-scheme: dark) {
|
||
page {
|
||
--primary-color: #0A84FF;
|
||
--primary-light: #64D2FF;
|
||
--primary-dark: #0056CC;
|
||
--background-color: #000000;
|
||
--surface-color: #1C1C1E;
|
||
--text-primary: #FFFFFF;
|
||
--text-secondary: #8E8E93;
|
||
--text-tertiary: #48484A;
|
||
--border-color: #38383A;
|
||
--shadow-light: 0 1rpx 3rpx rgba(0, 0, 0, 0.3);
|
||
--shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.4);
|
||
}
|
||
}
|
||
|
||
/* ===== 浅色主题覆盖（当根元素包含 .theme-light 时生效） ===== */
|
||
.theme-light {
|
||
--primary-color: #007AFF;
|
||
--primary-light: #5AC8FA;
|
||
--primary-dark: #0051D5;
|
||
--background-color: #FFFFFF;
|
||
--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 .telegram-container {
|
||
background: var(--background-color) !important;
|
||
color: var(--text-primary);
|
||
}
|
||
.theme-light .search-section {
|
||
background: var(--surface-color);
|
||
border-bottom: 1rpx solid var(--border-color);
|
||
}
|
||
.theme-light .search-bar {
|
||
background: var(--background-color);
|
||
border: 1rpx solid var(--border-color);
|
||
}
|
||
.theme-light .conversation-item {
|
||
background: var(--surface-color) !important;
|
||
border-bottom: 1rpx solid var(--border-color);
|
||
}
|
||
.theme-light .conversations-section {
|
||
background: transparent !important;
|
||
}
|
||
.theme-light .avatar-placeholder {
|
||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
|
||
color: white;
|
||
}
|
||
.theme-light .unread-badge {
|
||
border: 3rpx solid var(--surface-color);
|
||
box-shadow: var(--shadow-medium);
|
||
}
|
||
.theme-light .empty-state {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.telegram-container {
|
||
min-height: 100vh;
|
||
background: var(--background-color);
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: var(--safe-area-bottom);
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
color: var(--text-primary);
|
||
transition: background-color 280ms ease, color 280ms ease, background 280ms ease;
|
||
}
|
||
|
||
/* === 主题切换过渡（类 Telegram）=== */
|
||
.telegram-container.theme-transitioning {
|
||
transition: background 320ms ease, color 320ms ease, filter 320ms ease;
|
||
}
|
||
|
||
/* 关键区域同步过渡，避免突变 */
|
||
.search-section,
|
||
.search-bar,
|
||
.conversation-item,
|
||
.empty-state,
|
||
.telegram-header {
|
||
transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
|
||
}
|
||
|
||
/* 🎨 现代化导航栏 */
|
||
.telegram-header {
|
||
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%);
|
||
box-shadow: var(--shadow-medium);
|
||
z-index: 1000;
|
||
backdrop-filter: blur(12rpx);
|
||
}
|
||
|
||
/* === 主题切换径向遮罩动画 === */
|
||
.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; }
|
||
}
|
||
|
||
.header-content {
|
||
height: 88rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
}
|
||
|
||
.header-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: white;
|
||
text-shadow: 0 1rpx 2rpx rgba(0,0,0,0.4);
|
||
}
|
||
|
||
.header-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.header-btn {
|
||
width: 72rpx;
|
||
height: 72rpx;
|
||
border-radius: var(--radius-medium);
|
||
background: rgba(255, 255, 255, 0.2);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.3s ease;
|
||
backdrop-filter: blur(10rpx);
|
||
}
|
||
|
||
.header-btn:active {
|
||
background: rgba(255, 255, 255, 0.3);
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.header-icon {
|
||
font-size: 32rpx;
|
||
color: white;
|
||
}
|
||
|
||
/* 🎨 现代化内容区域 */
|
||
.telegram-content {
|
||
flex: 1;
|
||
background: transparent;
|
||
box-sizing: border-box;
|
||
/* 让内容自然流式布局，避免覆盖搜索栏与头部 */
|
||
position: relative;
|
||
}
|
||
|
||
/* 🎨 现代化搜索栏 */
|
||
.search-section {
|
||
padding: 20rpx 32rpx;
|
||
background: var(--background-color);
|
||
border-bottom: 1rpx solid var(--border-color);
|
||
animation: searchSlideDown 0.3s ease-out;
|
||
}
|
||
|
||
@keyframes searchSlideDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-20rpx);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.search-bar {
|
||
height: 80rpx;
|
||
background: var(--background-color);
|
||
border: 1rpx solid var(--border-color);
|
||
border-radius: var(--radius-large);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 28rpx;
|
||
gap: 16rpx;
|
||
box-shadow: var(--shadow-light);
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.search-bar:focus-within {
|
||
border-color: var(--primary-color);
|
||
box-shadow: 0 0 0 6rpx rgba(10,132,255,0.06);
|
||
}
|
||
|
||
.search-icon { color: var(--text-secondary); font-size:32rpx; }
|
||
.search-input { flex:1; font-size:32rpx; color:var(--text-primary); background:transparent }
|
||
.search-input::placeholder {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.search-cancel {
|
||
padding: 8rpx 16rpx;
|
||
border-radius: var(--radius-small);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.search-cancel:active {
|
||
background: rgba(0, 122, 255, 0.1);
|
||
}
|
||
|
||
.cancel-text {
|
||
font-size: 32rpx;
|
||
color: var(--primary-color);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 🎨 现代化会话列表 */
|
||
.conversations-section {
|
||
background: transparent;
|
||
border-radius: var(--radius-large) var(--radius-large) 0 0;
|
||
margin-top: 16rpx;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
padding-bottom: 200rpx; /* 保留空间给底部操作栏，避免白条 */
|
||
}
|
||
|
||
.conversation-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 28rpx 32rpx;
|
||
border-bottom: 1rpx solid rgba(255,255,255,0.03);
|
||
transition: all 0.2s ease;
|
||
position: relative;
|
||
background: transparent;
|
||
}
|
||
|
||
.conversation-item:active { background: rgba(255,255,255,0.01); transform: scale(0.995); }
|
||
|
||
.conversation-item:last-child { border-bottom: none; }
|
||
|
||
/* 🎨 现代化头像设计 */
|
||
.conversation-avatar { position: relative; margin-right: 28rpx; }
|
||
.avatar-image { width:108rpx; height:108rpx; border-radius:54rpx; box-shadow: var(--shadow-light); border: 2rpx solid rgba(255,255,255,0.03); }
|
||
.avatar-placeholder { width:108rpx; height:108rpx; border-radius:54rpx; background: linear-gradient(135deg, #151516 0%, #0F0F11 100%); display:flex; align-items:center; justify-content:center; box-shadow: var(--shadow-light); }
|
||
.avatar-text { font-size:40rpx; font-weight:600; color:var(--text-primary); }
|
||
|
||
/* 在线状态角标（右下角小圆点） */
|
||
.presence-indicator {
|
||
position: absolute;
|
||
right: 2rpx;
|
||
bottom: 2rpx;
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid var(--surface-color);
|
||
box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.35);
|
||
z-index: 3;
|
||
}
|
||
.presence-indicator.online { background: #2ECC71; }
|
||
.presence-indicator.offline { background: #9E9E9E; opacity: 0.9; }
|
||
.theme-light .presence-indicator { border-color: var(--surface-color); }
|
||
|
||
/* 🎨 现代化未读徽章 */
|
||
.unread-badge {
|
||
position: absolute;
|
||
top: -6rpx;
|
||
right: -6rpx;
|
||
min-width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 22rpx;
|
||
background: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 3rpx solid var(--surface-color);
|
||
box-shadow: 0 6rpx 18rpx rgba(0,0,0,0.6);
|
||
z-index: 2;
|
||
}
|
||
.unread-count { font-size:22rpx; font-weight:700; color:white }
|
||
|
||
/* 🎨 现代化会话信息 */
|
||
.conversation-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.conversation-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.conversation-name {
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
font-size: 34rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
/* 允许在 flex 容器内正确触发省略号 */
|
||
min-width: 0;
|
||
margin-right: 16rpx;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.conversation-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
/* 保留时间+静音的显示空间，避免被名称挤没 */
|
||
flex: 0 0 auto;
|
||
flex-shrink: 0;
|
||
min-width: 120rpx;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.conversation-time {
|
||
color: var(--text-secondary);
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
white-space: nowrap;
|
||
/* 避免被压缩隐藏 */
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.mute-icon {
|
||
font-size: 24rpx;
|
||
color: var(--text-tertiary);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* 🎨 现代化会话预览 */
|
||
.conversation-preview {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.last-message {
|
||
color: var(--text-secondary);
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
flex: 1;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.message-indicators {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.status-indicator {
|
||
color: var(--text-secondary);
|
||
font-size: 20rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.status-indicator.read {
|
||
color: var(--primary-color);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* 🎨 现代化空状态 */
|
||
.empty-state {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 40rpx;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 64rpx;
|
||
color: rgba(255,255,255,0.06);
|
||
}
|
||
|
||
.empty-title {
|
||
font-size: 32rpx;
|
||
color: var(--text-primary);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.empty-subtitle {
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* 📱 响应式设计 - 适配不同屏幕尺寸 */
|
||
@media screen and (max-width: 375px) {
|
||
.conversation-item {
|
||
padding: 24rpx 28rpx;
|
||
}
|
||
|
||
.avatar-image, .avatar-placeholder {
|
||
width: 96rpx;
|
||
height: 96rpx;
|
||
border-radius: 48rpx;
|
||
}
|
||
|
||
.conversation-name {
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.last-message {
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 414px) {
|
||
.conversation-item {
|
||
padding: 32rpx 36rpx;
|
||
}
|
||
|
||
.avatar-image, .avatar-placeholder {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
}
|
||
|
||
.conversation-name {
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.last-message {
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
|
||
/* 🎨 会话项增强功能 */
|
||
.conversation-item.pinned {
|
||
background: linear-gradient(90deg, rgba(0, 122, 255, 0.05) 0%, transparent 100%);
|
||
border-left: 4rpx solid var(--primary-color);
|
||
}
|
||
|
||
.conversation-item.muted .conversation-name {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.conversation-item.muted .last-message {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* 🎨 加载状态 */
|
||
.loading-state {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 80rpx 32rpx;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
border: 4rpx solid var(--border-color);
|
||
border-top: 4rpx solid var(--primary-color);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 🎨 搜索结果高亮 */
|
||
.search-highlight {
|
||
background: linear-gradient(135deg, rgba(255, 235, 59, 0.3) 0%, rgba(255, 193, 7, 0.3) 100%);
|
||
border-radius: 4rpx;
|
||
padding: 0 4rpx;
|
||
}
|