109 lines
2.3 KiB
CSS
109 lines
2.3 KiB
CSS
/* ==========================
|
|
* 动态状态管理CSS类
|
|
* ========================== */
|
|
|
|
/* 分块对比显示模式 */
|
|
.block-mode-ocr-only .align-block-trans,
|
|
.block-mode-ocr-only .splitter {
|
|
display: none !important;
|
|
}
|
|
|
|
.block-mode-ocr-only .align-block-ocr {
|
|
flex-basis: 100% !important;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.block-mode-trans-only .align-block-ocr,
|
|
.block-mode-trans-only .splitter {
|
|
display: none !important;
|
|
}
|
|
|
|
.block-mode-trans-only .align-block-trans {
|
|
flex-basis: 100% !important;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.block-mode-both .align-block-ocr,
|
|
.block-mode-both .align-block-trans {
|
|
display: block !important;
|
|
}
|
|
|
|
.block-mode-both .splitter {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Flex比例CSS变量支持 - 只在对比模式下生效 */
|
|
.block-mode-both .align-block-ocr {
|
|
flex-basis: var(--ocr-ratio, 50%) !important;
|
|
max-width: var(--ocr-ratio, 50%) !important;
|
|
}
|
|
|
|
.block-mode-both .align-block-trans {
|
|
flex-basis: var(--trans-ratio, 50%) !important;
|
|
max-width: var(--trans-ratio, 50%) !important;
|
|
}
|
|
|
|
/* 拖拽状态 */
|
|
.dragging-cursor {
|
|
cursor: col-resize !important;
|
|
}
|
|
|
|
/* 上下文菜单状态 */
|
|
.context-menu-visible {
|
|
display: block !important;
|
|
}
|
|
|
|
.context-menu-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
/* TOC弹窗状态 */
|
|
.toc-popup-visible {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
transform: translateY(0) !important;
|
|
}
|
|
|
|
.toc-popup-hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.toc-popup-hiding {
|
|
opacity: 0 !important;
|
|
transform: translateY(-10px) !important;
|
|
}
|
|
|
|
/* 临时加载效果 */
|
|
.loading-effect {
|
|
position: fixed !important;
|
|
top: 50% !important;
|
|
left: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
background: rgba(0, 0, 0, 0.75) !important;
|
|
color: white !important;
|
|
padding: 15px 25px !important;
|
|
border-radius: 8px !important;
|
|
z-index: 10001 !important;
|
|
font-size: 1.1em !important;
|
|
text-align: center !important;
|
|
opacity: 0 !important;
|
|
transition: opacity 0.3s ease-in-out !important;
|
|
}
|
|
|
|
.loading-effect-visible {
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
.content-blurred {
|
|
filter: blur(4px) !important;
|
|
transition: filter 0.3s ease-in-out !important;
|
|
}
|
|
|
|
/* 动态高亮样式 */
|
|
.dynamic-highlight {
|
|
cursor: pointer !important;
|
|
}
|
|
|