77 lines
3.1 KiB
CSS
77 lines
3.1 KiB
CSS
|
/* ===== 侧边栏响应式布局修复 ===== */
|
|||
|
|
|
|||
|
|
/* 1. 当侧边栏展开时，输入框、欢迎栏和底部图片都向右移动 */
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .deepseek-input-section,
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .deepseek-input-section {
|
|||
|
|
left: calc(50% + 120px) !important; /* 向右偏移120px（侧边栏宽度的一半） */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .deepseek-welcome-section,
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .deepseek-welcome-section {
|
|||
|
|
left: calc(50% + 120px) !important; /* 向右偏移120px（侧边栏宽度的一半） */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 2. 当侧边栏展开时，底部图片向右移动并压缩 */
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-section,
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-section {
|
|||
|
|
left: 240px !important; /* 从侧边栏右边开始 */
|
|||
|
|
right: 0 !important;
|
|||
|
|
width: calc(100% - 240px) !important; /* 减去侧边栏宽度 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 3. 图片容器内部的图片自适应缩放 */
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-carousel,
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-carousel {
|
|||
|
|
display: flex !important;
|
|||
|
|
justify-content: center !important;
|
|||
|
|
gap: 80px !important; /* 保持与主样式一致的间距 */
|
|||
|
|
/* 移除padding避免偏移 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 4. 当空间不足时，隐藏部分图片 */
|
|||
|
|
@media (max-width: 1400px) {
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card:nth-child(4),
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card:nth-child(4) {
|
|||
|
|
display: none !important; /* 隐藏第4张图片 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1200px) {
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card:nth-child(3),
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card:nth-child(3) {
|
|||
|
|
display: none !important; /* 隐藏第3张图片 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1000px) {
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card:nth-child(2),
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card:nth-child(2) {
|
|||
|
|
display: none !important; /* 隐藏第2张图片 */
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 5. 侧边栏折叠状态下恢复原位 */
|
|||
|
|
body:not(.chat-mode) .sidebar.collapsed ~ main .deepseek-input-section,
|
|||
|
|
body.sidebar-collapsed:not(.chat-mode) .deepseek-input-section {
|
|||
|
|
left: 50% !important; /* 恢复居中 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body:not(.chat-mode) .sidebar.collapsed ~ main .deepseek-welcome-section,
|
|||
|
|
body.sidebar-collapsed:not(.chat-mode) .deepseek-welcome-section {
|
|||
|
|
left: 50% !important; /* 恢复居中 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body:not(.chat-mode) .sidebar.collapsed ~ main .ticker-section,
|
|||
|
|
body.sidebar-collapsed:not(.chat-mode) .ticker-section {
|
|||
|
|
left: 70px !important; /* 只偏移折叠侧边栏的宽度 */
|
|||
|
|
right: 0 !important;
|
|||
|
|
width: calc(100% - 70px) !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 6. 确保图片不被压扁，保持比例 */
|
|||
|
|
body:not(.chat-mode):not(.sidebar-collapsed) .ticker-flip-card img,
|
|||
|
|
body:not(.chat-mode) .sidebar:not(.collapsed) ~ main .ticker-flip-card img {
|
|||
|
|
object-fit: cover !important;
|
|||
|
|
width: 100% !important;
|
|||
|
|
height: 100% !important;
|
|||
|
|
}
|