/**
* share_css_typora02 — Trilium 分享页 · Typora 默认浅色风格
* ──────────────────────────────────────────────────────────────
* 版本: 2026.06.06 (代码块样式优化 + figure.table 接线)
*
* ═══ 自定义指南 ═══
* 你只需修改下方 :root { } 中的变量值，即可改变整个页面的外观。
* 每个变量都有中文注释说明它的作用、接受的值、以及推荐范围。
* 修改后保存即可生效，无需重启服务。
*/
/* ══════════════════════════════════════════════════════════════
0. ★★★ 用户配置区 — 所有参数都在这 ★★★
══════════════════════════════════════════════════════════════ */
:root {
/* ════════════════════════════════════════════════════════════
一、颜色设置
所有颜色值支持: #hex / rgb(r,g,b) / rgba(r,g,b,a) / 颜色名
════════════════════════════════════════════════════════════ */
/* ── 1.1 背景色 (6个) ── */
--bg-page: #ffffff; /* 页面主体背景色 → 改成浅灰即变灰白 */
--bg-card: #f7f7f7; /* 侧栏/卡片/引用背景色 → 比主背景略深即可 */
--bg-elevated: #f0f0f0; /* 抬升面(表格头/平板) → 比 bg-card 略深 */
--bg-hover: #eaeaea; /* 鼠标悬停背景色 → 比 bg-elevated 略深 */
--bg-code: #f4f4f4; /* 代码块/行内代码背景 → 保持与正文有区分 */
--bg-stripe: #fafafa; /* 斑马纹/引用底色 → 很浅的灰 */
--bg-highlight: #e8eef5; /* 侧栏当前笔记高亮底色 → 浅蓝效果不错 */
--bg-card-item: #ffffff; /* 子笔记卡片背景色 → 通常纯白 */
/* ── 1.2 文字颜色 (9个) ── */
/* Typora 标准: 正文用极深黑 #1a1a1a, 二级用中灰, 弱化用浅灰 */
--text-main: #1a1a1a; /* ★ 正文/列表/表格主色 → 越深阅读越清晰 */
--text-secondary: #555555; /* 二级文字(H4/侧栏链接) → 不要低于 #444 */
--text-muted: #888888; /* 弱化(元信息/引用/H5/H6) → 太浅会看不清 */
--text-code: #c7254e; /* 行内代码文字色 → Typora 经典暗红 */
--text-quote: #666666; /* 引用块文字色 → 中灰即可 */
--text-link: #2f6f9f; /* 链接文字色 → 经典蓝 */
--text-link-hover:#1a4f7a; /* 链接悬停色 → 比链接略深 */
--text-white: #ffffff; /* 白色文字(暂未使用) → 保留 */
--text-sel: #000000; /* 选中状态文字色(配合 sel-bg) */
/* ── 1.3 打印专用文字色 (2个) ── */
--text-print: #333333; /* 打印时链接等文字色 → 深灰即可 */
--text-print-title:#1a1a1a; /* 打印时标题文字色 → 纯黑 */
/* ── 1.4 边框颜色 (5个) + 边框粗细 (2个) ── */
--border: #d4d4d4; /* ★ 主要边框色(表格外框/分割线) */
--border-light: #e0e0e0; /* ★ 轻边框(表格内线/卡片边线) */
--border-quote: #dddddd; /* 引用块左边框色 → 浅灰 */
--border-dash: #cccccc; /* include-note 虚线色 → 比实线浅 */
--border-hover: #bbbbbb; /* 悬停边框色(暂未使用) → 比默认深 */
--border-w: 1px; /* ★ 通用边框粗细 → 1px=细, 2px=明显 */
--border-w-md: 2px; /* ★ 菜单右边框粗细 → 同 border-w 或略粗 */
/* ── 1.5 阴影效果 (5个) ── */
--shadow-sm: 0 1px 4px rgba(0,0,0,0.05); /* 微小阴影 */
--shadow-md: 0 4px 16px rgba(0,0,0,0.06); /* 中等阴影 */
--shadow-card: 0 1px 3px rgba(0,0,0,0.04); /* 卡片默认阴影 */
--shadow-card-hover: 0 6px 16px rgba(0,0,0,0.08); /* 卡片悬停阴影 */
--shadow-menu: 5px 0 20px rgba(0,0,0,0.06); /* 菜单展开阴影 */
/* ── 1.6 文字选中色 (1个) ── */
--sel-bg: #b4d5fe; /* 鼠标拖选文字时的背景色 */
/* ════════════════════════════════════════════════════════════
二、字体和排版
════════════════════════════════════════════════════════════ */
/* ── 2.1 字体族 (2个) ── */
--font: -apple-system, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
/* 正文字体: 优先系统字体, 跨平台兼容 */
--font-mono: "SF Mono", "Fira Code", "Menlo", "Consolas", monospace;
/* 等宽字体: 用于代码块 */
/* ── 2.2 字号和行高 (5个) ── */
--body-fs: clamp(15px, 0.9vw + 12px, 17px);
/* ★ 正文字号: clamp(最小值, 首选值, 最大值) */
--body-lh: 1.65; /* ★ 正文字间距 → 1.5~1.8 适合阅读 */
--code-lh: 1.55; /* ★ 代码块行高 → 稍小于正文 */
--body-overflowx: hidden; /* 横向溢出: hidden 防止滚动, visible 允许 */
--body-antialias: antialiased; /* 字体平滑: antialiased / auto / subpixel-antialiased */
/* ════════════════════════════════════════════════════════════
三、圆角
════════════════════════════════════════════════════════════ */
--radius-sm: 3px; /* 小圆角: 代码/高亮/引用 */
--radius-md: 6px; /* 中圆角: 按钮 */
--radius-lg: 8px; /* 大圆角: 卡片 */
--radius-round: 99px; /* 完全圆形: 滚动条滑块 */
/* ════════════════════════════════════════════════════════════
四、排版控制 (布尔/开关类值)
════════════════════════════════════════════════════════════ */
--txt-transform: none; /* H5 大写: uppercase=全大写, none=正常 */
--txt-underline: underline; /* 下划线样式值 */
--txt-italic: italic; /* 斜体样式值 */
--tx-deco-none: none; /* 无装饰样式值 */
/* ════════════════════════════════════════════════════════════
五、侧栏 (左侧悬浮目录导航)
控制 "从左侧边缘滑出" 的目录树的尺寸和交互
════════════════════════════════════════════════════════════ */
/* ── 5.1 侧栏尺寸与定位 (10个) ── */
--menu-w: 480px; /* ★ 展开后总宽度 → 240~320 之间 */
--menu-collapsed: 20px; /* ★ 折叠后露出的触发窄条 → 默认18px够用 */
--menu-pos: fixed; /* 定位方式: fixed=悬浮, absolute=跟随滚动 */
--menu-top: 0; /* 距顶部距离 */
--menu-left: 0; /* 距左侧距离 */
--menu-z: 9999; /* 层叠顺序: 越大越靠上 */
--menu-h: 100vh; /* 高度: 100vh=全屏, auto=随内容 */
--menu-overflow-y: auto; /* 纵向溢出: auto=可滚动, hidden=裁剪 */
--menu-overflow-x: hidden; /* 横向溢出: 必须 hidden 防变形 */
--menu-willchange: transform, opacity; /* 浏览器性能优化提示 */
/* ── 5.2 侧栏内边距和动画 (6个) ── */
--menu-pad-y: 28px; /* 上下内边距 */
--menu-pad-x: 20px; /* 左右内边距 */
--menu-opacity: 0.75; /* 折叠时透明度 → 0~1, 越大越明显 */
--menu-trans: 0.18s; /* ★ 展开动画时长 → 越小越快 */
--menu-trans-ease: cubic-bezier(0.22,1,0.36,1); /* 缓动函数 */
--menu-border-w: 3px; /* 右边框粗细 */
/* ── 5.3 折叠时窄条上的 ☰ 图标 (5个) ── */
--menu-icon: "☰"; /* 图标字符 → 可换成 ≡ 或 ▬ */
--menu-icon-r: 4px; /* 图标距右侧距离 */
--menu-icon-fs: 20px; /* 图标字号 */
--menu-icon-op: 0.7; /* 图标透明度 */
--menu-icon-z: 9998; /* 图标层叠顺序 */
/* ── 5.4 目录树文字排版 (9个) ── */
--menu-p-mb: 4px; /* 普通段落底部间距 */
--menu-p-fs: 0.95em; /* 普通段落的字号 */
--menu-head-fw: 700; /* ★ 根节点字重: 700=粗, 600=半粗, 400=正常 */
--menu-head-fs: 1.2em; /* 根节点字号 */
--menu-head-pb: 10px; /* 根节点底部内边距 */
--menu-head-mb: 10px; /* 根节点底部外边距 */
--menu-a-pad: 3px 0; /* 目录链接内边距(上下 左右) */
--menu-a-fs: 1.05em; /* 目录链接字号 */
--menu-ul-indent: 10px; /* 子目录缩进宽度 */
/* ── 5.5 当前笔记高亮 (6个) ── */
--hl-fw: 600; /* 高亮字重 */
--hl-pos: relative;/* 定位方式: relative 用于 :before 定位 */
--hl-pad: 5px 10px;/* 高亮内边距(上下 左右) */
--hl-margin: 3px -10px;/* 高亮外边距(负值=扩展背景) */
--hl-fs: 0.85em; /* 高亮前缀符号字号 */
--hl-icon: "◀ "; /* 高亮前缀符号 → 可换成 ▸ 或 ► 或 > */
/* ── 5.6 动画通用时长 (3个) ── */
--trans-fast: 0.15s; /* 快速动画 (图标消失/链接变色) */
--trans-med: 0.2s; /* 中等动画 (引用背景变化) */
--trans-slow: 0.22s; /* 慢速动画 (卡片hover效果) */
/* ── 5.7 ★★ 目录树增强参数 (17个) ★★
控制树形连接线、缩进、悬浮效果、高亮条
修改后保存即可生效 ── */
--tree-line-left: 5px; /* 连接纵线距左侧距离(px) → 调整整棵树水平位置 */
--tree-line-w: 3px; /* 连接纵线宽度(px) → 1=细, 2=粗 */
--tree-line-h: 12px; /* 连接横线长度(px) → 越大横向延伸越长 */
--tree-line-color: var(--border); /* 连接线颜色 → 默认用边框色 */
--tree-line-op: 0.7; /* 连接线透明度(0~1) → 0=隐藏, 1=实线 */
--tree-indent-step: 10px; /* ★ 每层递进缩进量(px) → 越大树越宽 */
--tree-a-pad-v: 4px; /* 目录项上下内边距(px) → 越大每行越高 */
--tree-a-pad-h: 5px; /* 目录项左右内边距(px) → 影响文字左右间距 */
--tree-a-pad-start: 12px; /* 目录项左侧起始缩进 → 含树线占位 */
--tree-a-radius: var(--radius-sm); /* 目录项圆角 */
--tree-hover-bg: var(--bg-elevated); /* 悬浮背景色 */
--tree-hover-color: var(--text-link); /* 悬浮文字色 */
--tree-strong-pad-v: 6px; /* 高亮项上下内边距 */
--tree-strong-pad-h: 12px; /* 高亮项左右内边距 */
--tree-strong-margin-v: 3px; /* 高亮项上下外边距 */
--tree-strong-border-l: 3px; /* 高亮项左侧强调条宽度(px) → 2~4 */
--tree-strong-accent: var(--text-link); /* 高亮项强调条颜色 */
/* ════════════════════════════════════════════════════════════
六、正文区 (主内容区域)
════════════════════════════════════════════════════════════ */
/* ── 6.1 正文区尺寸 (6个) ── */
--main-flex: 1; /* flex 弹性比例: 1=填满剩余空间 */
--main-margin-l: 18px; /* ★ 左侧外边距(留给侧栏窄条) */
--main-pad-y: clamp(28px, 4vw, 60px);
/* ★ 上下内边距(响应式) */
--main-pad-x: clamp(20px, 4vw, 60px);
/* ★ 左右内边距(响应式) */
--main-minw: 0; /* 最小宽度(防止溢出) */
--main-maxw: 100%; /* 最大宽度 */
/* ── 6.2 Toggle 菜单按钮 (10个) ── */
/* 桌面端隐藏, 移动端自动显示 */
--tog-display: none; /* 桌面端: none=隐藏, flex=显示 */
--tog-pos: fixed; /* 定位方式 */
--tog-size: 38px; /* 按钮宽高 */
--tog-gap: 8px; /* 距左上角距离 */
--tog-radius: var(--radius-md); /* 圆角 */
--tog-fs: 1.6rem; /* 按钮内 ☰ 图标字号 */
--tog-z: 100; /* 层叠顺序 */
--tog-cursor: pointer;/* 鼠标样式 */
--tog-border: var(--border-w) solid var(--border); /* 按钮边框 */
--tog-flex: center; /* 图标居中 */
/* ════════════════════════════════════════════════════════════
七、页面导航 (面包屑)
════════════════════════════════════════════════════════════ */
--parent-fs: 0.88em; /* 父级导航字号 */
--parent-mb: 8px; /* 底部间距 */
--parent-deco: none; /* 链接下划线: none=无, underline=有 */
--parent-hover-deco:var(--txt-underline); /* 悬停下划线 */
/* ════════════════════════════════════════════════════════════
八、标题 (H1 ~ H6)
每个标题的: 字号(fs) 字重(fw) 外边距(margin) 底部内边距(pb)
════════════════════════════════════════════════════════════ */
/* ── 8.1 页面标题 H1 ── */
--h1-fs: clamp(1.8em, 3.5vw, 2.4em); /* ★ 页面主标题字号 */
--h1-fw: 700; /* 字重 */
--h1-pb: 12px; /* 底部内边距(标题下方留白) */
--h1-margin: 0 0 24px 0; /* 外边距 */
--h1-lh: 1.3; /* 行高 */
/* ── 8.2 章节标题 H2 ── */
--h2-fs: clamp(1.35em, 2.5vw, 1.6em);
--h2-fw: 700;
--h2-margin: 1.8em 0 0.6em 0;
--h2-pb: 8px;
/* ── 8.3 子章节 H3 ── */
--h3-fs: clamp(1.1em, 1.8vw, 1.3em);
--h3-fw: 700;
--h3-margin: 1.4em 0 0.4em 0;
/* ── 8.4 H4 ── */
--h4-fs: 1.05em;
--h4-fw: 600;
--h4-margin: 1.2em 0 0.3em 0;
/* ── 8.5 H5 ── */
--h5-fs: 0.92em;
--h5-fw: 700;
--h5-margin: 1em 0 0.2em 0;
--h5-ls: 0.03em; /* 字间距 */
--h5-trans: uppercase;/* 文字转换: uppercase=全大写, none=正常 */
/* ── 8.6 H6 ── */
--h6-fs: 0.9em;
--h6-fw: 400;
--h6-margin: 0.8em 0 0.2em 0;
/* ── 8.7 标题通用 ── */
--h-border: var(--border-w) solid var(--border-light);
/* ★ 标题底部边框: 粗细+颜色 */
/* ════════════════════════════════════════════════════════════
九、正文排版 (段落/列表/引用/链接)
════════════════════════════════════════════════════════════ */
/* ── 9.1 段落和列表 ── */
--p-margin: 0.6em 0; /* 段落上下间距 */
--li-margin: 0.25em 0; /* 列表项上下间距 */
--li-indent: 1.8em; /* 列表缩进宽度 */
/* ── 9.2 引用块 ── */
--bq-pad: 8px 18px; /* 引用块内边距 */
--bq-margin: 1em 0; /* 引用块上下间距 */
--bq-border: 4px; /* ★ 引用左边框粗细 → 2~6px */
--bq-bg: none; /* 引用背景色: none=透明, 或色值 */
--bq-italic: italic; /* 引用是否斜体: italic=斜, normal=不斜 */
/* ── 9.3 链接 ── */
--link-deco: none; /* 链接下划线: none=无, underline=有 */
--link-hover-deco: var(--txt-underline); /* 链接悬停下划线 */
/* ════════════════════════════════════════════════════════════
十、代码块 (含行内代码)
════════════════════════════════════════════════════════════ */
--code-pad: 2px 6px; /* 行内代码内边距 */
--code-fs: 0.88em; /* ★ 代码字号(比正文略小) */
--code-over-x: auto; /* 横向溢出: auto=可滚动, hidden=裁剪 */
--pre-pad: 16px; /* 代码块内边距 */
--pre-margin: 1em 0; /* 代码块上下间距 */
--pre-code-lh: 1.55; /* ★ 代码块内容行高 → 此处集中管理，同 --code-lh */
/* ════════════════════════════════════════════════════════════
十一、表格
════════════════════════════════════════════════════════════ */
--table-fs: 0.95em; /* 表格字号 */
--table-margin: 1.2em 0; /* 表格上下间距 */
--table-colla: collapse; /* 边框合并: collapse=合并, separate=分离 */
--table-w: 100%; /* 表格宽度: 100%=填满, auto=自适应 */
--th-pad: 10px 14px; /* 表头单元格内边距 */
--th-fs: 0.9em; /* 表头字号 */
--th-fw: 600; /* 表头字重 */
--th-align: center; /* 表头对齐: left/center/right */
--th-color: var(--text-main); /* 表头文字色(默认同正文) */
--td-pad: 8px 14px; /* 数据单元格内边距 */
--td-color: var(--text-main); /* 数据单元格文字色 */
--th-bg: #f2f2f2; /* ★ 表头背景色 */
--stripe-bg: #fafafa; /* ★ 斑马纹(偶数行)背景色 */
--table-hover:#f0f0f0; /* ★ 鼠标悬停行背景色 */
--table-margin-lr: 0; /* 表格水平外边距: 0=靠左(默认), auto=居中 */
--table-fig-ml: 0; /* ★ figure.table 左外边距: 0=靠左, auto=居中 */
--table-fig-mr: auto; /* ★ figure.table 右外边距: auto=靠左, 0=靠右 */
/* ════════════════════════════════════════════════════════════
十二、图片
════════════════════════════════════════════════════════════ */
--img-maxw: 100%; /* 图片最大宽度: 100%=不溢出容器 */
--img-h: auto; /* 图片高度: auto=等比缩放 */
--fig-margin: 1.5em auto;/* 图片容器上下间距+居中 */
--fig-align: center; /* 图片对齐方式 */
--fig-display: inline-block; /* 图片 display 方式 */
/* ════════════════════════════════════════════════════════════
十三、Include-Note (嵌入笔记占位符)
当分享页中有 ~ 引用的子笔记时显示的提示框
════════════════════════════════════════════════════════════ */
--inc-pad: 20px; /* 占位框内边距 */
--inc-margin: 1em 0; /* 占位框上下间距 */
--inc-minh: 60px; /* 占位框最小高度 */
--inc-fs: 0.85em; /* 占位框字号 */
--inc-bdash: 1px dashed var(--border-dash); /* 虚线边框 */
--inc-italic: italic; /* 占位框斜体 */
--inc-align: center; /* 占位框对齐 */
--inc-trans: border-color var(--trans-med) ease, background var(--trans-med) ease;
/* hover 动画 */
--inc-after: "📎 子笔记引用 (分享页暂不支持动态加载)";
/* ★ 占位提示文字(可改成你的文字) */
--inc-after-op:0.7; /* 提示文字透明度 */
/* ════════════════════════════════════════════════════════════
十四、剪藏来源 (从其他笔记引用的标记)
════════════════════════════════════════════════════════════ */
--clip-pad: 10px 14px; /* 内边距 */
--clip-margin:1em 0; /* 上下间距 */
--clip-fs: 0.88em; /* 字号 */
--clip-border-l:0; /* 左边框宽度: 0=无边框 */
--clip-border-r:0; /* 右边框宽度: 0=无边框 */
/* ════════════════════════════════════════════════════════════
十五、子笔记卡片 (页面底部的子笔记导航)
有子笔记时显示为网格卡片, 每张卡代表一个子笔记
════════════════════════════════════════════════════════════ */
--card-gap: 12px; /* 卡片间距 */
--card-w: 185px; /* ★ 卡片宽度 */
--card-h: 110px; /* ★ 卡片高度 */
--card-radius: 8px; /* ★ 卡片圆角 */
--card-pad: 16px 12px;/* 卡片内边距 */
--card-fs: 0.9em; /* 卡片文字字号 */
--card-mt: 2em; /* 卡片区域上边距 */
--card-pt: 1em; /* 卡片区域上内边距 */
--card-line: 3px; /* ★ 卡片顶部装饰线的高度 */
--card-line-op: 0.25; /* 装饰线初始透明度(0~1) */
--card-hover-up: -3px; /* ★ hover 时卡片上移量(负数=上移) */
--card-overflow: hidden; /* 溢出: hidden=裁剪, visible=可见 */
--card-pos: relative; /* 定位(用于装饰线定位) */
--card-trans: all var(--trans-slow) ease; /* hover 动画 */
--card-before-pos: absolute; /* 装饰线定位方式 */
--card-before-t: 0; /* 装饰线上位置 */
--card-before-l: 0; /* 装饰线左位置 */
--card-before-r: 0; /* 装饰线右位置 */
/* ── 15.1 卡片列表模式 (子笔记少时采用行内列表) ── */
--card-list-gap: 4px 20px; /* 列表项间距 */
--card-list-a-pad: 2px 0; /* 列表项内边距 */
/* ════════════════════════════════════════════════════════════
十六、水平线和键盘标签
════════════════════════════════════════════════════════════ */
--hr-margin: 1.5em 0; /* 水平线上下间距 */
--hr-border: var(--border-w) solid var(--border-light);
/* 水平线样式 */
--kbd-pad: 1px 6px; /* 键盘标签内边距 */
--kbd-fs: 0.88em; /* 键盘标签字号 */
/* ════════════════════════════════════════════════════════════
十七、滚动条 (Webkit 浏览器)
影响 Chrome/Edge/Safari, 不影响 Firefox
════════════════════════════════════════════════════════════ */
--sb-size: 8px; /* 滚动条宽度+高度 */
--sb-color: #d0d0d0; /* 滚动条滑块颜色 */
--sb-hover: #aaaaaa; /* 滑块悬停颜色 */
--sb-border: 2px; /* 滑块内边距(制造间隙) */
--sb-radius: 99px; /* 滑块圆角 */
--sb-clip: content-box;/* 背景裁剪方式 */
--sb-track-bg: transparent;/* 滚动条轨道背景 */
/* ════════════════════════════════════════════════════════════
十八、响应式设计 (移动端/平板端)
以下变量控制不同屏幕尺寸下的行为
════════════════════════════════════════════════════════════ */
/* ── 18.1 移动端 (≤768px: 手机竖屏) ── */
--mob-layout: column; /* 布局方向: column=上下, row=左右 */
--mob-menu-w: 100%; /* 菜单宽度: 100%=全屏宽 */
--mob-menu-minw: 100%; /* 菜单最小宽度 */
--mob-menu-br: none; /* 菜单右边框: 移动端去掉 */
--mob-menu-z: 150; /* 菜单弹窗层叠 */
--mob-menu-tx: translateX(-100%); /* 菜单默认滑出屏幕 */
--mob-menu-op: 0; /* 菜单默认透明 */
--mob-menu-trans: transform 0.25s ease, opacity 0.25s ease;
/* 菜单滑入动画 */
--mob-tog-flex: flex; /* 显示 toggle 按钮 */
--mob-main-pad: 20px 16px 40px; /* 正文区移动端内边距 */
--mob-card-dir: column; /* 卡片排列方向 */
--mob-card-w: 100%; /* 卡片宽度: 全屏宽 */
--mob-card-h: auto; /* 卡片高度自适应 */
--mob-card-a-h: 48px; /* 卡片链接高度 */
--mob-card-a-dir: row; /* 卡片内部水平排列 */
--mob-card-a-just: flex-start; /* 卡片内容左对齐 */
--mob-card-a-px: 0 14px; /* 卡片内边距 */
--mob-before-dis: none; /* 隐藏卡片装饰线 */
--mob-inc-pad: 14px; /* include-note 内边距 */
/* ── 18.2 中屏 (769~1024px: 平板) ── */
--tab-menu-w: 220px; /* 平板端菜单宽度 */
--tab-menu-col: 14px; /* 平板端折叠窄条宽 */
--tab-menu-pad: 24px 16px; /* 平板端菜单内边距 */
--tab-main-ml: 14px; /* 平板端正文左边距 */
--tab-main-pad: 28px; /* 平板端正文内边距 */
/* ── 18.3 打印 ── */
--print-menu-dis: none; /* 打印时隐藏菜单 */
--print-main-ml: 0; /* 打印时正文左边距归零 */
--print-bg: white; /* 打印时背景变白(省墨) */
--print-color: black; /* 打印时文字变黑 */
--print-a-deco: var(--txt-underline); /* 打印时链接加下划线 */
}
/* ══════════════════════════════════════════════════════════════
以下为 CSS 规则体 — 所有值已用 var() 引用上方变量, 无需修改
══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box !important; }
html { scroll-behavior: smooth; }
body.share-body {
margin: 0 !important; padding: 0 !important;
background: var(--bg-page) !important;
color: var(--text-main);
font-family: var(--font);
font-size: var(--body-fs);
line-height: var(--body-lh);
overflow-x: var(--body-overflowx) !important;
-webkit-font-smoothing: var(--body-antialias);
}
::selection { background: var(--sel-bg); color: var(--text-sel); }
#layout {
display: flex !important; flex-direction: row !important;
width: 100% !important; max-width: 100% !important;
min-height: 100vh !important;
}
#menu {
position: var(--menu-pos) !important;
top: var(--menu-top) !important; left: var(--menu-left) !important;
width: var(--menu-w) !important; min-width: var(--menu-w) !important;
height: var(--menu-h) !important; z-index: var(--menu-z) !important;
background: var(--bg-card) !important;
border-right: var(--menu-border-w) solid var(--border) !important;
overflow-y: var(--menu-overflow-y) !important;
overflow-x: var(--menu-overflow-x) !important;
padding: var(--menu-pad-y) var(--menu-pad-x) !important;
transform: translateX(calc(var(--menu-collapsed) - var(--menu-w))) !important;
opacity: var(--menu-opacity);
transition: transform var(--menu-trans) var(--menu-trans-ease),
opacity var(--menu-trans) ease !important;
will-change: var(--menu-willchange);
}
#menu:hover {
transform: translateX(0) !important; opacity: 1 !important;
box-shadow: var(--shadow-menu) !important;
}
#menu::before {
content: var(--menu-icon); position: absolute; top: 50%;
right: var(--menu-icon-r); transform: translateY(-50%);
font-size: var(--menu-icon-fs);
color: var(--text-muted); opacity: var(--menu-icon-op);
transition: opacity var(--trans-fast) ease;
pointer-events: none; z-index: var(--menu-icon-z);
}
#menu:hover::before { opacity: 0 !important; }
#menu p { margin: 0 0 var(--menu-p-mb) 0; font-size: var(--menu-p-fs); }
#menu > p {
font-weight: var(--menu-head-fw); font-size: var(--menu-head-fs);
color: var(--text-main); padding-bottom: var(--menu-head-pb);
border-bottom: var(--h-border); margin-bottom: var(--menu-head-mb);
}
/* ────────────────────────────────────────────────
目录树增强：树形连接线 + 悬浮 + 层级缩进
所有值引自 5.7 目录树增强参数, 修改变量即可
──────────────────────────────────────────────── */
#menu a {
color: var(--text-secondary); text-decoration: var(--link-deco);
display: block; padding: var(--tree-a-pad-v) var(--tree-a-pad-h) var(--tree-a-pad-v) var(--tree-a-pad-start);
font-size: var(--menu-a-fs);
border-radius: var(--tree-a-radius);
transition: all var(--trans-fast) ease;
position: relative;
}
/* 树形连接线 └ ├ │ ─ 从上方引下的竖线 */
#menu a::before {
content: '';
position: absolute;
left: var(--tree-line-left); top: 0; bottom: 50%;
width: var(--tree-line-w);
background: var(--tree-line-color);
opacity: var(--tree-line-op);
}
/* 连接线的横线 ─ 从竖线向右延伸 */
#menu a::after {
content: '';
position: absolute;
left: var(--tree-line-left); top: 50%;
width: var(--tree-line-h); height: var(--tree-line-w);
background: var(--tree-line-color);
opacity: var(--tree-line-op);
}
/* 最后一项截断竖线（避免竖线穿过最底项） */
#menu ul li:last-child > a::before { height: 50%; }
/* 悬浮效果：上色 + 淡背景 */
#menu a:hover {
color: var(--tree-hover-color);
background: var(--tree-hover-bg);
}
/* 层级递进缩进：每 base + 递进 step */
#menu ul { padding-left: 0; list-style: none; }
#menu ul li { margin: 0; position: relative; }
#menu ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step)); }
#menu ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 2); }
#menu ul ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 3); }
#menu ul ul ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 4); }
#menu ul ul ul ul ul li a { padding-left: calc(var(--tree-a-pad-start) + var(--tree-indent-step) * 5); }
/* ────────────────────────────────────────────────
当前笔记高亮：蓝底 + 左侧强调条 + 树线
──────────────────────────────────────────────── */
#menu strong {
font-weight: var(--hl-fw); color: var(--text-main);
display: block;
padding: var(--tree-strong-pad-v) var(--tree-strong-pad-h);
margin: var(--tree-strong-margin-v) 0;
background: var(--bg-highlight); border-radius: var(--tree-a-radius);
position: relative;
border-left: var(--tree-strong-border-l) solid var(--tree-strong-accent);
}
#menu strong::before { content: var(--hl-icon); color: var(--text-link); font-size: var(--hl-fs); }
/* 当前项也保留树形连接线 */
#menu strong::after {
content: '';
position: absolute;
left: var(--tree-line-left); top: 0; bottom: 50%;
width: var(--tree-line-w);
background: var(--tree-line-color);
opacity: var(--tree-line-op);
}
#main {
flex: var(--main-flex) !important; margin-left: var(--main-margin-l) !important;
padding: var(--main-pad-y) var(--main-pad-x) !important;
background: var(--bg-page) !important;
min-width: var(--main-minw) !important; max-width: var(--main-maxw) !important;
}
#toggleMenuButton {
display: var(--tog-display); position: var(--tog-pos);
top: var(--tog-gap); left: var(--tog-gap);
width: var(--tog-size); height: var(--tog-size);
border-radius: var(--tog-radius); border: var(--tog-border);
background: var(--bg-page); font-size: var(--tog-fs);
z-index: var(--tog-z); cursor: var(--tog-cursor);
color: var(--text-main); box-shadow: var(--shadow-sm);
align-items: var(--tog-flex); justify-content: var(--tog-flex);
}
#parentLink { font-size: var(--parent-fs); color: var(--text-muted); margin-bottom: var(--parent-mb); }
#parentLink a { color: var(--text-link); text-decoration: var(--parent-deco); }
#parentLink a:hover { color: var(--text-link-hover); text-decoration: var(--parent-hover-deco); }
#title {
margin: var(--h1-margin) !important; font-size: var(--h1-fs) !important;
font-weight: var(--h1-fw) !important; line-height: var(--h1-lh);
color: var(--text-main) !important; padding-bottom: var(--h1-pb);
border-bottom: var(--h-border);
}
#content h2, .ck-content h2 {
font-size: var(--h2-fs); font-weight: var(--h2-fw);
margin: var(--h2-margin); padding-bottom: var(--h2-pb);
border-bottom: var(--h-border); color: var(--text-main);
}
#content h3, .ck-content h3 {
font-size: var(--h3-fs); font-weight: var(--h3-fw);
margin: var(--h3-margin); color: var(--text-main);
}
#content h4, .ck-content h4 {
font-size: var(--h4-fs); font-weight: var(--h4-fw);
color: var(--text-secondary); margin: var(--h4-margin);
}
#content h5, .ck-content h5 {
font-size: var(--h5-fs); font-weight: var(--h5-fw);
color: var(--text-muted); text-transform: var(--h5-trans);
letter-spacing: var(--h5-ls); margin: var(--h5-margin);
}
#content h6, .ck-content h6 {
font-size: var(--h6-fs); font-weight: var(--h6-fw);
color: var(--text-muted); font-style: var(--txt-italic);
margin: var(--h6-margin);
}
#content p, .ck-content p, #content li, .ck-content li { color: var(--text-main) !important; }
#content p, .ck-content p { margin: var(--p-margin); }
#content li, .ck-content li { margin: var(--li-margin); }
#content ul, .ck-content ul,
#content ol, .ck-content ol { padding-left: var(--li-indent); }
blockquote, .ck-content blockquote {
margin: var(--bq-margin); padding: var(--bq-pad);
border-left: var(--bq-border) solid var(--border-quote);
background: var(--bq-bg); color: var(--text-quote);
font-style: var(--bq-italic);
}
blockquote p { margin: 0 !important; }
a { color: var(--text-link); text-decoration: var(--link-deco); transition: color var(--trans-fast) ease; }
a:hover { color: var(--text-link-hover); text-decoration: var(--link-hover-deco); }
code:not(pre code) {
background: var(--bg-code) !important; color: var(--text-code) !important;
padding: var(--code-pad) !important; border-radius: var(--radius-sm);
font-family: var(--font-mono); font-size: var(--code-fs);
}
/* 代码块容器样式（块级属性） */
pre, .ck-content pre {
background: var(--bg-code) !important;
border: var(--border-w) solid var(--border) !important;
border-radius: var(--radius-sm); padding: var(--pre-pad) !important;
margin: var(--pre-margin) !important;
overflow-x: var(--code-over-x) !important;
font-size: var(--code-fs); color: var(--text-main);
}
/* 代码块排版（pre + pre code 共用字体/行高） */
pre, .ck-content pre,
pre code, .ck-content pre code {
font-family: var(--font-mono) !important;
line-height: var(--pre-code-lh);
}
table {
width: var(--table-w) !important; margin: var(--table-margin) var(--table-margin-lr) !important;
border-collapse: var(--table-colla); font-size: var(--table-fs);
}
table th {
background: var(--th-bg); font-weight: var(--th-fw);
padding: var(--th-pad); text-align: var(--th-align);
border: var(--border-w) solid var(--border); font-size: var(--th-fs);
color: var(--th-color);
}
table td {
padding: var(--td-pad); border: var(--border-w) solid var(--border-light);
color: var(--td-color) !important;
}
table tr:nth-child(even) td { background: var(--stripe-bg); }
table tr:hover td { background: var(--table-hover); }
/* 表格包装器对齐（CKEditor5 会在表格外包一层 figure.table） */
figure.table {
margin-left: var(--table-fig-ml) !important;
margin-right: var(--table-fig-mr) !important;
}
img { max-width: var(--img-maxw) !important; height: var(--img-h) !important; }
figure.image { margin: var(--fig-margin) !important; text-align: var(--fig-align); }
figure.image img { display: var(--fig-display); }
section.include-note {
display: block; margin: var(--inc-margin); padding: var(--inc-pad);
border: var(--inc-bdash); border-radius: var(--radius-sm);
background: var(--stripe-bg); min-height: var(--inc-minh);
text-align: var(--inc-align); color: var(--text-muted);
font-size: var(--inc-fs); font-style: var(--inc-italic);
transition: var(--inc-trans);
}
section.include-note:hover { border-color: var(--text-link); background: var(--bg-card); }
section.include-note::after { content: var(--inc-after); opacity: var(--inc-after-op); }
#noteClippedFrom {
margin: var(--clip-margin); padding: var(--clip-pad);
background: var(--stripe-bg);
border: var(--border-w) solid var(--border-light);
border-left-width: var(--clip-border-l); border-right-width: var(--clip-border-r);
color: var(--text-muted); font-size: var(--clip-fs);
}
#childLinks { margin-top: var(--card-mt); padding-top: var(--card-pt); border-top: var(--h-border); }
#childLinks hr { border: none; border-top: var(--h-border); margin: 0 0 8px 0; }
#childLinks.grid ul {
list-style: none; display: flex; flex-wrap: wrap;
padding: 0; gap: var(--card-gap);
}
#childLinks.grid ul li { width: var(--card-w); height: var(--card-h); }
#childLinks.grid ul li a {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
height: 100%; width: 100%;
background: var(--bg-card-item); border: var(--border-w) solid var(--border);
border-radius: var(--card-radius); text-align: center;
font-size: var(--card-fs); padding: var(--card-pad);
color: var(--text-main); text-decoration: var(--link-deco);
box-shadow: var(--shadow-card); transition: var(--card-trans);
position: var(--card-pos); overflow: var(--card-overflow);
}
#childLinks.grid ul li a::before {
content: '';
position: var(--card-before-pos);
top: var(--card-before-t); left: var(--card-before-l); right: var(--card-before-r);
height: var(--card-line); background: var(--text-link);
opacity: var(--card-line-op); transition: opacity var(--trans-slow) ease;
}
#childLinks.grid ul li a:hover {
background: var(--stripe-bg); border-color: var(--text-link);
transform: translateY(var(--card-hover-up)); box-shadow: var(--shadow-card-hover);
}
#childLinks.grid ul li a:hover::before { opacity: 1; }
#childLinks.list ul {
list-style: none; display: inline-flex; flex-wrap: wrap;
padding: 0; gap: var(--card-list-gap);
}
#childLinks.list ul li a { color: var(--text-link); padding: var(--card-list-a-pad); }
hr { border: none; border-top: var(--hr-border); margin: var(--hr-margin); }
del { color: var(--text-muted); }
kbd { background: var(--bg-code); border: var(--border-w) solid var(--border);
border-radius: var(--radius-sm); padding: var(--kbd-pad);
font-family: var(--font-mono); font-size: var(--kbd-fs); }
::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
::-webkit-scrollbar-track { background: var(--sb-track-bg); }
::-webkit-scrollbar-thumb {
background: var(--sb-color); border-radius: var(--sb-radius);
border: var(--sb-border) solid transparent; background-clip: var(--sb-clip);
}
::-webkit-scrollbar-thumb:hover { background: var(--sb-hover); background-clip: var(--sb-clip); }
@media (max-width: 768px) {
#layout { flex-direction: var(--mob-layout) !important; }
#menu {
width: var(--mob-menu-w) !important; min-width: var(--mob-menu-minw) !important;
border-right: var(--mob-menu-br) !important;
border-bottom: var(--border-w) solid var(--border) !important;
z-index: var(--mob-menu-z) !important;
transform: var(--mob-menu-tx) !important; opacity: var(--mob-menu-op) !important;
transition: var(--mob-menu-trans) !important;
}
#menu::before { display: var(--mob-before-dis); }
#layout.showMenu #menu { transform: translateX(0) !important; opacity: 1 !important; }
#toggleMenuButton { display: var(--mob-tog-flex) !important; }
#main { margin-left: 0 !important; padding: var(--mob-main-pad) !important; }
#childLinks.grid ul { flex-direction: var(--mob-card-dir); }
#childLinks.grid ul li { width: var(--mob-card-w); height: var(--mob-card-h); }
#childLinks.grid ul li a {
height: var(--mob-card-a-h); flex-direction: var(--mob-card-a-dir);
justify-content: var(--mob-card-a-just); padding: var(--mob-card-a-px);
}
#childLinks.grid ul li a::before { display: var(--mob-before-dis); }
section.include-note { padding: var(--mob-inc-pad); }
}
@media (min-width: 769px) and (max-width: 1024px) {
:root { --menu-w: var(--tab-menu-w); --menu-collapsed: var(--tab-menu-col); }
#menu { padding: var(--tab-menu-pad) !important; }
#main { margin-left: var(--tab-main-ml) !important; padding: var(--tab-main-pad) !important; }
}
@media print {
#menu { display: var(--print-menu-dis) !important; }
#main { margin-left: var(--print-main-ml) !important; }
body.share-body { background: var(--print-bg) !important; color: var(--print-color) !important; }
#title { color: var(--text-print-title) !important; }
a { color: var(--text-print) !important; text-decoration: var(--print-a-deco) !important; }
}