926 lines
25 KiB
CSS
926 lines
25 KiB
CSS
/**
|
||
* Immersive Layout 沉浸模式布局
|
||
*
|
||
* 职责：沉浸式阅读模式的完整布局系统
|
||
* 作用域：#immersive-layout-container 及其子元素
|
||
* 依赖：variables.css
|
||
*
|
||
* 重构说明：
|
||
* 1. 使用 CSS 变量替换硬编码值
|
||
* 2. 移除大部分 !important（仅保留布局关键的）
|
||
* 3. 使用 CSS class 管理 overflow 状态
|
||
* 4. 消除与 JS 内联样式的冲突
|
||
* 5. 统一 z-index 使用规范
|
||
*
|
||
* 核心改进：
|
||
* - overflow 由 CSS 类控制（body.immersive-active）
|
||
* - 滚动容器使用统一标记（.js-scroll-container，供 JS 查询）
|
||
* - 消除 CSS/JS overflow 冲突（immersive_layout_fix.js 已删除）
|
||
*/
|
||
|
||
/* ==================== 1. 沉浸模式布局容器 ==================== */
|
||
|
||
#immersive-layout-container {
|
||
/* 显示由 JS 控制 */
|
||
background: var(--color-bg-secondary);
|
||
font-family: var(--font-family-base);
|
||
z-index: var(--immersive-container-z-index);
|
||
}
|
||
|
||
#immersive-content-area {
|
||
display: flex;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
gap: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* ==================== 2. 沉浸模式面板基础样式 ==================== */
|
||
|
||
.immersive-panel {
|
||
overflow: hidden;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
min-width: var(--immersive-panel-min-width, 200px);
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100%;
|
||
background: var(--color-bg-base);
|
||
transition: all var(--transition-base) ease;
|
||
margin: 0;
|
||
border-right: 1px solid var(--color-border-light);
|
||
}
|
||
|
||
/* 特定面板的 padding */
|
||
#immersive-toc-area.immersive-panel {
|
||
padding: var(--spacing-xs) var(--spacing-sm) 0 var(--spacing-sm);
|
||
border-right: 1px solid var(--color-border-light);
|
||
/* 隐藏沉浸模式侧边栏 */
|
||
display: none;
|
||
}
|
||
|
||
#immersive-chatbot-area.immersive-panel {
|
||
padding: var(--spacing-xs) var(--spacing-sm) 0 var(--spacing-sm);
|
||
border-right: none;
|
||
}
|
||
|
||
#immersive-main-content-area.immersive-panel {
|
||
padding: 0;
|
||
border-right: 1px solid var(--color-border-light);
|
||
position: relative;
|
||
z-index: var(--z-base);
|
||
height: 100%;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* ==================== 3. 主内容区域 ==================== */
|
||
|
||
/* .container 在沉浸模式下的样式 */
|
||
#immersive-main-content-area .container {
|
||
width: 100% !important; /* 覆盖外部设置 */
|
||
max-width: 100% !important;
|
||
margin: 0 !important;
|
||
padding: var(--spacing-sm) var(--spacing-md) !important;
|
||
box-shadow: none;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--spacing-sm);
|
||
background: var(--color-bg-base);
|
||
border-radius: 0;
|
||
border: none;
|
||
position: relative;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 标题和 meta 信息合并到一行 */
|
||
#immersive-main-content-area .container > h2 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 0;
|
||
padding: 0;
|
||
gap: var(--spacing-md);
|
||
font-size: 0.7em;
|
||
font-weight: var(--font-weight-normal);
|
||
color: var(--color-text-muted);
|
||
flex-shrink: 0; /* 防止被压缩 */
|
||
min-height: 20px; /* 确保最小高度 */
|
||
}
|
||
|
||
#immersive-main-content-area .container > .meta {
|
||
position: absolute;
|
||
top: var(--spacing-sm);
|
||
right: var(--spacing-md);
|
||
margin: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--spacing-sm);
|
||
z-index: calc(var(--z-base) + 1);
|
||
pointer-events: none;
|
||
}
|
||
|
||
#immersive-main-content-area .container > .meta * {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* tabs 容器 */
|
||
#immersive-main-content-area .container > .tabs-container {
|
||
order: 0;
|
||
margin-top: 0;
|
||
flex-shrink: 0;
|
||
padding: 0;
|
||
border: none;
|
||
display: flex;
|
||
gap: 2px;
|
||
height: 32px;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
background: transparent;
|
||
border-bottom: 1px solid var(--color-border-light);
|
||
}
|
||
|
||
/* tab 按钮样式 */
|
||
#immersive-main-content-area .tabs-container .tab-btn {
|
||
padding: 0 var(--spacing-md);
|
||
font-size: 0.7em;
|
||
font-weight: var(--font-weight-medium);
|
||
border-radius: 0;
|
||
background-color: transparent;
|
||
border: none;
|
||
border-bottom: 2px solid transparent;
|
||
color: var(--color-text-muted);
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
margin: 0;
|
||
height: 32px;
|
||
line-height: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
#immersive-main-content-area .tabs-container .tab-btn:hover {
|
||
color: var(--color-text-secondary);
|
||
border-bottom-color: var(--color-border-medium);
|
||
}
|
||
|
||
#immersive-main-content-area .tabs-container .tab-btn.active {
|
||
background-color: transparent;
|
||
color: var(--color-primary);
|
||
border-bottom-color: var(--color-primary);
|
||
font-weight: var(--font-weight-semibold);
|
||
}
|
||
|
||
/* ==================== 4. 滚动容器管理（核心重构）==================== */
|
||
|
||
/**
|
||
* 关键改进：使用 CSS class 管理 overflow，而非 JS 内联样式
|
||
*
|
||
* 工作原理：
|
||
* 1. .tab-content 默认不设置 overflow
|
||
* 2. 沉浸模式激活时，body.immersive-active 触发 overflow-y: auto
|
||
* 3. JS 只需添加/移除 class，不再设置内联样式
|
||
* 4. .js-scroll-container 标记供 JS 查询使用
|
||
*/
|
||
|
||
/* 默认状态：tab-content 不设置 overflow */
|
||
#immersive-main-content-area .container .tab-content {
|
||
flex-grow: 1;
|
||
height: 0; /* flex-grow 生效的关键 */
|
||
margin: 0;
|
||
padding: 0;
|
||
min-height: 0;
|
||
background: transparent;
|
||
border-radius: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 沉浸模式激活时：tab-content 成为滚动容器 */
|
||
body.immersive-active #immersive-main-content-area .container .tab-content {
|
||
overflow-y: auto; /* 移除 !important，改用高特异性选择器 */
|
||
/* 标记为 JS 可查询的滚动容器 */
|
||
}
|
||
|
||
/* 滚动容器标记（供 JS 使用） */
|
||
.js-scroll-container {
|
||
/* 此 class 仅用于 JS 查询，不设置样式 */
|
||
}
|
||
|
||
/* 内容包装器 */
|
||
#immersive-main-content-area .tab-content .content-wrapper {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: var(--spacing-lg); /* 内容呼吸空间 */
|
||
}
|
||
|
||
/* chunk-compare 容器 */
|
||
#immersive-main-content-area .tab-content .chunk-compare-container {
|
||
flex: none;
|
||
min-height: auto;
|
||
overflow: visible;
|
||
margin: 0;
|
||
display: block;
|
||
padding: 0; /* chunk-compare 有自己的内部间距 */
|
||
}
|
||
|
||
/* h3 标题 */
|
||
#immersive-main-content-area .tab-content > h3 {
|
||
flex: none;
|
||
margin-bottom: var(--spacing-md);
|
||
margin-top: 0;
|
||
display: none; /* 沉浸模式下隐藏 */
|
||
}
|
||
|
||
#immersive-main-content-area .container .tab-content:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
/* ==================== 5. TOC 区域样式 ==================== */
|
||
|
||
#immersive-toc-area #toc-popup {
|
||
position: static;
|
||
display: flex !important; /* 必须覆盖默认的 display: none */
|
||
flex-direction: column;
|
||
width: 100% !important;
|
||
height: auto !important; /* 允许高度自适应 */
|
||
max-height: none !important; /* 移除最大高度限制！关键修复 */
|
||
min-height: 0 !important; /* 允许缩小 */
|
||
flex-grow: 1; /* 占据剩余空间 */
|
||
flex-shrink: 1; /* 允许收缩 */
|
||
flex-basis: 0; /* 基础尺寸为 0，完全由 flex-grow 控制 */
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
transform: none !important;
|
||
visibility: visible !important;
|
||
opacity: 1 !important;
|
||
padding: 0;
|
||
margin: 0;
|
||
background: transparent;
|
||
overflow: hidden;
|
||
}
|
||
|
||
#immersive-toc-area #toc-popup #toc-popup-header {
|
||
display: none;
|
||
}
|
||
|
||
#immersive-toc-area #toc-popup #toc-list {
|
||
overflow-y: auto;
|
||
flex-grow: 1;
|
||
padding: var(--spacing-sm) 0;
|
||
background: transparent;
|
||
max-height: none !important;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: rgba(0, 0, 0, 0.06) transparent;
|
||
}
|
||
|
||
#immersive-toc-area #toc-popup #toc-list::-webkit-scrollbar {
|
||
width: 2px;
|
||
}
|
||
|
||
#immersive-toc-area #toc-popup #toc-list::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
#immersive-toc-area #toc-popup #toc-list::-webkit-scrollbar-thumb {
|
||
background: rgba(0, 0, 0, 0.06);
|
||
border-radius: 1px;
|
||
}
|
||
|
||
/* TOC 列表项样式 */
|
||
#immersive-toc-area #toc-list li {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li a {
|
||
padding: var(--spacing-sm) var(--spacing-md) !important;
|
||
font-size: var(--font-size-xs) !important;
|
||
font-weight: var(--font-weight-medium) !important;
|
||
color: var(--color-text-secondary) !important;
|
||
border: none !important;
|
||
border-left: 3px solid transparent !important;
|
||
background: transparent !important;
|
||
transition: all var(--transition-fast) !important;
|
||
line-height: var(--line-height-base) !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li a:hover {
|
||
color: var(--color-text-primary) !important;
|
||
background: var(--color-bg-secondary) !important;
|
||
border-left-color: var(--color-border-medium) !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li a.active {
|
||
color: var(--color-primary) !important;
|
||
background: var(--color-selection-bg) !important;
|
||
border-left-color: var(--color-primary) !important;
|
||
}
|
||
|
||
/* 不同层级的样式 */
|
||
#immersive-toc-area #toc-list li.toc-h1 a {
|
||
font-weight: var(--font-weight-semibold) !important;
|
||
color: var(--color-text-primary) !important;
|
||
margin-top: var(--spacing-sm) !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li.toc-h2 a {
|
||
padding-left: 18px !important;
|
||
font-size: 0.7em !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li.toc-h3 a {
|
||
padding-left: 26px !important;
|
||
font-size: 0.68em !important;
|
||
color: var(--color-text-muted) !important;
|
||
}
|
||
|
||
/* 隐藏折叠按钮和控制区域 */
|
||
#immersive-toc-area #toc-list .toc-toggle {
|
||
display: none !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-popup #toc-popup-close-btn,
|
||
#immersive-toc-area #toc-popup .toc-controls {
|
||
display: none;
|
||
}
|
||
|
||
/* 文件名占位符简化样式 */
|
||
#immersive-toc-area #toc-list li a[href^="#placeholder-"] {
|
||
font-weight: var(--font-weight-medium) !important;
|
||
color: var(--color-text-secondary) !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
border-left: 2px solid transparent !important;
|
||
padding-left: 10px !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li a[href^="#placeholder-"]::before {
|
||
display: none !important;
|
||
}
|
||
|
||
#immersive-toc-area #toc-list li a[href^="#placeholder-"]:hover {
|
||
color: var(--color-text-primary) !important;
|
||
background: rgba(0, 0, 0, 0.02) !important;
|
||
border-left-color: var(--color-border-medium) !important;
|
||
}
|
||
|
||
/* ==================== 6. Chatbot 区域样式 ==================== */
|
||
|
||
#immersive-chatbot-area #chatbot-modal {
|
||
position: static !important;
|
||
display: flex !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
pointer-events: auto !important;
|
||
background-color: transparent !important;
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
#immersive-chatbot-area .chatbot-window {
|
||
position: static !important;
|
||
width: 100% !important;
|
||
height: 100% !important;
|
||
max-width: none !important;
|
||
min-width: 0 !important;
|
||
max-height: none !important;
|
||
min-height: 0 !important;
|
||
border-radius: 0 !important;
|
||
box-shadow: none !important;
|
||
resize: none !important;
|
||
overflow: hidden !important;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: var(--color-bg-secondary) !important;
|
||
border: none !important;
|
||
transition: all var(--transition-base) ease !important;
|
||
}
|
||
|
||
/* 隐藏 chatbot 的控制按钮 */
|
||
#immersive-chatbot-area #chatbot-fab,
|
||
#immersive-chatbot-area #chatbot-fullscreen-toggle-btn,
|
||
#immersive-chatbot-area #chatbot-position-toggle-btn,
|
||
#immersive-chatbot-area #chatbot-close-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
#immersive-chatbot-area .chatbot-window::after {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ==================== 7. 拖拽调整手柄 ==================== */
|
||
|
||
.immersive-resize-handle {
|
||
width: 1px;
|
||
background: var(--color-border-light);
|
||
cursor: col-resize;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: calc(var(--z-base) + 10);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: background var(--transition-fast) ease;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
}
|
||
|
||
.immersive-resize-handle::before {
|
||
display: none;
|
||
}
|
||
|
||
.immersive-resize-handle:hover {
|
||
background: rgba(59, 130, 246, 0.3);
|
||
transition-delay: 0.1s;
|
||
}
|
||
|
||
/* 拖动状态 */
|
||
.immersive-dragging .immersive-resize-handle {
|
||
background: rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
body.immersive-dragging {
|
||
cursor: col-resize !important;
|
||
user-select: none !important;
|
||
}
|
||
|
||
body.immersive-dragging * {
|
||
cursor: col-resize !important;
|
||
user-select: none !important;
|
||
pointer-events: none;
|
||
}
|
||
|
||
body.immersive-dragging .immersive-resize-handle {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* TOC vs Dock 水平调整手柄 */
|
||
#toc-vs-dock-resize-handle {
|
||
height: 1px;
|
||
background: var(--color-border-light);
|
||
cursor: ns-resize;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: calc(var(--z-base) + 10);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0;
|
||
border-radius: 0;
|
||
transition: background var(--transition-fast) ease;
|
||
}
|
||
|
||
#toc-vs-dock-resize-handle::before {
|
||
display: none;
|
||
}
|
||
|
||
#toc-vs-dock-resize-handle:hover {
|
||
background: rgba(59, 130, 246, 0.3);
|
||
transform: none;
|
||
}
|
||
|
||
body.toc-dock-resizing #toc-vs-dock-resize-handle {
|
||
background: rgba(59, 130, 246, 0.5);
|
||
}
|
||
|
||
/* ==================== 8. 沉浸模式切换按钮 ==================== */
|
||
|
||
#toggle-immersive-btn {
|
||
display: none !important; /* 永久隐藏 */
|
||
position: fixed !important;
|
||
top: var(--spacing-md) !important;
|
||
right: var(--spacing-md) !important;
|
||
z-index: var(--immersive-toggle-z-index) !important;
|
||
/* 样式继承自 .tiny-round-btn，这里只覆盖定位和层级 */
|
||
}
|
||
#toggle-simple-immersive-btn{
|
||
position: fixed !important;
|
||
top: var(--spacing-lg) !important;
|
||
right: var(--spacing-lg) !important;
|
||
z-index: var(--immersive-toggle-z-index) !important;
|
||
}
|
||
|
||
/* 退出按钮状态（主要由 JS 控制图标） */
|
||
#toggle-immersive-btn.immersive-exit-btn-active {
|
||
/* 样式与默认状态相同 */
|
||
}
|
||
|
||
/* ==================== 9. Dock 在 TOC 区域中的样式 ==================== */
|
||
|
||
#immersive-toc-area #toc-dock-placeholder {
|
||
flex-shrink: 0; /* 固定在底部，不被压缩 */
|
||
border-top: 1px solid var(--color-border-light);
|
||
background: var(--color-bg-secondary);
|
||
padding: var(--spacing-xs) var(--spacing-sm) 0 var(--spacing-sm); /* 底部 0，紧贴边缘 */
|
||
width: 100%; /* 确保占满宽度 */
|
||
box-sizing: border-box;
|
||
margin: 0; /* 确保没有 margin */
|
||
}
|
||
|
||
#immersive-toc-area #toc-dock-placeholder #bottom-left-dock {
|
||
position: static !important;
|
||
width: 100% !important;
|
||
height: auto !important;
|
||
background: transparent !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
padding: 0 !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
align-items: stretch !important; /* 改为 stretch 让子元素占满宽度 */
|
||
gap: var(--spacing-xs) !important;
|
||
font-size: 14px !important; /* 使用绝对单位，避免层叠缩小 */
|
||
}
|
||
|
||
/* 隐藏详细统计信息，仅显示进度（强制隐藏，提高优先级） */
|
||
#immersive-toc-area #toc-dock-placeholder #bottom-left-dock #dock-info-stack {
|
||
display: none !important;
|
||
visibility: hidden !important;
|
||
height: 0 !important;
|
||
overflow: hidden !important;
|
||
opacity: 0 !important;
|
||
}
|
||
|
||
#immersive-toc-area #bottom-left-dock #dock-collapsed-progress-display {
|
||
display: block !important;
|
||
color: var(--color-text-secondary) !important;
|
||
font-weight: var(--font-weight-normal) !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
/* 按钮统一样式 - 紧凑尺寸（不区分展开/折叠） */
|
||
#immersive-toc-area #bottom-left-dock #settings-link,
|
||
#immersive-toc-area #bottom-left-dock #dock-toggle-btn {
|
||
display: inline-flex !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
color: var(--color-text-muted) !important;
|
||
font-size: 14px !important; /* 紧凑字体 */
|
||
width: 24px !important; /* 紧凑宽度 */
|
||
height: 24px !important; /* 紧凑高度 */
|
||
padding: 0 !important;
|
||
margin: 0 !important;
|
||
background: transparent !important;
|
||
border-radius: var(--radius-sm) !important;
|
||
transition: all var(--transition-fast) !important;
|
||
}
|
||
|
||
#immersive-toc-area #bottom-left-dock #settings-link:hover,
|
||
#immersive-toc-area #bottom-left-dock #dock-toggle-btn:hover {
|
||
color: var(--color-text-secondary) !important;
|
||
}
|
||
|
||
/* 控制栏统一样式 - 横向紧凑布局（不区分展开/折叠） */
|
||
#immersive-toc-area #bottom-left-dock .dock-control-bar {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
align-items: center !important;
|
||
justify-content: space-between !important; /* 让元素分散排列 */
|
||
flex-wrap: nowrap !important; /* 禁止换行，保持一行显示 */
|
||
gap: var(--spacing-xs) !important; /* 小间距避免换行 */
|
||
padding: var(--spacing-xs) 0 var(--spacing-xs) 0 !important; /* 上下小间距 */
|
||
margin: 0 !important; /* 确保没有 margin */
|
||
background: transparent !important;
|
||
border-radius: 0 !important;
|
||
width: 100% !important;
|
||
min-height: 28px !important; /* 紧凑的最小高度 */
|
||
max-height: 32px !important; /* 限制最大高度，确保"一条" */
|
||
overflow: visible !important; /* 避免溢出隐藏 */
|
||
}
|
||
|
||
/* 进度显示统一样式 - 紧凑显示（不区分展开/折叠） */
|
||
#immersive-toc-area #bottom-left-dock #dock-collapsed-progress-display {
|
||
flex-grow: 0 !important; /* 不占据剩余空间，保持紧凑 */
|
||
flex-shrink: 0 !important; /* 不收缩 */
|
||
text-align: left !important;
|
||
font-size: 13px !important; /* 使用绝对单位 */
|
||
font-weight: var(--font-weight-medium) !important;
|
||
min-width: auto !important; /* 自动宽度 */
|
||
padding: 2px var(--spacing-xs) !important; /* 小 padding */
|
||
background: none !important; /* 移除背景，更简洁 */
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
color: var(--color-text-secondary) !important;
|
||
line-height: 1 !important; /* 行高为 1，更紧凑 */
|
||
}
|
||
|
||
/* 进度显示：隐藏图标 */
|
||
#immersive-toc-area #bottom-left-dock #dock-collapsed-progress-display::before {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 按钮容器 */
|
||
#immersive-toc-area #bottom-left-dock .dock-control-bar > a {
|
||
flex-shrink: 0 !important; /* 按钮不收缩 */
|
||
}
|
||
|
||
/* 隐藏参考文献徽章（沉浸模式下空间有限）*/
|
||
#immersive-toc-area #bottom-left-dock .dock-control-bar .stat-item-clickable[data-stat-type="reference"] {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ==================== 10. 沉浸模式激活状态 ==================== */
|
||
|
||
/* 禁用 body 滚动 */
|
||
body.no-scroll,
|
||
body.immersive-active {
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 隐藏原始的 UI 元素 */
|
||
body.immersive-active > .container,
|
||
body.immersive-active > #toc-float-btn,
|
||
body.immersive-active > #toc-popup:not(#immersive-toc-area #toc-popup),
|
||
body.immersive-active > #chatbot-modal:not(#immersive-chatbot-area #chatbot-modal),
|
||
body.immersive-active > #chatbot-fab {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 确保沉浸模式下的主要元素正确显示 */
|
||
body.immersive-active #immersive-layout-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
body.immersive-active #immersive-content-area {
|
||
height: 100vh !important;
|
||
box-sizing: border-box !important;
|
||
}
|
||
|
||
body.immersive-active .immersive-panel {
|
||
padding-bottom: 0 !important;
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
body.immersive-active #immersive-main-content-area.immersive-panel {
|
||
padding: 0 !important;
|
||
height: 100% !important;
|
||
}
|
||
|
||
body.immersive-active #immersive-main-content-area .container {
|
||
height: 100% !important;
|
||
padding: var(--spacing-lg) calc(var(--spacing-lg) * 1.5) !important;
|
||
margin-bottom: 0 !important;
|
||
box-sizing: border-box !important;
|
||
display: flex !important;
|
||
flex-direction: column !important;
|
||
}
|
||
|
||
/* 沉浸模式下显示 PDF 对照按钮（用户要求在沉浸模式中也能使用） */
|
||
body.immersive-active #tab-pdf-compare {
|
||
display: flex !important;
|
||
}
|
||
|
||
/* Modal 和右键菜单的 z-index 提升 */
|
||
body.immersive-active .modal-overlay {
|
||
z-index: calc(var(--immersive-toggle-z-index) + 1) !important;
|
||
}
|
||
|
||
body.immersive-active #custom-context-menu {
|
||
z-index: calc(var(--immersive-toggle-z-index) + 2) !important;
|
||
}
|
||
|
||
/* ==================== 11. Meta 信息和导出控制 ==================== */
|
||
|
||
#immersive-main-content-area .meta-info {
|
||
gap: var(--spacing-sm);
|
||
display: flex;
|
||
align-items: center;
|
||
color: var(--color-text-muted);
|
||
font-size: 0.7em;
|
||
}
|
||
|
||
#immersive-main-content-area .meta-separator {
|
||
color: var(--color-border-dark);
|
||
margin: 0 2px;
|
||
}
|
||
|
||
#immersive-main-content-area .meta-export-trigger {
|
||
padding: var(--spacing-xs) var(--spacing-sm);
|
||
font-size: 0.7em;
|
||
gap: var(--spacing-xs);
|
||
border-radius: var(--radius-sm);
|
||
height: auto;
|
||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||
background: transparent;
|
||
color: var(--color-primary);
|
||
font-weight: var(--font-weight-medium);
|
||
transition: all var(--transition-fast);
|
||
}
|
||
|
||
#immersive-main-content-area .meta-export-trigger:hover {
|
||
background: rgba(59, 130, 246, 0.08);
|
||
border-color: rgba(59, 130, 246, 0.25);
|
||
}
|
||
|
||
#immersive-main-content-area .meta-export-trigger i {
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
#immersive-main-content-area .container > .history-export-controls {
|
||
grid-row: 3;
|
||
grid-column: 1;
|
||
z-index: calc(var(--z-base) + 10);
|
||
pointer-events: none;
|
||
}
|
||
|
||
#immersive-main-content-area .container > .history-export-controls.active {
|
||
pointer-events: auto;
|
||
}
|
||
|
||
/* ==================== 12. 滚动条样式 ==================== */
|
||
|
||
.immersive-panel::-webkit-scrollbar {
|
||
width: 6px;
|
||
}
|
||
|
||
.immersive-panel::-webkit-scrollbar-track {
|
||
background: rgba(0, 0, 0, 0.02);
|
||
border-radius: var(--radius-sm);
|
||
}
|
||
|
||
.immersive-panel::-webkit-scrollbar-thumb {
|
||
background: rgba(59, 130, 246, 0.2);
|
||
border-radius: var(--radius-sm);
|
||
transition: background var(--transition-fast);
|
||
}
|
||
|
||
.immersive-panel::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(59, 130, 246, 0.4);
|
||
}
|
||
|
||
/* ==================== 13. 进入/退出动画 ==================== */
|
||
|
||
body.immersive-entering,
|
||
body.immersive-exiting {
|
||
overflow: hidden;
|
||
}
|
||
|
||
body.immersive-entering #immersive-main-content-area .container,
|
||
body.immersive-active #immersive-main-content-area .container {
|
||
animation: fixLayoutHeight 0.1s ease-out;
|
||
}
|
||
|
||
@keyframes fixLayoutHeight {
|
||
0% {
|
||
height: calc(100% - 1px);
|
||
}
|
||
100% {
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
/* ==================== 14. 响应式设计 ==================== */
|
||
|
||
@media (max-width: 1200px) {
|
||
.immersive-panel {
|
||
padding: var(--spacing-sm) var(--spacing-md) 0 var(--spacing-md);
|
||
}
|
||
|
||
#immersive-main-content-area .container {
|
||
padding: var(--spacing-md) var(--spacing-lg) !important;
|
||
}
|
||
|
||
#immersive-toc-area {
|
||
min-width: 200px;
|
||
|
||
}
|
||
|
||
#immersive-chatbot-area {
|
||
min-width: 250px;
|
||
}
|
||
}
|
||
|
||
/* 移动端禁用沉浸式布局 - 700px 以下屏幕 */
|
||
@media (max-width: 700px) {
|
||
#toggle-immersive-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
body.immersive-active #immersive-layout-container {
|
||
display: none !important;
|
||
}
|
||
|
||
body.immersive-active > .container,
|
||
body.immersive-active > #toc-float-btn,
|
||
body.immersive-active > #toc-popup:not(#immersive-toc-area #toc-popup),
|
||
body.immersive-active > #chatbot-modal:not(#immersive-chatbot-area #chatbot-modal),
|
||
body.immersive-active > #chatbot-fab {
|
||
display: block !important;
|
||
}
|
||
|
||
body.immersive-active {
|
||
overflow: auto !important;
|
||
}
|
||
}
|
||
|
||
/* 平板优化 - 701px-768px */
|
||
@media (max-width: 768px) and (min-width: 701px) {
|
||
:root {
|
||
--immersive-panel-min-width: 120px;
|
||
}
|
||
|
||
#immersive-content-area {
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
}
|
||
|
||
.immersive-resize-handle {
|
||
height: 6px;
|
||
width: 100%;
|
||
cursor: ns-resize;
|
||
}
|
||
|
||
#toggle-immersive-btn {
|
||
top: 10px !important;
|
||
right: 10px !important;
|
||
width: 36px !important;
|
||
height: 36px !important;
|
||
font-size: var(--font-size-md) !important;
|
||
}
|
||
}
|
||
|
||
/* ==================== 15. 暗色模式支持 ==================== */
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
#immersive-layout-container {
|
||
background: var(--color-bg-dark, #111827);
|
||
}
|
||
|
||
.immersive-panel {
|
||
border-color: var(--color-border-dark, #374151);
|
||
color: var(--color-text-inverse, #e5e7eb);
|
||
background: var(--color-bg-dark, #1a1d23);
|
||
}
|
||
|
||
#immersive-main-content-area .container {
|
||
background: var(--color-bg-dark, #1a1d23);
|
||
color: var(--color-text-inverse, #e5e7eb);
|
||
}
|
||
|
||
#toggle-immersive-btn {
|
||
background: #1f2937 !important;
|
||
color: var(--color-text-inverse, #e5e7eb) !important;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3),
|
||
0 0 0 1px rgba(255, 255, 255, 0.05) !important;
|
||
}
|
||
|
||
#toggle-immersive-btn:hover {
|
||
background: #374151 !important;
|
||
}
|
||
}
|
||
|
||
/* ==================== 16. 简单沉浸模式样式 ==================== */
|
||
|
||
/* 简单沉浸模式隐藏元素 */
|
||
body.simple-immersive-pdf-mode #fileName,
|
||
body.simple-immersive-pdf-mode .tabs-container,
|
||
body.simple-immersive-pdf-mode #fileMeta {
|
||
display: none !important;
|
||
}
|
||
|
||
/* 简单沉浸模式下 container 的 padding 设为 0 */
|
||
body.simple-immersive-pdf-mode .container {
|
||
padding: 0 !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
/* 简单沉浸模式下 container 的 padding 设为 0 */
|
||
body.simple-immersive-pdf-mode #immersive-main-content-area .container {
|
||
padding: 0 !important;
|
||
margin: 0 auto !important;
|
||
}
|
||
|
||
/* 简单沉浸模式下 container 的 padding 设为 0 */
|
||
body.simple-immersive-pdf-mode .history-export-controls {
|
||
margin: 0 !important;
|
||
}
|
||
|
||
|
||
/* ==================== 17. 打印样式 ==================== */
|
||
|
||
@media print {
|
||
#immersive-layout-container,
|
||
#toggle-immersive-btn {
|
||
display: none !important;
|
||
}
|
||
|
||
body.simple-immersive-pdf-mode #fileName,
|
||
body.simple-immersive-pdf-mode .tabs-container,
|
||
body.simple-immersive-pdf-mode #fileMeta {
|
||
display: none !important;
|
||
}
|
||
|
||
body.immersive-active > .container {
|
||
display: block !important;
|
||
}
|
||
}
|