338 lines
8.3 KiB
CSS
338 lines
8.3 KiB
CSS
/* ===== 布局修复和位置调整 ===== */
|
|
/* 合并了input-position-fix.css和layout-override.css的功能 */
|
|
|
|
/* ===== 通用布局修复 ===== */
|
|
|
|
/* 欢迎模式布局修复 */
|
|
#welcomeMode {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
/* 欢迎内容容器居中 */
|
|
.welcome-content-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: calc(100vh - 460px); /* 调整为适应上移后的布局 */
|
|
width: 100%;
|
|
padding: 2rem;
|
|
}
|
|
|
|
/* 确保容器内的内容居中 */
|
|
.welcome-content-wrapper > .container {
|
|
position: relative;
|
|
top: auto !important;
|
|
left: auto !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* 主聊天区域调整 */
|
|
.chat-section {
|
|
position: relative;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 保持适当的间距 */
|
|
.deepseek-input-section {
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
|
|
/* 确保输入框不被3D图片遮挡 */
|
|
.input-wrapper {
|
|
background: rgba(255, 255, 255, 0.95) !important;
|
|
backdrop-filter: blur(20px) !important;
|
|
}
|
|
|
|
/* 确保聊天内容不被输入框遮挡 */
|
|
.chat-messages {
|
|
scroll-padding-bottom: 100px;
|
|
}
|
|
|
|
/* 消息项样式 */
|
|
.message-item {
|
|
max-width: 100%;
|
|
margin: 0 0 1rem 0;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
/* 用户消息右对齐 */
|
|
.message-item .flex.justify-end {
|
|
justify-content: flex-end !important;
|
|
}
|
|
|
|
/* AI消息左对齐 */
|
|
.message-item .flex.justify-start {
|
|
justify-content: flex-start !important;
|
|
}
|
|
|
|
/* 消息项添加底部间距 */
|
|
.chat-messages > :last-child {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* 控制面板在欢迎模式的位置 */
|
|
#welcomeMode .deep-research-controls {
|
|
margin-bottom: 15px !important;
|
|
}
|
|
|
|
/* ticker-section显示控制 - 尺寸由image-size-fix.css控制 */
|
|
.ticker-section {
|
|
display: block !important;
|
|
}
|
|
|
|
/* ===== 输入框位置修复 ===== */
|
|
|
|
/* 欢迎模式输入框位置 - 使用固定定位精确控制 */
|
|
body:not(.chat-mode) .deepseek-input-section {
|
|
position: fixed !important;
|
|
bottom: 410px !important; /* 距离底部410px */
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
width: 100% !important;
|
|
max-width: 1020px !important;
|
|
margin-bottom: 0 !important;
|
|
z-index: 15 !important;
|
|
}
|
|
|
|
/* 欢迎栏同步移动 */
|
|
body:not(.chat-mode) .deepseek-welcome-section {
|
|
position: fixed !important;
|
|
bottom: 770px !important; /* 距离底部770px */
|
|
left: 50% !important;
|
|
transform: translateX(-50%) !important;
|
|
width: 100% !important;
|
|
text-align: center !important;
|
|
z-index: 15 !important;
|
|
}
|
|
|
|
/* 聊天模式固定输入框位置修复 */
|
|
#chatModeInput {
|
|
position: fixed !important;
|
|
bottom: 0 !important; /* 固定在最底部 */
|
|
left: 260px !important; /* 从侧边栏后开始 */
|
|
right: 20px !important; /* 留出更多滚动条空间 */
|
|
z-index: 30;
|
|
padding: 0 !important;
|
|
transition: left 0.3s ease;
|
|
border: none !important; /* 移除边框 */
|
|
border-top: none !important; /* 确保没有顶部边框 */
|
|
box-shadow: none !important; /* 移除阴影 */
|
|
max-width: calc(100vw - 280px) !important; /* 限制最大宽度 */
|
|
}
|
|
|
|
/* 侧边栏折叠时调整输入框位置 */
|
|
body.sidebar-collapsed #chatModeInput {
|
|
left: 70px !important;
|
|
right: 20px !important; /* 保持右边距 */
|
|
max-width: calc(100vw - 90px) !important;
|
|
}
|
|
|
|
/* 内部容器样式 - 确保居中并统一宽度 */
|
|
#chatModeInput .container {
|
|
background: transparent !important;
|
|
padding: 1rem;
|
|
margin: 0 auto !important;
|
|
max-width: 1020px !important; /* 与欢迎模式保持一致 */
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* 确保聊天输入框容器有足够高度 */
|
|
#chatModeInput {
|
|
min-height: 140px !important; /* 设置最小高度 */
|
|
}
|
|
|
|
/* 强制聊天模式下的容器宽度 */
|
|
body.chat-mode #chatModeInput .container,
|
|
body #chatModeInput .container[style],
|
|
body #chatModeInput div[class*="container"] {
|
|
max-width: 1020px !important;
|
|
width: 100% !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
|
|
/* 确保输入框wrapper也有正确的宽度 */
|
|
body #chatModeInput .input-wrapper {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* 移除任何可能的白色背景 */
|
|
#chatModeInput::before,
|
|
#chatModeInput::after {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 聊天容器高度调整 - flex布局占满视口 */
|
|
#chatContainer {
|
|
position: fixed !important;
|
|
top: 0 !important;
|
|
left: 260px !important; /* 从侧边栏后开始 */
|
|
right: 0 !important;
|
|
bottom: 0 !important;
|
|
z-index: 15 !important;
|
|
display: none;
|
|
overflow-y: auto !important; /* 整个容器可滚动 */
|
|
height: 100vh !important;
|
|
transition: left 0.3s ease;
|
|
}
|
|
|
|
/* 侧边栏折叠时调整 */
|
|
body.sidebar-collapsed #chatContainer {
|
|
left: 70px !important;
|
|
}
|
|
|
|
/* 聊天包装器 - flex布局 */
|
|
.chat-wrapper {
|
|
min-height: 100vh !important;
|
|
display: flex !important;
|
|
flex-direction: column !important;
|
|
background: transparent !important; /* 透明，显示容器背景 */
|
|
}
|
|
|
|
/* 聊天消息区域调整 - flex自动填充 */
|
|
#chatMessages {
|
|
flex: 1 !important;
|
|
max-width: 1020px !important; /* 与输入框宽度一致 */
|
|
width: 100% !important;
|
|
margin: 0 auto !important;
|
|
padding: 20px 1rem 250px 1rem !important; /* 充足的底部空间避免遮挡 */
|
|
padding-bottom: 250px !important; /* 强制底部padding */
|
|
position: relative !important;
|
|
overflow: visible !important; /* 不要内部滚动条 */
|
|
overflow-y: visible !important; /* 确保不显示Y轴滚动条 */
|
|
overflow-x: visible !important; /* 确保不显示X轴滚动条 */
|
|
}
|
|
|
|
/* 使用更强的选择器确保生效 */
|
|
body .chat-container #chatMessages,
|
|
body #chatContainer #chatMessages,
|
|
body div#chatMessages.chat-messages {
|
|
padding-bottom: 250px !important;
|
|
}
|
|
|
|
/* 内联样式覆盖 */
|
|
#chatMessages[style] {
|
|
padding-bottom: 250px !important;
|
|
}
|
|
|
|
/* 强制移除overflow-y-auto类的效果 */
|
|
#chatMessages.overflow-y-auto,
|
|
.chat-messages.overflow-y-auto {
|
|
overflow-y: visible !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* 覆盖内联样式 - 使用更强的选择器 */
|
|
body div[style*="margin-bottom"].deepseek-input-section,
|
|
html body .deepseek-input-section[style*="margin-bottom"],
|
|
#welcomeMode div.deepseek-input-section[style] {
|
|
margin-bottom: 80px !important;
|
|
}
|
|
|
|
/* ===== 底部图片区域位置调整 ===== */
|
|
|
|
/* 底部图片区域强制上移 - 仅在欢迎模式 */
|
|
body .ticker-section,
|
|
html body .ticker-section,
|
|
div[class*="ticker-section"],
|
|
section div.ticker-section,
|
|
[style*="bottom"].ticker-section {
|
|
bottom: 50px !important; /* 距离底部50px */
|
|
}
|
|
|
|
/* 聊天模式时隐藏底部图片 */
|
|
body.chat-mode .ticker-section {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
|
|
/* 聊天模式时显示容器 */
|
|
body.chat-mode #chatContainer {
|
|
display: block !important;
|
|
}
|
|
|
|
/* 聊天模式时显示输入框 */
|
|
body.chat-mode #chatModeInput {
|
|
display: block !important;
|
|
}
|
|
|
|
/* ===== 响应式布局调整 ===== */
|
|
|
|
/* 移动端适配 */
|
|
@media (max-width: 768px) {
|
|
#chatModeInput {
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
#chatContainer {
|
|
bottom: 0;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
#chatMessages {
|
|
height: calc(100% - 80px);
|
|
}
|
|
|
|
.welcome-content-wrapper {
|
|
min-height: 100vh;
|
|
padding: 1rem;
|
|
}
|
|
}
|
|
|
|
/* 高度不足时的处理 */
|
|
@media (max-height: 700px) {
|
|
#chatModeInput {
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
.welcome-content-wrapper {
|
|
min-height: 100vh;
|
|
}
|
|
}
|
|
|
|
@media (max-height: 600px) {
|
|
#chatModeInput {
|
|
bottom: 0 !important;
|
|
}
|
|
|
|
#chatContainer {
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
/* 全屏幕尺寸统一规则 */
|
|
@media all {
|
|
body .ticker-section {
|
|
bottom: 50px !important;
|
|
}
|
|
|
|
body .deepseek-input-section {
|
|
margin-bottom: 80px !important; /* 欢迎模式 */
|
|
}
|
|
|
|
body #chatModeInput {
|
|
bottom: 0 !important; /* 聊天模式沉底 */
|
|
}
|
|
|
|
body.chat-mode .ticker-section {
|
|
display: none !important;
|
|
}
|
|
|
|
body #chatModeInput .container,
|
|
body #chatModeInput div[class*="container"],
|
|
body #chatMessages {
|
|
max-width: 1020px !important;
|
|
width: 100% !important;
|
|
margin: 0 auto !important;
|
|
}
|
|
} |