主题放这里供大家自取啦：
/**
- FlexNote 自定义样式 — Flexnote-Zhang
- 基于 UserZYF/zhang-light 思源笔记主题的视觉风格移植
- 原作者: UserZYF (https://github.com/UserZYF/zhang-light)
- 移植: MiMo Code Agent
- 版本: 1.0.0
- 日期: 2026-08-03
*
- 设计语言:
- 珊瑚红主色 (#cf5659) + 彩虹标题 + 圆角衬底 + Mac 风格代码块
- 双链保留 [[ ]] 正红色标识
*/
/* ============================================================
- §1 CSS 变量定义 — Zhang 色板（Light Mode）
- ============================================================ */
:root {
/* --- 主色 --- */
--zhang-primary: #cf5659;
--zhang-primary-light: #cf56594d;
--zhang-primary-tm: #cf56591a;
/* --- 悬浮色 --- */
--zhang-hover: #f1cccd;
--zhang-hover2: #f8ecec;
--zhang-hover-gray: #e2e2e2;
--zhang-link-hover-bg: #e4e4e4;
/* --- 背景色 --- */
--zhang-paper: #fdfdfd;
--zhang-bg: #fdfdfd;
--zhang-bg-2: #fafafa;
--zhang-bg-3: #f5f5f5;
--zhang-surface: #fafafa;
/* --- 文字色 --- */
--zhang-tx: #202124;
--zhang-tx-2: #5f6368;
--zhang-tx-3: #9e9e9e;
--zhang-tx-4: rgba(128, 128, 128, 0.5);
--zhang-tx-empty: #9fa5a675;
/* --- 边框/线条 --- */
--zhang-border: rgba(128, 128, 128, 0.1);
--zhang-border-color: #cfcece;
--zhang-border-wider: 2px solid #cfcece;
--zhang-border-dashed: 1px dashed #cfcece;
/* --- 圆角 --- */
--zhang-radius: 4px;
--zhang-radius-round: 50px;
--zhang-radius-pill: 50%;
/* --- 阴影 --- */
--zhang-shadow-sm: 0px 0px 2px 0px rgba(4, 27, 21, 0.22);
--zhang-shadow-md: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
--zhang-shadow-card: 0 4px 20px 0 rgba(0, 0, 0, 0.16);
/* --- 标题彩虹色 (Zhang 特征) --- /
--zhang-h1: #d83931; / 红 /
--zhang-h2: #de7802; / 橙 /
--zhang-h3: #856404; / 黄褐 /
--zhang-h4: #2ea121; / 绿 /
--zhang-h5: #35737d; / 青 /
--zhang-h6: #245bdb; / 蓝 */
/* --- 标题衬底色 --- */
--zhang-h1-after: #fbbfbc;
--zhang-h2-after: #fed4a4;
--zhang-h3-after: #ffe9a1;
--zhang-h4-after: #b7edb1;
--zhang-h5-after: #d1ecf1;
--zhang-h6-after: #bacefd;
/* --- 双链颜色 (用户指定: 正红色 + [[ ]]) --- */
--zhang-link: #FF0000;
--zhang-link-hover: #CC0000;
--zhang-link-bg: #FFF0F0;
/* --- 链接颜色 --- */
--zhang-a-link: #408bba;
--zhang-a-link-hover: red;
/* --- 行内元素 --- */
--zhang-inline-code-color: var(--zhang-primary);
--zhang-inline-code-bg: var(--zhang-hover2);
--zhang-mark-bg: #fff88f;
--zhang-tag-bg: var(--zhang-primary);
--zhang-tag-color: var(--zhang-hover);
/* --- 引用块 --- */
--zhang-bq-border: #d83931;
--zhang-bq-text: gray;
/* --- 代码块 --- */
--zhang-code-border: #2ea121;
--zhang-code-dot-red: #fa625c;
--zhang-code-dot-yellow: #fdbc40;
--zhang-code-dot-green: #35cd4b;
/* --- 表格 --- */
--zhang-table-border: rgb(211, 211, 211);
--zhang-table-th-bg: var(--zhang-hover2);
/* --- 选区/搜索高亮 --- */
--zhang-selection: rgba(207, 86, 89, 0.15);
--zhang-search-bg: #ffe955;
--zhang-search-current: #a5d3fe;
/* --- 滚动条 --- */
--zhang-scrollbar: rgba(79, 101, 116, 0.27);
--zhang-scrollbar-hover: rgba(79, 101, 116, 0.45);
/* --- 便利贴 (4种卡片背景) --- */
--zhang-card-error: #fce7e9;
--zhang-card-warning: #fee6ac;
--zhang-card-info: #cfddfe;
--zhang-card-success: #ccf2c8;
/* --- 字体 --- */
--zhang-font: "LXGWWenKai-Regular", "仓耳今楷03", -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Noto Sans CJK SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
--zhang-font-code: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* --- 过渡动画 --- */
--zhang-transition: all 0.15s cubic-bezier(0, 0, 0.2, 1) 0ms;
/* --- 分割线渐变 (Zhang 特征) --- */
--zhang-hr-gradient: linear-gradient(125deg, #F44336, #E91E63, #9C27B0, #3F51A5, #2196F3);
/* --- 画布连线 (React Flow) --- */
--zhang-graph-line: #5f6368;
--zhang-graph-ref-line: #d23f31;
}
/* ============================================================
- §1-b 深色模式变量 — Zhang Dark
- ============================================================ */
html.dark,
.dark {
--zhang-primary: #e57373;
--zhang-primary-light: rgba(229, 115, 115, 0.3);
--zhang-primary-tm: rgba(229, 115, 115, 0.1);
--zhang-hover: rgba(229, 115, 115, 0.15);
--zhang-hover2: rgba(255, 255, 255, 0.06);
--zhang-hover-gray: rgba(255, 255, 255, 0.1);
--zhang-link-hover-bg: rgba(255, 255, 255, 0.08);
--zhang-paper: #1a1a1a;
--zhang-bg: #1a1a1a;
--zhang-bg-2: #222222;
--zhang-bg-3: #2a2a2a;
--zhang-surface: #222222;
--zhang-tx: #e8eaed;
--zhang-tx-2: #9aa0a6;
--zhang-tx-3: #5f6368;
--zhang-tx-4: rgba(255, 255, 255, 0.25);
--zhang-tx-empty: rgba(255, 255, 255, 0.2);
--zhang-border: rgba(255, 255, 255, 0.08);
--zhang-border-color: rgba(255, 255, 255, 0.12);
--zhang-border-wider: 2px solid rgba(255, 255, 255, 0.12);
--zhang-border-dashed: 1px dashed rgba(255, 255, 255, 0.15);
--zhang-shadow-sm: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
--zhang-shadow-md: 0 3px 1px -2px rgba(0, 0, 0, 0.4), 0px 2px 2px 0px rgba(0, 0, 0, 0.28), 0px 1px 5px 0px rgba(0, 0, 0, 0.22);
/* 深色模式标题彩虹色 (降低饱和度提亮) */
--zhang-h1: #ef5350;
--zhang-h2: #ff9800;
--zhang-h3: #ffc107;
--zhang-h4: #66bb6a;
--zhang-h5: #26c6da;
--zhang-h6: #42a5f5;
--zhang-h1-after: rgba(239, 83, 80, 0.2);
--zhang-h2-after: rgba(255, 152, 0, 0.2);
--zhang-h3-after: rgba(255, 193, 7, 0.2);
--zhang-h4-after: rgba(102, 187, 106, 0.2);
--zhang-h5-after: rgba(38, 198, 218, 0.2);
--zhang-h6-after: rgba(66, 165, 245, 0.2);
/* 深色模式双链 */
--zhang-link: #FF4444;
--zhang-link-hover: #FF6666;
--zhang-link-bg: rgba(255, 0, 0, 0.12);
--zhang-a-link: #64b5f6;
--zhang-a-link-hover: #ff8a80;
--zhang-inline-code-color: var(--zhang-primary);
--zhang-inline-code-bg: rgba(255, 255, 255, 0.06);
--zhang-mark-bg: rgba(255, 235, 59, 0.2);
--zhang-bq-border: #ef5350;
--zhang-bq-text: #9aa0a6;
--zhang-code-border: #66bb6a;
--zhang-code-dot-red: #ef5350;
--zhang-code-dot-yellow: #ffca28;
--zhang-code-dot-green: #66bb6a;
--zhang-table-border: rgba(255, 255, 255, 0.12);
--zhang-table-th-bg: rgba(255, 255, 255, 0.06);
--zhang-selection: rgba(229, 115, 115, 0.2);
--zhang-search-bg: rgba(255, 235, 59, 0.3);
--zhang-search-current: rgba(100, 181, 246, 0.3);
--zhang-scrollbar: rgba(255, 255, 255, 0.15);
--zhang-scrollbar-hover: rgba(255, 255, 255, 0.3);
--zhang-card-error: rgba(239, 83, 80, 0.15);
--zhang-card-warning: rgba(255, 152, 0, 0.15);
--zhang-card-info: rgba(66, 165, 245, 0.15);
--zhang-card-success: rgba(102, 187, 106, 0.15);
--zhang-graph-line: rgba(255, 255, 255, 0.2);
--zhang-graph-ref-line: #ef5350;
}
/* ============================================================
- §2 全局基础
- ============================================================ */
html {
background-color: var(--zhang-bg) !important;
color: var(--zhang-tx);
}
body {
color: var(--zhang-tx);
font-family: var(--zhang-font);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background-color: var(--zhang-selection);
}
/* 滚动条 — Zhang 风格 */
html *::-webkit-scrollbar-thumb {
background-color: var(--zhang-scrollbar);
border: 2px solid transparent;
border-radius: var(--zhang-radius-round);
background-clip: content-box;
}
html *::-webkit-scrollbar-thumb:hover {
background-color: var(--zhang-scrollbar-hover);
}
/* ============================================================
- §3 双链 / 提及 — [[]] 样式 + 正红色 (#FF0000)
- ============================================================ */
/* ---------- EditorJS cdx-mention 双链 ---------- */
.cdx-mention,
.cdx-mention[class] {
color: #FF0000 !important;
font-weight: 600 !important;
border-bottom: none !important;
transition: var(--zhang-transition);
padding: 1px 3px;
border-radius: var(--zhang-radius);
}
.cdx-mention::before,
.cdx-mention[class]::before {
content: '[[';
color: inherit;
font-weight: inherit;
}
.cdx-mention::after,
.cdx-mention[class]::after {
content: ']]';
color: inherit;
font-weight: inherit;
}
/* 深色模式双链 */
html.dark .cdx-mention,
.dark .cdx-mention {
color: #FF4444 !important;
}
/* 悬停状态 */
.cdx-mention:hover,
.cdx-mention:hover[class] {
color: #CC0000 !important;
background-color: rgba(255, 0, 0, 0.06) !important;
}
/* 激活状态 */
.cdx-mention-active,
.cdx-inline-latex-active {
color: #FF0000 !important;
background-color: rgba(255, 0, 0, 0.1) !important;
font-weight: 600 !important;
}
.cdx-mention-active::before,
.cdx-inline-latex-active::before { content: '[['; color: inherit; }
.cdx-mention-active::after,
.cdx-inline-latex-active::after { content: ']]'; color: inherit; }
/* ---------- Lexical 内联提及 ---------- */
.mention-span,
.mention-span[class],
[data-mention="true"] {
color: #FF0000 !important;
font-weight: 600 !important;
}
.mention-span::before,
.mention-span[class]::before,
[data-mention="true"]::before {
content: '[['; color: inherit; font-weight: inherit;
}
.mention-span::after,
.mention-span[class]::after,
[data-mention="true"]::after {
content: ']]'; color: inherit; font-weight: inherit;
}
html.dark .mention-span,
.dark .mention-span,
html.dark [data-mention="true"],
.dark [data-mention="true"] {
color: #FF4444 !important;
}
/* ============================================================
- §4 Lexical 编辑器 — Zhang 排版风格
- ============================================================ */
/* 主编辑区 */
.ContentEditable__root {
color: var(--zhang-tx);
caret-color: var(--zhang-primary);
line-height: 1.85;
letter-spacing: 0.01em;
font-family: var(--zhang-font);
}
/* 占位符 */
.ContentEditable__placeholder {
color: var(--zhang-tx-empty);
}
/* 段落 */
.PlaygroundEditorThemeparagraph,
.StickyEditorThemeparagraph {
line-height: 1.85;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
/* ---------------------------------------------------------
- 标题 — Zhang 彩虹色 + 圆角矩形衬底
- h1红 → h2橙 → h3黄 → h4绿 → h5青 → h6蓝
- --------------------------------------------------------- */
.PlaygroundEditorThemeh1,
.PlaygroundEditorThemeh2,
.PlaygroundEditorThemeh3,
.PlaygroundEditorThemeh4,
.PlaygroundEditorThemeh5,
.PlaygroundEditorThemeh6 {
position: relative;
z-index: 0;
font-weight: 550;
line-height: 1.35;
letter-spacing: -0.01em;
}
/* H1 — 红色 */
.PlaygroundEditorThemeh1 {
font-size: 1.6em !important;
color: var(--zhang-h1);
margin-top: 36px;
}
.PlaygroundEditorThemeh1::after {
content: '';
position: absolute;
bottom: 0.35em;
left: 0;
height: 18px;
width: 50%;
background-color: var(--zhang-h1-after);
border-radius: var(--zhang-radius-round);
z-index: -2 !important;
}
/* H2 — 橙色 */
.PlaygroundEditorThemeh2 {
font-size: 1.5em !important;
color: var(--zhang-h2);
margin-top: 30px;
}
.PlaygroundEditorThemeh2::after {
content: '';
position: absolute;
bottom: 0.35em;
left: 0;
height: 16px;
width: 50%;
background-color: var(--zhang-h2-after);
border-radius: var(--zhang-radius-round);
z-index: -2 !important;
}
/* H3 — 黄褐色 */
.PlaygroundEditorThemeh3 {
font-size: 1.4em !important;
color: var(--zhang-h3);
margin-top: 24px;
}
.PlaygroundEditorThemeh3::after {
content: '';
position: absolute;
bottom: 0.35em;
left: 0;
height: 14px;
width: 45%;
background-color: var(--zhang-h3-after);
border-radius: var(--zhang-radius-round);
z-index: -2 !important;
}
/* H4 — 绿色 */
.PlaygroundEditorThemeh4 {
font-size: 1.3em !important;
color: var(--zhang-h4);
margin-top: 18px;
}
.PlaygroundEditorThemeh4::after {
content: '';
position: absolute;
bottom: 0.35em;
left: 0;
height: 12px;
width: 40%;
background-color: var(--zhang-h4-after);
border-radius: var(--zhang-radius-round);
z-index: -2 !important;
}
/* H5 — 青色 */
.PlaygroundEditorThemeh5 {
font-size: 1.2em !important;
color: var(--zhang-h5);
margin-top: 12px;
}
.PlaygroundEditorThemeh5::after {
content: '';
position: absolute;
bottom: 0.35em;
left: 0;
height: 10px;
width: 35%;
background-color: var(--zhang-h5-after);
border-radius: var(--zhang-radius-round);
z-index: -2 !important;
}
/* H6 — 蓝色 */
.PlaygroundEditorThemeh6 {
font-size: 1.1em !important;
color: var(--zhang-h6);
margin-top: 6px;
}
.PlaygroundEditorThemeh6::after {
content: '';
position: absolute;
bottom: 0.35em;
left: 0;
height: 8px;
width: 30%;
background-color: var(--zhang-h6-after);
border-radius: var(--zhang-radius-round);
z-index: -2 !important;
}
/* ---------------------------------------------------------
- 链接 — Zhang 风格：蓝色 + 灰色下划线
- --------------------------------------------------------- */
.PlaygroundEditorThemelink {
color: var(--zhang-a-link);
text-decoration: none;
border-bottom: 1px solid gray;
padding: 0.05em 0.15em;
margin: 0 2px;
transition: var(--zhang-transition);
word-break: break-all;
}
.PlaygroundEditorThemelink:hover {
color: var(--zhang-a-link-hover);
background-color: var(--zhang-link-hover-bg);
border-radius: 3px 3px 0 0;
border-bottom: 1px solid gray;
}
/* ---------------------------------------------------------
- 引用块 — Zhang 风格：红色顶边框 + 灰色文字
- --------------------------------------------------------- */
.PlaygroundEditorThemequote {
color: var(--zhang-bq-text);
border-left: none !important;
border-top: 3px solid var(--zhang-bq-border);
border-bottom: var(--zhang-border-wider);
background-color: var(--zhang-bg-2) !important;
padding: 8px 20px;
border-radius: var(--zhang-radius);
margin: 4px 0;
min-height: 40px;
}
.PlaygroundEditorThemequote:after {
background-color: transparent !important;
opacity: 1;
}
/* ---------------------------------------------------------
- 行内代码 — Zhang 风格：主色文字 + 浅背景
- --------------------------------------------------------- */
code[data-lexical-text="true"] {
color: var(--zhang-inline-code-color);
background-color: var(--zhang-inline-code-bg);
padding: 2px 6px;
border-radius: var(--zhang-radius);
font-size: 0.8em;
vertical-align: 0.1em;
font-family: var(--zhang-font-code);
}
/* ---------------------------------------------------------
- 代码块 — Zhang Mac 风格：绿色顶边 + 交通灯按钮
- --------------------------------------------------------- */
.PlaygroundEditorTheme__code {
background-color: var(--zhang-bg-2);
color: var(--zhang-tx);
border: none;
border-top: 3px solid var(--zhang-code-border);
border-bottom: var(--zhang-border-wider);
border-radius: var(--zhang-radius) !important;
padding: 32px 12px 12px 44px;
font-family: var(--zhang-font-code);
font-size: 13px;
line-height: 1.6;
box-shadow: var(--zhang-shadow-sm);
margin: 4px !important;
position: relative;
}
/* Mac 交通灯按钮 (红黄绿) */
.PlaygroundEditorTheme__code::before {
content: ' ';
position: absolute;
top: 10px;
left: 15px;
height: 12px;
width: 12px;
background: var(--zhang-code-dot-red);
box-shadow: 23px 0 var(--zhang-code-dot-yellow),
45px 0 var(--zhang-code-dot-green);
border-radius: var(--zhang-radius-pill);
z-index: 1;
}
.PlaygroundEditorTheme__code::after {
background-color: transparent;
border-right: none;
}
/* 代码语法高亮 — Zhang 配色映射 */
.PlaygroundEditorThemetokenComment { color: var(--zhang-tx-3); }
.PlaygroundEditorThemetokenPunctuation { color: var(--zhang-tx-2); }
.PlaygroundEditorThemetokenProperty { color: var(--zhang-h6); }
.PlaygroundEditorThemetokenSelector { color: var(--zhang-h4); }
.PlaygroundEditorThemetokenOperator { color: var(--zhang-tx-2); }
.PlaygroundEditorThemetokenAttr { color: var(--zhang-h5); }
.PlaygroundEditorThemetokenVariable { color: var(--zhang-h2); }
.PlaygroundEditorThemetokenFunction { color: var(--zhang-h2); }
/* ---------------------------------------------------------
- 粗体 / 斜体 / 删除线
- --------------------------------------------------------- */
.PlaygroundEditorThemetextBold {
font-weight: 700;
color: var(--zhang-tx);
}
.PlaygroundEditorThemetextItalic {
font-style: italic;
color: var(--zhang-tx);
}
/* ---------------------------------------------------------
- 高亮/标记 — Zhang 黄色标记
- --------------------------------------------------------- */
.PlaygroundEditorThemetextHighlight {
background: var(--zhang-mark-bg);
border-radius: var(--zhang-radius);
padding: 0 2px;
}
.PlaygroundEditorThememark {
background: var(--zhang-mark-bg);
border-radius: var(--zhang-radius);
padding: 0 2px;
}
/* ---------------------------------------------------------
- 分割线 — Zhang 灰色虚线
- --------------------------------------------------------- */
.PlaygroundEditorTheme__hr:after {
background: transparent;
border-bottom: 2px dashed var(--zhang-border-color);
height: 0 !important;
}
/* ---------------------------------------------------------
- 列表 — Zhang 风格
- --------------------------------------------------------- */
.PlaygroundEditorThemelistItem {
line-height: 1.8;
}
.PlaygroundEditorThemelistItemChecked {
color: var(--zhang-tx-3);
text-decoration: line-through;
}
.PlaygroundEditorThemelistItemChecked:before {
background-color: var(--zhang-h4);
border-color: var(--zhang-h4);
}
.PlaygroundEditorThemelistItemUnchecked:before {
border-color: var(--zhang-tx-3);
}
.PlaygroundEditorTheme__listItemUnchecked:hover:before {
border-color: var(--zhang-primary);
}
/* 嵌套列表导轨线 */
.PlaygroundEditorTheme__nestedListItem:after {
background-color: var(--zhang-border-color) !important;
}
/* ============================================================
- §5 EditorJS 编辑器 — Zhang 风格适配
- ============================================================ */
.ce-paragraph {
color: var(--zhang-tx);
line-height: 1.85;
font-family: var(--zhang-font);
}
.ce-header {
color: var(--zhang-tx);
}
/* 工具栏 */
.ce-toolbarplus,
.ce-toolbarsettings-btn {
color: var(--zhang-tx-2);
}
.ce-toolbarplus:hover,
.ce-toolbarsettings-btn:hover {
color: var(--zhang-primary);
background-color: var(--zhang-hover2);
}
/* 弹出菜单 */
.ce-popover {
background-color: var(--zhang-paper);
border: 1px solid var(--zhang-border-color);
box-shadow: var(--zhang-shadow-md);
border-radius: var(--zhang-radius);
}
.ce-popover-item:hover {
background-color: var(--zhang-hover2);
}
.ce-popover-itemtitle {
color: var(--zhang-tx);
}
.ce-popover-itemicon {
color: var(--zhang-tx-3);
}
/* 内联工具栏 */
.ce-inline-toolbar {
background-color: var(--zhang-paper);
border: 1px solid var(--zhang-border-color);
box-shadow: var(--zhang-shadow-md);
border-radius: var(--zhang-radius);
}
/* 深色模式 EditorJS */
.dark .ce-popover,
.dark .ce-inline-toolbar {
background-color: var(--zhang-bg-2);
border-color: var(--zhang-border);
}
.dark .ce-toolbarplus,
.dark .ce-toolbarsettings-btn {
color: var(--zhang-tx-2);
}
/* ============================================================
- §6 表格 — Zhang 风格
- ============================================================ */
.PlaygroundEditorThemetableCell {
border-color: var(--zhang-table-border) !important;
min-width: 1em;
}
.PlaygroundEditorThemetableCellHeader {
background-color: var(--zhang-table-th-bg);
color: var(--zhang-primary);
font-weight: bold;
text-align: center;
}
.PlaygroundEditorThemetableCell:hover {
background: var(--zhang-hover2) !important;
}
.dark .PlaygroundEditorThemetableCell:hover {
background: rgba(255, 255, 255, 0.05) !important;
}
/* EditorJS 表格 */
.tc-wrap {
--color-border: var(--zhang-table-border);
--color-background: var(--zhang-bg-2);
}
.tc-cell {
border-color: var(--zhang-table-border);
}
/* ============================================================
- §7 画布 (React Flow) — Zhang 风格
- ============================================================ */
.react-flowpane {
background-color: var(--zhang-bg-2) !important;
}
.dark .react-flowpane {
background-color: var(--zhang-bg) !important;
}
.react-flow__node {
background-color: var(--zhang-paper) !important;
border: 1px solid var(--zhang-border-color);
border-radius: 8px;
}
body .hoverable-react-flowhandle {
border-color: var(--zhang-primary);
background-color: var(--zhang-paper);
}
body .hoverable-react-flowhandle:hover {
background-color: var(--zhang-primary);
border-color: var(--zhang-paper);
}
.react-flow__node.selected {
box-shadow: 0 0 0 2px var(--zhang-primary);
}
.react-flowedge-path {
stroke: var(--zhang-graph-line);
}
.react-flowedge.selected .react-flow__edge-path {
stroke: var(--zhang-graph-ref-line);
}
/* ============================================================
- §8 深色模式代码高亮 (全局)
- ============================================================ */
.dark pre {
background: var(--zhang-bg-2);
color: var(--zhang-tx);
}
.dark .hljs-comment,
.dark .hljs-quote { color: var(--zhang-tx-3); }
.dark .hljs-variable,
.dark .hljs-template-variable,
.dark .hljs-attribute,
.dark .hljs-tag,
.dark .hljs-name,
.dark .hljs-regexp,
.dark .hljs-link,
.dark .hljs-selector-id,
.dark .hljs-selector-class { color: var(--zhang-h1); }
.dark .hljs-number,
.dark .hljs-meta,
.dark .hljs-built_in,
.dark .hljs-builtin-name,
.dark .hljs-literal,
.dark .hljs-type,
.dark .hljs-params { color: var(--zhang-h2); }
.dark .hljs-string,
.dark .hljs-symbol,
.dark .hljs-bullet { color: var(--zhang-h4); }
.dark .hljs-title,
.dark .hljs-section { color: var(--zhang-h3); }
.dark .hljs-keyword,
.dark .hljs-selector-tag { color: var(--zhang-h6); }
/* ============================================================
- §9 页面与布局 — Zhang 风格
- ============================================================ */
html.flow-page {
background-color: var(--zhang-paper) !important;
}
.note-detail-body {
background-color: var(--zhang-bg);
}
.sidebar-left,
.sidebar-right {
background-color: var(--zhang-bg-2);
border-color: var(--zhang-border);
}
.cardListItem {
background-color: var(--zhang-paper);
border: 1px solid var(--zhang-border-color);
border-radius: var(--zhang-radius);
transition: border-color 0.15s ease;
box-shadow: var(--zhang-shadow-sm);
}
.cardListItem:hover {
border-color: var(--zhang-primary);
}
/* ============================================================
- §10 搜索高亮 — Zhang 风格
- ============================================================ */
::highlight(keywordHighlight) {
background-color: var(--zhang-mark-bg);
color: var(--zhang-tx);
}
::highlight(activeHighlight) {
background-color: rgba(255, 0, 0, 0.2);
color: var(--zhang-tx);
}
::highlight(cardListKeywordHighlight) {
background-color: var(--zhang-mark-bg);
}
::highlight(timelineKeywordHighlight) {
background-color: var(--zhang-mark-bg);
}
::highlight(timelineKeywordActiveHighlight) {
background-color: rgba(255, 0, 0, 0.2);
}
/* ============================================================
- §11 动画与过渡 — Zhang 风格
- ============================================================ */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fadeIn { animation: fadeIn 0.3s ease-in-out; }
/* 高亮闪烁 — 使用主色 */
@keyframes highlight-flash {
0% { background-color: transparent; }
20% { background-color: rgba(207, 86, 89, 0.15); }
100% { background-color: transparent; }
}
.highlight-flash { animation: highlight-flash 1.5s ease-in-out; }
/* AI 引用闪烁 */
@keyframes ai-note-cite-flash {
0% { background-color: transparent; outline-color: transparent; }
15% { background-color: rgba(207, 86, 89, 0.15); outline: 2px solid rgba(207, 86, 89, 0.4); }
100% { background-color: transparent; outline-color: transparent; }
}
.ai-note-cite-flash {
animation: ai-note-cite-flash 1.8s ease-in-out 1;
border-radius: var(--zhang-radius);
}
/* 搜索高亮脉冲动画 (Zhang 特征) */
@keyframes zhang-search-pulse {
0% { color: white; background-color: var(--zhang-primary); }
100% { color: white; background-color: var(--zhang-hover); }
}
/* ============================================================
- §12 打印样式
- ============================================================ */
@media print {
:root {
--zhang-bg: #fff;
--zhang-tx: #202124;
}
/* 打印时保留 [[ ]] 括号和红色 */
.cdx-mention::before { content: '[['; }
.cdx-mention::after { content: ']]'; }
.mention-span::before { content: '[['; }
.mention-span::after { content: ']]'; }
/* 打印时去掉标题衬底 */
.PlaygroundEditorThemeh1::after,
.PlaygroundEditorThemeh2::after,
.PlaygroundEditorThemeh3::after,
.PlaygroundEditorThemeh4::after,
.PlaygroundEditorThemeh5::after,
.PlaygroundEditorThemeh6::after {
display: none;
}
}
