415 lines
12 KiB
CSS
415 lines
12 KiB
CSS
/* ===== 自适应尺寸系统 - 基于视口比例 ===== */
|
||
/*
|
||
* 仅处理尺寸比例，不改变任何布局逻辑
|
||
* 基准分辨率：1920x1080
|
||
* 原始尺寸：图片380x200px，输入框1020px
|
||
* 底部间距：50px → 自适应
|
||
*/
|
||
|
||
/* ===== 底部新闻图片自适应尺寸 ===== */
|
||
/* 380px ÷ 1920px = 19.8vw */
|
||
/* 200px ÷ 1080px = 18.5vh */
|
||
.news-image,
|
||
.ticker-flip-card img,
|
||
.flip-card-front img,
|
||
.flip-card-back img,
|
||
img[src*="新闻"] {
|
||
/* 宽度：基于视口宽度，限制最小和最大值 */
|
||
width: min(max(19.8vw, 280px), 380px) !important;
|
||
/* 高度：保持宽高比 380:200 = 1.9:1 */
|
||
height: min(max(10.4vw, 147px), 200px) !important;
|
||
min-width: min(max(19.8vw, 280px), 380px) !important;
|
||
min-height: min(max(10.4vw, 147px), 200px) !important;
|
||
max-width: min(max(19.8vw, 280px), 380px) !important;
|
||
max-height: min(max(10.4vw, 147px), 200px) !important;
|
||
}
|
||
|
||
/* 翻转卡片容器 - 匹配图片尺寸 */
|
||
.ticker-flip-card,
|
||
.flip-card-inner,
|
||
.flip-card-front,
|
||
.flip-card-back {
|
||
width: min(max(19.8vw, 280px), 380px) !important;
|
||
height: min(max(10.4vw, 147px), 200px) !important;
|
||
min-width: min(max(19.8vw, 280px), 380px) !important;
|
||
min-height: min(max(10.4vw, 147px), 200px) !important;
|
||
max-width: min(max(19.8vw, 280px), 380px) !important;
|
||
max-height: min(max(10.4vw, 147px), 200px) !important;
|
||
}
|
||
|
||
/* ===== 图片容器布局设置 ===== */
|
||
/* 保持原始的居中逻辑，调整间距让3张图片整体居中对齐 */
|
||
.ticker-carousel {
|
||
gap: min(max(4.2vw, 60px), 80px) !important; /* 80px ÷ 1920px = 4.2vw，增大间距让3张图片分布更均匀 */
|
||
}
|
||
|
||
/* 确保ticker-carousel使用原始的居中方式 */
|
||
.ticker-3d-container .ticker-carousel,
|
||
#tickerCarousel,
|
||
body .ticker-carousel {
|
||
position: absolute !important;
|
||
top: 50% !important;
|
||
left: calc(50% - 40px - 1%) !important; /* 向左偏移40px + 1% */
|
||
transform: translate(-50%, -50%) !important;
|
||
display: flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
width: auto !important; /* 让宽度自适应内容 */
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
/* 侧边栏折叠时的偏移 */
|
||
body.sidebar-collapsed .ticker-carousel {
|
||
left: calc(50% - 40px - 1%) !important; /* 向左偏移40px + 1% */
|
||
transform: translate(-50%, -50%) !important;
|
||
}
|
||
|
||
/* 侧边栏展开时的偏移 */
|
||
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-carousel {
|
||
left: calc(50% - 130px - 2%) !important; /* 向左偏移130px + 2% */
|
||
transform: translate(-50%, -50%) !important;
|
||
}
|
||
|
||
/* ===== 输入框自适应宽度 ===== */
|
||
/* 调整为 1200px ÷ 1920px = 62.5vw，更宽的输入框 */
|
||
.deepseek-input-section .input-area,
|
||
#welcomeMode .input-area,
|
||
#chatModeInput .container {
|
||
max-width: min(max(62.5vw, 600px), 1200px) !important;
|
||
}
|
||
|
||
.input-wrapper {
|
||
/* 在大屏幕上自适应，小屏幕保持最小值 */
|
||
max-width: min(max(62.5vw, 600px), 1200px) !important;
|
||
}
|
||
|
||
/* ===== 聊天消息容器宽度 ===== */
|
||
.chat-messages {
|
||
/* 移除限制，由layout-fixes.css控制 */
|
||
}
|
||
|
||
/* ===== 聊天模式输入框宽度 ===== */
|
||
#chatModeInput .container,
|
||
#chatModeInput .input-wrapper {
|
||
max-width: min(max(62.5vw, 600px), 1200px) !important; /* 与主页输入框一致 */
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
/* ===== 聊天消息项宽度 ===== */
|
||
.chat-message,
|
||
.message-content {
|
||
/* 消息项宽度由容器控制 */
|
||
}
|
||
|
||
/* ===== 侧边栏字体大小调整 ===== */
|
||
/* 调整侧边栏菜单项文字大小，与聊天内容区一致 */
|
||
.menu-item,
|
||
.menu-text,
|
||
.sidebar .menu-item {
|
||
font-size: 16px !important; /* 与聊天内容保持一致 */
|
||
}
|
||
|
||
/* 增加侧边栏内边距，防止图标被遮挡 */
|
||
.sidebar,
|
||
#sidebar {
|
||
padding-left: 8px !important; /* 增加左内边距 */
|
||
padding-right: 8px !important; /* 增加右内边距 */
|
||
}
|
||
|
||
/* 侧边栏内容区域调整 */
|
||
.sidebar-content {
|
||
padding: 0 4px !important; /* 给内容增加一点内边距 */
|
||
}
|
||
|
||
/* 历史记录标题 */
|
||
.chat-history-title {
|
||
font-size: 16px !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
/* 历史记录项 */
|
||
.chat-history-item,
|
||
.chat-history-item .chat-title,
|
||
.chat-history-list .chat-history-item {
|
||
font-size: 16px !important;
|
||
line-height: 1.5 !important;
|
||
}
|
||
|
||
/* 历史记录区域整体 */
|
||
.chat-history-section {
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
/* 确保所有历史记录文字统一 */
|
||
.sidebar .chat-history-item,
|
||
#sidebar .chat-history-item {
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
/* 侧边栏底部菜单项 */
|
||
.sidebar-bottom-items .menu-item {
|
||
font-size: 16px !important;
|
||
}
|
||
|
||
/* ===== 自定义滚动条样式 ===== */
|
||
/* Webkit浏览器（Chrome, Safari, Edge）*/
|
||
::-webkit-scrollbar {
|
||
width: 8px !important; /* 滚动条宽度 */
|
||
height: 8px !important; /* 水平滚动条高度 */
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: transparent !important; /* 轨道透明 */
|
||
border-radius: 4px !important;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.2) !important; /* 滑块颜色 */
|
||
border-radius: 4px !important;
|
||
transition: background 0.2s !important;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0, 0, 0, 0.3) !important; /* 悬停时颜色加深 */
|
||
}
|
||
|
||
/* Firefox浏览器 */
|
||
* {
|
||
scrollbar-width: thin !important; /* 细滚动条 */
|
||
scrollbar-color: rgba(0, 0, 0, 0.2) transparent !important;
|
||
}
|
||
|
||
/* 聊天区域特定的滚动条样式 */
|
||
.chat-messages::-webkit-scrollbar,
|
||
.chat-container::-webkit-scrollbar,
|
||
.overflow-y-auto::-webkit-scrollbar {
|
||
width: 6px !important; /* 更细的滚动条 */
|
||
}
|
||
|
||
.chat-messages::-webkit-scrollbar-thumb,
|
||
.chat-container::-webkit-scrollbar-thumb,
|
||
.overflow-y-auto::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.15) !important;
|
||
}
|
||
|
||
.chat-messages::-webkit-scrollbar-thumb:hover,
|
||
.chat-container::-webkit-scrollbar-thumb:hover,
|
||
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(0, 0, 0, 0.25) !important;
|
||
}
|
||
|
||
/* ===== 欢迎文字自适应大小 ===== */
|
||
.deepseek-welcome-section h2,
|
||
.text-4xl {
|
||
/* 4rem = 64px，64px ÷ 1080px = 5.9vh */
|
||
font-size: min(max(3.3vw, 2rem), 4rem) !important;
|
||
}
|
||
|
||
/* ===== 底部图片区域位置自适应 ===== */
|
||
/* 50px ÷ 1080px = 4.6vh，但这太大了，改为 2.6vh (约28px在1080p) */
|
||
.ticker-section,
|
||
body .ticker-section,
|
||
html body .ticker-section {
|
||
/* 底部间距：基于视口高度，最小20px，最大40px */
|
||
bottom: min(max(2.6vh, 20px), 40px) !important;
|
||
/* 确保3D翻转有足够空间 */
|
||
overflow: visible !important;
|
||
z-index: 10 !important;
|
||
/* 确保使用全屏宽度 */
|
||
left: 0 !important;
|
||
right: 0 !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* 强制覆盖侧边栏响应式设置 */
|
||
body:not(.chat-mode) .ticker-section,
|
||
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-section {
|
||
left: 0 !important;
|
||
width: 100% !important;
|
||
}
|
||
|
||
/* ===== 欢迎栏和输入框位置自适应 ===== */
|
||
/* 欢迎栏文字位置 - 垂直居中偏上 */
|
||
.deepseek-welcome-section {
|
||
/* 使用绝对定位，基于视口 */
|
||
position: absolute !important;
|
||
top: max(23vh, 140px) !important; /* 距顶部23%视口高度（原25% - 2%） */
|
||
left: 50% !important;
|
||
transform: translateX(-50%) !important;
|
||
width: 100% !important;
|
||
text-align: center !important;
|
||
}
|
||
|
||
/* 输入框位置 - 紧贴欢迎栏下方 */
|
||
body:not(.chat-mode) .deepseek-input-section {
|
||
position: fixed !important;
|
||
/* 紧贴欢迎栏，只留小间距 */
|
||
top: max(35vh, 220px) !important; /* 欢迎栏25vh + 文字高度约8vh + 小间距2vh = 35vh */
|
||
left: 50% !important;
|
||
transform: translateX(-50%) !important;
|
||
width: 100% !important;
|
||
max-width: min(max(62.5vw, 600px), 1200px) !important; /* 更宽的输入框 */
|
||
z-index: 20 !important;
|
||
}
|
||
|
||
/* 小窗口时的特殊处理 */
|
||
@media (max-height: 700px) {
|
||
.deepseek-welcome-section {
|
||
top: 70px !important; /* 固定位置，更靠上（原80px - 10px） */
|
||
}
|
||
|
||
body:not(.chat-mode) .deepseek-input-section {
|
||
top: 160px !important; /* 紧贴欢迎栏下方 */
|
||
}
|
||
|
||
.deepseek-welcome-section h2 {
|
||
font-size: 1.8rem !important; /* 进一步缩小文字 */
|
||
}
|
||
}
|
||
|
||
/* ===== 不同分辨率优化 ===== */
|
||
|
||
/* 2K屏幕 (2560x1440) */
|
||
@media (min-width: 2560px) {
|
||
/* 在2K屏幕上限制最大尺寸，防止过大 */
|
||
.news-image,
|
||
.ticker-flip-card img {
|
||
width: 420px !important; /* 380 × 1.1 */
|
||
height: 221px !important; /* 200 × 1.1 */
|
||
}
|
||
|
||
.ticker-flip-card,
|
||
.flip-card-inner,
|
||
.flip-card-front,
|
||
.flip-card-back {
|
||
width: 420px !important;
|
||
height: 221px !important;
|
||
}
|
||
|
||
.input-wrapper,
|
||
.deepseek-input-section .input-area,
|
||
#chatModeInput .container,
|
||
.chat-messages,
|
||
.chat-message {
|
||
max-width: 1320px !important; /* 1200 × 1.1 */
|
||
}
|
||
|
||
.ticker-section {
|
||
bottom: 35px !important; /* 适度增加底部间距 */
|
||
}
|
||
}
|
||
|
||
/* 4K屏幕 (3840x2160) */
|
||
@media (min-width: 3840px) {
|
||
/* 在4K屏幕上进一步限制，防止元素过大 */
|
||
.news-image,
|
||
.ticker-flip-card img {
|
||
width: 480px !important; /* 380 × 1.26 */
|
||
height: 253px !important; /* 200 × 1.26 */
|
||
}
|
||
|
||
.ticker-flip-card,
|
||
.flip-card-inner,
|
||
.flip-card-front,
|
||
.flip-card-back {
|
||
width: 480px !important;
|
||
height: 253px !important;
|
||
}
|
||
|
||
.input-wrapper,
|
||
.deepseek-input-section .input-area,
|
||
#chatModeInput .container,
|
||
.chat-messages,
|
||
.chat-message {
|
||
max-width: 1500px !important; /* 1200 × 1.25 */
|
||
}
|
||
|
||
.deepseek-welcome-section h2 {
|
||
font-size: 5rem !important;
|
||
}
|
||
|
||
.ticker-section {
|
||
bottom: 40px !important; /* 4K屏幕保持合理间距 */
|
||
}
|
||
}
|
||
|
||
/* 小屏幕笔记本 (1366x768) */
|
||
@media (max-width: 1366px) {
|
||
/* 使用vw单位自动缩放 */
|
||
/* 图片会自动变为约270px宽 (19.8vw × 1366px) */
|
||
/* 输入框会自动变为约725px宽 (53.1vw × 1366px) */
|
||
|
||
/* 调整欢迎栏和输入框位置 */
|
||
.deepseek-welcome-section {
|
||
top: max(18vh, 110px) !important; /* 上移2% */
|
||
}
|
||
|
||
body:not(.chat-mode) .deepseek-input-section {
|
||
top: max(30vh, 190px) !important; /* 紧贴欢迎栏 */
|
||
}
|
||
}
|
||
|
||
/* 更小屏幕 (1280x720) */
|
||
@media (max-width: 1280px) {
|
||
/* 确保最小尺寸 */
|
||
.news-image,
|
||
.ticker-flip-card img {
|
||
width: max(19.8vw, 250px) !important;
|
||
height: max(10.4vw, 132px) !important;
|
||
}
|
||
}
|
||
|
||
/* 平板和移动设备保持原有逻辑 */
|
||
@media (max-width: 768px) {
|
||
/* 平板设备使用固定小尺寸 */
|
||
.news-image,
|
||
.ticker-flip-card img {
|
||
width: 250px !important;
|
||
height: 132px !important;
|
||
}
|
||
|
||
.ticker-flip-card,
|
||
.flip-card-inner,
|
||
.flip-card-front,
|
||
.flip-card-back {
|
||
width: 250px !important;
|
||
height: 132px !important;
|
||
}
|
||
|
||
.input-wrapper {
|
||
max-width: 90vw !important;
|
||
}
|
||
|
||
/* 平板上调整位置 */
|
||
.deepseek-welcome-section {
|
||
top: 60px !important; /* 固定位置 */
|
||
}
|
||
|
||
body:not(.chat-mode) .deepseek-input-section {
|
||
top: 140px !important; /* 紧贴欢迎栏 */
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
/* 手机设备隐藏底部图片 */
|
||
.ticker-section {
|
||
display: none !important;
|
||
}
|
||
|
||
.input-wrapper {
|
||
max-width: 95vw !important;
|
||
}
|
||
|
||
.deepseek-welcome-section h2 {
|
||
font-size: 1.8rem !important;
|
||
}
|
||
|
||
/* 手机上调整位置 */
|
||
.deepseek-welcome-section {
|
||
top: 40px !important; /* 固定位置 */
|
||
}
|
||
|
||
body:not(.chat-mode) .deepseek-input-section {
|
||
top: 110px !important; /* 紧贴欢迎栏 */
|
||
}
|
||
} |