/* ============================================================ 诗词专属字体应用（从 poetry.css 迁移） ============================================================ */ /* 诗词正文诗句用字 */ .poetry-card .line-q { font-family: var(--cf-poem); } /* 鉴赏段落用字 */ .poetry-jianshang-section { font-family: var(--cf-apprec); } /* 元信息（作者/日期）用字 */ .poetry-meta, .wp-block-post-date { font-family: var(--font-family-meta); } /* 按钮与标签类用字（含字重） */ .p-btn-all, .p-tag-item, .btn-toggle, .btn-combo { font-family: var(--font-family-button); font-weight: var(--font-weight-button); } /* ============================================================ 字号变量系统（3 档，用于切换） ============================================================ */ /* 作用域：（详情页正文 + 工作台渲染区共用） * 作用方向：字号/间距缩放（控制诗词正文/田字格/拼音/翻译/注释/标题/控制栏全套物理变量） * 隔离机制：挂在上；与 poetry.css 的 .theme-zihao-*（侧边栏导航字号）分离 */ .theme-zihao-1 { /* 🟢 1 档：超小号（14px 核心汉字基准） */ /* 核心诗词与田字格 */ --size-hanzi: 16px; /* 核心诗词汉字字号 */ --wh-tianzige: 26px; /* 汉字对应的田字格刚性宽高 */ --gap-grid: 2px; /* 格子间距 */ /* 拼音层 */ --size-pinyin: 10px; /* 汉字头顶的拼音声调字号 */ --gap-pinyin: 0px; --height-pinyin: 15px; --width-pinyin: 36px; /* 右上角注释小角标 */ --size-jiaobiao: 8px; /* 角标内部小数字字号 */ --wh-jiaobiao: 10px; /* 角标外框宽高 */ --updown: -6px; /* 角标相对于田字格边缘向上提的物理距离 */ --rleft: -6px; --updown-v: -5px; /* 角标相对于田字格边缘向上提的物理距离 */ --rleft-v: -8px; /* 字词注释卡片区 */ --size-zhushi: 14px; /* 局部字词注释卡片内部文本字号 */ --lh-zhushi: 20px; /* 字词注释卡片单行高度 */ /* 白话文翻译与长篇赏析正文 */ --size-fanyi: 14px; /* 底部整段白话文翻译字号 */ --lh-fanyi: 20px; /* 白话文翻译多行流淌行高 */ /* p文字 */ --size-p: 14px; /* 普通长篇正文段落字号 */ --lh-p: 20px; /* 普通长篇正文段落多行流淌行高 */ /* 页面标题与大层级 */ --size-title: 20px; /* 诗词大标题字号 */ --size-zuozhe: 14px; /* 作者字号 */ --size-section: 16px; /* 章节小标题字号 */ --lh-section: 24px; /* 章节小标题行高 */ /*控制栏专用的独立物理变量 */ --size-ctrlbtn: 14px; /* 控制栏按钮文字字号 */ --lh-ctrlbtn: 20px; /* 控制栏按钮单行行高 */ --h-ctrlbar: 32px; /* 控制栏容器的物理刚性最小高度 */ --pad-ctrlmod: 2px; /* 控制模块内部的上下安全物理内边距 */ --size-ctrlsub: 10px; /* 控制栏二级下拉子菜单按钮字号 */ /* 结构间距控制 */ --article-gap: 16px; --mainarea-gap: 14px; --line-item-gap: 6px; --space-gap: 6px; } .theme-zihao-2 { /* 🔵 2 档：小号（16px 核心汉字基准） */ /* 核心诗词与田字格 */ --size-hanzi: 18px; /* 核心诗词汉字字号 */ --wh-tianzige: 32px; /* 汉字对应的田字格刚性宽高 */ --gap-grid: 2px; /* 格子间距 */ /* 拼音层 */ --size-pinyin: 11px; /* 汉字头顶的拼音声调字号 */ --gap-pinyin: 0px; --height-pinyin: 16px; --width-pinyin: 38px; /* 右上角注释小角标 */ --size-jiaobiao: 8px; /* 角标内部小数字字号 */ --wh-jiaobiao: 12px; /* 角标外框宽高 */ --updown: -6px; /* 角标相对于田字格边缘向上提的物理距离 */ --rleft: -6px; --updown-v: -5px; /* 角标相对于田字格边缘向上提的物理距离 */ --rleft-v: -8px; /* 字词注释卡片区 */ --size-zhushi: 16px; /* 局部字词注释卡片内部文本字号 */ --lh-zhushi: 24px; /* 字词注释卡片单行高度 */ /* 白话文翻译与长篇赏析正文 */ --size-fanyi: 16px; /* 底部整段白话文翻译字号 */ --lh-fanyi: 24px; /* 白话文翻译多行流淌行高 */ /* p文字 */ --size-p: 16px; /* 普通长篇正文段落字号 */ --lh-p: 24px; /* 普通长篇正文段落多行流淌行高 */ /* 页面标题与大层级 */ --size-title: 22px; /* 诗词大标题字号 */ --size-zuozhe: 16px; /* 作者字号 */ --size-section: 18px; /* 章节小标题字号 */ --lh-section: 26px; /* 章节小标题行高 */ /*控制栏专用的独立物理变量 */ --size-ctrlbtn: 15px; /* 控制栏按钮文字字号 */ --lh-ctrlbtn: 20px; /* 控制栏按钮单行行高 */ --h-ctrlbar: 32px; /* 控制栏容器的物理刚性最小高度 */ --pad-ctrlmod: 2px; /* 控制模块内部的上下安全物理内边距 */ --size-ctrlsub: 14px; /* 控制栏二级下拉子菜单按钮字号 */ /* 结构间距控制 */ --article-gap: 16px; --mainarea-gap: 14px; --line-item-gap: 6px; --space-gap: 6px; } .theme-zihao-3 { /* 🟠 3 档：大号（18px 核心汉字基准） */ /* 核心诗词与田字格 */ --size-hanzi: 20px; /* 核心诗词汉字字号 */ --wh-tianzige: 36px; /* 汉字对应的田字格刚性宽高 */ --gap-grid: 2px; /* 格子间距 */ /* 拼音层 */ --size-pinyin: 10px; /* 汉字头顶的拼音声调字号 */ --gap-pinyin: 0px; --height-pinyin: 15px; --width-pinyin: 40px; /* 右上角注释小角标 */ --size-jiaobiao: 8px; /* 角标内部小数字字号 */ --wh-jiaobiao: 14px; /* 角标外框宽高 */ --updown: -6px; /* 角标相对于田字格边缘向上提的物理距离 */ --rleft: -6px; --updown-v: -5px; /* 角标相对于田字格边缘向上提的物理距离 */ --rleft-v: -8px; /* 字词注释卡片区 */ --size-zhushi: 18px; /* 局部字词注释卡片内部文本字号 */ --lh-zhushi: 30px; /* 字词注释卡片单行高度 */ /* 白话文翻译与长篇赏析正文 */ --size-fanyi: 18px; /* 底部整段白话文翻译字号 */ --lh-fanyi: 30px; /* 白话文翻译多行流淌行高 */ /* p文字 */ --size-p: 18px; /* 普通长篇正文段落字号 */ --lh-p: 30px; /* 普通长篇正文段落多行流淌行高 */ /* 页面标题与大层级 */ --size-title: 26px; /* 诗词大标题字号 */ --size-zuozhe: 16px; /* 作者字号 */ --size-section: 18px; /* 章节小标题字号 */ --lh-section: 28px; /* 章节小标题行高 */ /*控制栏专用的独立物理变量 */ --size-ctrlbtn: 16px; /* 控制栏按钮文字字号 */ --lh-ctrlbtn: 20px; /* 控制栏按钮单行行高 */ --h-ctrlbar: 32px; /* 控制栏容器的物理刚性最小高度 */ --pad-ctrlmod: 2px; /* 控制模块内部的上下安全物理内边距 */ --size-ctrlsub: 14px; /* 控制栏二级下拉子菜单按钮字号 */ /* 结构间距控制 */ --article-gap: 16px; --mainarea-gap: 14px; --line-item-gap: 6px; --space-gap: 6px; } /* 档4/档5（2026-09-04）：正文字号扩 5 档（1/2/3 保持原值兼容旧档案），更大端延伸。标定规律延续档 2→3：汉字 +2 / 田字格 +4（内边距渐增）/ 拼音宽 +2 / 注释翻译赏析 +1 行高 +2 */ .theme-zihao-4 { /* 核心诗词与田字格 */ --size-hanzi: 22px; --wh-tianzige: 40px; --gap-grid: 2px; /* 拼音层 */ --size-pinyin: 11px; --gap-pinyin: 0px; --height-pinyin: 16px; --width-pinyin: 42px; /* 右上角注释小角标 */ --size-jiaobiao: 9px; --wh-jiaobiao: 15px; --updown: -6px; --rleft: -6px; --updown-v: -5px; --rleft-v: -8px; /* 字词注释卡片区 */ --size-zhushi: 19px; --lh-zhushi: 28px; /* 白话文翻译与长篇赏析正文 */ --size-fanyi: 19px; --lh-fanyi: 28px; /* p文字 */ --size-p: 19px; --lh-p: 28px; /* 页面标题与大层级 */ --size-title: 28px; --size-zuozhe: 16px; --size-section: 19px; --lh-section: 27px; /* 控制栏专用 */ --size-ctrlbtn: 16px; --lh-ctrlbtn: 20px; --h-ctrlbar: 34px; --pad-ctrlmod: 2px; --size-ctrlsub: 15px; /* 结构间距控制 */ --article-gap: 18px; --mainarea-gap: 15px; --line-item-gap: 7px; --space-gap: 7px; } .theme-zihao-5 { /* 核心诗词与田字格 */ --size-hanzi: 24px; --wh-tianzige: 44px; --gap-grid: 2px; /* 拼音层 */ --size-pinyin: 11px; --gap-pinyin: 0px; --height-pinyin: 17px; --width-pinyin: 44px; /* 右上角注释小角标 */ --size-jiaobiao: 9px; --wh-jiaobiao: 16px; --updown: -6px; --rleft: -6px; --updown-v: -5px; --rleft-v: -8px; /* 字词注释卡片区 */ --size-zhushi: 20px; --lh-zhushi: 30px; /* 白话文翻译与长篇赏析正文 */ --size-fanyi: 20px; --lh-fanyi: 30px; /* p文字 */ --size-p: 20px; --lh-p: 30px; /* 页面标题与大层级 */ --size-title: 30px; --size-zuozhe: 17px; --size-section: 20px; --lh-section: 28px; /* 控制栏专用 */ --size-ctrlbtn: 17px; --lh-ctrlbtn: 21px; --h-ctrlbar: 36px; --pad-ctrlmod: 2px; --size-ctrlsub: 16px; /* 结构间距控制 */ --article-gap: 20px; --mainarea-gap: 16px; --line-item-gap: 8px; --space-gap: 8px; } /* ============================================================ 主题系统说明 5 个统一主题类定义在 poetry.css 中（.theme-default/gudian/yazhi/xiandai/dark）详情页： → 全局生效工作台：.pdf-content-wrapper.theme-* → 局部隔离每个主题类同时包含：页面级变量 + UI 变量 + 诗词字体变量 ============================================================ */ /* 作用域：:root（无主题类时的全局回退，仅诗词相关变量） * 作用方向：颜色兜底（文字/卡片/按钮/边框/翻译底色等诗词专用色） * 隔离机制：主题类定义在 poetry.css；此处仅提供未挂主题时的回退值 */ /* 默认回退值（不添加任何主题类时） */ :root { --poetry-text-primary: #1a1a2e; --poetry-text-secondary: #475569; --poetry-meta-color: #666; --poetry-btn-t-color: #0984e3; --poetry-btn-n-color: #00b894; --poetry-header-bg: linear-gradient(135deg, rgba(124, 77, 255, 0.2), rgba(0, 145, 234, 0.2)); --poetry-card-bg: rgba(255, 255, 255, 0.3); --poetry-line-border: 1px solid rgba(0, 0, 0, 0.05); --poetry-highlight-bg: rgba(3, 105, 161, 0.15); --poetry-translate-bg: rgba(0, 0, 0, 0.03); --poetry-note-bg: #f1f5f9; --poetry-control-bar: rgba(255, 255, 255, 0.8); --text-primary: #1a1a2e; --text-secondary: #475569; } /* ============================================================ 详情页基础结构（inside-article 内） ============================================================ */ /* 作用域：.inside-article 及其子元素（详情页文章主体，工作台渲染区同结构） * 作用方向：布局（纵向弹性/留白）+ 字体（绑定 --cf-*）+ 颜色（绑定 --poetry-* 变量） */ /* 文章总容器：透明背景、纵向弹性、区块间距 */ .inside-article { background: transparent; display: flex; flex-direction: column; gap: var(--article-gap); } /* 头卡片：居中、绑定标题字体 */ .inside-article .poetry-header-card { text-align: center; padding: 6px; font-family: var(--cf-title); } /* ---- 头卡片大标题与作者 ---- */ .inside-article .poetry-header-card .entry-title { color: var(--cf-color-title, var(--poetry-text-primary)); /* 🎯 组合绑定大盘【诗词大标题】连体套，无缝命中通用变量 */ /* 区块微调（2026-09-04）：--cf-inc-title 为面板写入的整数 px 偏移（-2..+2），默认 0 回落基准 */ font-size: calc(var(--size-title) + var(--cf-inc-title, 0px)); margin: 0; } .inside-article .poetry-header-card .poetry-meta { color: var(--poetry-meta-color); /* 🎯 组合绑定大盘【字词注释/次要小字】连体套 */ font-size: var(--size-zuozhe); } /* ---- 卡片总容器 ---- */ .inside-article #poetry-main-area { display: flex; flex-direction: column; padding: 12px; height: auto; /* 物理放行：总高度自适应，防漏墨重叠 */ gap: var(--mainarea-gap); } /* ---- 核心诗词包裹行 ---- */ .inside-article .poetry-line-item { height: auto; /* 放行核心：总高度向下自由流淌撑开 */ display: flex; flex-direction: column; gap: var(--line-item-gap); } /* 2. 默认隐藏 */ .inside-article .note-ref-corner { display: none; } /* 3. 保持不变：开启状态加粗 */ .inside-article .show-notes .is-note-char { color: #7c4dff !important; } /* 4. 【开启状态】角标精密绝对定位 */ .inside-article .show-notes .note-ref-corner { display: flex; position: absolute; z-index: 10; top: var(--updown); right: var(--rleft); font-size: var(--size-jiaobiao); height: var(--wh-jiaobiao); line-height: 1; align-items: center; justify-content: center; font-weight: bold; color: #7c4dff; } /* 关闭田字格时，汉字变小，角标偏移量也要缩小 */ #poetry-main-area:not(.tian-grid-mode) .show-notes .note-ref-corner { top: -4px; right: -3px; font-size: 7px; height: 10px; } /* ============================================================ 译文与注释区域 ============================================================ */ /* 作用域：.inside-article 内 .line-t / .tn-notes / .tn-note / .line-n / .line-note / * .poetry-jianshang-section / .trans-notes-* （译文/注释/鉴赏模块） * 作用方向：布局（弹性/换行/最大高度折叠）+ 颜色（译文/注释文字色）+ 字体（绑定 --cf-*） */ /* 译文行：自然换行、绑定翻译字体与底色 */ .inside-article .line-t { display: block; height: auto; white-space: normal; /* 允许文本自然换行 */ /* 基础皮肤 */ color: var(--cf-color-translate, var(--poetry-text-secondary)); background: var(--poetry-translate-bg); border-radius: 6px; font-size: calc(var(--size-fanyi) + var(--cf-inc-translate, 0px)); line-height: calc(var(--lh-fanyi) + var(--cf-inc-translate, 0px) * 2); padding: 3px; font-family: var(--cf-translate); } .inside-article .line-t b { color: var(--poetry-btn-t-color); font-weight: 550; } /* 译文注释卡片组：弹性换行、绑定注释字体 */ .inside-article .tn-notes { display: flex; flex-wrap: wrap; font-family: var(--cf-note); } /* 修改记录 2026-06-23：border-radius 统一为 6px */ .inside-article .tn-note { display: inline-block; vertical-align: middle; white-space: normal; word-break: break-all; border-radius: 4px; font-size: calc(var(--size-zhushi) + var(--cf-inc-note, 0px)); line-height: calc(var(--lh-zhushi) + var(--cf-inc-note, 0px) * 2); color: var(--cf-color-note, var(--poetry-text-secondary)); border: 1px solid rgba(0, 0, 0, 0.1); padding: 3px var(--space-gap); font-family: inherit; margin: 4px; } .inside-article .line-n { display: flex; flex-wrap: wrap; font-family: var(--cf-note); } /* 单条字词注释卡片：内联块、自动换字 */ .inside-article .line-note { display: inline-block; vertical-align: middle; white-space: normal; word-break: break-all; border-radius: 4px; font-size: calc(var(--size-zhushi) + var(--cf-inc-note, 0px)); line-height: calc(var(--lh-zhushi) + var(--cf-inc-note, 0px) * 2); color: var(--cf-color-note, var(--poetry-text-secondary)); border: 1px solid rgba(0, 0, 0, 0.1); padding: 3px var(--space-gap); font-family: inherit; margin: 4px; } .inside-article .line-n span b { font-weight: 500; color: var(--poetry-text-primary); } /* 竖排模式：数字「纵中横」合并 */ .inside-article .note-num { /* 🚀 核心大招：强行将竖排流中的数字，打包合并为横向排列（纵中横） */ -webkit-text-combine-upright: all; text-combine-upright: all; font-style: italic; font-weight: 600; color: #7c4dff; } .inside-article .poetry-jianshang-section { padding: 12px; color: var(--cf-color-apprec, var(--poetry-text-secondary, #475569)); display: flex; flex-direction: column; gap: var(--line-item-gap); } /* 鉴赏/译注小节标题：左侧紫色竖条、绑定章节字号 */ .inside-article .trans-notes-body .section-title, .inside-article .poetry-jianshang-section .section-title { font-weight: 600; color: var(--cf-color-subtitle, var(--poetry-text-primary, #1a1a2e)); border-left: 2px solid #7c4dff; margin: 0; padding-left: 6px; /* 🎯 目标对齐：绑定章节小标题专属字号与行高导管 */ font-size: calc(var(--size-section) + var(--cf-inc-subtitle, 0px)); line-height: calc(var(--lh-section) + var(--cf-inc-subtitle, 0px) * 2); font-family: var(--cf-subtitle); } .inside-article .poetry-jianshang-section p { font-size: calc(var(--size-fanyi) + var(--cf-inc-apprec, 0px)); line-height: calc(var(--lh-fanyi) + var(--cf-inc-apprec, 0px) * 2); margin: 0; } /* 译注模块容器：纵向弹性、内边距 */ .inside-article .trans-notes-module { display: flex; flex-direction: column; padding: 12px; } /* 译注正文：折叠态最大高度 600px、超出隐藏 */ .inside-article .trans-notes-body { display: flex; flex-direction: column; gap: var(--mainarea-gap); max-height: 600px; transition: max-height 0.3s ease; color: var(--text-primary, #1a1a2e); overflow: hidden; } /* 译注正文：展开态取消高度限制、允许滚动 */ .inside-article .trans-notes-body.expanded { max-height: none; overflow-y: visible; } /* 译注底部：居中（放置展开按钮） */ .inside-article .trans-notes-footer { text-align: center; margin-top: 10px; } /* 修改记录 2026-06-23：border-radius 统一为 6px */ .inside-article .btn-expand { font-size: var(--size-fanyi); padding: 5px; background: transparent; border: none; color: #7c4dff; cursor: pointer; border-radius: 6px; /* 原 20px → 6px */ transition: color 0.2s, background-color 0.2s, border-color 0.2s; } .inside-article .btn-expand:hover { background: rgba(124, 77, 255, 0.1); } /* 译注单条：底部细分隔线、纵向弹性 */ .inside-article .tn-item { padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: var(--line-item-gap); } /* 译注单条译文：绑定翻译字体与行高 */ .inside-article .tn-translate { font-size: calc(var(--size-fanyi) + var(--cf-inc-translate, 0px)); line-height: calc(var(--lh-fanyi) + var(--cf-inc-translate, 0px) * 2); font-family: var(--cf-translate); } /* 译注单条译文加粗字 */ .inside-article .tn-translate b { color: var(--poetry-btn-t-color); font-weight: 600; } /* 工作台覆盖：译注正文始终可滚动（导出时不折叠） */ .pdf-content-wrapper .trans-notes-body { overflow: visible; } /* 注释目标词：紫色加粗 */ .def-word { margin-right: 5px; color: #7c4dff; font-weight: 600; } /* ============================================================ 田字格与拼音（基于唯一 ID #poetry-main-area） ============================================================ */ /* 作用域：#poetry-main-area 内 .char-with-pinyin / .char-grid / .pinyin-top / .line-q * 作用方向：布局（田字格宽高/拼音四线格）+ 视觉（田字格虚线网格/拼音四线）+ 状态切换（.pinyin-visible / :not(.tian-grid-mode)） */ /* ---- 基础样式（田字格模式） ---- */ /* 字+拼音组合：纵向弹性、统一宽度、拼音和字紧贴如一行 */ #poetry-main-area .char-with-pinyin { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; vertical-align: bottom; position: relative; gap: var(--gap-pinyin); } /* 田字格容器：十字虚线 + 拼音四线格 * 不用 mask SVG（避免离屏合成层） * 全部 linear-gradient 画在 background 上，同层完成，GPU 不额外合成 */ #poetry-main-area .char-grid { /* 正文区块微调（2026-09-04）：--cf-inc-poem 整数 px 偏移，田字格宽高/行高随字号同步（格-字内边距在档间为 10~16px，微调 ±2px 时内边距近似恒定，格子增量 = 字号增量） */ width: calc(var(--wh-tianzige) + var(--cf-inc-poem, 0px)); height: calc(var(--wh-tianzige) + var(--cf-inc-poem, 0px)); position: relative; font-size: calc(var(--size-hanzi) + var(--cf-inc-poem, 0px)); line-height: calc(var(--wh-tianzige) + var(--cf-inc-poem, 0px)); color: var(--cf-color-poem, var(--text-primary, #1a1a2e)); display: flex; align-items: center; justify-content: center; margin: 2px; box-sizing: border-box; border: 1.5px solid var(--tianzi-line-color, #ebdcb9); border-radius: 2px; background-color: rgba(253, 251, 247, 0.1); /* 十字虚线：用 SVG data-URI 背景，性能优于 linear-gradient */ background-image: var(--tianzi-grid-bg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; padding: 0; } /* 性能优化 2026-08-19：.pinyin-top div 改为 .char-with-pinyin::before 伪元素 * - content: attr(data-py) 从 HTML data-py 属性读取拼音（PHP 端已注入） * - 每字少 1 个 DOM 节点，长诗 800 字减 800 节点，工作台克隆后减 1600 节点 * - 伪元素天然 aria-hidden，对屏幕阅读器更友好 * - JS 仍通过 #poetry-main-area 上的 .pinyin-visible 类控制显隐，无需改动 * - PDF 工作台 cloneNode(true) 会保留 data-py 属性，html-to-image 通过 * getComputedStyle 读取伪元素 content（已解析为实际拼音字符串），支持截图 */ /* 拼音文字 + 四线格：同一个 ::before 伪元素 * 不用 mask SVG（避免离屏合成层），4 条水平线直接画在 background 上 */ #poetry-main-area .char-with-pinyin::before { content: attr(data-py); display: none; position: relative; height: var(--height-pinyin); line-height: var(--height-pinyin); width: 100%; font-size: clamp(8px, var(--size-pinyin), var(--size-pinyin)); font-family: "Lucida Sans Unicode"; color: var(--poetry-text-secondary, #475569); white-space: nowrap; text-align: center; /* 四线格：用 SVG data-URI 背景，性能优于多层 linear-gradient */ background-image: var(--pinyin-grid-bg); background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; } #poetry-main-area .line-q { line-height: normal; text-align: left; word-break: break-all; display: flex; flex-wrap: wrap; color: var(--cf-color-poem, var(--poetry-text-primary)); } /* ---- 拼音显示控制 ---- */ #poetry-main-area.pinyin-visible .char-with-pinyin::before { display: block; } /* ---- 非田字格模式（覆盖样式） ---- */ #poetry-main-area:not(.tian-grid-mode) .char-with-pinyin { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; width: auto; } #poetry-main-area:not(.tian-grid-mode) .char-grid { display: inline-block; width: auto; height: auto; border: none; background: none; background-image: none; text-align: center; box-shadow: none; line-height: calc(var(--size-hanzi) + var(--cf-inc-poem, 0px)); position: relative; /* ★ 保持 relative，让角标 note-ref-corner 能相对于汉字定位 */ margin: 2px 1px; /* ★ 加小间距，让 inline-block 汉字之间有呼吸感 */ } #poetry-main-area:not(.tian-grid-mode) .char-with-pinyin { width: auto; gap: 0px; } #poetry-main-area:not(.tian-grid-mode) .char-with-pinyin::before { display: none; background-image: none; text-align: center; min-width: auto; width: auto; } #poetry-main-area:not(.tian-grid-mode).pinyin-visible .char-with-pinyin::before { display: block; } #poetry-main-area.tian-grid-mode .char-with-pinyin { position: relative; } .inside-article.vertical-mode #poetry-main-area:not(.tian-grid-mode).pinyin-visible .char-grid { display: block; width: var(--wh-tianzige); height: var(--wh-tianzige); } /* ============================================================ 竖排模式专属（vertical-mode） ============================================================ */ /* 作用域：.site-main:has(.vertical-mode) / .inside-article.vertical-mode / * .pdf-content-wrapper.vertical-mode（详情页 + 工作台竖排） * 作用方向：布局（writing-mode: vertical-rl / 行列反转 / 横向滚动）+ 视觉（竖排角标定位） */ /* 当 .site-main 包含 .vertical-mode 时生效 */ .site-main:has(.vertical-mode) { height: calc(100vh - 80px); overflow-y: hidden; overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; direction: rtl; } .inside-article.vertical-mode { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; align-items: stretch; height: 100%; width: max-content; direction: ltr; } /*可点击穿透*/ .inside-article.vertical-mode #poetry-main-area, .inside-article.vertical-mode .trans-notes-module, .inside-article.vertical-mode .char-with-pinyin, .inside-article.vertical-mode .char-grid { pointer-events: auto; } .inside-article.vertical-mode .poetry-header-card { writing-mode: vertical-rl; text-orientation: upright; display: flex; flex-direction: column; align-items: center; justify-content: center; } .inside-article.vertical-mode .poetry-header-card .entry-title { letter-spacing: 8px; margin: 0 0 14px 0; } .inside-article.vertical-mode #poetry-main-area { display: flex; flex-direction: row-reverse; } .inside-article.vertical-mode .poetry-line-item { display: flex; flex-direction: row-reverse; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; height: 100%; width: auto; } .inside-article.vertical-mode .line-q { flex-direction: column; flex-wrap: wrap-reverse !important; align-content: flex-start; align-items: center; justify-content: flex-start; height: 100%; width: auto; } .inside-article.vertical-mode .char-with-pinyin { display: flex; flex-direction: column; align-items: center; width: auto; height: auto; padding-left: 4px; padding-bottom: 5px; margin-left: 8px; } /* 性能优化 2026-08-19：原 .is-punctuation-pinyin 类从 .pinyin-top 移到 .char-with-pinyin * 竖排标点拼音隐藏规则同步改为伪元素选择器 */ .inside-article.vertical-mode .char-with-pinyin.is-punctuation-pinyin::before { display: none !important; } .inside-article.vertical-mode .line-t { writing-mode: vertical-rl; text-orientation: upright; height: 100%; width: auto; white-space: normal; } .inside-article.vertical-mode .line-n { writing-mode: vertical-rl; text-orientation: upright; height: 100%; max-height: 100%; width: auto; flex: 0 0 auto; padding: 0; } .inside-article.vertical-mode .line-note { display: block; white-space: nowrap; height: auto; max-height: 100%; padding: 3px; } .inside-article.vertical-mode .trans-notes-module { writing-mode: vertical-rl; flex: 0 0 auto } .inside-article.vertical-mode .trans-notes-body { height: 100%; max-width: 600px; overflow: hidden; transition: width 0.3s ease; } .inside-article.vertical-mode .trans-notes-body.expanded { max-width: none; overflow-x: visible; } .inside-article.vertical-mode .trans-notes-module .tn-item { display: flex; flex-direction: column; border-left: 1px solid rgba(0, 0, 0, 0.05); border-bottom: none; padding: 0 0 0 8px; } .inside-article.vertical-mode .line-q .char-with-pinyin { border-left: 1px solid var(--tianzi-line-color, #ebdcb9); } .inside-article.vertical-mode .tn-translate { height: auto; max-height: 100%; white-space: normal; } .inside-article.vertical-mode .tn-translate b { color: var(--poetry-btn-t-color); font-weight: 600; } .inside-article.vertical-mode .tn-notes { height: auto; border-radius: 3px; max-height: 100%; display: flex; } .inside-article.vertical-mode .tn-note { display: inline-block; height: auto; white-space: nowrap; padding: 3px; margin: 4px; } .inside-article.vertical-mode .poetry-jianshang-section { writing-mode: vertical-rl; text-orientation: upright; } .inside-article.vertical-mode .poetry-jianshang-section p { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; height: 100%; text-align: justify; } .inside-article.vertical-mode .show-notes .note-ref-corner { top: auto; /* 覆盖掉可能影响位置的 top */ bottom: var(--updown-v); /* 🔒 死死贴住汉字底部 */ right: var(--rleft-v); /* 🔒 贴在汉字右侧（根据基准比例精准换算） */ font-size: var(--size-jiaobiao); } .inside-article.vertical-mode .def-word { margin-bottom: 5px; margin-right: 0; color: #7c4dff; font-weight: 600; } .inside-article.vertical-mode .custom-footer { writing-mode: vertical-rl; text-orientation: upright; padding: 12px; } .pdf-content-wrapper.vertical-mode #transNotesBody { max-width: none !important; width: auto !important; } /* ============================================================ 悬浮气泡弹窗（p-popover） ============================================================ */ /* 作用域：#p-popover（详情页字词注释悬浮气泡，全局唯一） * 作用方向：布局（绝对定位/最大宽度）+ 颜色（白字深底）+ 字号（绑定 --size-zhushi） */ #p-popover { display: none; position: fixed; /* ★ 配合 JS clientX/Y 定位，不受 .site-main 内部滚动影响 */ z-index: 100000; color: #fff; padding: 12px 14px; max-width: 260px; pointer-events: none; /* 🎯 目标对齐：绑定局部字词注释专属字号与行高导管 */ font-size: var(--size-zhushi); line-height: var(--lh-zhushi); } /*内容区：flex:1 撑满剩余空间，独立滚动*/ .site-main { flex: 1; min-height: 0; /* flex 子项滚动必须 min-height:0 */ z-index: 101; border-radius: 6px; padding: 5px; margin-top: 0.625rem; /* 与列表页 .poetry-filter-box 的 margin-bottom 一致，避免与 .content-area 的 padding:2vh 0 叠加 */ overflow: hidden; overflow-y: auto; /* ✅ 内容超出时出现滚动条 */ } /* ============================================================ 控制栏样式（poetry-control-bar） ============================================================ */ /* 作用域：.poetry-control-bar-wrapper / .poetry-control-bar / .control-module / * .control-btn / .content-sub-list / .sub-btn（详情页控制栏） * 作用方向：布局（粘性定位/弹性/下拉浮层）+ 字号（绑定 --size-ctrlbtn/--size-ctrlsub）+ 动画（下拉展开过渡） */ /* ---- 控制栏容器：flex 子项，不压缩 ---- */ .poetry-control-bar-wrapper { padding: 0; flex-shrink: 0; z-index: 103; border-radius: 8px; } /* ---- 控制栏 ---- */ .poetry-control-bar { display: flex; align-items: stretch; position: relative; /* 🎯 独立控制：绑定控制栏专属的刚性最小高度变量 */ height: 35px; gap: 8px; } /* ---- 控制模块 ---- */ .control-module { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-width: 0; border-right: 1px solid rgba(0, 0, 0, 0.06); /* 🎯 独立控制：绑定控制模块专属的上下内边距变量，两侧为 0 */ padding: var(--pad-ctrlmod) 0; } .control-module:last-child { border-right: none; } /* 💡 补充提示：控制栏内部的文字/按钮类名（如 .ctrl-btn ），可以直接调用这两个独立管道 */ .control-module .ctrl-btn { font-size: var(--size-ctrlbtn); line-height: var(--lh-ctrlbtn); } /* ---- 按钮通用 ---- */ .control-btn { display: flex; align-items: center; justify-content: center; gap: 4px; background: transparent; border: none; cursor: pointer; color: var(--poetry-text-primary, #1a1a2e); transition: color 0.2s, background-color 0.2s; padding: 8px 12px; width: 100%; height: 100%; white-space: nowrap; font-family: inherit; border-radius: 0; /* 🎯 优化：接入一级菜单专属变量 */ font-size: var(--size-ctrlbtn); } .control-btn:hover { background: rgba(0, 0, 0, 0.05); } .control-btn:active { transform: scale(0.97); } .control-btn .arrow { font-size: 9px; transition: transform 0.25s; margin-left: 4px; } .control-btn .arrow.open { transform: rotate(180deg); } /* ---- 模块1：内容选择 ---- */ .content-toggle .content-arrow { font-size: 9px; transition: transform 0.25s; margin-left: 4px; } .content-toggle .content-arrow.open { transform: rotate(180deg); } /* ★ 子选项列表（垂直排列） */ .content-sub-list { position: absolute; top: 100%; min-width: 100%; /* 最小宽度跟一级按钮同宽 */ width: max-content; /* 内容撑开时自然展开 */ max-width: calc(100vw - 16px); /* 不超出可视屏幕 */ display: flex; flex-direction: column; gap: 5px; box-sizing: border-box; padding: 4px 0; z-index: 100; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease; } /* 详情页控制栏：.open 加在父容器 .control-module 上 */ .control-module.open .content-sub-list { opacity: 1; padding: 8px; overflow: visible; display: flex; max-height: max-content; pointer-events: auto; } .content-sub-list .sub-btn { display: flex; width: 100%; padding: 6px 14px; background: none; text-align: left; font-size: 10px; font-weight: normal; color: var(--poetry-text-secondary, #c8d0dc); transition: color 0.15s, background-color 0.15s; border-radius: 0; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--size-ctrlsub); } .content-sub-list .sub-btn:hover { background: rgba(0, 0, 0, 0.1); } .content-sub-list .sub-btn.active { /* active 态：开关本身变亮（见 poetry.css .gswitch 联动），按钮背景保持玻璃 */ color: var(--ui-accent, #7c4dff); font-weight: 600; } /* ============================================================ 字体定制面板（左轨区块导航 + 右侧三控制组字体/字号/颜色）结构：.cfp-panel > .cfp-body(flex:1 flex-row) > [.cfp-rail(左 6 区块) + .cfp-right(右 3 控制组纵排)] 高度：内容自然撑开；浮层模式 max-height 兜底（小屏内部滚动），左轨/组头常驻 ============================================================ */ .cfp-panel { position: absolute; top: calc(100% + 6px); z-index: 200; display: none; /* .control-module.open 时显示 */ flex-direction: column; padding: 12px; width: max-content; max-width: 96vw; /* ★ 三控制组纵排较高：max-height 兜底防超出视口，超出时右区内部滚动 */ max-height: min(78vh, 660px); overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 35%, transparent) transparent; } .cfp-panel::-webkit-scrollbar { width: 5px; } .cfp-panel::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ui-accent, #7c4dff) 35%, transparent); border-radius: 3px; } .cfp-panel::-webkit-scrollbar-track { background: transparent; } .control-module.open .cfp-panel { display: flex; } /* 面板级科技感：accent 辉光描边（叠加在 dropdown-ui-1 玻璃皮肤上） */ .cfp-panel { border-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 42%, var(--ui-glass-border, rgba(0, 0, 0, 0.1))) !important; box-shadow: inset 0 1px 0 var(--ui-glass-hilight, rgba(255, 255, 255, 0.4)), 0 0 16px color-mix(in srgb, var(--ui-accent, #7c4dff) 16%, transparent), var(--ui-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)) !important; } /* 内部区：flex-column panel 的子级，flex:1 撑满；左轨导航 + 右按钮网格 */ .cfp-body { flex: 1 1 auto; display: flex; flex-direction: row; align-items: flex-start; /* 左轨和按钮网格按内容自然高度对齐，不强行拉伸等高 */ gap: 12px; min-height: 0; min-width: 0; overflow: visible; /* 按钮网格无滚动，直接显示完整 */ } /* ---- 左轨：6 区块导航（名称 + 当前字体常驻可见） ---- */ .cfp-rail { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; } .cfp-rail-item { appearance: none; -webkit-appearance: none; margin: 0; position: relative; width: 78px; padding: 5px 8px 5px 11px; border-radius: 8px; border: 1px solid transparent; background: transparent; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 1px; transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .cfp-rail-item:hover { background: color-mix(in srgb, var(--ui-accent, #7c4dff) 6%, transparent); } .cfp-rail-name { font-size: 11px; letter-spacing: 2px; line-height: 1.2; color: var(--poetry-text-secondary, #64748b); transition: color 0.18s ease; } .cfp-rail-cur { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--poetry-text-primary, #1a1a2e); } .cfp-rail-item.is-active { background: color-mix(in srgb, var(--ui-accent, #7c4dff) 12%, transparent); border-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 38%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--ui-accent, #7c4dff) 20%, transparent); } .cfp-rail-item.is-active .cfp-rail-name { color: var(--ui-accent, #7c4dff); } .cfp-rail-item.is-active::before { /* 左缘 LED 指示条 */ content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 3px; height: 58%; border-radius: 2px; background: var(--ui-accent, #7c4dff); box-shadow: 0 0 6px color-mix(in srgb, var(--ui-accent, #7c4dff) 60%, transparent); } /* ---- 右侧：按钮网格（3 列紧凑，直接点击选中，无滚轮无滚动） ---- */ .cfp-grid-wrap { flex: 1 1 auto; min-width: 240px; min-height: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; align-content: flex-start; padding: 2px 0; } /* 字体按钮（紧凑字形卡）：顶部小字预览 + 底部标签 */ .cfp-btn { appearance: none; -webkit-appearance: none; margin: 0; padding: 6px 4px 5px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ui-line, rgba(0,0,0,0.09)) 100%, transparent); background: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.10) 35%, transparent 70%), color-mix(in srgb, var(--ui-solid-bg, #fdfbf7) 90%, transparent); box-shadow: inset 0 1px 0 var(--ui-glass-hilight, rgba(255, 255, 255, 0.5)), 0 2px 6px var(--ui-shadow-sm, rgba(0, 0, 0, 0.05)); cursor: pointer; transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .cfp-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 50%, transparent); box-shadow: inset 0 1px 0 var(--ui-glass-hilight, rgba(255, 255, 255, 0.55)), 0 6px 14px color-mix(in srgb, var(--ui-accent, #7c4dff) 18%, rgba(0, 0, 0, 0.08)); } .cfp-btn:active { transform: translateY(0) scale(0.985); } /* 选中按钮：紫色 accent 描边 + 辉光 + 内凹底 */ .cfp-btn.is-active { border-color: var(--ui-accent, #7c4dff); background: linear-gradient(165deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.12) 35%, transparent 70%), color-mix(in srgb, var(--ui-accent, #7c4dff) 14%, var(--ui-solid-bg, #ffffff)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-accent, #7c4dff) 22%, rgba(255,255,255,0.55)), inset 0 -2px 6px color-mix(in srgb, var(--ui-accent, #7c4dff) 18%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--ui-accent, #7c4dff) 30%, transparent), 0 4px 16px color-mix(in srgb, var(--ui-accent, #7c4dff) 30%, transparent); } /* 顶部字形预览：目标字体渲染中字，轻浮雕阴影 */ .cfp-btn-glyph { flex: 0 0 auto; width: 100%; font-size: 22px; line-height: 1.1; text-align: center; color: var(--poetry-text-primary, #1a1a2e); text-shadow: 0 1px 0 var(--ui-glass-hilight, rgba(255, 255, 255, 0.4)); } /* 底部字体名：紧凑标签，选中态紫色加粗 */ .cfp-btn-name { font-size: 11px; font-weight: 500; letter-spacing: 0.5px; line-height: 1.2; color: var(--poetry-text-secondary, #64748b); padding: 1px 4px 0; border-radius: 4px; transition: color 0.18s ease, font-weight 0.18s ease, background 0.18s ease; } .cfp-btn:hover .cfp-btn-name { color: var(--poetry-text-primary, #1a1a2e); } .cfp-btn.is-active .cfp-btn-name { color: var(--ui-accent, #7c4dff); font-weight: 700; letter-spacing: 1px; background: color-mix(in srgb, var(--ui-accent, #7c4dff) 10%, transparent); } /* 状态点（选中态才明显显示）：右上角微点 */ .cfp-btn-dot { position: absolute; right: 6px; top: 6px; width: 5px; height: 5px; border-radius: 50%; opacity: 0; transition: opacity 0.18s ease; } .cfp-btn[data-status="local"] .cfp-btn-dot { background: #22c55e; box-shadow: 0 0 5px rgba(34, 197, 94, 0.55); } .cfp-btn[data-status="cdn"] .cfp-btn-dot { background: #3b82f6; box-shadow: 0 0 5px rgba(59, 130, 246, 0.55); } .cfp-btn[data-status="fallback"] .cfp-btn-dot { background: #9ca3af; box-shadow: none; } .cfp-btn.is-active .cfp-btn-dot { opacity: 1; } /* ============================================================ 面板扩展（2026-09-04）：全局基准档 + 右区三控制组（字体/字号/颜色）结构：.cfp-panel > [.cfp-global + .cfp-body > (.cfp-rail + .cfp-right > .cfp-group×3)] ============================================================ */ /* ---- 基准档（面板顶部横贯，写 poetry_font_scale + html.theme-zihao-N，与侧边栏同源） ---- */ .cfp-global { display: flex; align-items: center; gap: 10px; padding: 0 2px 10px; margin-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--ui-line, rgba(0, 0, 0, 0.09)) 60%, transparent); } .cfp-global-label { flex: 0 0 auto; font-size: 13px; font-weight: 600; letter-spacing: 3px; color: var(--poetry-text-secondary, #64748b); } .cfp-global-btns { flex: 1 1 auto; display: flex; gap: 5px; } .cfp-global-btn { appearance: none; -webkit-appearance: none; margin: 0; flex: 1 1 0; padding: 8px 0 7px; border-radius: 8px; border: 1px solid var(--ui-line, rgba(0, 0, 0, 0.09)); background: color-mix(in srgb, var(--ui-solid-bg, #fdfbf7) 70%, transparent); font-size: 14px; font-weight: 700; color: var(--poetry-text-secondary, #64748b); cursor: pointer; transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; } .cfp-global-btn:hover { border-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 45%, transparent); color: var(--poetry-text-primary, #1a1a2e); } .cfp-global-btn.is-active { border-color: var(--ui-accent, #7c4dff); background: color-mix(in srgb, var(--ui-accent, #7c4dff) 14%, var(--ui-solid-bg, #ffffff)); color: var(--ui-accent, #7c4dff); box-shadow: 0 0 8px color-mix(in srgb, var(--ui-accent, #7c4dff) 24%, transparent); } /* ---- 右区容器：三个控制组纵排（字体/字号/颜色），随左轨选中区块联动 ---- */ .cfp-right { flex: 1 1 auto; min-width: 280px; min-height: 0; display: flex; flex-direction: column; gap: 10px; } /* 控制组：组头（组名 + 当前属性值）+ 内容 */ .cfp-group { display: flex; flex-direction: column; gap: 4px; } .cfp-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 2px; } .cfp-group-label { font-size: 10px; font-weight: 600; letter-spacing: 3px; color: var(--poetry-text-secondary, #64748b); } /* 当前属性值：右对齐常驻展示，选中项高亮之外的兜底提示 */ .cfp-group-cur { font-size: 11px; font-weight: 600; letter-spacing: 0.5px; color: var(--ui-accent, #7c4dff); transition: color 0.18s ease; } /* ---- 字号组：5 档实际 px 值按钮（相对当前全局档基准 ±2） ---- */ .cfp-size-row { display: flex; gap: 6px; align-items: stretch; padding: 2px 0; } .cfp-size-btn { appearance: none; -webkit-appearance: none; margin: 0; flex: 1 1 0; padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 1px; border-radius: 10px; border: 1px solid var(--ui-line, rgba(0, 0, 0, 0.09)); background: linear-gradient(165deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.10) 35%, transparent 70%), color-mix(in srgb, var(--ui-solid-bg, #fdfbf7) 90%, transparent); cursor: pointer; transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .cfp-size-btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 50%, transparent); } .cfp-size-btn:active { transform: translateY(0) scale(0.97); } .cfp-size-val { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--poetry-text-primary, #1a1a2e); font-family: var(--cf-poem, inherit); } .cfp-size-inc { font-size: 9px; letter-spacing: 1px; color: var(--poetry-text-secondary, #64748b); } .cfp-size-btn.is-active { border-color: var(--ui-accent, #7c4dff); background: color-mix(in srgb, var(--ui-accent, #7c4dff) 13%, var(--ui-solid-bg, #ffffff)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-accent, #7c4dff) 20%, rgba(255, 255, 255, 0.55)), 0 0 0 1.5px color-mix(in srgb, var(--ui-accent, #7c4dff) 28%, transparent), 0 3px 12px color-mix(in srgb, var(--ui-accent, #7c4dff) 26%, transparent); } .cfp-size-btn.is-active .cfp-size-val { color: var(--ui-accent, #7c4dff); } .cfp-size-btn.is-active .cfp-size-inc { color: color-mix(in srgb, var(--ui-accent, #7c4dff) 75%, var(--poetry-text-secondary, #64748b)); } .cfp-size-note { padding: 4px 2px 0; font-size: 10px; letter-spacing: 1px; line-height: 1.5; color: var(--poetry-text-secondary, #64748b); opacity: 0.85; } /* ---- 颜色组：默认点 + 8 色国风色板 ---- */ .cfp-color-row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; padding: 6px 2px; } .cfp-color-dot { appearance: none; -webkit-appearance: none; margin: 0; padding: 0; position: relative; width: 27px; height: 27px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.2s ease; } .cfp-color-dot:hover { transform: scale(1.12); } .cfp-color-dot:active { transform: scale(0.96); } /* 选中：accent 内描边 + 外环辉光 */ .cfp-color-dot.is-active { border-color: var(--ui-accent, #7c4dff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent, #7c4dff) 30%, transparent), 0 2px 10px color-mix(in srgb, var(--ui-accent, #7c4dff) 35%, transparent); } .cfp-color-dot.is-active::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--ui-accent, #7c4dff) 45%, transparent); } /* 默认点（清除定制）：斜纹底 + 「默」字 */ .cfp-color-dot[data-default] { background: linear-gradient(135deg, transparent 46%, rgba(100, 116, 139, 0.5) 46%, rgba(100, 116, 139, 0.5) 54%, transparent 54%), #f8fafc; color: var(--poetry-text-secondary, #64748b); font-size: 10px; line-height: 1; } /* 自定义色盘：圆形 + 渐变彩虹环，点击唤起系统选色器 */ .cfp-color-picker { position: relative; width: 27px; height: 27px; border-radius: 50%; cursor: pointer; border: 2px solid rgba(0, 0, 0, 0.08); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(0, 0, 0, 0.12); background: conic-gradient(from 0deg, #ff4040, #ffaa40, #ffff40, #40ff40, #40ffff, #4040ff, #aa40ff, #ff40aa, #ff4040); transition: transform 0.15s ease, box-shadow 0.2s ease; } .cfp-color-picker:hover { transform: scale(1.12); } .cfp-color-picker:active { transform: scale(0.96); } .cfp-color-picker::after { content: '🎨'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; line-height: 1; pointer-events: none; } .cfp-color-picker input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } /* 移动端：按钮缩成单列，字缩小一点（左轨已窄，1 列更不挤） */ @media (max-width: 480px) { .cfp-panel { right: 0; left: auto; padding: 10px; } .cfp-body { gap: 10px; } .cfp-rail-item { width: 68px; padding: 4px 6px 4px 10px; } .cfp-rail-name { font-size: 10px; letter-spacing: 1px; } .cfp-rail-cur { font-size: 11px; } .cfp-grid-wrap { grid-template-columns: repeat(2, 1fr); gap: 6px; min-width: 160px; } .cfp-btn { padding: 5px 3px 4px; border-radius: 8px; } .cfp-btn-glyph { font-size: 18px; } .cfp-btn-name { font-size: 10px; letter-spacing: 0; } /* 新组件（全局档/三控制组） */ .cfp-global { padding-bottom: 8px; margin-bottom: 8px; } .cfp-global-label { font-size: 11px; letter-spacing: 2px; } .cfp-global-btn { padding: 6px 0 5px; font-size: 12px; } .cfp-right { min-width: 170px; gap: 8px; } .cfp-group { gap: 3px; } .cfp-group-label { letter-spacing: 2px; } .cfp-group-cur { font-size: 10px; } .cfp-size-btn { padding: 6px 0 5px; } .cfp-size-val { font-size: 13px; } .cfp-color-dot { width: 24px; height: 24px; } .cfp-color-picker { width: 24px; height: 24px; } .cfp-color-row { gap: 7px; } } /* 减弱动效：transition 全部关闭（纯静态按钮，无依赖滚动） */ @media (prefers-reduced-motion: reduce) { .cfp-rail-item, .cfp-btn, .cfp-btn-name { transition: none; } .cfp-btn:hover { transform: none; } .cfp-btn:active { transform: none; } .cfp-global-btn, .cfp-group-cur, .cfp-size-btn, .cfp-color-dot, .cfp-color-picker { transition: none; } .cfp-size-btn:hover, .cfp-size-btn:active, .cfp-color-dot:hover, .cfp-color-dot:active, .cfp-color-picker:hover, .cfp-color-picker:active { transform: none; } } /* ============================================================ 工作台内联模式（#uiCustomPanel 内的静态段，非浮层）变体类：.cfp-panel--inline（布局）+ .cfp-panel--dark（暗色皮肤） ============================================================ */ .cfp-panel--inline { position: static; /* 静态文档流，随 UI 定制面板整体开合 */ display: flex; /* flex-column：.cfp-body flex:1 撑高 */ flex-direction: column; width: 100%; max-width: none; max-height: none; padding: 8px 0 4px; overflow: visible; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .cfp-panel--inline .cfp-body { overflow: hidden; gap: 10px; min-height: 0; } /* 暗色皮肤：左轨项（可见性增强） */ .cfp-panel--dark .cfp-rail-item { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); } .cfp-panel--dark .cfp-rail-name { color: rgba(255, 255, 255, 0.72); } .cfp-panel--dark .cfp-rail-cur { color: #fff; } .cfp-panel--dark .cfp-rail-item:hover { background: color-mix(in srgb, var(--ui-accent, #7c4dff) 16%, transparent); } .cfp-panel--dark .cfp-btn { border-color: rgba(255, 255, 255, 0.10); background: linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.01) 35%, transparent 70%), rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.25); } .cfp-panel--dark .cfp-btn:hover { border-color: color-mix(in srgb, var(--ui-accent, #7c4dff) 50%, rgba(255,255,255,0.2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 6px 14px color-mix(in srgb, var(--ui-accent, #7c4dff) 22%, rgba(0,0,0,0.35)); } .cfp-panel--dark .cfp-btn.is-active { border-color: var(--ui-accent, #7c4dff); background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 35%, transparent 70%), color-mix(in srgb, var(--ui-accent, #7c4dff) 22%, rgba(255,255,255,0.04)); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ui-accent, #7c4dff) 28%, rgba(255,255,255,0.12)), inset 0 -2px 6px color-mix(in srgb, var(--ui-accent, #7c4dff) 20%, transparent), 0 0 0 1.5px color-mix(in srgb, var(--ui-accent, #7c4dff) 36%, transparent), 0 4px 16px color-mix(in srgb, var(--ui-accent, #7c4dff) 32%, transparent); } .cfp-panel--dark .cfp-btn-glyph { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } .cfp-panel--dark .cfp-btn-name { color: rgba(255, 255, 255, 0.82); } .cfp-panel--dark .cfp-btn:hover .cfp-btn-name { color: rgba(255, 255, 255, 0.88); } .cfp-panel--dark .cfp-btn.is-active .cfp-btn-name { color: var(--ui-accent, #7c4dff); font-weight: 700; letter-spacing: 2px; background: color-mix(in srgb, var(--ui-accent, #7c4dff) 16%, transparent); } /* 暗色皮肤：全局档 / 三控制组（工作台内联段） */ .cfp-panel--dark .cfp-global { border-bottom-color: rgba(255, 255, 255, 0.10); } .cfp-panel--dark .cfp-global-label { color: rgba(255, 255, 255, 0.72); } .cfp-panel--dark .cfp-global-btn { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.72); } .cfp-panel--dark .cfp-global-btn:hover { color: rgba(255, 255, 255, 0.88); } .cfp-panel--dark .cfp-global-btn.is-active { background: color-mix(in srgb, var(--ui-accent, #7c4dff) 22%, transparent); color: #fff; } .cfp-panel--dark .cfp-group-label { color: rgba(255, 255, 255, 0.72); } .cfp-panel--dark .cfp-group-cur { color: var(--ui-accent, #7c4dff); } .cfp-panel--dark .cfp-size-btn { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); } .cfp-panel--dark .cfp-size-val { color: rgba(255, 255, 255, 0.92); text-shadow: none; } .cfp-panel--dark .cfp-size-inc { color: rgba(255, 255, 255, 0.72); } .cfp-panel--dark .cfp-size-btn.is-active { background: color-mix(in srgb, var(--ui-accent, #7c4dff) 20%, transparent); } .cfp-panel--dark .cfp-size-btn.is-active .cfp-size-val { color: #fff; } .cfp-panel--dark .cfp-size-note { color: rgba(255, 255, 255, 0.72); } .cfp-panel--dark .cfp-color-dot { border-color: rgba(255, 255, 255, 0.15); } .cfp-panel--dark .cfp-color-picker { border-color: rgba(255, 255, 255, 0.15); } /* 内联模式移动端：不再右对齐（静态段无溢出问题） */ @media (max-width: 480px) { .cfp-panel--inline { padding: 6px 0 2px; } } /* ============================================================ 工作台 UI 定制面板（向下展开，暗色主题） ============================================================ */ /* 作用域：#uiCustomPanel / #wbCfWheelPanel / .ui-hscroll / .hscroll-item（工作台专用，详情页不使用） * 作用方向：布局（绝对定位浮层/横向滑动）+ 颜色（暗色主题固定色）+ 视觉（A4 比例背景卡/名称标签） * 隔离边界：仅工作台 .control-module.open 下显示，与详情页控制栏互不干扰 */ #uiCustomPanel { position: absolute; top: calc(100% + 6px); /* 向下展开 */ background: var(--poetry-control-bar, rgba(30, 34, 50, 0.98)); /* ★ 性能清理：移除 backdrop-filter: blur(10px) * 背景已是 rgba(0.98) 几乎实色，毛玻璃无视觉意义； * 常驻下拉面板打开时用户仍可滚动内容，手机端每帧都要做整屏模糊采样 → 性能剧毒。 */ border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 10px; /* ★ 性能降级：box-shadow 模糊半径 30px → 12px（减轻常驻面板滚动时的阴影填充开销） */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22); padding: 14px 12px; /* ★ 宽度跟字体定制面板同宽（由 #wbCfWheelPanel 的列宽决定） */ width: max-content; min-width: 100%; /* 最小跟一级按钮同宽 */ max-width: calc(100vw - 16px); /* 不超出屏幕 */ z-index: 9999; display: none; /* 覆盖 .content-sub-list 基础样式的冲突属性（复杂面板不能用简单列表的 flex 布局） * ID 选择器特异性 (1,0,0) 高于所有 .content-sub-list 类规则，无需 !important * display 由 .control-module.open #uiCustomPanel 控制，此处不覆盖 */ flex-direction: unset; gap: 0; max-height: none; overflow: visible; opacity: 1; white-space: normal; } /* UI定制面板：.open 加在父容器 .control-module 上 */ .control-module.open #uiCustomPanel { display: block; } /* UI定制面板内容较高（字体滚轮+颜色+背景三段），不受工作台 .content-sub-list 的 max-height 限制 */ .pdf-toolbar-top .control-module.open #uiCustomPanel { max-height: none; } /* 面板内各区块 */ #uiCustomPanel .ui-section { margin-bottom: 4px; min-width: 0; /* 允许 flex 子项收缩 */ } /* 背景区段：不参与父级 max-content 宽度撑开（由字体滚轮决定面板宽） * width:0 + min-width:100% → 渲染时占满面板宽，但不贡献宽度计算 */ #uiCustomPanel .ui-bg-section { width: 0; min-width: 100%; } #uiCustomPanel .ui-section-label { font-size: 12px; font-weight: 600; color: var(--ui-accent, #a78bfa); margin-bottom: 8px; } #uiCustomPanel .ui-section-divider { height: 1px; background: rgba(0, 0, 0, 0.08); margin: 10px 0; } /* 左右滑动选择器：宽度跟面板一致，内容超出时左右滑动 */ #uiCustomPanel .ui-hscroll { display: flex; gap: 10px; width: 100%; /* 占满区段宽度（区段已 min-width:100%） */ overflow-x: auto; overflow-y: hidden; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; min-width: 0; /* 允许在父容器 max-width 内正确滚动 */ max-width: 100%; /* 不超出面板宽度 */ } /* 左右滑动选择器（基础样式，UI定制面板内有覆盖） */ .ui-hscroll { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent; } .ui-hscroll::-webkit-scrollbar { height: 4px; } .ui-hscroll::-webkit-scrollbar-track { background: transparent; } .ui-hscroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; } /* 左右滑动项 — 文字颜色 */ .ui-hscroll .hscroll-item { position: relative; flex-shrink: 0; width: 56px; height: 56px; border-radius: 8px; border: 2px solid rgba(255, 255, 255, 0.1); overflow: hidden; transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; display: flex; align-items: center; justify-content: center; cursor: pointer; scroll-snap-align: center; } .ui-hscroll .hscroll-item:hover, .ui-hscroll .hscroll-item.active { border-color: #a78bfa; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3); } /* 左右滑动项 — 背景（稍大，A4 比例） */ .ui-hscroll .bg-hscroll-item { width: 60px; height: 80px; align-items: flex-end; } /* 名称标签 */ .ui-hscroll .hscroll-name-tag { position: absolute; bottom: 0; width: 100%; background: rgba(0, 0, 0, 0.55); text-align: center; font-size: 10px; color: #fff; padding: 2px 0; /* ★ 性能清理：移除 backdrop-filter: blur(4px) * 主题缩略图标签是常驻元素，滚动时每屏几十张卡片每张都要对其做"背景区域外→标签"的 GPU 采样模糊， * 渲染量随 tile 数量线性增长。半透明黑底已足够文字对比度，毛玻璃无必要。 */ } /* 字体列表 - 自动撑开宽度 */ /* 修改记录 2026-06-23：移除 backdrop-filter 毛玻璃效果，border-radius 统一为 6px */ #main-font-sub-list { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--poetry-card-bg, rgba(255,255,255,0.95)); /* 修改记录 2026-06-23：移除 backdrop-filter: blur(8px) 和 -webkit-backdrop-filter */ border: 1px solid rgba(255,255,255,0.3); border-top: none; border-radius: 0 0 6px 6px; /* 原 8px → 6px */ display: flex; justify-content: center; gap: 4px; padding: 8px 8px; z-index: 100; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.25s ease, padding 0.25s ease; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); width: auto; min-width: max-content; white-space: nowrap; } #main-font-sub-list.open { max-height: 200px; opacity: 1; padding: 8px; } #main-font-sub-list .font-option { padding: 4px 14px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--poetry-text-primary, #1a1a2e); transition: color 0.2s, background-color 0.2s; white-space: nowrap; /* 🎯 优化：接入二级菜单专属变量 */ font-size: var(--size-ctrlsub); } #main-font-sub-list .font-option:hover { background: rgba(0, 0, 0, 0.08); } #main-font-sub-list .font-option.active { background: linear-gradient(135deg, #7832ff, #0091ea); color: #fff; } /* ---- 手机端禁用悬停效果（避免误触） ---- */ /* 作用域：.control-btn / .content-sub-list .sub-btn / #main-font-sub-list .font-option * 作用方向：响应式交互（触屏设备取消 hover 背景反馈，防误触） * 断点：hover: none（触屏设备 / 无鼠标环境） */ @media (hover: none) { .control-btn:hover { background: transparent; } .content-sub-list .sub-btn:hover, #main-font-sub-list .font-option:hover { background: transparent; } } /* ============================================================ PDF 工作台：基础环境 ============================================================ */ /* 作用域：#pdf-app / .pdf-app / .pdf-global-portal（工作台根容器） * 作用方向：布局（显隐切换 display）+ 字体（默认字体 + 按钮固定 16px 不受缩放） * 隔离边界：#pdf-app 默认隐藏，.is-active 时显示，与详情页 .site-content 互斥 */ #pdf-app { display: none; } #pdf-app.is-active { display: flex; } /* 外层宿主只提供底层默认字体，核心画布区域将完全重写 */ .pdf-app { font-family: var(--font-reg-latin-serif); } /* 工作台内所有按钮固定字号（不受缩放影响） */ .pdf-global-portal .menu-main-item, .pdf-global-portal .primary-download-btn, .pdf-global-portal .preview-action-btn { font-size: 16px; } /* ============================================================ PDF 工作台：布局框架（#pdf-workbench / header / content） ============================================================ */ /* 作用域：#pdf-workbench（工作台主框架，全屏覆盖） * 作用方向：布局（fixed 全屏 / z-index 995 / 纵向弹性）+ 显隐（.is-active 控制） */ #pdf-workbench { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 995; display: none; flex-direction: column; } #pdf-app.is-active #pdf-workbench { display: flex; } /* ============================================================ PDF 工作台：顶部工具栏（标题 + 控制按钮，向下展开） ============================================================ */ /* 作用域：.pdf-toolbar-top / .pdf-toolbar-header / .pdf-content-area / .pdf-content-wrapper * 作用方向：布局（工具栏固定/弹性/内容滚动）+ 颜色（暗色工具栏底）+ 性能（translateZ GPU 合成） */ .pdf-toolbar-top { background: var(--poetry-control-bar, rgba(20, 24, 40, 0.95)); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 4px 12px 6px; flex-shrink: 0; } /* 主题类加到 .pdf-toolbar-top 上时，覆盖 background 属性（只取控制栏变量，不要渐变背景） */ .pdf-toolbar-top[class*="theme-"] { background: var(--poetry-control-bar, rgba(20, 24, 40, 0.95)) !important; background-attachment: local !important; } .pdf-toolbar-header { display: flex; justify-content: space-between; align-items: center; padding: 2px 0 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 4px; } .pdf-header-title { font-size: 12px; font-weight: 600; color: var(--poetry-text-primary, #e2e8f0); } .pdf-header-actions { display: flex; gap: 8px; align-items: center; } .pdf-help-toolbar-btn { background: rgba(59, 130, 246, 0.2); border: 1px solid rgba(59, 130, 246, 0.4); color: var(--poetry-text-primary, #e2e8f0); padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; /* ★ transition: all → 显式：hover 只有 bg/border/color 变化 */ transition: background-color 0.2s, border-color 0.2s, color 0.2s; line-height: 1.4; display: flex; align-items: center; gap: 4px; } .pdf-help-toolbar-btn:hover { background: rgba(59, 130, 246, 0.4); border-color: rgba(59, 130, 246, 0.6); } .pdf-portal-exit { background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(239, 68, 68, 0.3); color: var(--poetry-text-primary, #e2e8f0); padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; /* ★ transition: all → 显式：hover 只有 bg/border/color 变化 */ transition: background-color 0.2s, border-color 0.2s, color 0.2s; line-height: 1.4; display: flex; align-items: center; gap: 4px; } .pdf-portal-exit:hover { background: rgba(239, 68, 68, 0.5); border-color: rgba(239, 68, 68, 0.7); color: #fff; } /* ============================================================ 使用说明弹窗样式 ============================================================ */ .pdf-help-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .pdf-help-modal.active { opacity: 1; visibility: visible; } .pdf-help-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); /* ★ 性能清理：移除 backdrop-filter: blur(4px) * 弹窗遮罩本身就是半透明的，毛玻璃只会增加一次性 GPU 整屏采样开销； * 纯 rgba 遮罩 + 内容动画弹窗，视觉上已足够阻断层级。 */ } .pdf-help-dialog { position: relative; width: 90%; max-width: 560px; max-height: 80vh; background: linear-gradient(180deg, #1e2438 0%, #151a2c 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; /* ★ 性能降级：box-shadow 模糊半径 64px → 20px * 24px 偏移 + 64px 模糊 = 阴影外扩近 90px，填充率压力巨大； * 弹窗居中显示时四周阴影仍肉眼可辨，但 GPU 每帧像素填充量 -70%。 */ box-shadow: 0 12px 20px rgba(0, 0, 0, 0.38); overflow: hidden; transform: translateY(20px); transition: transform 0.3s ease; } .pdf-help-modal.active .pdf-help-dialog { transform: translateY(0); } .pdf-help-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pdf-help-title { font-size: 18px; font-weight: 600; color: #e2e8f0; display: flex; align-items: center; gap: 10px; } .pdf-help-title-icon { font-size: 22px; } .pdf-help-close { background: rgba(255, 255, 255, 0.08); border: none; color: #e2e8f0; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; /* ★ transition: all → 显式：关闭按钮 hover 只有 bg/color 变化 */ transition: background-color 0.2s, color 0.2s; } .pdf-help-close:hover { background: rgba(239, 68, 68, 0.5); } .pdf-help-body { padding: 20px 24px; overflow-y: auto; max-height: calc(80vh - 80px); } .pdf-help-intro { font-size: 13px; color: #94a3b8; line-height: 1.7; margin-bottom: 20px; padding: 12px 16px; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 10px; } .pdf-help-list { list-style: none; padding: 0; margin: 0; } .pdf-help-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .pdf-help-item:last-child { border-bottom: none; } .pdf-help-num { flex-shrink: 0; width: 28px; height: 28px; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #fff; } .pdf-help-content { flex: 1; min-width: 0; } .pdf-help-item-title { font-size: 14px; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; line-height: 1.5; } .pdf-help-item-desc { font-size: 12.5px; color: #94a3b8; line-height: 1.7; } .pdf-help-item-desc strong { color: #3b82f6; font-weight: 600; } .pdf-help-item-desc em { color: #22c55e; font-style: normal; font-weight: 500; } .pdf-help-footer { padding: 14px 24px 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: flex-end; gap: 10px; } .pdf-help-footer-btn { padding: 8px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; /* ★ transition: all → 显式：primary hover 有 transform+box-shadow，颜色也需过渡 */ transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; } .pdf-help-btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; } .pdf-help-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); } /* 响应式：小屏适配 */ @media (max-width: 768px) { .pdf-help-dialog { width: 95%; max-height: 85vh; } .pdf-help-header { padding: 16px 20px 12px; } .pdf-help-body { padding: 16px 20px; } } .pdf-content-area { overflow: auto; padding: 10px; width: 100%; height: 100%; box-sizing: border-box; -webkit-overflow-scrolling: touch; /* ★ 手机端：跟手惯性滚动（iOS/Safari 必需） */ overscroll-behavior: contain; /* ★ 手机端：不会跟 body 橡皮筋滚动抢手势，减少延迟感 */ /* ★ 删除 transform:translateZ(0)：滚动容器本身不应该升合成层。 * 之前误加会导致它和内容 wrapper 成为兄弟合成层，手机端每滚一帧都要重混合多个相交合成层。 * 合成层提升只给真正用 transform 缩放/平移的子元素（.pdf-content-wrapper）。 */ } /* 通用 wrapper：flex 列布局 + padding/box-sizing */ .pdf-content-wrapper { display: flex; flex-direction: column; margin: 0 auto; padding: 15px; box-sizing: border-box; /* ★ 显式声明背景附着模式：背景相对元素自身固定，随元素在滚动容器里一起位移 * （避免手机端 WebKit 在多层 SVG+gradient 背景时默认值被"惯性滚动合成层优化"改偏） */ background-attachment: scroll; /* ★ 独立合成层：缩放/平移直接操作 GPU 纹理，不重栅格化（手机端 -80% 滚动重绘开销） * backface-visibility:hidden 已足够触发独立合成层； * 删除 will-change:transform——该属性会长期预留 GPU 显存，长内容 wrapper 会占数百 KB~几 MB 不释放， * 低端手机滚动几帧触发显存回收时会产生明显卡顿。 */ backface-visibility: hidden; -webkit-backface-visibility: hidden; /* ★ 隔离重绘/重排范围：砍掉昂贵的 layout 隔离（wrapper 本身是独立定宽上下文，不需要）， * 仅保留 paint + style（ paint 阻止子元素重绘溢出到外部，style 阻止计数器等继承扩散） */ contain: paint style; } /* 仅编辑区 wrapper：让内容撑开容器（fit-content 与预览区 flex 布局冲突，单独限定） */ .pdf-content-area .pdf-content-wrapper { /* ★ 让内容撑开容器（横排下 inline style 固定宽度优先） */ width: fit-content; min-width: auto; } /* 预览区 wrapper：由 inline style 写固定宽高，不受 fit-content 影响 */ .pdf-preview-page .pdf-content-wrapper { width: auto; min-width: auto; } /* ============================================================ 预览缩放系统：shim 占位 + transform scale 原理：shim 参与文档流（尺寸=物理×scale），内容层绝对定位+transform 分页/gap/滚动条按 shim 尺寸算 → 零空白；内容物理尺寸不变 → 分页正确 ============================================================ */ /* shim 占位层：relative + margin auto 居中，尺寸由 JS 写 inline */ .pdf-page-shim { position: relative; margin: 0 auto 20px; flex-shrink: 0; /* 预览区 flex 子项不被压缩 */ } /* 编辑区：.pdf-content-wrapper 是缩放层（绝对定位，物理尺寸由 applySizeToAll 写 inline） */ .pdf-content-area .pdf-page-shim > .pdf-content-wrapper { position: absolute; top: 0; left: 0; margin: 0; /* 覆盖原 margin:0 auto，absolute 下 auto 无效 */ transform-origin: top left; transform: scale(var(--preview-scale, 1)); } /* ============================================================ ★ P0 优化：scale=1 原生渲染路径（打开工作台默认 90% 场景命中）原理：previewScale === 1 时，transform:scale(1) 是单位变换， absolute 浮层 + 独立合成层 + 595px GPU 纹理全是纯额外开销。此状态下让 wrapper 回归 static 定位，渲染路径与详情页 .inside-article 完全一致 → 流畅度对齐。 ============================================================ */ /* 编辑区 wrapper：scale=1 时切回原生文档流 */ .pdf-content-area.wb-scale-1 .pdf-page-shim { /* ★ 高度：JS 清空 inline height → auto，靠 static wrapper 的内容撑开（shim 高度=内容高度） * 宽度：JS 会写正确的 inline width（= wrapper 物理宽），此处不再 !important 覆盖。 * （之前写 width:auto !important 导致横排 A4 wrapper 溢出 shim，背景 tile 被裁、观感"不滑动"） */ height: auto !important; } .pdf-content-area.wb-scale-1 .pdf-page-shim > .pdf-content-wrapper { position: static !important; /* 回归文档流，取消 absolute 浮层坐标映射 */ transform: none !important; /* 移除 transform，取消强制独立合成层路径 */ backface-visibility: visible !important; /* 取消独立合成层，不占 GPU 纹理 */ -webkit-backface-visibility: visible !important; margin: 0 auto !important; /* 恢复基础样式居中 */ top: auto; left: auto; /* ★ 手机端 Bug 修复：撤掉 contain:paint。 * iOS/Safari 上 -webkit-overflow-scrolling:touch + contain:paint 的组合会导致 * 非独立合成层子元素的背景错误地粘在视口坐标系（类似 background-attachment:fixed）， * 用户看到"背景不随滚动滑动"。scale=1 时 wrapper 在文档流内无溢出，不需要 paint 隔离。 */ contain: none !important; } /* 预览区：.pdf-preview-page 是缩放层（绝对定位，物理尺寸由 buildPreviewPages 写 inline） */ #pdf-preview-pages .pdf-page-shim > .pdf-preview-page { position: absolute; top: 0; left: 0; transform-origin: top left; transform: scale(var(--preview-scale, 1)); /* ★ 同步编辑区 wrapper：独立合成层 + contain，避免预览弹窗打开时的滚动卡顿 * （砍掉 layout 隔离，理由同上） */ backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint style; } /* 预览页头部：缩放条已迁移至右下角浮动控件 */ /* ============================================================ PDF 工作台：沙盒（导出用，永远不可见） ============================================================ */ /* 作用域：#pdf-sandbox（导出渲染专用沙盒，离屏存放待导出 DOM） * 作用方向：布局（离屏 fixed left:-9999px / z-index:-9999 / overflow:hidden） * 特殊处理：导出时由 JS 克隆内容到此沙盒渲染，永不向用户显示；调试时可手动改 left 可见 */ /* 调试模式 - 让沙盒可见 */ #pdf-sandbox { position: fixed; left: -9999px; top: 0; height: auto; overflow: hidden; z-index: -9999; pointer-events: none; background: #fff; } /* ============================================================ PDF 工作台：A4 预览弹窗 ============================================================ */ /* 作用域：#pdf-preview / .pdf-preview-header / .preview-action-btn / .pdf-preview-pages * 作用方向：布局（全屏 fixed 覆盖/居中分页）+ 颜色（预览头暗底/确认导出绿/关闭红）+ 显隐（.is-active） */ #pdf-preview { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.97); z-index: 998; display: none; flex-direction: column; align-items: center; justify-content: center; } #pdf-preview::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.6) 0%, transparent 70%); pointer-events: none; } #pdf-preview.is-active { display: flex; } .pdf-preview-header { position: fixed; top: 0; left: 0; right: 0; padding: 8px 10px; background: #1e293b; display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; z-index: 100; /* ★ 性能降级：box-shadow 模糊半径 20px → 8px（预览台 fixed 顶栏，滚动预览页时常驻） */ box-shadow: 0 3px 8px rgba(0, 0, 0, 0.28); } .preview-action-btn { padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap; flex-shrink: 0; } .btn-confirm-export { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .btn-close-preview { background: #ef4444; color: #fff; } .pdf-preview-pages { flex: 1; overflow-y: auto; padding: 110px 20px 40px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; content-visibility: auto; } /* ============================================================ PDF 工作台：控制按钮行与通用按钮 ============================================================ */ /* 作用域：.toolbar-main-row / .menu-main-item / .primary-download-btn（工作台主控制行） * 作用方向：布局（弹性换行/留白）+ 颜色（暗底玻璃按钮/激活渐变）+ 动画（hover 过渡） */ .toolbar-main-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px; max-width: 100%; } .menu-main-item { background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); color: var(--poetry-text-primary, #eee); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 10px; /* ★ transition: all → 显式：hover/active 只有 bg/border/color 变化 */ transition: background-color 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; font-family: inherit; } .menu-main-item.active { background: linear-gradient(135deg, #8b5cf6, #6366f1); border-color: transparent; color: #fff; } .menu-main-item:hover { background: rgba(0, 0, 0, 0.08); } .primary-download-btn { background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; border: none; padding: 6px 20px; border-radius: 6px; cursor: pointer; font-size: 10px; font-weight: 500; /* ★ transition: all → 显式：hover 只有渐变背景色/文字色变化 */ transition: background-color 0.2s, color 0.2s; white-space: nowrap; font-family: inherit; } .primary-download-btn:hover { background: linear-gradient(135deg, #7c3aed, #4f46e5); } /* ============================================================ PDF 工作台：控制模块（下拉菜单） ============================================================ */ /* 作用域：.control-module / .control-btn / .content-sub-list / .sub-btn（工作台覆盖） * （工作台下拉开关 + 列表项，含内嵌 gswitch） * 作用方向：布局（绝对定位浮层/.open 展开）+ 颜色（暗底玻璃/激活紫）+ 动画（max-height 过渡） * 隔离机制：通过 .pdf-toolbar-top 父级选择器覆盖详情页同名基础规则，避免冲突 */ /* 工作台控制模块：父级 .pdf-toolbar-top 限定，覆盖详情页 .control-module 基础样式 */ .pdf-toolbar-top .control-module { align-items: stretch; flex: 1 1 auto; min-width: 60px; padding: 0; border-right: none; } /* 工作台一级按钮：父级 .pdf-toolbar-top 限定，覆盖详情页 .control-btn 基础样式 */ .pdf-toolbar-top .control-btn { padding: 6px 12px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 6px; color: var(--poetry-text-primary, #e2e8f0); height: auto; } .pdf-toolbar-top .control-btn:hover { background: rgba(0, 0, 0, 0.08); border-color: rgba(0, 0, 0, 0.1); } .pdf-toolbar-top .control-btn .control-arrow { font-size: 8px; transition: transform 0.25s; margin-left: 2px; } .pdf-toolbar-top .control-btn .control-arrow.open { transform: rotate(180deg); } .pdf-toolbar-top .control-btn.pdf-bg-btn { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2)); border-color: rgba(139, 92, 246, 0.3); } .pdf-toolbar-top .control-btn.pdf-bg-btn:hover { background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(99, 102, 241, 0.3)); } /* 工作台子选项列表：父级 .pdf-toolbar-top 限定，覆盖详情页 .content-sub-list 基础样式 */ .pdf-toolbar-top .content-sub-list { top: calc(100% + 4px); background: var(--poetry-control-bar, rgba(30, 34, 50, 0.98)); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; z-index: 99999; /* ★ 性能降级：box-shadow 模糊半径 30px → 12px（工具栏下拉面板打开时，内容区仍可滚动） */ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.22); display: none; flex-direction: unset; gap: 5px; max-height: none; opacity: 1; white-space: nowrap; } /* 工作台下拉列表：纯 .open 类控制 */ .pdf-toolbar-top .control-module.open .content-sub-list { opacity: 1; padding: 6px; pointer-events: auto; overflow: visible; display: flex; flex-direction: column; } /* 工作台菜单项：父级 .pdf-toolbar-top 限定，覆盖详情页 .sub-btn 基础样式 */ .pdf-toolbar-top .content-sub-list .sub-btn { display: flex; width: 100%; padding: 6px 14px; background: none; text-align: left; font-size: 10px; font-weight: normal; color: var(--poetry-text-secondary, #c8d0dc); /* ★ transition: all → 显式：hover/active 只有 bg/color 变化 */ transition: background-color 0.15s, color 0.15s; border-radius: 0; align-items: center; justify-content: space-between; gap: 10px; } .pdf-toolbar-top .content-sub-list .sub-btn:hover { background: rgba(0, 0, 0, 0.06); color: var(--poetry-text-primary, #fff); } .pdf-toolbar-top .content-sub-list .sub-btn.active { background: rgba(139, 92, 246, 0.2); color: #a78bfa; } .pdf-toolbar-top .content-sub-list .sub-btn.active .gswitch { background: rgba(139, 92, 246, 0.6); } .pdf-toolbar-top .content-sub-list .sub-btn.active .gswitch::after { transform: translateX(16px); } .pdf-toolbar-top .content-sub-list .sub-btn .gswitch { width: 32px; height: 18px; border-radius: 10px; background: rgba(255, 255, 255, 0.15); position: relative; transition: background 0.2s; flex-shrink: 0; } .pdf-toolbar-top .content-sub-list .sub-btn .gswitch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .pdf-toolbar-top .content-sub-list .sub-btn.primary { color: #a78bfa; font-weight: 600; } .pdf-toolbar-top .content-sub-list .sub-btn.primary:hover { background: rgba(139, 92, 246, 0.2); } /* 排版设置面板（尺寸 + 方向 + 字号三段式） ★ 覆盖 .content-sub-list 基础样式的冲突属性 * 注意：display 由 .control-module.open 控制，此处不覆盖 */ /* 作用域：.pdf-layout-panel / .pdf-size-grid / .pdf-custom-row / .pdf-btn-group / .pdf-seg-btn * （工作台排版设置：纸张尺寸/方向/字号分段按钮） * 作用方向：布局（网格/分段/自定义输入行）+ 颜色（暗底/激活紫）+ 交互（自定义尺寸应用） */ .pdf-toolbar-top .content-sub-list.pdf-layout-panel { flex-direction: column !important; gap: 0 !important; min-width: 290px; /* ★ 保证输入框有合理宽度，避免被压缩到几乎不可见 */ width: max-content; max-width: calc(100vw - 16px); padding: 8px 10px !important; overflow-x: auto !important; overflow-y: visible !important; opacity: 1 !important; white-space: normal !important; left: 0; } .pdf-layout-section { padding: 6px 0; } .pdf-layout-section + .pdf-layout-section { border-top: 1px solid rgba(0, 0, 0, 0.06); margin-top: 4px; padding-top: 8px; } .pdf-layout-section-title { font-size: 11px; font-weight: 600; color: var(--ui-accent, #a78bfa); margin-bottom: 6px; } .pdf-layout-desc { font-size: 10px; color: var(--poetry-text-secondary, #888); margin-bottom: 6px; } /* 尺寸两列网格 */ .pdf-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; } .pdf-size-col { display: flex; flex-direction: column; gap: 2px; } .pdf-size-col-head { font-size: 10px; color: var(--poetry-text-secondary, #666); text-align: center; padding: 2px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); margin-bottom: 2px; } .pdf-toolbar-top .pdf-size-col .sub-btn { padding: 5px 8px; font-size: 11px; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.2; } .pdf-size-name { color: var(--poetry-text-primary, #c8d0dc); } .pdf-size-desc { font-size: 9px; color: var(--poetry-text-secondary, #666); } .pdf-toolbar-top .content-sub-list .sub-btn.preset-option.active { background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-glass-bg)) !important; box-shadow: inset 0 1px 0 var(--ui-glass-hilight), inset 0 -1px 0 rgba(0, 0, 0, 0.10), var(--ui-shadow-md) !important; } .pdf-toolbar-top .content-sub-list .sub-btn.preset-option.active .pdf-size-name { color: #a78bfa; } #pdf-export-list{ right: 0; } /* 自定义尺寸行 */ .pdf-custom-row { display: flex; align-items: center; gap: 4px; padding: 6px 0 0; margin-top: 4px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .pdf-custom-label { font-size: 10px; color: var(--poetry-text-secondary, #888); white-space: nowrap; } .pdf-custom-input { width: 48px; padding: 2px 4px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; color: var(--poetry-text-primary, #fff); font-size: 11px; } .pdf-custom-x { color: var(--poetry-text-secondary, #666); font-size: 10px; } .pdf-custom-apply { padding: 3px 10px; background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; border-radius: 3px; color: #fff; cursor: pointer; font-size: 10px; margin-left: auto; } /* 页头定制输入行 */ .pdf-header-input-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .pdf-header-input { flex: 1; min-width: 180px; /* ★ 保证输入框有足够输入宽度 */ width: 190px; /* ★ 在 max-content 父容器中固定目标宽度 */ height: 26px; padding: 0 8px; background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 4px; color: var(--poetry-text-primary, #c8d0dc); font-size: 12px; line-height: 24px; font-family: inherit; outline: none; box-sizing: border-box; transition: border-color 0.15s, background 0.15s; } .pdf-header-input:focus { border-color: var(--ui-accent, #8b5cf6); background: rgba(139, 92, 246, 0.08); box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15); } .pdf-header-input::placeholder { color: var(--poetry-text-secondary, #666); font-size: 10px; } #pdf-header-apply-btn { height: 26px; padding: 0 10px; background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 11px; line-height: 26px; font-family: inherit; white-space: nowrap; box-sizing: border-box; transition: transform 0.1s, box-shadow 0.15s; } #pdf-header-apply-btn:hover { box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4); transform: translateY(-1px); } #pdf-header-apply-btn:active { transform: translateY(0); } /* 分段按钮组（方向 / 字号） */ .pdf-btn-group { display: flex; /* ★ 简约改造：Notion/Figma 标准 Segmented Control 外层胶囊（整个分段控件共用一个 pill 底色） * padding:2px 让内部"选中项白底浮起"的效果有 2px 空间；gap:0 消除按钮间的缝隙，保证视觉连续 * radius:8px，外层比内层 seg-btn（6px）大 2px → 经典"嵌在胶囊里"的分段控件观感 */ gap: 0; padding: 2px; background: rgba(15, 23, 42, 0.05); border-radius: 8px; } .pdf-seg-btn { flex: 1; padding: 5px 8px; /* ★ 简约改造：去掉独立背景和边框 → 变成"嵌在胶囊里"的样式（选中时才白底浮起） */ background: transparent; border: none; border-radius: 6px; color: var(--poetry-text-secondary, #94a3b8); cursor: pointer; font-size: 12px; font-weight: 500; font-family: inherit; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; text-align: center; white-space: nowrap; } .pdf-seg-btn:hover { /* ★ hover 只加半透明浅灰（不改变边框/色值结构，稳定不闪） */ background: rgba(15, 23, 42, 0.04); color: var(--poetry-text-primary, #475569); } .pdf-seg-btn.active { /* ★ 选中态：白底 + 极淡阴影 → 视觉上"浮"在胶囊上方（Notion/Figma 通用语言） * 不用紫色强强调，只用高对比中性色 + 轻微阴影 → 简约高级 */ background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.04); color: #0f172a; font-weight: 600; } /* 缩放面板已迁移至右下角浮动控件 */ /* ============================================================ PDF 工作台：控制按钮字号覆盖 ============================================================ */ /* 作用域：.pdf-app 内 .menu-main-item / .primary-download-btn / .preview-action-btn * 作用方向：字号（强制 16px 不受字号档位缩放）+ 字体（绑定 --font-family-button） */ .pdf-app .menu-main-item, .pdf-app .primary-download-btn, .pdf-app .preview-action-btn { font-size: 16px; font-family: var(--font-family-button); } /* ★ 预览页面容器：防止被压缩 */ .pdf-preview-page { flex-shrink: 0; /* ★ 预览页内部如果包含 theme-* wrapper，也继承 contain 策略，限制重绘范围 */ contain: layout paint style; } /* 💡 核心对齐补丁：工作台切竖排时，外层 .pdf-content-area 直接挂 .is-vertical，把滚动条和视口一秒拽到最右端（不依赖 :has() 父查询选择器，避免滚动期间样式树重匹配开销） */ .pdf-content-area.is-vertical { direction: rtl; /* 🎯 只在竖排工作台下，把滚动条和视口一秒拽到最右端 */ flex: 1; display: flex; flex-direction: row; align-items: stretch; } /* ============================================================ PDF 工作台：页眉页脚（工作台 + 沙盒共用） ============================================================ */ /* 作用域：.pdf-header / .pdf-footer / .pdf-content-wrapper.vertical-mode（工作台 + 导出沙盒共用） * 作用方向：布局（横排页眉顶/页脚底、竖排 writing-mode）+ 字号 + 颜色（灰字） */ .pdf-header { text-align: center; font-size: 14px; color: #475569; flex-shrink: 0; margin-bottom: 5px; font-family: var(--cf-poem, var(--font-family-body, inherit)); } .pdf-footer { text-align: center; font-size: 12px; flex-shrink: 0; margin-top: auto; font-family: var(--cf-poem, var(--font-family-body, inherit)); } .pdf-content-wrapper.vertical-mode { display: flex; flex-direction: row; align-items: stretch; flex: 1; } /* 3. 页眉：右侧 */ .pdf-content-wrapper.vertical-mode .pdf-header { writing-mode: vertical-rl; text-orientation: upright; border-bottom: none; display: flex; align-items: center; justify-content: center; position: relative; height: auto; margin-left: 5px; } /* 5. 页脚：左侧 */ .pdf-content-wrapper.vertical-mode .pdf-footer { writing-mode: vertical-rl; text-orientation: upright; border-top: none; display: flex; align-items: center; justify-content: center; position: relative; height: auto; margin-right: auto; } /* ============================================================ PDF 工作台：默认背景 + 背景弹窗 ============================================================ */ /* 作用域：.pdf-content-wrapper + .theme-*（工作台画布底色，5 主题 + 5 SVG 背景） * 作用方向：颜色（主题底色 background-color / SVG 背景图 background-image） * 隔离机制：.theme-* 挂在 .pdf-content-wrapper 上，仅作用于工作台画布，不影响详情页 body */ /* 通用 wrapper 底色：每个主题独立声明 solid background-color，此处不做全局半透明叠加 * （半透明 alpha blend 每像素多一次混合计算，滚动时填充率压力翻倍） */ /* 梦幻极光（SVG 图案 + 3 层 CSS 散点平铺 + 1 层渐变底色） * 性能：SVG 用 400px tile（每屏 tile ≤ 3 个，栅格化次数极少），且已去掉所有滤镜； * CSS 平铺层 3 层（tile 180~220px，每屏 < 20 个），色标 2 段/层 */ .pdf-content-wrapper.theme-default { background-color: #e6e4f0; background-image: url('../themes/default.svg'), /* 400px tile，SVG 极光波纹+星 */ radial-gradient(circle at 70% 15%, #ffffff 1px, transparent 1.6px), /* 200px tile，右上散 */ radial-gradient(circle at 45% 65%, #ffffff 1.2px, transparent 1.9px), /* 180px tile，中散 */ radial-gradient(circle at 10% 90%, #ffffff 1.1px, transparent 1.7px), /* 220px tile，左下散 */ linear-gradient(135deg, #ede9f5 0%, #e0e8f5 35%, #f0e8f0 65%, #e8eef5 100%); background-size: 400px 400px, 200px 200px, 180px 180px, 220px 220px, 100% 100%; background-repeat: repeat, repeat, repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } /* 古典主题：米色纸底 */ .pdf-content-wrapper.theme-gudian { background-color: rgba(245, 239, 228, 0.5); } /* 雅致主题：莫兰迪灰底 */ .pdf-content-wrapper.theme-yazhi { background-color: rgba(232, 228, 223, 0.5); } /* 现代主题：深色科技底 */ .pdf-content-wrapper.theme-xiandai { background-color: rgba(30, 41, 59, 0.5); } /* 墨韵主题：深色底 */ .pdf-content-wrapper.theme-dark { background-color: rgba(30, 20, 50, 0.5); } /* 云雾（SVG 图案 + 3 层 CSS 云雾平铺 + 1 层渐变底色） * 性能：SVG tile 400px（每屏 ≤ 3 次栅格化），CSS tile 300~380px，每屏 ≤ 8；无多段色标 */ .pdf-content-wrapper.theme-cloudy { background-color: #e0e4ea; background-image: url('../themes/cloudy.svg'), /* 400px tile，SVG 云雾核心图案 */ radial-gradient(ellipse 80px 26px at 75% 70%, rgba(148,163,184,0.08), transparent 70%), /* 380px tile，主云 */ radial-gradient(ellipse 60px 20px at 30% 40%, rgba(148,163,184,0.09), transparent 70%), /* 300px tile，次云 */ radial-gradient(circle at 80% 35%, rgba(255,255,255,0.45) 1px, transparent 1.5px), /* 190px tile，薄雾粒 */ linear-gradient(180deg, #e8edf2 0%, #dfe5ec 35%, #e4e8ed 70%, #ece8e0 100%); background-size: 400px 400px, 380px 380px, 300px 300px, 190px 190px, 100% 100%; background-repeat: repeat, repeat, repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } /* 麦浪（SVG 图案 + 1 层 CSS 麦浪线 + 2 层麦粒平铺 + 1 层渐变底色） * 性能：SVG tile 400px；CSS 线纹色标砍到 2 段，麦粒 tile ≥ 160px，合计平铺层 1+2=3 层 */ .pdf-content-wrapper.theme-wheat { background-color: #e8d8b8; background-image: url('../themes/wheat.svg'), /* 400px tile，SVG 麦秆麦穗核心图案 */ repeating-linear-gradient(180deg, transparent 0 148px, rgba(201,163,122,0.12) 148px 150px, transparent 150px 400px), /* 400px，主浪线（2 段色标） */ radial-gradient(circle at 40% 75%, rgba(138,90,40,0.14) 1.4px, transparent 2.1px), /* 160px tile，麦粒主散 */ radial-gradient(circle at 8% 88%, rgba(138,90,40,0.12) 1.1px, transparent 1.7px), /* 210px tile，麦粒次散 */ linear-gradient(180deg, #f5edd8 0%, #ecdcb8 35%, #e0c896 70%, #d4b87a 100%); background-size: 400px 400px, 400px 400px, 160px 160px, 210px 210px, 100% 100%; background-repeat: repeat, repeat, repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } /* 竹韵（SVG 图案 + 1 层 CSS 竹秆竖线 + 2 层竹叶散点 + 1 层渐变底色） * 性能：SVG tile 400px；CSS 竹秆色标砍到 2 段，tile ≥ 170px；砍原 4 个 tiny ellipse（<3px 抗锯齿开销） */ .pdf-content-wrapper.theme-bamboo { background-color: #b8d0aa; background-image: url('../themes/bamboo.svg'), /* 400px tile，SVG 竹叶/竹节核心图案 */ repeating-linear-gradient(90deg, transparent 0 188px, rgba(31,63,29,0.11) 188px 190px, transparent 190px 400px), /* 400px，竹秆竖线（2 段色标） */ radial-gradient(ellipse 3px 6px at 25% 55%, rgba(46,90,42,0.13), transparent 70%), /* 170px tile，主叶 */ radial-gradient(ellipse 2.8px 5.5px at 45% 82%, rgba(46,90,42,0.11), transparent 70%), /* 200px tile，次叶 */ linear-gradient(180deg, #e8f0e5 0%, #d0e0c8 35%, #b8d0aa 70%, #a0c090 100%); background-size: 400px 400px, 400px 400px, 170px 170px, 200px 200px, 100% 100%; background-repeat: repeat, repeat, repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } /* 晚霞（SVG 图案 + 太阳光晕 + 云霞/波纹平铺 + 1 层渐变底色） * 性能：SVG tile 400px；太阳光晕 no-repeat（1 次计算）；平铺层 2 层，repeating-linear 砍到 2 段色标 */ .pdf-content-wrapper.theme-sunset { background-color: #e68a6a; background-image: url('../themes/sunset.svg'), /* 400px tile，SVG 晚霞云纹核心图案 */ radial-gradient(ellipse 160px 90px at 50% 72%, rgba(255,212,163,0.35), transparent 72%), /* 400px no-repeat，太阳光晕（1 次计算） */ radial-gradient(ellipse 110px 60px at 78% 55%, rgba(217,122,106,0.18), transparent 70%), /* 380px repeat，云霞主斑 */ repeating-linear-gradient(180deg, transparent 0 178px, rgba(154,74,40,0.11) 178px 180px, transparent 180px 400px), /* 400px repeat，波纹（2 段色标） */ linear-gradient(180deg, #ffd4a3 0%, #ffb88c 35%, #ff9a76 70%, #d97a6a 100%); background-size: 400px 400px, 400px 400px, 380px 380px, 400px 400px, 100% 100%; background-repeat: repeat, no-repeat, repeat, repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0; } /* 墨韵（SVG 图案 + 3 层墨点平铺 + 中心亮+暗角双径向 no-repeat） * 性能：SVG tile 400px；CSS 墨点 tile ≥ 150px，中心/暗角全是 100% no-repeat（只算 1 次） */ .pdf-content-wrapper.theme-ink { background-color: #e8e1d8; background-image: url('../themes/ink.svg'), /* 400px tile，SVG 墨迹核心图案 */ radial-gradient(circle at 35% 55%, rgba(26,20,8,0.10) 1.4px, transparent 2.1px), /* 160px tile，墨点主散 */ radial-gradient(circle at 22% 80%, rgba(26,20,8,0.09) 1.1px, transparent 1.7px), /* 200px tile，墨点次散 */ radial-gradient(circle at 70% 88%, rgba(26,20,8,0.085) 1.3px, transparent 2.0px), /* 150px tile，墨点第三散 */ radial-gradient(circle at 50% 40%, #f5f0e8 0%, transparent 70%), radial-gradient(circle at 50% 40%, transparent 55%, rgba(180,170,155,0.14) 100%); background-size: 400px 400px, 160px 160px, 200px 200px, 150px 150px, 100% 100%, 100% 100%; background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; } /* ============================================================ PDF 工作台：全局状态（z-index 切换） ============================================================ */ /* 作用域： / * 作用方向：层级切换（z-index 沉底实现详情页/工作台/预览台互斥显隐） * 隔离边界：workbench-open 时详情页 .site-content 沉底；preview-open 时工作台 #pdf-workbench 沉底 */ /* ★ 工作台打开时，详情页 .site-content 沉底 + 真正从合成层移除（visibility 不占布局但从 GPU 纹理剔除） */ body.workbench-open .site-content { z-index: -1; visibility: hidden; /* ★ GPU 不再为 .site-content 下所有子元素维护合成层（手机端 -30%~50% 显存占用） */ pointer-events: none; /* ★ 防止透点事件穿透到详情页 */ } /* ★ 工作台/预览台打开时，隐藏详情页悬浮操作胶囊（z-index:9998 高于工作台 995，会透出来） */ body.workbench-open .action-float-pill, body.preview-open .action-float-pill { display: none !important; } /* ★ 预览台打开时，工作台沉底 */ body.preview-open #pdf-workbench { z-index: -1; } /* 断点统一到 820px，与 global.css 移动端断点一致 */ @media (max-width: 820px) { /* ★ 移动端控制栏固定在视口顶部桌面端靠 flex 布局（content-area 固定高度 + site-main 内部滚动）让控制栏保持在顶部移动端 content-area 改为 height:auto + overflow:visible，flex 约束失效，页面改为 body 滚动此时控制栏需要 position:sticky 才能固定，否则会随页面一起向上滚走 sticky 生效条件：父元素 overflow 不能是 hidden（移动端 content-area 已是 visible ✓）注意：padding-left:45px 在 global.css 中已设给 .poetry-control-bar（内层），此处不在 wrapper 重复设置 */ .poetry-control-bar-wrapper { position: sticky; top: 0; z-index: 103; /* 确保不透明，防止内容透过控制栏 */ background: var(--poetry-control-bar, rgba(255, 255, 255, 0.95)); background: var(--poetry-control-bar, rgba(255, 255, 255, 0.97)); margin-right: 3px; border-radius: 8px; } /* ============================================================ * ★ P2 性能优化：移动端 PDF 工作台移除独立合成层路径 * 桌面端：backface-visibility:hidden → 升为独立合成层，transform 操作不重栅格化 * 移动端：低端GPU纹理带宽有限，每页 2-5MB × 6页 = 12-30MB 常驻， * 拖动时合成线程每帧要重混合多张大纹理 → 帧率掉到 20-35fps。 * 策略：移动端全部切回原生文档流 + contain:paint style 减到仅 paint， * scale 不是 1 时仍保留 transform（视觉必须正确），但不再强制独立合成层。 * ============================================================ */ /* 1) 编辑区 .pdf-content-wrapper：移除 backface-visibility（不升独立合成层）同时删掉 contain: paint style —— contain:paint 在移动端会让父级 wrapper 与子字节点生成两次离屏缓冲，滚动时保守整层重栅格化 */ .pdf-content-wrapper { backface-visibility: visible !important; -webkit-backface-visibility: visible !important; contain: none !important; } /* 2) 预览弹窗 A4 页容器 .pdf-preview-page：移除 contain:layout paint style 去掉 layout 避免定宽上下文重校验，保留 none 让滚动复用 paint cache */ .pdf-preview-page { contain: none !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; } /* 3) 预览弹窗中 wrapper 的绝对定位层（#pdf-preview-pages .pdf-page-shim > .pdf-preview-page）升独立合成层的两个条件：backface-visibility:hidden 都撤掉。 scale!=1 时仍有 transform，但由浏览器决定是否合成，不再强制 */ #pdf-preview-pages .pdf-page-shim > .pdf-preview-page { backface-visibility: visible !important; -webkit-backface-visibility: visible !important; contain: none !important; } /* 4) 即使预览区走了 transform scale，也让 wrapper 的 paint 缓存可复用 content-visibility:auto + contain-intrinsic-size 提示浏览器按 shim 尺寸懒渲染（用户看不到的页不栅格化，滚到才栅格） */ #pdf-preview-pages .pdf-preview-page { content-visibility: auto; contain-intrinsic-size: 0 0; /* 由 inline style 设定真实宽高，这里只占位提示 */ } /* 5) 默认移动端锁死 100% 缩放 → 走 wb-scale-1 原生文档流路径 .wb-scale-1 原本写了 position/static/transform:none/backface visible 这是最流畅的路径。右下角缩放 FAB 悬浮按钮在此断点下视觉"灰置"提示（不禁用，只是提示仅用于"预览/导出"时临时使用，日常编辑建议保持 100%） */ .pdf-zoom-fab-popup { opacity: 0.7; } } /* ============================================================ VIP 功能门控样式 ============================================================ */ /* 模块级 VIP 标签（显示在一级按钮上） */ .vip-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10px; font-weight: 600; color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); border-radius: 8px; vertical-align: middle; letter-spacing: 0.5px; box-shadow: 0 1px 3px rgba(217, 119, 6, 0.3); } /* 功能级锁定标记（显示在二级面板标签旁） */ .vip-lock-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 1px 5px; border-radius: 4px; margin-left: 4px; color: var(--ui-accent, #7c4dff); background: color-mix(in srgb, var(--ui-accent, #7c4dff) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ui-accent, #7c4dff) 28%, transparent); vertical-align: middle; line-height: 1.3; } /* 锁定区域视觉降级 */ .vip-locked-section { position: relative; opacity: 0.75; transition: opacity 0.2s; } .vip-locked-section:hover { opacity: 1; } /* 锁定按钮样式 */ .vip-locked { position: relative; } .vip-locked::after { content: '🔒'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.7; } /* VIP 解锁弹窗 */ .vip-lock-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; } .vip-lock-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); animation: vipFadeIn 0.2s ease; } .vip-lock-dialog { position: relative; width: 340px; padding: 32px 28px 24px; background: #fff; border-radius: 20px; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); /* ★ P11: 64px → 32px 降级 */ animation: vipPopIn 0.25s ease; } .vip-lock-icon { width: 56px; height: 56px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; background: linear-gradient(135deg, #fef3c7, #fde68a); border-radius: 50%; } .vip-lock-title { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 8px; } .vip-lock-feature { font-size: 14px; color: #6b7280; margin-bottom: 6px; } .vip-lock-desc { font-size: 13px; color: #9ca3af; margin-bottom: 24px; line-height: 1.6; } .vip-lock-actions { display: flex; gap: 10px; } .vip-lock-btn { flex: 1; padding: 10px 16px; border-radius: 10px; border: none; font-size: 14px; font-weight: 600; cursor: pointer; transition: color 0.15s, background-color 0.15s; } .vip-lock-btn--cancel { background: #f3f4f6; color: #6b7280; } .vip-lock-btn--cancel:hover { background: #e5e7eb; color: #374151; } .vip-lock-btn--primary { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35); } .vip-lock-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 119, 6, 0.45); } @keyframes vipFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes vipPopIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ============================================================ 浮动缩放控件：右下角 FAB + 弹出菜单 ============================================================ */ .pdf-floating-zoom { position: fixed; right: 24px; bottom: 32px; z-index: 9999; } .pdf-zoom-fab { display: flex; align-items: center; gap: 6px; padding: 8px 14px 8px 12px; /* ★ 简约改造：Notion/Figma 悬浮控件语言 * - 去紫色渐变，改为"半透明近白 + 1px 极淡边框"（和工具栏 btn-ui-1 一致的实色基调） * - 圆角统一 999px 纯胶囊，is-open 时不切异形角，视觉一致稳定 */ background: rgba(255, 255, 255, 0.96); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-family-button, inherit); cursor: pointer; /* ★ 阴影只留 4px 模糊 10% 透明度（大阴影→厚重；小阴影→精致） */ box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; user-select: none; } .pdf-zoom-fab:hover { /* ★ hover 只抬 1px + 阴影略深，不再 transform: translateY(-2px) 大跳 */ transform: translateY(-1px); background: #ffffff; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); } .pdf-zoom-fab:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } .pdf-zoom-fab.is-open { /* ★ 保持胶囊圆角一致（不切 4px 异形底部）；背景加深一点表示"已激活" */ background: #ffffff; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); } .pdf-zoom-fab-icon { /* ★ 放大镜图标稍微缩小 + 去 emoji 色彩感，变深灰中性色 */ font-size: 13px; filter: grayscale(1) brightness(0.6); opacity: 0.85; } .pdf-zoom-fab-label { font-variant-numeric: tabular-nums; min-width: 38px; text-align: center; letter-spacing: 0.01em; } /* 弹出菜单 */ .pdf-zoom-popup { position: absolute; right: 0; bottom: 56px; width: max-content; min-width: 132px; padding: 10px 8px 0; /* ★ 简约改造：背景与 FAB 一致的近白 + 1px 淡边框 * 去掉异形底部圆角（之前 14px 14px 4px 4px → 统一 16px 大圆角），避免与 FAB 胶囊风格割裂 */ background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(15, 23, 42, 0.06); border-radius: 16px; /* ★ 阴影柔和：4px blur 10% alpha（不压视觉重心） */ box-shadow: 0 4px 14px rgba(15, 23, 42, 0.10); overflow: hidden; opacity: 0; transform: translateY(6px) scale(0.98); transform-origin: bottom right; pointer-events: none; transition: opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); -webkit-backdrop-filter: none; backdrop-filter: none; } .pdf-zoom-popup.is-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* 滚轮容器：iOS 风格 */ .pdf-zoom-wheel-wrap { position: relative; height: 128px; /* 4 × 32 可见区 */ overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 104px, transparent 128px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 104px, transparent 128px); border-radius: 10px; } /* 中心选择带 */ .pdf-zoom-band { position: absolute; left: 4px; right: 4px; top: 50%; transform: translateY(-50%); height: 32px; border-radius: 8px; /* ★ 简约改造：去掉 3 层叠加（渐变+内阴影+边框）→ 极浅灰底 + 上下 1px 细线分隔条 * 类似 Figma 滚轮选中区的"弱高亮"，不抢视觉 */ background: rgba(15, 23, 42, 0.03); border-top: 1px solid rgba(15, 23, 42, 0.05); border-bottom: 1px solid rgba(15, 23, 42, 0.05); box-shadow: none; pointer-events: none; z-index: 1; } /* 滚轮本体 */ .pdf-zoom-wheel { height: 100%; box-sizing: border-box; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 48px 0; /* (128-32)/2 令首/尾项可居中 */ -webkit-overflow-scrolling: touch; } .pdf-zoom-wheel::-webkit-scrollbar { display: none; } .pdf-zoom-wheel-item { height: 32px; line-height: 32px; text-align: center; scroll-snap-align: center; font-size: 14px; font-weight: 500; color: #94a3b8; cursor: pointer; user-select: none; /* ★ 简约改造：去掉 transform/scale/字号变化 → 只过渡 color 和 font-weight（不跳） */ transition: color 0.15s ease, font-weight 0.15s ease; white-space: nowrap; padding: 0 16px; min-width: 80px; font-variant-numeric: tabular-nums; } .pdf-zoom-wheel-item:hover { color: #475569; } .pdf-zoom-wheel-item.is-active { /* ★ 简约改造：不再 scale(1.15) 和变字号（不跳变）→ 仅加粗 + 中性深主色（#0f172a 近黑，有层级但不花哨） */ color: #0f172a; font-weight: 700; transform: none; font-size: 14px; } /* 预设按钮 */ .pdf-zoom-presets { display: flex; /* ★ 简约改造：沿用 pdf-btn-group 的"外层胶囊"统一语言，硬分割线改为外层 pill 包裹 */ margin: 10px -8px 0; padding: 6px; background: rgba(15, 23, 42, 0.04); border-top: none; border-radius: 12px; gap: 2px; } .pdf-zoom-preset { flex: 1; padding: 7px 8px; border: none; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 500; color: #475569; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background-color 0.12s ease, color 0.12s ease; } .pdf-zoom-preset + .pdf-zoom-preset { /* ★ 去掉硬边框分隔线 → 用外层胶囊背景做视觉区分 */ border-left: none; } .pdf-zoom-preset:hover { background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } .pdf-zoom-preset--auto { /* ★ 简约改造：主操作"自适应"不再紫色强调（太跳）→ 中性偏蓝灰主色 #334155，仅比普通选项重一点 * hover 时用"白底 + 极淡 1px 阴影"浮起，与 seg-btn 语言统一 */ color: #334155; font-weight: 600; } .pdf-zoom-preset--auto:hover { /* ★ hover 与其他 preset 一致，不再紫色渐变背景 */ background: #ffffff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06); } /* ============================================================ 悬浮操作胶囊（Notion 风格分段：左收藏 / 右赞赏，固定右下角） ============================================================ */ /* --- 外层胶囊：浅灰实底 + 大圆角，与 pdf-seg-btn / pdf-zoom-presets 统一语言 --- */ .action-float-pill { position: fixed; right: 24px; bottom: 32px; z-index: 9998; display: flex; align-items: stretch; padding: 4px; background: rgba(255, 255, 255, 0.96); border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 999px; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .action-float-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12); background: #ffffff; } /* --- 子按钮（收藏 / 赞赏通用） --- */ .action-pill-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 60px; padding: 6px 14px; background: transparent; border: none; border-radius: 999px; cursor: pointer; color: #64748b; font-family: inherit; transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .action-pill-btn:hover { background: rgba(15, 23, 42, 0.04); color: #0f172a; } .action-pill-btn:active { transform: scale(0.96); } /* --- 中间细线分隔（Notion 分段控件的 1px 分隔条） --- */ .pill-divider { width: 1px; margin: 8px 0; background: rgba(15, 23, 42, 0.07); align-self: stretch; } /* 子按钮统一的图标/文字 */ .pill-icon { font-size: 20px; line-height: 1; transition: color 0.18s ease, transform 0.3s ease; } .pill-label { font-size: 11px; line-height: 1; transition: color 0.18s ease; } /* --- 收藏按钮（左） --- */ .action-pill-favorite:hover .pill-icon { color: #ff6b35; } .action-pill-favorite:hover .pill-label { color: #ff6b35; } /* 已收藏状态：白底浮起 + 橘红主题（经典"已收藏"高亮） */ .action-pill-favorite.is-favorited { background: #ffffff; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.04); } .action-pill-favorite.is-favorited .pill-icon { color: #ff6b35; animation: favoritePop 0.4s ease; } .action-pill-favorite.is-favorited .pill-label { color: #ff6b35; font-weight: 600; } /* --- 赞赏按钮（右）：金色系主题 --- */ .action-pill-reward:hover .pill-icon { color: #d97706; } .action-pill-reward:hover .pill-label { color: #d97706; } /* 收藏"心跳"动画（仍给收藏图标用） */ @keyframes favoritePop { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.4) rotate(-8deg); } 60% { transform: scale(1.2) rotate(4deg); } 100% { transform: scale(1) rotate(0deg); } } /* ============================================================ 赞赏弹窗（居中模态：mask + dialog + header + Reward 组件） ============================================================ */ .reward-modal { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .reward-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; } /* 遮罩层：半透明黑 */ .reward-modal-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } /* 弹窗主体（圆角卡片，最大宽度不爆） */ .reward-modal-dialog { position: relative; width: min(480px, calc(100vw - 32px)); max-height: min(82vh, 720px); background: #ffffff; border-radius: 18px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.2); /* ★ P11: 48px → 20px 降级 */ overflow: hidden; display: flex; flex-direction: column; transform: translateY(10px) scale(0.98); transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .reward-modal.is-open .reward-modal-dialog { transform: translateY(0) scale(1); } /* 弹窗头 */ .reward-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid rgba(15, 23, 42, 0.06); flex-shrink: 0; } .reward-modal-title { font-size: 15px; font-weight: 600; color: #0f172a; } .reward-modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: rgba(15, 23, 42, 0.04); color: #475569; font-size: 20px; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; display: flex; align-items: center; justify-content: center; } .reward-modal-close:hover { background: rgba(15, 23, 42, 0.08); color: #0f172a; transform: scale(1.06); } .reward-modal-close:active { transform: scale(0.94); } /* 弹窗体：让 Reward 组件在里面可滚动（打赏记录多） */ .reward-modal-body { overflow-y: auto; padding: 6px 10px 16px; -webkit-overflow-scrolling: touch; } /* Reward 组件内部适配：Vue/Element UI 默认 800px+ 宽度，限定一下外层容器让它适配我们的 480px modal */ .reward-modal-body #rewardContainer { width: 100%; box-sizing: border-box; } /* Reward 组件内的 Element UI 弹层默认 z-index 2000+，我们的 modal z-index 10001，能覆盖 */ /* --- 模块未启用时的"赞赏功能暂未开启"优雅降级卡片 --- */ .reward-fallback { padding: 14px 16px 16px; text-align: center; } .reward-fallback-icon { font-size: 36px; margin-bottom: 8px; } .reward-fallback-title { font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 10px; } .reward-fallback-desc { font-size: 13px; color: #475569; margin: 0 0 12px; line-height: 1.6; } .reward-fallback-steps { text-align: left; padding: 12px 14px 12px 30px; margin: 0 0 14px; background: rgba(15, 23, 42, 0.03); border-radius: 10px; line-height: 1.8; font-size: 13px; color: #334155; } .reward-fallback-steps li { margin: 2px 0; } .reward-fallback-tip { padding: 10px 14px; background: linear-gradient(135deg, rgba(251, 146, 60, 0.08), rgba(217, 119, 6, 0.06)); border: 1px solid rgba(251, 146, 60, 0.12); color: #92400e; border-radius: 10px; font-size: 12.5px; line-height: 1.6; text-align: left; } /* Toast 提示样式 */ .favorite-toast { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9); padding: 12px 24px; background: rgba(31, 41, 55, 0.92); color: #fff; font-size: 14px; font-weight: 500; border-radius: 12px; z-index: 10000; opacity: 0; pointer-events: none; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ★ P11: 32px → 16px 降级 */ transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .favorite-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* 升级对话框样式 */ .favorite-upgrade-dialog { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; } .favorite-upgrade-dialog .upgrade-mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); } .favorite-upgrade-dialog .upgrade-content { position: relative; width: 90%; max-width: 360px; background: #fff; border-radius: 20px; padding: 32px 28px 24px; text-align: center; animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* ★ P11: 60px → 20px 降级 */ } .favorite-upgrade-dialog .upgrade-title { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 12px; } .favorite-upgrade-dialog .upgrade-desc { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 12px; } .favorite-upgrade-dialog .upgrade-tip { display: inline-block; font-size: 13px; color: #ff6b35; background: linear-gradient(135deg, rgba(255, 107, 53, 0.1), rgba(255, 140, 66, 0.1)); padding: 6px 14px; border-radius: 20px; margin-bottom: 24px; font-weight: 500; } .favorite-upgrade-dialog .upgrade-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .favorite-upgrade-dialog .upgrade-btn { flex: 1; max-width: 140px; padding: 12px 20px; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease; } .favorite-upgrade-dialog .cancel-btn { background: #f3f4f6; color: #6b7280; } .favorite-upgrade-dialog .cancel-btn:hover { background: #e5e7eb; } .favorite-upgrade-dialog .confirm-btn { background: linear-gradient(135deg, #ff6b35, #ff8c42); color: #fff; box-shadow: 0 4px 14px rgba(255, 107, 53, 0.3); } .favorite-upgrade-dialog .confirm-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); } .favorite-upgrade-dialog .upgrade-link-btn { background: transparent; color: #ff6b35; border: 1px solid rgba(255, 107, 53, 0.3); flex: 0 0 auto; max-width: none; padding: 12px 16px; } .favorite-upgrade-dialog .upgrade-link-btn:hover { background: rgba(255, 107, 53, 0.08); transform: translateY(-2px); } @media (max-width: 480px) { .favorite-upgrade-dialog .upgrade-actions { flex-direction: column; } .favorite-upgrade-dialog .upgrade-btn { max-width: 100%; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* 移动端适配 */ @media (max-width: 768px) { /* ★ 手机端：悬浮操作胶囊（收藏+赞赏）尺寸收紧，贴边更近，不占阅读空间 */ .action-float-pill { right: 12px; bottom: 16px; padding: 3px; } .action-pill-btn { min-width: 48px; padding: 5px 10px; } .pill-icon { font-size: 18px; } .pill-label { font-size: 10px; } /* ★ 手机端：赞赏弹窗左右更贴合，圆角略收 */ .reward-modal-dialog { width: calc(100vw - 20px); max-height: 86vh; border-radius: 16px; } .reward-modal-body { padding: 4px 6px 14px; } .favorite-upgrade-dialog .upgrade-content { margin: 0 16px; padding: 28px 20px 20px; } .favorite-upgrade-dialog .upgrade-actions { flex-direction: column; } .favorite-upgrade-dialog .upgrade-btn { max-width: none; } /* ★ 手机端：backface-visibility + contain 已足够；不强制 will-change 避免占用 GPU 显存（低端 GPU 内存 <512MB 机型每多一个合成层就多一分显存压力）。 */ .pdf-content-wrapper { will-change: auto; } /* ★ 工具栏高度下调，避免和内容 wrapper 合成层重叠时的重混合（不透明度边界更清晰） */ .pdf-toolbar-top { padding: 3px 8px 5px; } } /* ============================================================ P4 详情页动效：钤印 / 逐句显现 / 环境粒子（桌面限定）原则：所有动效仅在 JS 可用且未开启"减弱动态效果"时启用； JS 失效时内容完整可见（渐进增强）。 ============================================================ */ /* ---- 1) 头卡片钤印：朝代首字，印泥红 ---- */ .inside-article .poetry-header-card { position: relative; /* 印章定位锚点 */ } .ph-seal { position: absolute; top: 8px; right: 12px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-family: "KaiTi", "STKaiti", "SimSun", serif; font-size: 22px; line-height: 1; color: #9e2b25; border: 2px solid rgba(158, 43, 37, 0.8); border-radius: 5px; background: radial-gradient(circle at 30% 30%, rgba(158, 43, 37, 0.16), transparent 65%), rgba(158, 43, 37, 0.05); box-shadow: inset 0 0 8px rgba(158, 43, 37, 0.22), 0 2px 6px rgba(158, 43, 37, 0.12); opacity: 0; transform: scale(1.6) rotate(-8deg); pointer-events: none; user-select: none; z-index: 2; } /* 双框印面（内细线，仿真实印章刻边） */ .ph-seal::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(158, 43, 37, 0.45); border-radius: 3px; } /* 落章动画：JS 加 .is-stamped 后触发（微模糊下压 → 回弹定章） */ .ph-seal.is-stamped { animation: pdSealStamp 0.55s cubic-bezier(0.2, 1.4, 0.35, 1) 0.15s forwards; } @keyframes pdSealStamp { 0% { opacity: 0; transform: scale(1.6) rotate(-8deg); filter: blur(2px); } 55% { opacity: 1; transform: scale(0.92) rotate(2deg); filter: blur(0); } 75% { transform: scale(1.04) rotate(1deg); } 100% { opacity: 0.92; transform: scale(1) rotate(2deg); } } /* 减弱动态效果：印章直接显示为已钤状态 */ @media (prefers-reduced-motion: reduce) { .ph-seal { opacity: 0.92; transform: rotate(2deg); animation: none; } } /* 窄屏：印章收紧避免压标题 */ @media (max-width: 480px) { .ph-seal { top: 2px; right: 4px; width: 30px; height: 30px; font-size: 17px; } } /* ---- 2) 环境粒子画布：固定全屏，位于主题背景(-1)之上、内容(101)之下，透明容器可透出粒子，与页面融为一体 ---- */ .pd-particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 1.2s ease; } .pd-particles.is-on { opacity: 1; } /* 移动端强制不渲染（JS 侧同样用 matchMedia 限定） */ @media (max-width: 820px) { .pd-particles { display: none; } }