/* @settings name: 🐱 Phycat theme Info & Help name.zh: 🐱 Phycat 主题帮助信息 id: phycat-info settings: - id: info-intro type: info-text markdown: true description: "### Phycat Theme \n A vibrant, glassmorphism aesthetic theme for Obsidian. \n\n [Github Repository](https://github.com/sumruler/obsidian-theme-phycat) | [Report Issue](https://github.com/sumruler/obsidian-theme-phycat/issues)| [Support](https://www.phycat.cn/donate.html)" description.zh: "### Phycat 主题 \n 一个充满活力、具有玻璃拟态美感的 Obsidian 主题。\n\n [Github 仓库](https://github.com/sumruler/obsidian-theme-phycat) | [反馈问题](https://github.com/sumruler/obsidian-theme-phycat/issues)| [打赏支持](https://www.phycat.cn/donate.html)" - id: info-font-tip type: info-text markdown: true description: "**💡 Font Recommendation:** \n This theme is optimized for [**LXGW WenKai**](https://github.com/lxgw/LxgwWenKai). Please install it for the best experience." description.zh: "**💡 字体建议：** \n 本主题针对 [**霞鹜文楷 (LXGW WenKai)**](https://github.com/lxgw/LxgwWenKai) 进行了优化，建议安装该字体以获得最佳体验。" - id: info-view-tip type: info-text markdown: true description: "**🪟 Pro Tip: Independent Settings View** \n Press `Ctrl+P` and search for `Style Settings: Show style settings view`. This opens the settings in a separate pane instead of a modal, preventing it from blocking your view." description.zh: "**🪟 技巧：独立设置窗口** \n 按下 `Ctrl+P` 呼出命令面板，搜索 `Style Settings: Show style settings view`。这可以单独打开一个设置面板，避免全屏弹窗遮挡你的笔记。" - id: info-hover-tip type: info-text markdown: true description: "**🧩 Plugin Recommendation: Hover Editor** \n It is highly recommended to install the [**Hover Editor**](https://github.com/nothingislost/obsidian-hover-editor) plugin. You can turn the settings pane mentioned above into a floating window to tweak the theme in real-time." description.zh: "**🧩 插件建议：Hover Editor** \n 强烈建议安装 [**Hover Editor**](https://github.com/nothingislost/obsidian-hover-editor) 插件。配合上面的独立设置面板，你可以将其转换为悬浮窗口，边看笔记边实时调整主题效果。" */ /* @settings name: 🎨 Phycat color settings name.zh: 🎨 Phycat 配色设置 id: phycat-colors settings: - id: color-help type: info-text markdown: true description: "Choose light and dark colors independently. Import a JSON preset with Style Settings → Import. Advanced sections are collapsed. Native Appearance accent overrides the theme primary for both interactive controls and primary-colored decoration. Reset it to use the preset primary. Other palette colors remain independent." description.zh: "分别选择亮色、暗色颜色。通过 Style Settings → Import 导入 JSON 配色预设，再用调色盘修改。高级项目默认折叠。外观中的主题色优先控制交互和所有使用主色的装饰；重置后使用预设主色。其他调色盘颜色仍独立设置。标题文字颜色保留在 Phycat 标题设置中。" - id: color-group-core title: Core palette title.zh: 基础配色 type: heading level: 2 collapsed: false - id: primary-color title: Default primary color (preset) title.zh: 默认主色（预设） type: variable-themed-color format: hex opacity: false default-light: '#ff7096' default-dark: '#ff5555' description: Used when Appearance → Accent color is reset. A custom native accent takes priority for both interactive controls and all decoration that uses the primary color. description.zh: 外观 → 主题色重置时使用此颜色；自定义原生主题色后，交互控件和所有使用主色的装饰优先跟随原生主题色。 alt-format: - id: phycat-accent format: hsl-split - id: secondary-color title: Secondary color title.zh: 辅助色 type: variable-themed-color format: hex opacity: false default-light: '#bd93f9' default-dark: '#bd93f9' - id: bg-color title: Base background title.zh: 基础背景 type: variable-themed-color format: hex opacity: false default-light: '#fff7fa' default-dark: '#282a36' - id: text-color title: Main text title.zh: 主要文字 type: variable-themed-color format: hex opacity: false default-light: '#1c1719' default-dark: '#f8f8f2' - id: text-color-secondary title: Secondary text title.zh: 次要文字 type: variable-themed-color format: hex opacity: false default-light: '#3f3a3b' default-dark: '#d0d0d0' - id: border-color title: Border title.zh: 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 112, 150, 0.4)' default-dark: 'rgb(68, 71, 90)' - id: select-text-bg-color title: Text selection title.zh: 文字选区 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(220, 227, 233, 0.714)' default-dark: 'rgba(255, 16, 16, 0.467)' - id: checkmark-color title: Checkmark title.zh: 复选框对勾 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: color-group-surfaces title: Surfaces and controls title.zh: 界面与交互 type: heading level: 2 collapsed: true - id: background-modifier-hover title: Hover overlay title.zh: 悬停遮罩 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.05)' default-dark: 'rgba(255, 255, 255, 0.05)' - id: background-modifier-active-hover title: Active hover overlay title.zh: 激活悬停遮罩 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.1)' default-dark: 'rgba(255, 255, 255, 0.1)' - id: background-modifier-error title: Error background title.zh: 错误状态背景 type: variable-themed-color format: hex opacity: false default-light: '#d32f2f' default-dark: '#ff5555' - id: background-modifier-success title: Success background title.zh: 成功状态背景 type: variable-themed-color format: hex opacity: false default-light: '#388e3c' default-dark: '#50fa7b' - id: table-bg title: Table background title.zh: 表格背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.4)' default-dark: 'rgba(255, 255, 255, 0.02)' - id: table-border-inner title: Table grid title.zh: 表格网格线 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.06)' default-dark: 'rgba(255, 255, 255, 0.05)' - id: table-row-hover-bg title: Table row hover title.zh: 表格行悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.03)' default-dark: 'rgba(255, 255, 255, 0.03)' - id: mermaid-text-color title: Diagram text (dark) title.zh: 流程图文字（暗色） type: variable-themed-color format: hex opacity: false default-light: '#1c1719' default-dark: '#000000' - id: checkbox-bg-unchecked title: Unchecked checkbox background title.zh: 未选中复选框背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 112, 150, 0.1)' default-dark: 'rgba(255, 255, 255, 0.05)' - id: checkbox-border-unchecked title: Unchecked checkbox border title.zh: 未选中复选框边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 112, 150, 0.5)' default-dark: 'rgba(255, 255, 255, 0.3)' - id: table-cell-hover-text title: Table cell hover text (dark) title.zh: 单元格悬停文字（暗色） type: variable-themed-color format: hex opacity: false default-light: '#ff7096' default-dark: '#ffffff' - id: phycat-modal-box-shadow title: Modal base shadow title.zh: 弹窗基础阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.4)' default-dark: 'rgba(0, 0, 0, 0.4)' - id: phycat-modal-background title: Modal · Background title.zh: 弹窗 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.85)' default-dark: 'rgba(20, 20, 25, 0.85)' - id: phycat-modal-border title: Modal · Border title.zh: 弹窗 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.05)' default-dark: 'rgba(255, 255, 255, 0.08)' - id: phycat-modal-box-shadow-2 title: Modal shadow (light) / outline (dark) title.zh: 弹窗阴影（亮色）／轮廓（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.1)' default-dark: 'rgba(0, 0, 0, 0.2)' - id: phycat-modal-box-shadow-3 title: Modal outer shadow (dark) title.zh: 弹窗外部阴影（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.6)' default-dark: 'rgba(0, 0, 0, 0.6)' - id: phycat-settings-nav-active-color title: Settings navigation · Text title.zh: 设置导航 · 文字 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-database-row-hover-border-bottom title: Database row · Hover border-bottom title.zh: 数据库行 · 悬停border-bottom type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.03)' default-dark: 'rgba(255, 255, 255, 0.03)' - id: scrollbar-thumb-bg title: Scrollbar thumb title.zh: 滚动条滑块 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.1)' default-dark: 'rgba(255, 255, 255, 0.1)' - id: scrollbar-active-thumb-bg title: Scrollbar active thumb title.zh: 滚动条激活滑块 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.2)' default-dark: 'rgba(255, 255, 255, 0.2)' - id: phycat-cards-border title: Sidebar tab border (light) title.zh: 侧栏标签边框（亮色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.1)' default-dark: 'rgba(255, 255, 255, 0.08)' - id: phycat-cards-box-shadow title: Tab outer shadow (light) title.zh: 标签外部阴影（亮色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.15)' default-dark: 'rgba(0, 0, 0, 0.4)' - id: phycat-cards-box-shadow-2 title: Tab inner highlight (light) title.zh: 标签内部高光（亮色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.15)' default-dark: 'rgba(255, 255, 255, 0.15)' - id: phycat-cards-modal-background title: Card modal · Background title.zh: 卡片模式弹窗 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.6)' default-dark: 'rgba(30, 30, 30, 0.6)' - id: phycat-cards-modal-border title: Card modal · Border title.zh: 卡片模式弹窗 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.4)' default-dark: 'rgba(255, 255, 255, 0.08)' - id: phycat-cards-modal-box-shadow title: Card modal · Shadow title.zh: 卡片模式弹窗 · 阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.05)' default-dark: 'rgba(0, 0, 0, 0.5)' - id: phycat-cards-modal-box-shadow-2 title: Card modal · Shadow 2 title.zh: 卡片模式弹窗 · 阴影 2 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.5)' default-dark: 'rgba(255, 255, 255, 0.5)' - id: phycat-cards-background title: Card layout · Background title.zh: 卡片布局 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.03)' default-dark: 'rgba(255, 255, 255, 0.03)' - id: phycat-cards-border-2 title: Sidebar tab border (dark) title.zh: 侧栏标签边框（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.05)' default-dark: 'rgba(255, 255, 255, 0.05)' - id: phycat-cards-active-border title: Card layout · Border title.zh: 卡片布局 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.1)' default-dark: 'rgba(255, 255, 255, 0.1)' - id: phycat-cards-active-box-shadow title: Card layout · Shadow title.zh: 卡片布局 · 阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.3)' default-dark: 'rgba(0, 0, 0, 0.3)' - id: color-group-decoration title: Heading decoration and effects title.zh: 标题装饰与特效 type: heading level: 2 collapsed: true - id: glow-color title: Glow title.zh: 光晕 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 112, 150, 0.5)' default-dark: 'rgba(255, 85, 85, 0.6)' - id: h1-underline-color title: H1 underline (dark) title.zh: H1 下划线（暗色） type: variable-themed-color format: hex opacity: false default-light: '#ff7096' default-dark: '#ff5555' - id: hover-background-color title: Quote hover tint title.zh: 引用块悬停底色 type: variable-themed-color format: hex opacity: false default-light: '#ff7096' default-dark: '#ff5555' - id: light-deep title: Bold text tint (light mode) title.zh: 加粗文字深色（亮色模式） type: variable-themed-color format: hex opacity: false default-light: '#e91e63' default-dark: '#ff5555' - id: light-light title: Heading accent tint (light mode) title.zh: 标题浅色装饰（亮色模式） type: variable-themed-color format: hex opacity: false default-light: '#ffb7cd' default-dark: '#ff5555' - id: light-lighter title: Settings tint (light mode) title.zh: 设置项浅色（亮色模式） type: variable-themed-color format: hex opacity: false default-light: '#ffe3ec' default-dark: '#ff5555' - id: h2-shadow-color title: H2 shadow title.zh: H2 阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(61, 184, 211, 0.15)' default-dark: 'rgba(0, 0, 0, 0)' - id: h2-shadow-hover title: H2 hover shadow title.zh: H2 悬停阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(61, 184, 211, 0.35)' default-dark: 'rgba(0, 0, 0, 0)' - id: phycat-h2-gradient-start title: H2 gradient start (light) title.zh: H2 渐变起点（亮色） type: variable-themed-color format: hex opacity: false default-light: '#ffb7cd' default-dark: '#ff5555' - id: phycat-h2-gradient-middle title: H2 gradient center (light) title.zh: H2 渐变中点（亮色） type: variable-themed-color format: hex opacity: false default-light: '#ff7096' default-dark: '#ff5555' - id: phycat-h2-gradient-end title: H2 gradient end (light) title.zh: H2 渐变终点（亮色） type: variable-themed-color format: hex opacity: false default-light: '#ffb7cd' default-dark: '#ff5555' - id: phycat-h2-radial-color title: H2 radial glow (dark) title.zh: H2 径向光晕（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0)' default-dark: 'rgba(255, 85, 85, 0.15)' - id: phycat-h2-radial-hover title: H2 radial glow on hover (dark) title.zh: H2 悬停径向光晕（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0)' default-dark: 'rgba(255, 85, 85, 0.25)' - id: phycat-h2-text-shadow title: H2 text shadow (light) title.zh: H2 文字阴影（亮色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0)' default-dark: 'rgba(0, 0, 0, 0)' - id: phycat-heading-indicator-color title: Heading collapse icon · Text title.zh: 标题折叠图标 · 文字 type: variable-themed-color format: hex opacity: false default-light: '#eeeeee' default-dark: '#eeeeee' - id: phycat-h2-color title: H2 capsule text title.zh: H2 胶囊标题文字 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-h2-color-2 title: H2 formatting marks title.zh: H2 编辑模式井号 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.6)' default-dark: 'rgba(255, 255, 255, 0.6)' - id: phycat-h5-decoration-background title: H5 · Background title.zh: H5 · 背景 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-h1-box-shadow title: H1 · Shadow title.zh: H1 · 阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 85, 85, 0.4)' default-dark: 'rgba(255, 85, 85, 0.4)' - id: phycat-h2-background title: H2 · Background title.zh: H2 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.02)' default-dark: 'rgba(255, 255, 255, 0.02)' - id: phycat-h2-border-top title: H2 · Top border title.zh: H2 · 顶部边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.08)' default-dark: 'rgba(255, 255, 255, 0.08)' - id: phycat-h2-hover-box-shadow title: H2 · Hover Shadow title.zh: H2 · 悬停阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.3)' default-dark: 'rgba(0, 0, 0, 0.3)' - id: color-group-code title: Code and syntax title.zh: 代码与语法高亮 type: heading level: 2 collapsed: true - id: code-block-bg title: Code block background title.zh: 代码块背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgb(255, 244, 248)' default-dark: 'rgb(40, 42, 54)' - id: code-block-header-bg title: Code block header title.zh: 代码块顶栏 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 112, 150, 0.08)' default-dark: 'rgba(0, 0, 0, 0)' - id: code-normal title: Code text title.zh: 代码正文 type: variable-themed-color format: hex opacity: false default-light: '#546e7a' default-dark: '#f8f8f2' - id: code-keyword title: Keywords title.zh: 关键词 type: variable-themed-color format: hex opacity: false default-light: '#d81b60' default-dark: '#ff79c6' - id: code-function title: Functions title.zh: 函数 type: variable-themed-color format: hex opacity: false default-light: '#8e24aa' default-dark: '#50fa7b' - id: code-string title: Strings title.zh: 字符串 type: variable-themed-color format: hex opacity: false default-light: '#2e7d32' default-dark: '#f1fa8c' - id: code-comment title: Comments title.zh: 注释 type: variable-themed-color format: hex opacity: false default-light: '#b0bec5' default-dark: '#6272a4' - id: code-property title: Properties title.zh: 属性 type: variable-themed-color format: hex opacity: false default-light: '#00897b' default-dark: '#66d9ef' - id: code-value title: Values title.zh: 数值 type: variable-themed-color format: hex opacity: false default-light: '#f57c00' default-dark: '#bd93f9' - id: code-punctuation title: Punctuation title.zh: 标点 type: variable-themed-color format: hex opacity: false default-light: '#78909c' default-dark: '#f8f8f2' - id: code-tag title: Tags title.zh: 标签 type: variable-themed-color format: hex opacity: false default-light: '#d81b60' default-dark: '#ff79c6' - id: code-operator title: Operators title.zh: 运算符 type: variable-themed-color format: hex opacity: false default-light: '#8e24aa' default-dark: '#ff79c6' - id: code-important title: Important tokens title.zh: 重要语法 type: variable-themed-color format: hex opacity: false default-light: '#d81b60' default-dark: '#ff79c6' - id: phycat-copy-button-hover-color title: Copy code button · Hover Text title.zh: 代码复制按钮 · 悬停文字 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-code-block-background title: Code output background (dark) title.zh: 代码输出背景（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgb(247, 247, 247)' default-dark: 'rgba(255, 255, 255, 0.03)' - id: phycat-code-block-border-left title: Code block · border-left title.zh: 代码块 · border-left type: variable-themed-color format: rgb opacity: true default-light: 'rgba(189, 147, 249, 0.3)' default-dark: 'rgba(189, 147, 249, 0.3)' - id: phycat-code-block-border-right title: Code block · border-right title.zh: 代码块 · border-right type: variable-themed-color format: rgb opacity: true default-light: 'rgba(189, 147, 249, 0.3)' default-dark: 'rgba(189, 147, 249, 0.3)' - id: phycat-code-block-border-top title: Code block · Top border title.zh: 代码块 · 顶部边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(189, 147, 249, 0.3)' default-dark: 'rgba(189, 147, 249, 0.3)' - id: phycat-code-block-background-2 title: Code fence header (dark) title.zh: 源码代码块顶栏（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.08)' default-dark: 'rgba(255, 255, 255, 0.08)' - id: phycat-code-block-border-bottom title: Code block · border-bottom title.zh: 代码块 · border-bottom type: variable-themed-color format: rgb opacity: true default-light: 'rgba(189, 147, 249, 0.3)' default-dark: 'rgba(189, 147, 249, 0.3)' - id: phycat-code-block-background-3 title: Active code line (dark) title.zh: 源码当前代码行（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.05)' default-dark: 'rgba(255, 255, 255, 0.05)' - id: phycat-code-block-hover-color title: Code block · Hover Text title.zh: 代码块 · 悬停文字 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-code-block-hover-text-fill title: Code block · Hover Text fill title.zh: 代码块 · 悬停文字填充 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: color-group-callout title: Callout colors title.zh: 提示框配色 type: heading level: 2 collapsed: true - id: color-callout-note title: note title.zh: 笔记 type: heading level: 3 collapsed: true - id: phycat-callout-note-background title: Callout note · Background title.zh: 提示框：笔记 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(48, 107, 214, 0.1)' default-dark: 'rgba(189, 147, 249, 0.1)' - id: phycat-callout-note-title-color title: Callout note · Title Text title.zh: 提示框：笔记 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#6c5ce7' default-dark: '#bd93f9' - id: phycat-callout-note-hover-background title: Callout note · Hover Background title.zh: 提示框：笔记 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(108, 92, 231, 0.15)' default-dark: 'rgba(189, 147, 249, 0.2)' - id: phycat-callout-note-watermark-color title: Callout note · Watermark Text title.zh: 提示框：笔记 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#6c5ce7' default-dark: '#bd93f9' - id: phycat-callout-note-border title: Callout note · Border title.zh: 提示框：笔记 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(189, 147, 249, 0.3)' default-dark: 'rgba(189, 147, 249, 0.3)' - id: color-callout-info title: info title.zh: 信息 type: heading level: 3 collapsed: true - id: phycat-callout-info-watermark-color title: Callout info · Watermark Text title.zh: 提示框：信息 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#6c5ce7' default-dark: '#74c0fc' - id: phycat-callout-info-border title: Callout info · Border title.zh: 提示框：信息 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(116, 192, 252, 0.3)' default-dark: 'rgba(116, 192, 252, 0.3)' - id: phycat-callout-info-background title: Callout info · Background title.zh: 提示框：信息 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(116, 192, 252, 0.1)' default-dark: 'rgba(116, 192, 252, 0.1)' - id: phycat-callout-info-title-color title: Callout info · Title Text title.zh: 提示框：信息 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#74c0fc' default-dark: '#74c0fc' - id: color-callout-todo title: todo title.zh: 待办 type: heading level: 3 collapsed: true - id: phycat-callout-todo-watermark-color title: Callout todo · Watermark Text title.zh: 提示框：待办 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#6c5ce7' default-dark: '#50fa7b' - id: phycat-callout-todo-border title: Callout todo · Border title.zh: 提示框：待办 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(80, 250, 123, 0.3)' default-dark: 'rgba(80, 250, 123, 0.3)' - id: phycat-callout-todo-background title: Callout todo · Background title.zh: 提示框：待办 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(80, 250, 123, 0.1)' default-dark: 'rgba(80, 250, 123, 0.1)' - id: phycat-callout-todo-title-color title: Callout todo · Title Text title.zh: 提示框：待办 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#50fa7b' default-dark: '#50fa7b' - id: color-callout-tip title: tip title.zh: 提示 type: heading level: 3 collapsed: true - id: phycat-callout-tip-background title: Callout tip · Background title.zh: 提示框：提示 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 184, 148, 0.1)' default-dark: 'rgba(139, 233, 253, 0.1)' - id: phycat-callout-tip-title-color title: Callout tip · Title Text title.zh: 提示框：提示 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#00b894' default-dark: '#8be9fd' - id: phycat-callout-tip-hover-background title: Callout tip · Hover Background title.zh: 提示框：提示 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 184, 148, 0.15)' default-dark: 'rgba(139, 233, 253, 0.2)' - id: phycat-callout-tip-watermark-color title: Callout tip · Watermark Text title.zh: 提示框：提示 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#00b894' default-dark: '#8be9fd' - id: phycat-callout-tip-border title: Callout tip · Border title.zh: 提示框：提示 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(139, 233, 253, 0.3)' default-dark: 'rgba(139, 233, 253, 0.3)' - id: color-callout-warning title: warning title.zh: 警告 type: heading level: 3 collapsed: true - id: phycat-callout-warning-background title: Callout warning · Background title.zh: 提示框：警告 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(253, 203, 110, 0.15)' default-dark: 'rgba(255, 184, 108, 0.1)' - id: phycat-callout-warning-title-color title: Callout warning · Title Text title.zh: 提示框：警告 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#e17055' default-dark: '#ffb86c' - id: phycat-callout-warning-hover-background title: Callout warning · Hover Background title.zh: 提示框：警告 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(253, 203, 110, 0.2)' default-dark: 'rgba(255, 184, 108, 0.2)' - id: phycat-callout-warning-watermark-color title: Callout warning · Watermark Text title.zh: 提示框：警告 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#e17055' default-dark: '#ffb86c' - id: phycat-callout-warning-border title: Callout warning · Border title.zh: 提示框：警告 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 184, 108, 0.3)' default-dark: 'rgba(255, 184, 108, 0.3)' - id: color-callout-important title: important title.zh: 重要 type: heading level: 3 collapsed: true - id: phycat-callout-important-background title: Callout important · Background title.zh: 提示框：重要 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 118, 117, 0.12)' default-dark: 'rgba(255, 85, 85, 0.1)' - id: phycat-callout-important-title-color title: Callout important · Title Text title.zh: 提示框：重要 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#ff7675' default-dark: '#ff5555' - id: phycat-callout-important-hover-background title: Callout important · Hover Background title.zh: 提示框：重要 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 118, 117, 0.18)' default-dark: 'rgba(255, 85, 85, 0.2)' - id: phycat-callout-important-watermark-color title: Callout important · Watermark Text title.zh: 提示框：重要 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#ff7675' default-dark: '#ff5555' - id: phycat-callout-important-border title: Callout important · Border title.zh: 提示框：重要 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 85, 85, 0.3)' default-dark: 'rgba(255, 85, 85, 0.3)' - id: color-callout-caution title: caution title.zh: 注意 type: heading level: 3 collapsed: true - id: phycat-callout-caution-background title: Callout caution · Background title.zh: 提示框：注意 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(214, 48, 49, 0.08)' default-dark: 'rgba(214, 48, 49, 0.08)' - id: phycat-callout-caution-title-color title: Callout caution · Title Text title.zh: 提示框：注意 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#d63031' - id: phycat-callout-caution-hover-background title: Callout caution · Hover Background title.zh: 提示框：注意 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(214, 48, 49, 0.12)' default-dark: 'rgba(214, 48, 49, 0.12)' - id: phycat-callout-caution-watermark-color title: Callout caution · Watermark Text title.zh: 提示框：注意 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#d63031' - id: color-callout-bug title: bug title.zh: 漏洞 type: heading level: 3 collapsed: true - id: phycat-callout-bug-watermark-color title: Callout bug · Watermark Text title.zh: 提示框：漏洞 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#ff5555' - id: phycat-callout-bug-border title: Callout bug · Border title.zh: 提示框：漏洞 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 85, 85, 0.4)' default-dark: 'rgba(255, 85, 85, 0.4)' - id: phycat-callout-bug-background title: Callout bug · Background title.zh: 提示框：漏洞 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 85, 85, 0.1)' default-dark: 'rgba(255, 85, 85, 0.1)' - id: phycat-callout-bug-title-color title: Callout bug · Title Text title.zh: 提示框：漏洞 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#ff5555' default-dark: '#ff5555' - id: color-callout-success title: success title.zh: 成功 type: heading level: 3 collapsed: true - id: phycat-callout-success-background title: Callout success · Background title.zh: 提示框：成功 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(85, 239, 196, 0.15)' default-dark: 'rgba(85, 239, 196, 0.1)' - id: phycat-callout-success-title-color title: Callout success · Title Text title.zh: 提示框：成功 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#00b894' default-dark: '#55efc4' - id: phycat-callout-success-hover-background title: Callout success · Hover Background title.zh: 提示框：成功 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(85, 239, 196, 0.25)' default-dark: 'rgba(85, 239, 196, 0.15)' - id: phycat-callout-success-watermark-color title: Callout success · Watermark Text title.zh: 提示框：成功 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#00b894' default-dark: '#55efc4' - id: phycat-callout-success-border title: Callout success · Border title.zh: 提示框：成功 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(85, 239, 196, 0.3)' default-dark: 'rgba(85, 239, 196, 0.3)' - id: color-callout-example title: example title.zh: 示例 type: heading level: 3 collapsed: true - id: phycat-callout-example-background title: Callout example · Background title.zh: 提示框：示例 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(162, 155, 254, 0.15)' default-dark: 'rgba(255, 121, 198, 0.1)' - id: phycat-callout-example-title-color title: Callout example · Title Text title.zh: 提示框：示例 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#6c5ce7' default-dark: '#ff79c6' - id: phycat-callout-example-hover-background title: Callout example · Hover Background title.zh: 提示框：示例 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(162, 155, 254, 0.25)' default-dark: 'rgba(255, 121, 198, 0.15)' - id: phycat-callout-example-watermark-color title: Callout example · Watermark Text title.zh: 提示框：示例 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#6c5ce7' default-dark: '#ff79c6' - id: phycat-callout-example-border title: Callout example · Border title.zh: 提示框：示例 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 121, 198, 0.3)' default-dark: 'rgba(255, 121, 198, 0.3)' - id: color-callout-quote title: quote title.zh: 引用 type: heading level: 3 collapsed: true - id: phycat-callout-quote-background title: Callout quote · Background title.zh: 提示框：引用 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(178, 190, 195, 0.15)' default-dark: 'rgba(223, 230, 233, 0.05)' - id: phycat-callout-quote-title-color title: Callout quote · Title Text title.zh: 提示框：引用 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#636e72' default-dark: '#dfe6e9' - id: phycat-callout-quote-hover-background title: Callout quote · Hover Background title.zh: 提示框：引用 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(178, 190, 195, 0.25)' default-dark: 'rgba(178, 190, 195, 0.25)' - id: phycat-callout-quote-watermark-color title: Callout quote · Watermark Text title.zh: 提示框：引用 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#636e72' default-dark: '#dfe6e9' - id: phycat-callout-quote-border title: Callout quote · Border title.zh: 提示框：引用 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(223, 230, 233, 0.2)' default-dark: 'rgba(223, 230, 233, 0.2)' - id: color-callout-danger title: danger title.zh: 危险 type: heading level: 3 collapsed: true - id: phycat-callout-danger-background title: Callout danger · Background title.zh: 提示框：危险 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(214, 48, 49, 0.15)' default-dark: 'rgba(255, 85, 85, 0.1)' - id: phycat-callout-danger-border-left title: Callout danger · Left border title.zh: 提示框：危险 · 左侧边框 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#d63031' - id: phycat-callout-danger-title-color title: Callout danger · Title Text title.zh: 提示框：危险 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#ff5555' - id: phycat-callout-danger-hover-background title: Callout danger · Hover Background title.zh: 提示框：危险 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(214, 48, 49, 0.2)' default-dark: 'rgba(214, 48, 49, 0.2)' - id: phycat-callout-danger-watermark-color title: Callout danger · Watermark Text title.zh: 提示框：危险 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#ff5555' - id: phycat-callout-danger-border title: Callout danger · Border title.zh: 提示框：危险 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 85, 85, 0.4)' default-dark: 'rgba(255, 85, 85, 0.4)' - id: phycat-callout-danger-box-shadow title: Callout danger · Shadow title.zh: 提示框：危险 · 阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 85, 85, 0.1)' default-dark: 'rgba(255, 85, 85, 0.1)' - id: color-callout-error title: error title.zh: 错误 type: heading level: 3 collapsed: true - id: phycat-callout-error-watermark-color title: Callout error · Watermark Text title.zh: 提示框：错误 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#d63031' default-dark: '#ff5555' - id: color-callout-failure title: failure title.zh: 失败 type: heading level: 3 collapsed: true - id: phycat-callout-failure-background title: Callout failure · Background title.zh: 提示框：失败 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(45, 52, 54, 0.05)' default-dark: 'rgba(0, 0, 0, 0.2)' - id: phycat-callout-failure-title-color title: Callout failure · Title Text title.zh: 提示框：失败 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#c0392b' default-dark: '#fab1a0' - id: phycat-callout-failure-hover-background title: Callout failure · Hover Background title.zh: 提示框：失败 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(45, 52, 54, 0.1)' default-dark: 'rgba(45, 52, 54, 0.1)' - id: phycat-callout-failure-watermark-color title: Callout failure · Watermark Text title.zh: 提示框：失败 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#c0392b' default-dark: '#fab1a0' - id: phycat-callout-failure-border title: Callout failure · Border title.zh: 提示框：失败 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(179, 57, 57, 0.3)' default-dark: 'rgba(179, 57, 57, 0.3)' - id: color-callout-question title: question title.zh: 问题 type: heading level: 3 collapsed: true - id: phycat-callout-question-background title: Callout question · Background title.zh: 提示框：问题 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(253, 203, 110, 0.15)' default-dark: 'rgba(241, 250, 140, 0.1)' - id: phycat-callout-question-title-color title: Callout question · Title Text title.zh: 提示框：问题 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#f39c12' default-dark: '#f1fa8c' - id: phycat-callout-question-hover-background title: Callout question · Hover Background title.zh: 提示框：问题 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(253, 203, 110, 0.25)' default-dark: 'rgba(241, 250, 140, 0.15)' - id: phycat-callout-question-watermark-color title: Callout question · Watermark Text title.zh: 提示框：问题 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#f39c12' default-dark: '#f1fa8c' - id: phycat-callout-question-border title: Callout question · Border title.zh: 提示框：问题 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(241, 250, 140, 0.3)' default-dark: 'rgba(241, 250, 140, 0.3)' - id: color-callout-abstract title: abstract title.zh: 摘要 type: heading level: 3 collapsed: true - id: phycat-callout-abstract-background title: Callout abstract · Background title.zh: 提示框：摘要 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(129, 236, 236, 0.2)' default-dark: 'rgba(129, 236, 236, 0.1)' - id: phycat-callout-abstract-title-color title: Callout abstract · Title Text title.zh: 提示框：摘要 · 标题文字 type: variable-themed-color format: hex opacity: false default-light: '#00cec9' default-dark: '#81ecec' - id: phycat-callout-abstract-hover-background title: Callout abstract · Hover Background title.zh: 提示框：摘要 · 悬停背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(129, 236, 236, 0.3)' default-dark: 'rgba(129, 236, 236, 0.3)' - id: phycat-callout-abstract-watermark-color title: Callout abstract · Watermark Text title.zh: 提示框：摘要 · 水印文字 type: variable-themed-color format: hex opacity: false default-light: '#00cec9' default-dark: '#81ecec' - id: phycat-callout-abstract-border title: Callout abstract · Border title.zh: 提示框：摘要 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(129, 236, 236, 0.3)' default-dark: 'rgba(129, 236, 236, 0.3)' - id: color-callout-common title: Common callout surfaces title.zh: 通用 type: heading level: 3 collapsed: true - id: phycat-callout-common-title-background title: Default callout title background (light) title.zh: 通用提示框标题背景（亮色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.6)' default-dark: 'rgba(255, 255, 255, 0.6)' - id: phycat-callout-common-title-border title: Default callout title border (light) title.zh: 通用提示框标题边框（亮色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.05)' default-dark: 'rgba(0, 0, 0, 0.05)' - id: phycat-callout-common-background title: Callout common · Background title.zh: 提示框：通用 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.03)' default-dark: 'rgba(255, 255, 255, 0.03)' - id: phycat-callout-common-border title: Callout common · Border title.zh: 提示框：通用 · 边框 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.05)' default-dark: 'rgba(255, 255, 255, 0.05)' - id: phycat-callout-common-title-background-2 title: Callout title background (dark) title.zh: 提示框标题背景（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.08)' default-dark: 'rgba(255, 255, 255, 0.08)' - id: phycat-callout-common-title-border-2 title: Callout title border (dark) title.zh: 提示框标题边框（暗色） type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.1)' default-dark: 'rgba(255, 255, 255, 0.1)' - id: color-group-folders title: Rainbow folders title.zh: 彩虹文件夹 type: heading level: 2 collapsed: true - id: nav-c-pink title: Folder Pink title.zh: 文件夹：粉色 type: variable-themed-color format: hex opacity: false default-light: '#ff7096' default-dark: '#ff7096' - id: nav-c-cyan title: Folder Cyan title.zh: 文件夹：青色 type: variable-themed-color format: hex opacity: false default-light: '#3db8bf' default-dark: '#3db8bf' - id: nav-c-orange title: Folder Orange title.zh: 文件夹：橙色 type: variable-themed-color format: hex opacity: false default-light: '#f59e0b' default-dark: '#f59e0b' - id: nav-c-green title: Folder Green title.zh: 文件夹：绿色 type: variable-themed-color format: hex opacity: false default-light: '#11aa63' default-dark: '#11aa63' - id: nav-c-purple title: Folder Purple title.zh: 文件夹：紫色 type: variable-themed-color format: hex opacity: false default-light: '#a06eb4' default-dark: '#a06eb4' - id: nav-c-red title: Folder Red title.zh: 文件夹：红色 type: variable-themed-color format: hex opacity: false default-light: '#aa1141' default-dark: '#aa1141' - id: nav-c-blue title: Folder Blue title.zh: 文件夹：蓝色 type: variable-themed-color format: hex opacity: false default-light: '#1d4e89' default-dark: '#1d4e89' - id: color-group-details title: Advanced component colors title.zh: 高级组件颜色 type: heading level: 2 collapsed: true - id: phycat-interface-box-shadow title: Interface · Shadow title.zh: 界面 · 阴影 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.05)' default-dark: 'rgba(0, 0, 0, 0.05)' - id: phycat-task-color title: Canceled task symbol title.zh: 已取消任务符号 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-task-color-2 title: Completed task text title.zh: 已完成任务文字 type: variable-themed-color format: hex opacity: false default-light: '#888888' default-dark: '#888888' - id: phycat-blockquote-background title: Blockquote · Background title.zh: 引用块 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.2)' default-dark: 'rgba(0, 0, 0, 0.2)' - id: phycat-highlight-hover-color title: Highlight · Hover Text title.zh: 高亮文字 · 悬停文字 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#ffffff' - id: phycat-strikethrough-color title: Strikethrough · Text title.zh: 删除线 · 文字 type: variable-themed-color format: hex opacity: false default-light: '#999999' default-dark: '#888888' - id: phycat-strikethrough-hover-text-decoration title: Strikethrough · Hover Decoration title.zh: 删除线 · 悬停装饰线 type: variable-themed-color format: hex opacity: false default-light: '#ff5555' default-dark: '#ff5555' - id: phycat-interface-color title: Interface · Text title.zh: 界面 · 文字 type: variable-themed-color format: hex opacity: false default-light: '#555555' default-dark: '#555555' - id: phycat-keyboard-background title: Keyboard key · Background title.zh: 键盘按键 · 背景 type: variable-themed-color format: hex opacity: false default-light: '#ffffff' default-dark: '#333333' - id: phycat-keyboard-border title: Keyboard key · Border title.zh: 键盘按键 · 边框 type: variable-themed-color format: hex opacity: false default-light: '#444444' default-dark: '#444444' - id: phycat-keyboard-border-top title: Keyboard key · Top border title.zh: 键盘按键 · 顶部边框 type: variable-themed-color format: hex opacity: false default-light: '#555555' default-dark: '#555555' - id: phycat-keyboard-border-bottom title: Keyboard key · Bottom border title.zh: 键盘按键 · 底部边框 type: variable-themed-color format: hex opacity: false default-light: '#222222' default-dark: '#222222' - id: phycat-keyboard-box-shadow title: Keyboard key · Shadow title.zh: 键盘按键 · 阴影 type: variable-themed-color format: hex opacity: false default-light: '#222222' default-dark: '#222222' - id: phycat-keyboard-box-shadow-2 title: Keyboard key · Shadow 2 title.zh: 键盘按键 · 阴影 2 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.4)' default-dark: 'rgba(0, 0, 0, 0.4)' - id: phycat-keyboard-hover-box-shadow title: Keyboard key · Hover Shadow title.zh: 键盘按键 · 悬停阴影 type: variable-themed-color format: hex opacity: false default-light: '#222222' default-dark: '#222222' - id: phycat-keyboard-hover-box-shadow-2 title: Keyboard key · Hover Shadow 2 title.zh: 键盘按键 · 悬停阴影 2 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(0, 0, 0, 0.4)' default-dark: 'rgba(0, 0, 0, 0.4)' - id: phycat-interface-background title: Interface · Background title.zh: 界面 · 背景 type: variable-themed-color format: rgb opacity: true default-light: 'rgba(255, 255, 255, 0.05)' default-dark: 'rgba(255, 255, 255, 0.05)' */ /* @settings name: 🗂️ Phycat card Layout name.zh: 🗂️ Phycat 卡片布局设置 id: phycat-layout settings: - id: layout-style title: Interface Layout title.zh: 界面布局风格 description: Switch between the default flat layout and the modern card layout. description.zh: 在默认平铺布局和现代卡片布局之间切换。 type: class-select allowEmpty: false default: layout-default options: - label: 🔲 Default (Flat) value: layout-default - label: 🃏 Cards (Floating) value: layout-cards - id: rainbow-folders title: 启用彩虹文件夹 (Rainbow Folders) description: Soft rounded folder headers, rainbow icons and fine hierarchy guides. Active files follow the global accent. description.zh: 使用浅色圆角标题行、彩虹图标和细层级线；选中文件跟随全局主题色。关闭后恢复原生文件树布局。 type: class-toggle - id: folder-icons title: Folder Icons title.zh: 文件夹图标 description: Enable custom folder icons. Disable when using Iconize; native collapse arrows remain available. description.zh: 开启主题绘制的文件夹图标；使用 Iconize 时可关闭此开关，原生折叠箭头仍可使用。 type: class-toggle default: true - id: bg-mix-percent title: 背景色混合比例（Card模式生效） description: 调整背景色中白色的混合程度（数值越大越白，默认为 90）。 type: variable-number-slider default: 90 min: 0 max: 100 step: 1 */ /* ================================================================= 文件列表样式 (File Explorer) - 柔和彩虹文件树 特性：浅色圆角标题行 + 彩虹图标 + 细层级线 生效条件：仅在 Style Settings 中开启 "rainbow-folders" 时生效 ================================================================= */ /* @settings name: 📏 Phycat spacing setting name.zh: 📏 Phycat 文章间距设置 id: phycat-spacing settings: - id: file-line-width title: File line width title.zh: 阅读区宽度 description.zh: 单位px type: variable-number default: 900 format: px - id: letter-spacing title: Letter spacing title.zh: 字间距 type: variable-number default: 1 format: px - id: line-height-customize title: Line height title.zh: 段落行高 type: variable-number default: 2.2 - id: code-line-height title: code Line height title.zh: 代码行高 type: variable-number default: 1.6 - id: editor-code-header-padding title: Editor code header padding title.zh: 编辑模式代码标题栏上下留白 description: Vertical padding of the opening code fence, in pixels. description.zh: 代码语言标题栏的上下留白，单位 px。 type: variable-number-slider default: 2 min: 0 max: 12 step: 1 format: px - id: editor-code-first-line-gap title: Editor code first line gap title.zh: 编辑模式代码第一行顶部留白 description: Space between the language header and the first code line, in pixels. description.zh: 标题栏与第一行代码之间的留白，单位 px，不改变后续代码行距。 type: variable-number-slider default: 10 min: 0 max: 24 step: 1 format: px - id: blockquote-line-height title: blockquote Line height title.zh: 引用块行高 type: variable-number default: 1.6 - id: table-line-height title: Table Line height title.zh: 表格行高 type: variable-number default: 1.8 - id: p-spacing title: Paragraph spacing (Reading mode) title.zh: 段落间距（阅读模式） type: variable-text default: 1em */ /* @settings name: 📑 Phycat heading setting name.ZH: 📑 Phycat 标题设置 id: phycat-headings settings: - id: headings-color-setting title: Headings Colors title.zh: 标题文字颜色设置 type: heading level: 3 collapsed: true - id: h1-light-color title: H1 light color title.zh: H1 亮颜色 type: variable-color format: hex default: '#000000' - id: h1-dark-color title: H1 dark color title.zh: H1 暗颜色 type: variable-color format: hex default: '#ffffff' - id: h2-light-color title: H2 light color title.zh: H2 亮颜色 type: variable-color format: hex default: '#000000' - id: h2-dark-color title: H2 dark color title.zh: H2 暗颜色 type: variable-color format: hex default: '#ffffff' - id: h3-light-color title: H3 light color title.zh: H3 亮颜色 type: variable-color format: hex default: '#000000' - id: h3-dark-color title: H3 dark color title.zh: H3 暗颜色 type: variable-color format: hex default: '#ffffff' - id: h4-light-color title: H4 light color title.zh: H4 亮颜色 type: variable-color format: hex default: '#000000' - id: h4-dark-color title: H4 dark color title.zh: H4 暗颜色 type: variable-color format: hex default: '#ffffff' - id: h5-light-color title: H5 light color title.zh: H5 亮颜色 type: variable-color format: hex default: '#000000' - id: h5-dark-color title: H5 dark color title.zh: H5 暗颜色 type: variable-color format: hex default: '#ffffff' - id: h6-light-color title: H6 light color title.zh: H6 亮颜色 type: variable-color format: hex default: '#000000' - id: h6-dark-color title: H6 dark color title.zh: H6 暗颜色 type: variable-color format: hex default: '#ffffff' - id: heading1-setting title: H1 title title.zh: 一级标题 type: heading level: 3 collapsed: true - id: h1-alignment title: H1 Alignment title.zh: H1 对齐方式 description: Choose whether H1 titles are centered or left-aligned. description.zh: 选择 H1 标题是居中显示还是居左显示。 type: class-select allowEmpty: false default: h1-align-center options: - label: ↔️ Center (Default) value: h1-align-center - label: ⬅️ Left value: h1-align-left - id: h1-size title: H1 font size title.zh: H1字体大小 type: variable-number default: 1.618 format: em - id: heading2-setting title: H2 title title.zh: 二级标题 type: heading level: 3 collapsed: true - id: h2-style-select title: Select Style title.zh: 亮色模式风格 description: Choose between the original capsule style or the new twin pillars style. description.zh: 选择原有的胶囊背景风格或新的双子塔风格。 type: class-select allowEmpty: false default: h2-style-twin options: - label: 🏛️ Twin Pillars (New) value: h2-style-twin - label: 💊 Capsule (Original) value: h2-style-capsule - id: h2-style-dark-select title: Select Style title.zh: 暗色模式选择风格 description: Choose between the original glass capsule style or the new neon twin pillars style. description.zh: 选择原有的玻璃胶囊风格或新的霓虹双子塔风格。 type: class-select allowEmpty: false default: h2-style-dark-twin options: - label: 🏙️ Neon Twin (New) value: h2-style-dark-twin - label: 🔮 Glass Capsule (Original) value: h2-style-dark-capsule - id: h2-size title: H2 font size title.zh: H2字体大小 type: variable-number default: 1.462 format: em - id: h2-spacing-scale-start title: H2 spacing start title.zh: H2前间距 type: variable-number default: 1.318 - id: h2-spacing-scale-end title: H2 spacing end title.zh: H2后间距 type: variable-number default: 1.318 - id: heading3-setting title: H3 title title.zh: 三级标题 type: heading level: 3 collapsed: true - id: h3-size title: H3 font size title.zh: H3字体大小 type: variable-number default: 1.318 format: em - id: h3-spacing-scale-start title: H3 spacing start title.zh: H3前间距 type: variable-number default: 1.5 - id: h3-spacing-scale-end title: H3 spacing end title.zh: H3后间距 type: variable-number default: 1.5 - id: heading4-setting title: H4 title title.zh: 四级标题 type: heading level: 3 collapsed: true - id: h4-size title: H4 font size title.zh: H4字体大小 type: variable-number default: 1.2 format: em - id: h4-spacing-scale-start title: H4 spacing start title.zh: H4前间距 type: variable-number default: 1.5 - id: h4-spacing-scale-end title: H4 spacing end title.zh: H4后间距 type: variable-number default: 1.5 - id: heading5-setting title: H5 title title.zh: 五级标题 type: heading level: 3 collapsed: true - id: h5-size title: H5 font size title.zh: H5字体大小 type: variable-number default: 1.2 format: em - id: h5-spacing-scale-start title: H5 spacing start title.zh: H5前间距 type: variable-number default: 1.5 - id: h5-spacing-scale-end title: H5 spacing end title.zh: H5后间距 type: variable-number default: 1.5 - id: heading6-setting title: H6 title title.zh: 六级标题 type: heading level: 3 collapsed: true - id: h6-size title: H6 font size title.zh: H6字体大小 type: variable-number default: 1.2 format: em - id: h6-spacing-scale-start title: H6 spacing start title.zh: H6前间距 type: variable-number default: 1.5 - id: h6-spacing-scale-end title: H6 spacing end title.zh: H6后间距 type: variable-number default: 1.5 */ /* ================================================================= 1. 核心变量定义 (来自 Typora :root) ================================================================= */ :root { /* --- 图标 SVG 路径 --- */ --h3-icon-shape: url("data:image/svg+xml;utf8,"); --h4-icon-shape: url("data:image/svg+xml;utf8,"); --h5-icon-shape: url("data:image/svg+xml;utf8,"); --h6-icon-shape: url("data:image/svg+xml;utf8,"); --list-spacing: 0.075em; } /* ================================================================= Layer 0: 全局设置 ================================================================= */ body { /* --- 1. 核心布局与字体设置 --- */ --blockquote-line-height: 1.6; --table-line-height: 1.8; --letter-spacing: 1px; --code-size: 0.95rem; --code-white-space: pre; /* pre=不换行, pre-wrap=自动换行 */ --code-radius: 8px; /* 编辑区宽度 */ /* --file-line-width: 920px; */ /* --- 代码字体 --- */ --checkbox-size: 1.25rem; /* 对勾颜色可在配色设置中修改 */ --table-border-radius: 8px; --text-faint: color-mix(in srgb, var(--phycat-primary-color), transparent 20%); --link-external-decoration-hover: none; --titlebar-background: transparent; --titlebar-background-focused: transparent; --he-title-bar-inactive-pinned-bg: color-mix(in srgb, var(--phycat-primary-color), #fff 20%); --h1-line-height: 1.2; --h2-line-height: 1.5; --h3-line-height: 1.5; --h4-line-height: 1.4; --h5-line-height: 1.4; --h6-line-height: 1.4; --file-line-width: 900px; --h1-spacing-scale-start: 1.5; --h1-spacing-scale-end: 1.5; --h2-spacing-scale-start: 1.5; --h2-spacing-scale-end: 1.5; --h3-spacing-scale-start: 1.5; --h3-spacing-scale-end: 1.5; --h4-spacing-scale-start: 1.5; --h4-spacing-scale-end: 1.5; --h5-spacing-scale-start: 1.5; --h5-spacing-scale-end: 1.5; --h6-spacing-scale-start: 1.5; --h6-spacing-scale-end: 1.5; --heading-spacing: 0.5rem; --h3-spacing-scale: 1.6; --h2-spacing-scale: 0.2; --word-spacing: 2px; --h1-letter-spacing: -0.015em; --h2-letter-spacing: -0.011em; --h3-letter-spacing: -0.008em; --h4-letter-spacing: -0.005em; --h5-letter-spacing: -0.002em; --h6-letter-spacing: 0em; --h1-line-height: 1.2; --h2-line-height: 1.2; --h3-line-height: 1.3; --h4-line-height: 1.4; --h5-line-height: 1.4; --h6-line-height: 1.4; --h1-size: 1.618em; --h2-size: 1.462em; --h3-size: 1.318em; --h4-size: 1.2em; --h5-size: 1.2em; --h6-size: 1.2em; /* 关键字 & 标签 */ .token.keyword, .token.tag, .token.selector { color: var(--code-keyword); font-weight: bold; } /* 函数 & 类名 */ .token.function, .token.class-name { color: var(--code-function); } /* 字符串 & 属性值 */ .token.string, .token.attr-value { color: var(--code-string); } /* 注释 */ .token.comment { color: var(--code-comment); font-style: italic; } /* 数字 & 布尔值 */ .token.number, .token.boolean { color: var(--code-value); } /* 运算符 & 变量 */ .token.operator, .token.variable { color: var(--code-operator); } /* 属性 & 属性名 */ .token.property, .token.attr-name { color: var(--code-property); } /* 标点符号 */ .token.punctuation { color: var(--code-punctuation); } /* 重要/加粗 */ .token.important, .token.bold { font-weight: bold; color: var(--code-important, var(--code-keyword)); } .token.italic { font-style: italic; } /* URL 链接 */ .token.url { color: var(--code-string); text-decoration: underline; } } /* ================================================================= Color defaults: Sakura / Vampire. Other palettes live in presets/. User colors are applied by Style Settings without palette classes. ================================================================= */ /* Style Settings creates an empty style tag before loading saved colors. During Obsidian startup, keep the app layout but wait for that tag to be populated before painting the default palette. Disabled/missing plugins have no tag, so the normal theme defaults remain visible. */ html:has(> head > style#css-settings-manager:empty) body > .app-container.no-transition { visibility: hidden; } /* Obsidian suppresses element transitions while starting or switching themes. Include decorations so they cannot animate from the previous/default color. */ .app-container.no-transition::before, .app-container.no-transition::after, .app-container.no-transition *::before, .app-container.no-transition *::after { transition: none !important; } body.theme-light { --primary-color: #ff7096; --secondary-color: #bd93f9; --bg-color: #fff7fa; --text-color: #1c1719; --text-color-secondary: #3f3a3b; --border-color: rgba(255, 112, 150, 0.4); --select-text-bg-color: rgba(220, 227, 233, 0.714); --glow-color: rgba(255, 112, 150, 0.5); --h1-underline-color: #ff7096; --hover-background-color: #ff7096; --light-deep: #e91e63; --light-light: #ffb7cd; --light-lighter: #ffe3ec; --h2-shadow-color: rgba(61, 184, 211, 0.15); --h2-shadow-hover: rgba(61, 184, 211, 0.35); --phycat-h2-gradient-start: #ffb7cd; --phycat-h2-gradient-middle: #ff7096; --phycat-h2-gradient-end: #ffb7cd; --phycat-h2-radial-color: rgba(0, 0, 0, 0); --phycat-h2-radial-hover: rgba(0, 0, 0, 0); --phycat-h2-text-shadow: rgba(0, 0, 0, 0); --code-block-bg: rgb(255, 244, 248); --code-block-header-bg: rgba(255, 112, 150, 0.08); --code-normal: #546e7a; --code-keyword: #d81b60; --code-function: #8e24aa; --code-string: #2e7d32; --code-comment: #b0bec5; --code-property: #00897b; --code-value: #f57c00; --code-punctuation: #78909c; --code-tag: #d81b60; --code-operator: #8e24aa; --code-important: #d81b60; --background-modifier-hover: rgba(0, 0, 0, 0.05); --background-modifier-active-hover: rgba(0, 0, 0, 0.1); --background-modifier-error: #d32f2f; --background-modifier-success: #388e3c; --table-bg: rgba(255, 255, 255, 0.4); --table-border-inner: rgba(0, 0, 0, 0.06); --table-row-hover-bg: rgba(0, 0, 0, 0.03); --mermaid-text-color: #1c1719; --checkbox-bg-unchecked: rgba(255, 112, 150, 0.1); --checkbox-border-unchecked: rgba(255, 112, 150, 0.5); --table-cell-hover-text: #ff7096; --phycat-heading-indicator-color: #eeeeee; --phycat-h2-color: #ffffff; --phycat-h2-color-2: rgba(255, 255, 255, 0.6); --phycat-h5-decoration-background: #ffffff; --phycat-h1-box-shadow: rgba(255, 85, 85, 0.4); --phycat-h2-background: rgba(255, 255, 255, 0.02); --phycat-h2-border-top: rgba(255, 255, 255, 0.08); --phycat-h2-hover-box-shadow: rgba(0, 0, 0, 0.3); --phycat-interface-box-shadow: rgba(0, 0, 0, 0.05); --phycat-task-color: #ffffff; --phycat-task-color-2: #888888; --phycat-blockquote-background: rgba(0, 0, 0, 0.2); --phycat-highlight-hover-color: #ffffff; --phycat-strikethrough-color: #999999; --phycat-strikethrough-hover-text-decoration: #ff5555; --phycat-copy-button-hover-color: #ffffff; --phycat-code-block-background: rgb(247, 247, 247); --phycat-code-block-border-left: rgba(189, 147, 249, 0.3); --phycat-code-block-border-right: rgba(189, 147, 249, 0.3); --phycat-code-block-border-top: rgba(189, 147, 249, 0.3); --phycat-code-block-background-2: rgba(255, 255, 255, 0.08); --phycat-code-block-border-bottom: rgba(189, 147, 249, 0.3); --phycat-code-block-background-3: rgba(255, 255, 255, 0.05); --phycat-interface-color: #555555; --phycat-callout-common-title-background: rgba(255, 255, 255, 0.6); --phycat-callout-common-title-border: rgba(0, 0, 0, 0.05); --phycat-callout-note-background: rgba(48, 107, 214, 0.1); --phycat-callout-note-title-color: #6c5ce7; --phycat-callout-note-hover-background: rgba(108, 92, 231, 0.15); --phycat-callout-note-watermark-color: #6c5ce7; --phycat-callout-info-watermark-color: #6c5ce7; --phycat-callout-todo-watermark-color: #6c5ce7; --phycat-callout-tip-background: rgba(0, 184, 148, 0.1); --phycat-callout-tip-title-color: #00b894; --phycat-callout-tip-hover-background: rgba(0, 184, 148, 0.15); --phycat-callout-tip-watermark-color: #00b894; --phycat-callout-warning-background: rgba(253, 203, 110, 0.15); --phycat-callout-warning-title-color: #e17055; --phycat-callout-warning-hover-background: rgba(253, 203, 110, 0.2); --phycat-callout-warning-watermark-color: #e17055; --phycat-callout-important-background: rgba(255, 118, 117, 0.12); --phycat-callout-important-title-color: #ff7675; --phycat-callout-important-hover-background: rgba(255, 118, 117, 0.18); --phycat-callout-important-watermark-color: #ff7675; --phycat-callout-caution-background: rgba(214, 48, 49, 0.08); --phycat-callout-caution-title-color: #d63031; --phycat-callout-caution-hover-background: rgba(214, 48, 49, 0.12); --phycat-callout-caution-watermark-color: #d63031; --phycat-callout-success-background: rgba(85, 239, 196, 0.15); --phycat-callout-success-title-color: #00b894; --phycat-callout-success-hover-background: rgba(85, 239, 196, 0.25); --phycat-callout-success-watermark-color: #00b894; --phycat-callout-example-background: rgba(162, 155, 254, 0.15); --phycat-callout-example-title-color: #6c5ce7; --phycat-callout-example-hover-background: rgba(162, 155, 254, 0.25); --phycat-callout-example-watermark-color: #6c5ce7; --phycat-callout-quote-background: rgba(178, 190, 195, 0.15); --phycat-callout-quote-title-color: #636e72; --phycat-callout-quote-hover-background: rgba(178, 190, 195, 0.25); --phycat-callout-quote-watermark-color: #636e72; --phycat-callout-danger-background: rgba(214, 48, 49, 0.15); --phycat-callout-danger-border-left: #d63031; --phycat-callout-danger-title-color: #d63031; --phycat-callout-danger-hover-background: rgba(214, 48, 49, 0.2); --phycat-callout-danger-watermark-color: #d63031; --phycat-callout-error-watermark-color: #d63031; --phycat-callout-bug-watermark-color: #d63031; --phycat-callout-failure-background: rgba(45, 52, 54, 0.05); --phycat-callout-failure-title-color: #c0392b; --phycat-callout-failure-hover-background: rgba(45, 52, 54, 0.1); --phycat-callout-failure-watermark-color: #c0392b; --phycat-callout-question-background: rgba(253, 203, 110, 0.15); --phycat-callout-question-title-color: #f39c12; --phycat-callout-question-hover-background: rgba(253, 203, 110, 0.25); --phycat-callout-question-watermark-color: #f39c12; --phycat-callout-abstract-background: rgba(129, 236, 236, 0.2); --phycat-callout-abstract-title-color: #00cec9; --phycat-callout-abstract-hover-background: rgba(129, 236, 236, 0.3); --phycat-callout-abstract-watermark-color: #00cec9; --phycat-callout-common-background: rgba(255, 255, 255, 0.03); --phycat-callout-common-border: rgba(255, 255, 255, 0.05); --phycat-callout-common-title-background-2: rgba(255, 255, 255, 0.08); --phycat-callout-common-title-border-2: rgba(255, 255, 255, 0.1); --phycat-callout-note-border: rgba(189, 147, 249, 0.3); --phycat-callout-tip-border: rgba(139, 233, 253, 0.3); --phycat-callout-warning-border: rgba(255, 184, 108, 0.3); --phycat-callout-important-border: rgba(255, 85, 85, 0.3); --phycat-callout-info-border: rgba(116, 192, 252, 0.3); --phycat-callout-info-background: rgba(116, 192, 252, 0.1); --phycat-callout-info-title-color: #74c0fc; --phycat-callout-todo-border: rgba(80, 250, 123, 0.3); --phycat-callout-todo-background: rgba(80, 250, 123, 0.1); --phycat-callout-todo-title-color: #50fa7b; --phycat-callout-success-border: rgba(85, 239, 196, 0.3); --phycat-callout-question-border: rgba(241, 250, 140, 0.3); --phycat-callout-example-border: rgba(255, 121, 198, 0.3); --phycat-callout-quote-border: rgba(223, 230, 233, 0.2); --phycat-callout-danger-border: rgba(255, 85, 85, 0.4); --phycat-callout-danger-box-shadow: rgba(255, 85, 85, 0.1); --phycat-callout-bug-border: rgba(255, 85, 85, 0.4); --phycat-callout-bug-background: rgba(255, 85, 85, 0.1); --phycat-callout-bug-title-color: #ff5555; --phycat-callout-failure-border: rgba(179, 57, 57, 0.3); --phycat-callout-abstract-border: rgba(129, 236, 236, 0.3); --phycat-code-block-hover-color: #ffffff; --phycat-code-block-hover-text-fill: #ffffff; --phycat-keyboard-background: #ffffff; --phycat-keyboard-border: #444444; --phycat-keyboard-border-top: #555555; --phycat-keyboard-border-bottom: #222222; --phycat-keyboard-box-shadow: #222222; --phycat-keyboard-box-shadow-2: rgba(0, 0, 0, 0.4); --phycat-keyboard-hover-box-shadow: #222222; --phycat-keyboard-hover-box-shadow-2: rgba(0, 0, 0, 0.4); --phycat-interface-background: rgba(255, 255, 255, 0.05); --phycat-modal-box-shadow: rgba(0, 0, 0, 0.4); --phycat-modal-background: rgba(255, 255, 255, 0.85); --phycat-modal-border: rgba(0, 0, 0, 0.05); --phycat-modal-box-shadow-2: rgba(0, 0, 0, 0.1); --phycat-modal-box-shadow-3: rgba(0, 0, 0, 0.6); --phycat-settings-nav-active-color: #ffffff; --phycat-database-row-hover-border-bottom: rgba(0, 0, 0, 0.03); --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2); --phycat-cards-border: rgba(255, 255, 255, 0.1); --phycat-cards-box-shadow: rgba(0, 0, 0, 0.15); --phycat-cards-box-shadow-2: rgba(255, 255, 255, 0.15); --phycat-cards-modal-background: rgba(255, 255, 255, 0.6); --phycat-cards-modal-border: rgba(255, 255, 255, 0.4); --phycat-cards-modal-box-shadow: rgba(0, 0, 0, 0.05); --phycat-cards-modal-box-shadow-2: rgba(255, 255, 255, 0.5); --phycat-cards-background: rgba(255, 255, 255, 0.03); --phycat-cards-border-2: rgba(255, 255, 255, 0.05); --phycat-cards-active-border: rgba(255, 255, 255, 0.1); --phycat-cards-active-box-shadow: rgba(0, 0, 0, 0.3); --nav-c-pink: #ff7096; --nav-c-cyan: #3db8bf; --nav-c-orange: #f59e0b; --nav-c-green: #11aa63; --nav-c-purple: #a06eb4; --nav-c-red: #aa1141; --nav-c-blue: #1d4e89; --phycat-accent-h: 344.05594405594405; --phycat-accent-s: 100%; --phycat-accent-l: 71.96078431372548%; } body.theme-dark { --primary-color: #ff5555; --secondary-color: #bd93f9; --bg-color: #282a36; --text-color: #f8f8f2; --text-color-secondary: #d0d0d0; --border-color: rgb(68, 71, 90); --select-text-bg-color: rgba(255, 16, 16, 0.467); --glow-color: rgba(255, 85, 85, 0.6); --h1-underline-color: #ff5555; --hover-background-color: #ff5555; --light-deep: #ff5555; --light-light: #ff5555; --light-lighter: #ff5555; --h2-shadow-color: rgba(0, 0, 0, 0); --h2-shadow-hover: rgba(0, 0, 0, 0); --phycat-h2-gradient-start: #ff5555; --phycat-h2-gradient-middle: #ff5555; --phycat-h2-gradient-end: #ff5555; --phycat-h2-radial-color: rgba(255, 85, 85, 0.15); --phycat-h2-radial-hover: rgba(255, 85, 85, 0.25); --phycat-h2-text-shadow: rgba(0, 0, 0, 0); --code-block-bg: rgb(40, 42, 54); --code-block-header-bg: rgba(0, 0, 0, 0); --code-normal: #f8f8f2; --code-keyword: #ff79c6; --code-function: #50fa7b; --code-string: #f1fa8c; --code-comment: #6272a4; --code-property: #66d9ef; --code-value: #bd93f9; --code-punctuation: #f8f8f2; --code-tag: #ff79c6; --code-operator: #ff79c6; --code-important: #ff79c6; --background-modifier-hover: rgba(255, 255, 255, 0.05); --background-modifier-active-hover: rgba(255, 255, 255, 0.1); --background-modifier-error: #ff5555; --background-modifier-success: #50fa7b; --table-bg: rgba(255, 255, 255, 0.02); --table-border-inner: rgba(255, 255, 255, 0.05); --table-row-hover-bg: rgba(255, 255, 255, 0.03); --mermaid-text-color: #000000; --checkbox-bg-unchecked: rgba(255, 255, 255, 0.05); --checkbox-border-unchecked: rgba(255, 255, 255, 0.3); --table-cell-hover-text: #ffffff; --phycat-heading-indicator-color: #eeeeee; --phycat-h2-color: #ffffff; --phycat-h2-color-2: rgba(255, 255, 255, 0.6); --phycat-h5-decoration-background: #ffffff; --phycat-h1-box-shadow: rgba(255, 85, 85, 0.4); --phycat-h2-background: rgba(255, 255, 255, 0.02); --phycat-h2-border-top: rgba(255, 255, 255, 0.08); --phycat-h2-hover-box-shadow: rgba(0, 0, 0, 0.3); --phycat-interface-box-shadow: rgba(0, 0, 0, 0.05); --phycat-task-color: #ffffff; --phycat-task-color-2: #888888; --phycat-blockquote-background: rgba(0, 0, 0, 0.2); --phycat-highlight-hover-color: #ffffff; --phycat-strikethrough-color: #888888; --phycat-strikethrough-hover-text-decoration: #ff5555; --phycat-copy-button-hover-color: #ffffff; --phycat-code-block-background: rgba(255, 255, 255, 0.03); --phycat-code-block-border-left: rgba(189, 147, 249, 0.3); --phycat-code-block-border-right: rgba(189, 147, 249, 0.3); --phycat-code-block-border-top: rgba(189, 147, 249, 0.3); --phycat-code-block-background-2: rgba(255, 255, 255, 0.08); --phycat-code-block-border-bottom: rgba(189, 147, 249, 0.3); --phycat-code-block-background-3: rgba(255, 255, 255, 0.05); --phycat-interface-color: #555555; --phycat-callout-common-title-background: rgba(255, 255, 255, 0.6); --phycat-callout-common-title-border: rgba(0, 0, 0, 0.05); --phycat-callout-note-background: rgba(189, 147, 249, 0.1); --phycat-callout-note-title-color: #bd93f9; --phycat-callout-note-hover-background: rgba(189, 147, 249, 0.2); --phycat-callout-note-watermark-color: #bd93f9; --phycat-callout-info-watermark-color: #74c0fc; --phycat-callout-todo-watermark-color: #50fa7b; --phycat-callout-tip-background: rgba(139, 233, 253, 0.1); --phycat-callout-tip-title-color: #8be9fd; --phycat-callout-tip-hover-background: rgba(139, 233, 253, 0.2); --phycat-callout-tip-watermark-color: #8be9fd; --phycat-callout-warning-background: rgba(255, 184, 108, 0.1); --phycat-callout-warning-title-color: #ffb86c; --phycat-callout-warning-hover-background: rgba(255, 184, 108, 0.2); --phycat-callout-warning-watermark-color: #ffb86c; --phycat-callout-important-background: rgba(255, 85, 85, 0.1); --phycat-callout-important-title-color: #ff5555; --phycat-callout-important-hover-background: rgba(255, 85, 85, 0.2); --phycat-callout-important-watermark-color: #ff5555; --phycat-callout-caution-background: rgba(214, 48, 49, 0.08); --phycat-callout-caution-title-color: #d63031; --phycat-callout-caution-hover-background: rgba(214, 48, 49, 0.12); --phycat-callout-caution-watermark-color: #d63031; --phycat-callout-success-background: rgba(85, 239, 196, 0.1); --phycat-callout-success-title-color: #55efc4; --phycat-callout-success-hover-background: rgba(85, 239, 196, 0.15); --phycat-callout-success-watermark-color: #55efc4; --phycat-callout-example-background: rgba(255, 121, 198, 0.1); --phycat-callout-example-title-color: #ff79c6; --phycat-callout-example-hover-background: rgba(255, 121, 198, 0.15); --phycat-callout-example-watermark-color: #ff79c6; --phycat-callout-quote-background: rgba(223, 230, 233, 0.05); --phycat-callout-quote-title-color: #dfe6e9; --phycat-callout-quote-hover-background: rgba(178, 190, 195, 0.25); --phycat-callout-quote-watermark-color: #dfe6e9; --phycat-callout-danger-background: rgba(255, 85, 85, 0.1); --phycat-callout-danger-border-left: #d63031; --phycat-callout-danger-title-color: #ff5555; --phycat-callout-danger-hover-background: rgba(214, 48, 49, 0.2); --phycat-callout-danger-watermark-color: #ff5555; --phycat-callout-error-watermark-color: #ff5555; --phycat-callout-bug-watermark-color: #ff5555; --phycat-callout-failure-background: rgba(0, 0, 0, 0.2); --phycat-callout-failure-title-color: #fab1a0; --phycat-callout-failure-hover-background: rgba(45, 52, 54, 0.1); --phycat-callout-failure-watermark-color: #fab1a0; --phycat-callout-question-background: rgba(241, 250, 140, 0.1); --phycat-callout-question-title-color: #f1fa8c; --phycat-callout-question-hover-background: rgba(241, 250, 140, 0.15); --phycat-callout-question-watermark-color: #f1fa8c; --phycat-callout-abstract-background: rgba(129, 236, 236, 0.1); --phycat-callout-abstract-title-color: #81ecec; --phycat-callout-abstract-hover-background: rgba(129, 236, 236, 0.3); --phycat-callout-abstract-watermark-color: #81ecec; --phycat-callout-common-background: rgba(255, 255, 255, 0.03); --phycat-callout-common-border: rgba(255, 255, 255, 0.05); --phycat-callout-common-title-background-2: rgba(255, 255, 255, 0.08); --phycat-callout-common-title-border-2: rgba(255, 255, 255, 0.1); --phycat-callout-note-border: rgba(189, 147, 249, 0.3); --phycat-callout-tip-border: rgba(139, 233, 253, 0.3); --phycat-callout-warning-border: rgba(255, 184, 108, 0.3); --phycat-callout-important-border: rgba(255, 85, 85, 0.3); --phycat-callout-info-border: rgba(116, 192, 252, 0.3); --phycat-callout-info-background: rgba(116, 192, 252, 0.1); --phycat-callout-info-title-color: #74c0fc; --phycat-callout-todo-border: rgba(80, 250, 123, 0.3); --phycat-callout-todo-background: rgba(80, 250, 123, 0.1); --phycat-callout-todo-title-color: #50fa7b; --phycat-callout-success-border: rgba(85, 239, 196, 0.3); --phycat-callout-question-border: rgba(241, 250, 140, 0.3); --phycat-callout-example-border: rgba(255, 121, 198, 0.3); --phycat-callout-quote-border: rgba(223, 230, 233, 0.2); --phycat-callout-danger-border: rgba(255, 85, 85, 0.4); --phycat-callout-danger-box-shadow: rgba(255, 85, 85, 0.1); --phycat-callout-bug-border: rgba(255, 85, 85, 0.4); --phycat-callout-bug-background: rgba(255, 85, 85, 0.1); --phycat-callout-bug-title-color: #ff5555; --phycat-callout-failure-border: rgba(179, 57, 57, 0.3); --phycat-callout-abstract-border: rgba(129, 236, 236, 0.3); --phycat-code-block-hover-color: #ffffff; --phycat-code-block-hover-text-fill: #ffffff; --phycat-keyboard-background: #333333; --phycat-keyboard-border: #444444; --phycat-keyboard-border-top: #555555; --phycat-keyboard-border-bottom: #222222; --phycat-keyboard-box-shadow: #222222; --phycat-keyboard-box-shadow-2: rgba(0, 0, 0, 0.4); --phycat-keyboard-hover-box-shadow: #222222; --phycat-keyboard-hover-box-shadow-2: rgba(0, 0, 0, 0.4); --phycat-interface-background: rgba(255, 255, 255, 0.05); --phycat-modal-box-shadow: rgba(0, 0, 0, 0.4); --phycat-modal-background: rgba(20, 20, 25, 0.85); --phycat-modal-border: rgba(255, 255, 255, 0.08); --phycat-modal-box-shadow-2: rgba(0, 0, 0, 0.2); --phycat-modal-box-shadow-3: rgba(0, 0, 0, 0.6); --phycat-settings-nav-active-color: #ffffff; --phycat-database-row-hover-border-bottom: rgba(255, 255, 255, 0.03); --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1); --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2); --phycat-cards-border: rgba(255, 255, 255, 0.08); --phycat-cards-box-shadow: rgba(0, 0, 0, 0.4); --phycat-cards-box-shadow-2: rgba(255, 255, 255, 0.15); --phycat-cards-modal-background: rgba(30, 30, 30, 0.6); --phycat-cards-modal-border: rgba(255, 255, 255, 0.08); --phycat-cards-modal-box-shadow: rgba(0, 0, 0, 0.5); --phycat-cards-modal-box-shadow-2: rgba(255, 255, 255, 0.5); --phycat-cards-background: rgba(255, 255, 255, 0.03); --phycat-cards-border-2: rgba(255, 255, 255, 0.05); --phycat-cards-active-border: rgba(255, 255, 255, 0.1); --phycat-cards-active-box-shadow: rgba(0, 0, 0, 0.3); --nav-c-pink: #ff7096; --nav-c-cyan: #3db8bf; --nav-c-orange: #f59e0b; --nav-c-green: #11aa63; --nav-c-purple: #a06eb4; --nav-c-red: #aa1141; --nav-c-blue: #1d4e89; --phycat-accent-h: 0; --phycat-accent-s: 100%; --phycat-accent-l: 66.66666666666666%; } body { --accent-h: var(--phycat-accent-h); --accent-s: var(--phycat-accent-s); --accent-l: var(--phycat-accent-l); /* The preset seeds the native accent; Appearance overrides --accent-*. Resolve the primary through Obsidian for both decoration and interaction. */ --phycat-primary-color: var(--color-accent, var(--primary-color)); --phycat-interactive-color: var(--phycat-primary-color); --phycat-interactive-hover: var(--color-accent-1, var(--phycat-primary-color)); --h2-bg-gradient: linear-gradient(to right, var(--phycat-h2-gradient-start), var(--phycat-h2-gradient-middle), var(--phycat-h2-gradient-end)); --h2-bg-image: radial-gradient(ellipse at center bottom, var(--phycat-h2-radial-color), transparent 70%); --h2-bg-image-hover: radial-gradient(ellipse at center bottom, var(--phycat-h2-radial-hover), transparent 60%); --text-bold: var(--light-deep); } body.theme-light h2 { text-shadow: 0 1px 2px var(--phycat-h2-text-shadow); } /* ================================================================= Layer 2: 映射层 (将私有变量映射给 Obsidian) ================================================================= */ body.theme-light { /* --- 光晕变量 (亮色模式通常减弱或去除光晕) --- */ /* 如果不想在亮色下发光，可以把 8px 改为 0px */ --glow-shadow-text: 0 0 5px var(--glow-color); --glow-shadow-box: 0 0 5px var(--glow-color); /* --- A. 核心背景 (Backgrounds) --- */ --background-primary: color-mix(in srgb, var(--bg-color), #fff 2%); --background-card: color-mix(in srgb, var(--phycat-primary-color), #FFF calc(var(--bg-mix-percent) * 1%)); /* 亮色模式下，侧边栏通常需要比主背景稍微"暗"一点点 */ /* 这里使用 color-mix 混合 3%~8% 的黑色来实现层级区分 */ --background-primary-alt: color-mix(in srgb, var(--bg-color), #000 3%); --background-secondary: color-mix(in srgb, var(--bg-color), #fff 5%); --background-secondary-alt: color-mix(in srgb, var(--bg-color), #000 8%); /* --- B. 核心文本 (Text) --- */ --text-normal: var(--text-color); --text-muted: var(--text-color-secondary); /* 极淡文字 */ --mermaid-text-color: var(--text-color); /* 修复 Mermaid */ /* 强调/链接文字 */ --text-accent: var(--phycat-interactive-color); --text-accent-hover: var(--phycat-interactive-hover); /* 悬停颜色 */ --list-marker-color: var(--phycat-primary-color); /* --- C. 交互元素 (Interactive) --- */ --interactive-accent: var(--phycat-interactive-color); --interactive-accent-hover: var(--phycat-interactive-hover); --text-selection: var(--select-text-bg-color); /* 选中背景 */ /* --- D. 界面修饰 (Modifiers) --- */ /* 【关键】亮色模式的悬停遮罩必须是黑色半透明，否则看不见 */ --background-modifier-border: var(--border-color); --background-modifier-border-hover: var(--secondary-color); /* --- E. 功能色 (Functional) --- */ /* 亮色下的错误红，稍深 */ /* 亮色下的成功绿，稍深 */ /* --- F. 代码高亮映射 --- */ --code-background: var(--code-block-bg); /* --- G. 输入框特有修正 --- */ /* 亮色模式下输入框如果没有边框会看不清，加一个内阴影模拟边框 */ --input-shadow: inset 0 0 0 1px var(--border-color); --input-shadow-hover: inset 0 0 0 1px var(--secondary-color); --checkbox-bg-unchecked: color-mix(in srgb, var(--phycat-primary-color), transparent 90%); --checkbox-border-unchecked: color-mix(in srgb, var(--phycat-primary-color), transparent 50%); /* 未选中边框 (深灰色，否则看不清) */ --checkbox-bg-checked: var(--phycat-interactive-color); /* 选中底色 (实心主题色，为了衬托白对勾) */ --checkbox-shadow-checked: 0 2px 5px color-mix(in srgb, var(--phycat-interactive-color), transparent 60%); /* 柔和投影 */ /* 背景改为极淡的混合色，增加实体感 */ /* 内部网格线(黑灰) */ /* 表头背景：混合白色，而不是透明，看起来更干净 */ --table-th-bg: color-mix(in srgb, var(--phycat-primary-color), white 90%); --table-th-border: color-mix(in srgb, var(--phycat-primary-color), transparent 80%); /* 单元格Hover：背景稍深，文字变深色主题色 (因为背景浅，白字看不清) */ --table-cell-hover-bg: color-mix(in srgb, var(--phycat-primary-color), white 80%); --table-cell-hover-text: var(--phycat-primary-color); --blockquote-background-color: color-mix(in srgb, var(--phycat-primary-color), white 96%); --setting-items-background: color-mix(in srgb, var(--light-lighter), transparent 94%); --indentation-guide-color: color-mix(in srgb, var(--phycat-primary-color), white 50%); --tag-background: color-mix(in srgb, var(--phycat-primary-color), white 85%); --tag-background-hover: color-mix(in srgb, var(--phycat-primary-color), white 75%); --tag-border-color: color-mix(in srgb, var(--phycat-primary-color), white 50%); --tag-border-color-hover: var(--phycat-primary-color); --h1-color: var(--h1-light-color, #000000); --h2-color: var(--h2-light-color, #000000); --h3-color: var(--h3-light-color, #000000); --h4-color: var(--h4-light-color, #000000); --h5-color: var(--h5-light-color, #000000); --h6-color: var(--h6-light-color, #000000); --ribbon-background-collapsed:var(--background-card); } body.theme-dark { /* --- 光晕变量 --- */ --glow-shadow-text: 0 0 8px var(--glow-color); --glow-shadow-box: 0 0 8px var(--glow-color); /* --- A. 核心背景 --- */ --background-primary: var(--bg-color); --background-primary-alt: var(--bg-color); --background-secondary: color-mix(in srgb, var(--bg-color), #000 15%); --background-secondary-alt: color-mix(in srgb, var(--bg-color), #000 25%); /* --- B. 核心文本 --- */ --text-normal: var(--text-color); --text-muted: var(--text-color-secondary); /* --text-faint: var(--border-color); */ /* 极淡文字使用边框色 */ /* 强调/链接文字 */ --text-accent: var(--phycat-interactive-color); --text-accent-hover: var(--phycat-interactive-hover); --list-marker-color: var(--phycat-primary-color); /* --- C. 交互元素 --- */ --interactive-accent: var(--phycat-interactive-color); --interactive-accent-hover: var(--phycat-interactive-hover); --text-selection: var(--select-text-bg-color); /* --- D. 界面修饰 --- */ /* 保持中性 */ --background-modifier-border: var(--border-color); --background-modifier-border-hover: var(--secondary-color); /* --- E. 功能色 --- */ /* --- F. 代码高亮映射 --- */ --code-background: var(--code-block-bg); /* 其他的具体高亮颜色 (keyword, function 等) 会自动通过 CSS 变量继承 */ /* 未选中底色 */ /* 未选中边框 (白灰色) */ --checkbox-bg-checked: color-mix(in srgb, var(--phycat-interactive-color), transparent 80%); /* 选中底色 (透明主题色) */ --checkbox-shadow-checked: 0 0 8px var(--phycat-interactive-color); /* 选中光晕 */ /* 内部网格线(白) */ --table-th-bg: color-mix(in srgb, var(--phycat-primary-color), transparent 95%); --table-th-border: color-mix(in srgb, var(--phycat-primary-color), transparent 85%); --table-cell-hover-bg: color-mix(in srgb, var(--phycat-primary-color), transparent 85%); /* 暗色模式下，高亮时文字变白 */ --setting-items-background: color-mix(in srgb, var(--phycat-primary-color), transparent 96%); --tag-background: color-mix(in srgb, var(--phycat-primary-color), transparent 85%); --tag-background-hover: color-mix(in srgb, var(--phycat-primary-color), transparent 75%); --tag-border-color: color-mix(in srgb, var(--phycat-primary-color), transparent 50%); --tag-border-color-hover: var(--phycat-primary-color); --h1-color: var(--h1-dark-color, #ffffff); --h2-color: var(--h2-dark-color, #ffffff); --h3-color: var(--h3-dark-color, #ffffff); --h4-color: var(--h4-dark-color, #ffffff); --h5-color: var(--h5-dark-color, #ffffff); --h6-color: var(--h6-dark-color, #ffffff); } /* ================================================================= Layer 1: 全局基础设置 (Global Base) 包含：容器布局、字体、通用排版、折叠图标 ================================================================= */ body { --line-height-normal: 2.2; --line-height-tight: 1.3; --line-height-customize: var(--line-height-normal); } /* 1.1 容器与阅读体验优化 */ .markdown-preview-view, .markdown-source-view { /* 宽松行高 */ letter-spacing: var(--letter-spacing); position: relative; } /* 1.2 段落与列表基础 */ .markdown-preview-view p, .markdown-preview-view li { color: var(--text-color-secondary); word-spacing: var(--word-spacing); } .markdown-preview-view, .markdown-source-view.mod-cm6 .cm-scroller { line-height: var(--line-height-customize); } /* Keep note properties/frontmatter compact instead of inheriting the loose reading line-height. */ .markdown-preview-view :is(.metadata-container, .frontmatter-container, .frontmatter), .markdown-source-view.mod-cm6 :is(.metadata-container, .frontmatter-container, .frontmatter) { line-height: 1.4; } :is(.markdown-preview-view, .markdown-source-view.mod-cm6) .metadata-container :is( .metadata-content, .metadata-properties, .metadata-property, .metadata-property-key, .metadata-property-key-input, .metadata-property-value, .metadata-property-value-item, .metadata-property-value > *, .metadata-input, .metadata-input-text, .metadata-input-longtext, .metadata-input-number, .metadata-input-checkbox, .metadata-link, .multi-select-container, .multi-select-input, .multi-select-pill, .multi-select-pill-content ) { line-height: inherit; } /* ================================================================= Layer 1 - 1.3 标题通用重置 (修复版) ================================================================= */ /* ================================================================= 应用标题颜色 (阅读模式 & 编辑模式) ================================================================= */ body .markdown-preview-view h1, body .markdown-source-view.mod-cm6 .HyperMD-header-1 { color: var(--h1-color) !important; } body .markdown-preview-view h2, body .markdown-source-view.mod-cm6 .HyperMD-header-2 { color: var(--h2-color) !important; } body .markdown-preview-view h3, body .markdown-source-view.mod-cm6 .HyperMD-header-3 { color: var(--h3-color) !important; } body .markdown-preview-view h4, body .markdown-source-view.mod-cm6 .HyperMD-header-4 { color: var(--h4-color) !important; } body .markdown-preview-view h5, body .markdown-source-view.mod-cm6 .HyperMD-header-5 { color: var(--h5-color) !important; } body .markdown-preview-view h6, body .markdown-source-view.mod-cm6 .HyperMD-header-6 { color: var(--h6-color) !important; } .markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3, .markdown-preview-view h4, .markdown-preview-view h5, .markdown-preview-view h6, .markdown-source-view.mod-cm6 .HyperMD-header { color: var(--text-color); font-weight: bold; position: relative; transition: all 0.3s ease; margin-block-start: var(--heading-spacing); margin-block-end: var(--heading-spacing); } .markdown-preview-view h1 { margin-block-start: calc(var(--heading-spacing)*var(--h1-spacing-scale-start)); margin-block-end: calc(var(--heading-spacing)*var(--h1-spacing-scale-end)); } .markdown-preview-view h2 { margin-block-start: calc(var(--heading-spacing)*var(--h2-spacing-scale-start)); margin-block-end: calc(var(--heading-spacing)*var(--h2-spacing-scale-end)); } .markdown-preview-view h3 { margin-block-start: calc(var(--heading-spacing)*var(--h3-spacing-scale-start)); margin-block-end: calc(var(--heading-spacing)*var(--h3-spacing-scale-end)); } .markdown-preview-view h4 { margin-block-start: calc(var(--heading-spacing)*var(--h4-spacing-scale-start)); margin-block-end: calc(var(--heading-spacing)*var(--h4-spacing-scale-end)); } .markdown-preview-view h5 { margin-block-start: calc(var(--heading-spacing)*var(--h5-spacing-scale-start)); margin-block-end: calc(var(--heading-spacing)*var(--h5-spacing-scale-end)); } .markdown-preview-view h6 { margin-block-start: calc(var(--heading-spacing)*var(--h6-spacing-scale-start)); margin-block-end: calc(var(--heading-spacing)*var(--h6-spacing-scale-end)); } /* 编辑模式 */ .markdown-source-view.mod-cm6 .HyperMD-header-1 { padding-top: calc(var(--heading-spacing)*var(--h1-spacing-scale-start) - 0.25rem); padding-bottom: calc(var(--heading-spacing)*var(--h1-spacing-scale-end) - 0.25rem); } .markdown-source-view.mod-cm6 .HyperMD-header-2 { padding-top: calc(var(--heading-spacing)*var(--h2-spacing-scale-start) - 0.25rem); padding-bottom: calc(var(--heading-spacing)*var(--h2-spacing-scale-end) - 0.25rem); } .markdown-source-view.mod-cm6 .HyperMD-header-3 { padding-top: calc(var(--heading-spacing)*var(--h3-spacing-scale-start) - 0.25rem); padding-bottom: calc(var(--heading-spacing)*var(--h3-spacing-scale-end) - 0.25rem); } .markdown-source-view.mod-cm6 .HyperMD-header-4 { padding-top: calc(var(--heading-spacing)*var(--h4-spacing-scale-start) - 0.25rem); padding-bottom: calc(var(--heading-spacing)*var(--h4-spacing-scale-end) - 0.25rem); } .markdown-source-view.mod-cm6 .HyperMD-header-5 { padding-top: calc(var(--heading-spacing)*var(--h5-spacing-scale-start) - 0.25rem); padding-bottom: calc(var(--heading-spacing)*var(--h5-spacing-scale-end) - 0.25rem); } .markdown-source-view.mod-cm6 .HyperMD-header-6 { padding-top: calc(var(--heading-spacing)*var(--h6-spacing-scale-start) - 0.25rem); padding-bottom: calc(var(--heading-spacing)*var(--h6-spacing-scale-end) - 0.25rem); } /* 1.4 折叠图标位置微调 (Collapse Indicators) */ .theme-light .markdown-preview-view .heading-collapse-indicator { margin-inline-start: -47px !important; } .theme-dark .markdown-preview-view .heading-collapse-indicator { margin-inline-start: -26px !important; } .theme-light .markdown-preview-view h2 .heading-collapse-indicator { margin-inline-start: -19px !important; } .theme-dark.h2-style-dark-capsule .markdown-preview-view h2 .heading-collapse-indicator { margin-inline-start: -19px !important; } .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2 .heading-collapse-indicator { margin-inline-start: -48px !important; } .theme-dark .markdown-preview-view h3 .heading-collapse-indicator, .theme-light .markdown-preview-view h3 .heading-collapse-indicator { margin-inline-start: -43px !important; } .theme-dark.h1-align-left .markdown-preview-view h1 .heading-collapse-indicator, .theme-light.h1-align-left .markdown-preview-view h1 .heading-collapse-indicator { margin-inline-start: -50px !important; } /* 编辑模式 */ .markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator { inset-inline-end: 22px; } .h1-align-left .markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator { inset-inline-end: 32px; } .theme-light.h2-style-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 .collapse-indicator, .theme-dark.h2-style-dark-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 .collapse-indicator { inset-inline-end: -2px; } .theme-light.h2-style-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 .collapse-indicator svg, .theme-dark.h2-style-dark-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 .collapse-indicator svg, .theme-light.h2-style-capsule .markdown-preview-view h2 .heading-collapse-indicator svg, .theme-dark.h2-style-dark-capsule .markdown-preview-view h2 .heading-collapse-indicator svg { color: var(--phycat-heading-indicator-color); } /* ================================================================= Layer 2: 亮色模式专用样式 (Light Mode) 设计风格：清爽、圆润、绝对定位布局 ================================================================= */ /* --- [亮色模式] H1 (默认: 居中 + 底部短线) --- */ .theme-light .markdown-preview-view h1, .theme-light .markdown-source-view.mod-cm6 .HyperMD-header-1 { font-weight: 700; line-height: 1.4; padding-bottom: 12px; /* 居中布局基础 */ display: table; width: auto; min-width: 120px; /* 强制居中 */ text-align: center; margin-left: auto !important; margin-right: auto !important; position: relative; transition: color 0.3s ease, transform 0.3s ease; } /* 装饰线 (默认居中) */ .theme-light .markdown-preview-view h1::after, .theme-light .markdown-source-view.mod-cm6 .HyperMD-header-1::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 40px; height: 4px; border-radius: 4px; /* 样式 */ background: var(--h2-bg-gradient); background-size: 100% auto; /* 居中定位 */ transform: translateX(-50%); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease; } /* H1 Hover (默认) */ .theme-light .markdown-preview-view h1:hover { color: var(--phycat-primary-color); transform: translateY(-2px); } .theme-light .markdown-preview-view h1:hover::after { width: 100%; } /* --- [亮色模式] H1 居左 Override (Style AB: 紧凑交叠修复版) --- */ /* 仅当 body 有 .h1-align-left 类时生效 */ .theme-light.h1-align-left .markdown-preview-view h1, .theme-light.h1-align-left .markdown-source-view.mod-cm6 .HyperMD-header-1 { text-align: left; /* 强制靠左 */ margin-left: 0 !important; margin-right: auto !important; /* 左侧留白给色块 (32px 足够了) */ padding-left: 32px; } /* 1. 后层的块 (Secondary Color) - 左上 */ .theme-light.h1-align-left .markdown-preview-view h1::before, .theme-light.h1-align-left .markdown-source-view.mod-cm6 .HyperMD-header-1::before { content: ""; position: absolute; /* 尺寸 */ width: 10px; height: 22px; border-radius: 6px; /* 【核心修复】绝对垂直居中 + 固定偏移 */ /* 无论在编辑模式还是阅读模式，位置都相对于文字行中心 */ top: 45%; transform: translateY(-50%); margin-top: -6px; /* 向上偏移 */ left: 2px; /* 靠左 */ background-color: var(--secondary-color); opacity: 0.5; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } /* 2. 前层的块 (Primary Color) - 右下 */ .theme-light.h1-align-left .markdown-preview-view h1::after, .theme-light.h1-align-left .markdown-source-view.mod-cm6 .HyperMD-header-1::after { /* 重置居中属性 */ bottom: auto; /* 尺寸 */ width: 10px; height: 22px; border-radius: 6px; /* 【核心修复】绝对垂直居中 + 固定偏移 */ top: 45%; transform: translateY(-50%); margin-top: 4px; /* 向下偏移 */ left: 8px; /* 紧贴左块 (重叠 4px) */ background: var(--phycat-primary-color); mix-blend-mode: multiply; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; z-index: 1; } /* --- 居左 Hover 动效: 垂直拉伸 (保持紧凑) --- */ .theme-light.h1-align-left .markdown-preview-view h1:hover { transform: none; color: var(--phycat-primary-color); } /* 后层变化 */ .theme-light.h1-align-left .markdown-preview-view h1:hover::before { height: 32px; margin-top: 0; /* 回到正中 */ left: 4px; /* 微调 */ width: 6px; /* 变细 */ opacity: 0.3; border-radius: 3px; } /* 前层变化 */ .theme-light.h1-align-left .markdown-preview-view h1:hover::after { height: 26px; margin-top: 0; /* 回到正中 */ left: 12px; /* 微调 */ width: 6px; /* 变细 */ border-radius: 3px; box-shadow: 0 0 10px color-mix(in srgb, var(--phycat-primary-color), transparent 60%); } /* ================================================================= Layer 2.X: H2 样式 (双模切换) ================================================================= */ /* ----------------------------------------------------------------- 模式 A: 💊 胶囊风格 (Capsule - Original) 启用条件：Style Settings 选中 h2-style-capsule ----------------------------------------------------------------- */ .theme-light.h2-style-capsule .markdown-preview-view h2, .theme-light.h2-style-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 { /* 排版 */ color: var(--phycat-h2-color) !important; font-weight: bold; text-decoration: none !important; /* 盒子 */ display: inline-block; width: fit-content; padding: 6px 16px; border-radius: 8px; /* 背景与阴影 */ background-image: var(--h2-bg-gradient) !important; background-size: 200% auto; background-position: 0% center; background-repeat: no-repeat; box-shadow: 0 2px 5px var(--h2-shadow-color); border: 1px solid transparent !important; background-clip: padding-box; overflow: hidden; border-bottom: none !important; transition: background-position 0.5s ease-out, transform 0.4s ease, box-shadow 0.4s ease; } /* Capsule Hover */ .theme-light.h2-style-capsule .markdown-preview-view h2:hover { background-position: 100% center; transform: scale(1.01); box-shadow: 0 8px 20px var(--h2-shadow-hover); } /* 亮色模式下编辑区 H2 井号颜色适配 (Capsule) */ .theme-light.h2-style-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 .cm-formatting-header { color: var(--phycat-h2-color-2) !important; } /* ----------------------------------------------------------------- 模式 B: 🏛️ 双子塔风格 (Twin Pillars - New) 启用条件：Style Settings 选中 h2-style-twin (或默认) ----------------------------------------------------------------- */ /* 默认应用 Twin 样式 (如果没有选 Capsule)，或者显式选中 Twin */ .theme-light:not(.h2-style-capsule) .markdown-preview-view h2, .theme-light.h2-style-twin .markdown-preview-view h2, .theme-light:not(.h2-style-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2, .theme-light.h2-style-twin .markdown-source-view.mod-cm6 .HyperMD-header-2 { /* 基础重置 */ background: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; position: relative; padding-left: 20px; padding-right: 0; /* 左侧留白给双线 */ display: block; /* 占满行宽，但不带底色 */ width: 100%; transition: color 0.3s ease; } .theme-light:not(.h2-style-capsule) .markdown-preview-view h2 .heading-collapse-indicator, .theme-light.h2-style-twin .markdown-preview-view h2 .heading-collapse-indicator { margin-inline-start: -43px !important; } /* 线条 1：粗线 (Main Pillar) */ .theme-light:not(.h2-style-capsule) .markdown-preview-view h2::before, .theme-light.h2-style-twin .markdown-preview-view h2::before, .theme-light:not(.h2-style-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2::before, .theme-light.h2-style-twin .markdown-source-view.mod-cm6 .HyperMD-header-2::before { content: ""; position: absolute; left: 0; /* 修复 padding 干扰：弃用百分比，改用与字号绑定的 em 单位 */ top: auto; margin-top: 0.1em; height: 1em; width: 5px; background-color: var(--phycat-primary-color); border-radius: 4px; opacity: 1; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } .theme-light:not(.h2-style-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2::before, .theme-light.h2-style-twin .markdown-source-view.mod-cm6 .HyperMD-header-2::before { margin-top: 0.2em; } /* 线条 2：细线 (Sub Pillar) */ .theme-light:not(.h2-style-capsule) .markdown-preview-view h2::after, .theme-light.h2-style-twin .markdown-preview-view h2::after, .theme-light:not(.h2-style-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2::after, .theme-light.h2-style-twin .markdown-source-view.mod-cm6 .HyperMD-header-2::after { content: ""; position: absolute; left: 8px; /* 修复 padding 干扰：弃用百分比，改用与字号绑定的 em 单位 */ top: auto; margin-top: 0.3em; height: 0.6em; width: 2px; background-color: var(--secondary-color); border-radius: 2px; opacity: 0.6; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s; } .theme-light:not(.h2-style-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2::after, .theme-light.h2-style-twin .markdown-source-view.mod-cm6 .HyperMD-header-2::after { margin-top: 0.4em; } /* Twin Hover: 交错律动 */ /* (已补全编辑模式的 Hover 选择器) */ .theme-light:not(.h2-style-capsule) .markdown-preview-view h2:hover, .theme-light.h2-style-twin .markdown-preview-view h2:hover{ color: var(--phycat-primary-color) !important; } /* 粗线变化：铺底变淡 */ .theme-light:not(.h2-style-capsule) .markdown-preview-view h2:hover::before, .theme-light.h2-style-twin .markdown-preview-view h2:hover::before { top: auto; margin-top: 0em; height: 1.4em; /* 撑满文字默认行高 */ opacity: 0.4; } /* 细线变化：变粗高亮 */ .theme-light:not(.h2-style-capsule) .markdown-preview-view h2:hover::after, .theme-light.h2-style-twin .markdown-preview-view h2:hover::after { top: auto; margin-top: 0.15em; height: 1.1em; width: 4px; opacity: 1; background-color: var(--phycat-primary-color); } /* 亮色模式下编辑区 H2 井号颜色适配 (Twin - 恢复淡色) */ .theme-light:not(.h2-style-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2 .cm-formatting-header, .theme-light.h2-style-twin .markdown-source-view.mod-cm6 .HyperMD-header-2 .cm-formatting-header { color: var(--text-faint) !important; opacity: 0.4; } /* --- H3: 左侧竖条 (Left Border) --- */ .theme-light .markdown-preview-view h3 { width: fit-content; padding-left: 15px; transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } .theme-light .markdown-preview-view h3::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 1.3rem; border-radius: 4px; background-color: var(--phycat-primary-color); transition: all .3s cubic-bezier(.25, .8, .25, 1); } /* H3 Hover */ .theme-light .markdown-preview-view h3:hover { padding-left: 20px; color: var(--phycat-primary-color); } .theme-light .markdown-preview-view h3:hover::before { height: 24px; width: 7px; } /* --- H4: 实心圆点 (Solid Dot) --- */ .theme-light .markdown-preview-view h4 { padding-left: 20px; } .theme-light .markdown-preview-view h4::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: var(--phycat-primary-color); border: 1px solid var(--phycat-primary-color); transition: all .3s ease; } /* H4 Hover */ .theme-light .markdown-preview-view h4:hover { color: var(--light-deep); transform: translateX(6px); } .theme-light .markdown-preview-view h4:hover::before { transform: translateY(-50%) scale(1.3); box-shadow: 0 0 0 4px var(--light-lighter); } /* --- H5: 空心圆点 (Hollow Dot) --- */ .theme-light .markdown-preview-view h5 { padding-left: 20px; } .theme-light .markdown-preview-view h5::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-color: var(--phycat-h5-decoration-background); border: 2px solid var(--phycat-primary-color); box-sizing: border-box; transition: all .3s ease; } /* H5 Hover */ .theme-light .markdown-preview-view h5:hover { color: var(--light-deep); transform: translateX(6px); } .theme-light .markdown-preview-view h5:hover::before { background-color: var(--phycat-primary-color); transform: translateY(-50%) scale(1.2); box-shadow: 0 0 0 3px var(--light-lighter); } /* --- H6: 短横线 (Dash) --- */ .theme-light .markdown-preview-view h6 { padding-left: 20px; } .theme-light .markdown-preview-view h6::before { content: "-"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--phycat-primary-color); font-weight: bold; line-height: 1; transition: all .3s ease; } /* H6 Hover */ .theme-light .markdown-preview-view h6:hover { color: var(--light-deep); transform: translateX(6px); } .theme-light .markdown-preview-view h6:hover::before { transform: translateY(-50%) scaleX(1.8); } /* ================================================================= Layer 3: 暗色模式专用样式 (Dark Mode) 设计风格：赛博朋克、霓虹光晕、Flex布局 ================================================================= */ /* --- [暗色模式] H1 (默认: 居中 + 底部霓虹) --- */ .theme-dark .markdown-preview-view h1, .theme-dark .markdown-source-view.mod-cm6 .HyperMD-header-1 { padding-bottom: 12px; border-bottom: none; display: table; width: auto; min-width: 120px; text-align: center; margin-top: 2em; margin-bottom: 1em; margin-left: auto !important; margin-right: auto !important; position: relative; } .h1-align-left .markdown-preview-view h1 { padding-bottom: 0; ; } /* 装饰线 (默认居中) */ .theme-dark .markdown-preview-view h1::after, .theme-dark .markdown-source-view.mod-cm6 .HyperMD-header-1::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 40px; height: 4px; border-radius: 4px; background: var(--h1-underline-color); box-shadow: 0 0 5px var(--phycat-h1-box-shadow); transform: translateX(-50%); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Hover */ .theme-dark .markdown-preview-view h1:hover { text-shadow: var(--glow-shadow-text); } .theme-dark .markdown-preview-view h1:hover::after { width: 100%; box-shadow: 0 0 15px var(--h1-underline-color); } /* --- [暗色模式] H1 居左 Override (Style AB: 紧凑交叠版) --- */ .theme-dark.h1-align-left .markdown-preview-view h1, .theme-dark.h1-align-left .markdown-source-view.mod-cm6 .HyperMD-header-1 { text-align: left; margin-left: 0 !important; margin-right: auto !important; padding-left: 32px; } /* 1. 后层的块 */ .theme-dark.h1-align-left .markdown-preview-view h1::before, .theme-dark.h1-align-left .markdown-source-view.mod-cm6 .HyperMD-header-1::before { content: ""; position: absolute; top: 45%; transform: translateY(-50%); margin-top: -6px; /* 向上偏移 */ left: 2px; width: 10px; height: 22px; border-radius: 6px; background-color: var(--secondary-color); opacity: 0.6; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 0; } /* 2. 前层的块 */ .theme-dark.h1-align-left .markdown-preview-view h1::after, .theme-dark.h1-align-left .markdown-source-view.mod-cm6 .HyperMD-header-1::after { bottom: auto; top: 45%; transform: translateY(-50%); margin-top: 4px; /* 向下偏移 */ left: 8px; /* 紧贴 */ width: 10px; height: 22px; border-radius: 6px; background: var(--phycat-primary-color); mix-blend-mode: screen; /* 发光叠加 */ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.05s; z-index: 1; } /* 暗色 Hover */ .theme-dark.h1-align-left .markdown-preview-view h1:hover { text-shadow: var(--glow-shadow-text); } .theme-dark.h1-align-left .markdown-preview-view h1:hover::before { height: 32px; margin-top: 0; left: 4px; width: 6px; opacity: 0.4; } .theme-dark.h1-align-left .markdown-preview-view h1:hover::after { height: 26px; margin-top: 0; left: 12px; width: 6px; box-shadow: 0 0 15px var(--phycat-primary-color); } /* ================================================================= Layer 3.X: 暗色模式 H2 样式 (双模切换) ================================================================= */ /* ----------------------------------------------------------------- 模式 A: 🔮 玻璃胶囊风格 (Glass Capsule - Original) 启用条件：Style Settings 选中 h2-style-dark-capsule ----------------------------------------------------------------- */ .theme-dark.h2-style-dark-capsule .markdown-preview-view h2, .theme-dark.h2-style-dark-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2 { width: fit-content; padding: 5px 16px; border-radius: 8px; display: inline-block; background-color: var(--phycat-h2-background); background-image: var(--h2-bg-image); background-repeat: no-repeat; background-position: center bottom; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* 边框 */ border-top: 1px solid var(--phycat-h2-border-top); border-left: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid transparent; position: relative; z-index: 1; overflow: hidden; transition: color 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease; } /* H2 光晕伪元素 (实现 Fade In 效果) */ .theme-dark.h2-style-dark-capsule .markdown-preview-view h2::after, .theme-dark.h2-style-dark-capsule .markdown-source-view.mod-cm6 .HyperMD-header-2::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--h2-bg-image-hover); background-repeat: no-repeat; background-position: center bottom; opacity: 0; transition: opacity 0.5s ease; } /* H2 Hover */ .theme-dark.h2-style-dark-capsule .markdown-preview-view h2:hover { color: var(--phycat-primary-color); text-shadow: var(--glow-shadow-text); box-shadow: 0 4px 12px var(--phycat-h2-hover-box-shadow); transform: translateY(-1px); } .theme-dark.h2-style-dark-capsule .markdown-preview-view h2:hover::after { opacity: 1; } /* ----------------------------------------------------------------- 模式 B: 🏙️ 霓虹双子塔风格 (Neon Twin - New) 启用条件：Style Settings 选中 h2-style-dark-twin (或默认) ----------------------------------------------------------------- */ /* 默认应用 Twin 样式 (如果没有选 Capsule)，或者显式选中 Twin */ .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2, .theme-dark.h2-style-dark-twin .markdown-preview-view h2, .theme-dark:not(.h2-style-dark-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2, .theme-dark.h2-style-dark-twin .markdown-source-view.mod-cm6 .HyperMD-header-2 { /* 基础重置 */ background: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; position: relative; padding-left: 20px; padding-right: 0; /* 左侧留白 */ display: block; width: 100%; transition: color 0.3s ease; } /* 霓虹双线 (与亮色结构一致，但用光晕特效) */ /* 线条 1：粗线 (Main Pillar) */ .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2::before, .theme-dark.h2-style-dark-twin .markdown-preview-view h2::before, .theme-dark:not(.h2-style-dark-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2::before, .theme-dark.h2-style-dark-twin .markdown-source-view.mod-cm6 .HyperMD-header-2::before { content: ""; position: absolute; left: 0; /* 修复 padding 干扰：弃用百分比，改用 em 单位 */ top: auto; margin-top: 0.2em; height: 1em; width: 5px; background-color: var(--phycat-primary-color); border-radius: 4px; opacity: 0.8; box-shadow: 0 0 8px color-mix(in srgb, var(--phycat-primary-color), transparent 50%); /* 霓虹光 */ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } /* 线条 2：细线 (Sub Pillar) */ .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2::after, .theme-dark.h2-style-dark-twin .markdown-preview-view h2::after, .theme-dark:not(.h2-style-dark-capsule) .markdown-source-view.mod-cm6 .HyperMD-header-2::after, .theme-dark.h2-style-dark-twin .markdown-source-view.mod-cm6 .HyperMD-header-2::after { content: ""; position: absolute; left: 8px; /* 修复 padding 干扰：弃用百分比，改用 em 单位 */ top: auto; margin-top: 0.4em; height: 0.6em; width: 2px; background-color: var(--secondary-color); border-radius: 2px; opacity: 0.6; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0.05s; } /* Neon Twin Hover (已补全编辑模式的 Hover 选择器) */ .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2:hover, .theme-dark.h2-style-dark-twin .markdown-preview-view h2:hover{ color: var(--phycat-primary-color) !important; text-shadow: var(--glow-shadow-text); } /* 粗线变化：铺底变淡 (修复高度和位置计算) */ .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2:hover::before, .theme-dark.h2-style-dark-twin .markdown-preview-view h2:hover::before{ top: auto; margin-top: 0em; height: 1.4em; /* 撑满文字默认行高 */ opacity: 0.5; } /* 细线变化：变粗高亮 (修复高度和位置计算) */ .theme-dark:not(.h2-style-dark-capsule) .markdown-preview-view h2:hover::after, .theme-dark.h2-style-dark-twin .markdown-preview-view h2:hover::after{ top: auto; margin-top: 0.15em; height: 1.1em; width: 4px; opacity: 1; background-color: var(--phycat-primary-color); box-shadow: 0 0 12px var(--phycat-primary-color); /* 强光晕 */ } /* --- H3: 左侧胶囊指示条 --- */ .theme-dark .markdown-preview-view h3 { padding-left: 15px; display: block; transition: padding-left 0.3s ease, color 0.3s ease; } .theme-dark .markdown-preview-view h3::before { content: ''; position: absolute; /* 暗色模式 H3 依然保持 Absolute */ left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 1.3rem; background: var(--phycat-primary-color); border-radius: 2px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0.8; } /* H3 Hover */ .theme-dark .markdown-preview-view h3:hover { color: var(--phycat-primary-color); padding-left: 20px; text-shadow: var(--glow-shadow-text); } .theme-dark .markdown-preview-view h3:hover::before { height: 24px; opacity: 1; box-shadow: var(--glow-shadow-box); } /* --- H4: Flex对齐 + 实心圆点 --- */ .theme-dark .markdown-preview-view h4 { /* 暗色模式使用 Flex 布局 */ display: flex; align-items: center; } .theme-dark .markdown-preview-view h4::before { content: ""; margin-right: 10px; display: inline-block; background-color: var(--phycat-primary-color); width: 8px; height: 8px; border-radius: 50%; transition: all 0.3s ease; flex-shrink: 0; } /* H4 Hover */ .theme-dark .markdown-preview-view h4:hover { color: var(--phycat-primary-color); text-shadow: var(--glow-shadow-text); transform: translateX(5px); } .theme-dark .markdown-preview-view h4:hover::before { transform: scale(1.2); box-shadow: var(--glow-shadow-box); } /* --- H5: Flex对齐 + 空心圆点 --- */ .theme-dark .markdown-preview-view h5 { display: flex; align-items: center; } .theme-dark .markdown-preview-view h5::before { content: ""; margin-right: 10px; display: inline-block; background-color: transparent; border: 1.5px solid var(--phycat-primary-color); width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; transition: all 0.3s ease; flex-shrink: 0; } /* H5 Hover */ .theme-dark .markdown-preview-view h5:hover { color: var(--phycat-primary-color); text-shadow: var(--glow-shadow-text); transform: translateX(5px); } .theme-dark .markdown-preview-view h5:hover::before { background-color: transparent; border-color: var(--phycat-primary-color); box-shadow: var(--glow-shadow-box); transform: scale(1.2); } /* --- H6: Flex对齐 + 短横线 --- */ .theme-dark .markdown-preview-view h6 { display: flex; align-items: center; } .theme-dark .markdown-preview-view h6::before { content: "-"; color: var(--phycat-primary-color); margin-right: 11px; display: inline-block; font-weight: bold; transition: all 0.3s ease; } /* H6 Hover */ .theme-dark .markdown-preview-view h6:hover { color: var(--phycat-primary-color); text-shadow: var(--glow-shadow-text); transform: translateX(5px); } .theme-dark .markdown-preview-view h6:hover::before { text-shadow: var(--glow-shadow-text); transform: scaleX(1.5); } /* ================================================================= Layer 4: 标题末尾装饰图标 (通用) ================================================================= */ /* 1. 基础结构 (亮暗共用) */ .markdown-preview-view h3::after, .markdown-preview-view h4::after, .markdown-preview-view h5::after, .markdown-preview-view h6::after { content: " "; display: inline-block; height: 1.2em; width: 1.2em; vertical-align: top; margin-left: 8px; background-color: var(--phycat-primary-color); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; opacity: 0.5; } /* 2. 亮色模式微调 (可选) */ .theme-light h3::after, .theme-light h4::after, .theme-light h5::after, .theme-light h6::after { background-color: var(--light-light) !important; opacity: 0.5; } /* 3. 图标形状映射 */ .markdown-preview-view h3::after { -webkit-mask-image: var(--h3-icon-shape); mask-image: var(--h3-icon-shape); } .markdown-preview-view h4::after { -webkit-mask-image: var(--h4-icon-shape); mask-image: var(--h4-icon-shape); } .markdown-preview-view h5::after { -webkit-mask-image: var(--h5-icon-shape); mask-image: var(--h5-icon-shape); } .markdown-preview-view h6::after { -webkit-mask-image: var(--h6-icon-shape); mask-image: var(--h6-icon-shape); } /* ================================================================= 编辑模式专用标题样式 (Source Mode / Live Preview) - 完美还原版 ================================================================= */ /* ----------------------------------------------------------------- 1. 基础重置 & 井号处理 ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-header { font-weight: bold; line-height: 1.4; position: relative; } /* 优化井号 (#) 显示：变淡、等宽，但不隐藏 */ .markdown-source-view.mod-cm6 .cm-formatting-header { color: var(--phycat-primary-color); /* 极淡色，不抢眼 */ font-family: var(--font-monospace); font-weight: normal; /* 稍微缩小 */ margin-right: 8px; /* 和标题文字拉开距离 */ opacity: 0.4; } /* ----------------------------------------------------------------- 2. H1: 居中 + 底部渐变线 (还原 Preview) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-header-1 { text-align: center; justify-content: center; border-bottom: none; /* 去掉默认下划线，用伪元素画 */ } /* H1 底部渐变短线 */ .markdown-source-view.mod-cm6 .HyperMD-header-1::after { content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; /* 适配亮/暗模式的颜色逻辑 */ background: var(--phycat-primary-color); /* 如果能读到渐变变量最好，读不到就用主色 */ background-image: var(--h2-bg-gradient, linear-gradient(to right, var(--phycat-primary-color), var(--phycat-primary-color))); margin: 8px auto 0 auto; /* 绝对居中 */ opacity: 0.8; } /* ================================================================= 编辑模式标题样式 - 智能流式定位版 (Auto-Flow Positioning) 特点：跟随文字基线，不受空行影响，去除抖动动画 ================================================================= */ /* ----------------------------------------------------------------- 4. H3: 左侧竖条 (Capsule) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-header-3 { padding-left: 20px; } .markdown-source-view.mod-cm6 .HyperMD-header-3::before { content: ""; position: absolute; /* 【核心技巧】不设置 top，让浏览器自动寻找文字起始行位置 */ /* top: 1.7em; <-- 删掉这个 */ /* 使用 margin-top 相对于文字行进行微调 */ /* H3文字较大，竖条高18px，大概下移 5-6px 居中 */ margin-top: 0.3rem; left: 0; width: 5px; height: 1.3rem; border-radius: 4px; background-color: var(--phycat-primary-color); opacity: 0.8; pointer-events: none; } /* ----------------------------------------------------------------- 5. H4: 实心圆点 (Solid Dot) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-header-4 { padding-left: 20px; } .markdown-source-view.mod-cm6 .HyperMD-header-4::before { content: ""; position: absolute; /* 不设 top */ /* H4文字稍小，圆点10px，大概下移 8px 居中 */ margin-top: 0.46rem; left: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--phycat-primary-color); border: 1px solid var(--phycat-primary-color); pointer-events: none; } /* ----------------------------------------------------------------- 6. H5: 空心圆点 (Hollow Dot) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-header-5 { padding-left: 20px; } .markdown-source-view.mod-cm6 .HyperMD-header-5::before { content: ""; position: absolute; /* 不设 top */ /* H5文字更小，圆点10px，下移量微调 */ margin-top: 0.5rem; left: 0; width: 10px; height: 10px; border-radius: 50%; background-color: transparent; border: 2px solid var(--phycat-primary-color); box-sizing: border-box; /* 亮色模式修正背景 */ background-color: var(--bg-color, transparent); pointer-events: none; } /* ----------------------------------------------------------------- 7. H6: 短横线 (Dash) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-header-6 { padding-left: 20px; } .markdown-source-view.mod-cm6 .HyperMD-header-6::before { content: "-"; position: absolute; /* 不设 top */ left: 0; color: var(--phycat-primary-color); font-weight: bold; line-height: 1.4; /* 与父元素一致 */ font-family: var(--font-monospace); pointer-events: none; } /* ----------------------------------------------------------------- 8. 交互反馈 (已移除动画，仅保留颜色/透明度变化) ----------------------------------------------------------------- */ /* 只有在 hover 时稍微加深一点颜色或不透明度，不要动位置和大小 */ .markdown-source-view.mod-cm6 .HyperMD-header:hover::before { opacity: 1; border-color: var(--phycat-primary-color); /* transform: ... <-- 删掉了所有位移和缩放 */ } /* ----------------------------------------------------------------- 9. (可选) 尾部装饰图标 - 如果你想在编辑模式也保留 ----------------------------------------------------------------- */ /* 这里我们用 ::after，为了不影响 H1 的底部线条，我们需要排除 H1 */ .markdown-source-view.mod-cm6 .HyperMD-header-3::after, .markdown-source-view.mod-cm6 .HyperMD-header-4::after, .markdown-source-view.mod-cm6 .HyperMD-header-5::after, .markdown-source-view.mod-cm6 .HyperMD-header-6::after { content: ""; display: inline-block; vertical-align: top; width: 1.2em; height: 1.2em; margin-left: 8px; background-color: var(--phycat-primary-color); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; opacity: 0.3; pointer-events: none; } /* 映射图标 (Layer 4 的变量) */ .markdown-source-view.mod-cm6 .HyperMD-header-3::after { -webkit-mask-image: var(--h3-icon-shape); mask-image: var(--h3-icon-shape); } .markdown-source-view.mod-cm6 .HyperMD-header-4::after { -webkit-mask-image: var(--h4-icon-shape); mask-image: var(--h4-icon-shape); } .markdown-source-view.mod-cm6 .HyperMD-header-5::after { -webkit-mask-image: var(--h5-icon-shape); mask-image: var(--h5-icon-shape); } .markdown-source-view.mod-cm6 .HyperMD-header-6::after { -webkit-mask-image: var(--h6-icon-shape); mask-image: var(--h6-icon-shape); } /* ================================================================= 1. 普通列表样式 (有序/无序) ================================================================= */ /* 列表标记颜色 */ .markdown-preview-view ul>li::marker, .markdown-preview-view ol>li::marker { color: var(--phycat-primary-color); } /* 强调文字样式调整 */ .markdown-preview-view em { padding: 0 3px 0 0; color: var(--secondary-color); /* 稍微增加一点颜色区分 */ } /* --- 列表符号层级 (Bullet Styles) --- */ .markdown-preview-view ul { list-style-type: disc; } .markdown-preview-view ul ul { list-style-type: circle; } .markdown-preview-view ul ul ul { list-style-type: square; } .markdown-preview-view ol { list-style-type: decimal; } .markdown-preview-view ol ol { list-style-type: lower-alpha; } .markdown-preview-view ol ol ol { list-style-type: lower-roman; } .markdown-preview-view ul>li>ol { padding-left: 25px; } /* ================================================================= 2. 左侧层级连接线 (Tree Guide Lines) ================================================================= */ /* 核心逻辑：在 li 左侧画一条竖线 注意：Obsidian 的 DOM 结构比较深，这里只给非任务列表加线， 或者通过调整 left 值兼容。 */ .markdown-preview-view li { position: relative; } .markdown-preview-view li::before { content: ""; position: absolute; /* 【动态适配】Top: 刚好在第一行文字下方 (1倍行高) */ top: calc(var(--line-height-customize) * 1em); /* 【动态适配】Height: 总高度 - (Top偏移 + 底部留白) */ /* 这里的 1.5em 系数对应原先 3.3rem (约等于 1.5 * 2.2rem) */ height: calc(100% - (var(--line-height-customize) * 1.5em)); bottom: 0; left: -18px; border-left: 1px solid var(--phycat-primary-color); opacity: 0.5; pointer-events: none; } .markdown-preview-view ul>li::before { left: -0.83rem; } /* 第一层不需要连接线，否则会在最左边出现一条长线 */ .markdown-preview-view>div>ul>li::before, .markdown-preview-view>div>ol>li::before { display: none; } /* 任务列表的线需要微调位置 */ .markdown-preview-view li.task-list-item::before { left: -0.7rem; height: calc(100% - var(--line-height-customize) * 1.4em); } .markdown-rendered.show-indentation-guide li>ul::before, .markdown-rendered.show-indentation-guide li>ol::before { display: none !important; border: none !important; } .el-ol ol li { margin-left: 35px; } /* ================================================================= 编辑模式列表最终优化 (隐藏星号 + 彩虹圆点) ================================================================= */ /* ----------------------------------------------------------------- 1. 核心逻辑：定义每层的颜色变量 (Rainbow Variables) ----------------------------------------------------------------- */ /* 默认颜色 (防止没有匹配到层级时消失) */ .markdown-source-view.mod-cm6 .HyperMD-list-line { --list-color: var(--text-muted); } /* --- Level 1: 红色 --- */ .markdown-source-view.mod-cm6 .HyperMD-list-line-1, .markdown-source-view.mod-cm6 .HyperMD-list-line-2, .markdown-source-view.mod-cm6 .HyperMD-list-line-3, .markdown-source-view.mod-cm6 .HyperMD-list-line-4, .markdown-source-view.mod-cm6 .HyperMD-list-line-5, .markdown-source-view.mod-cm6 .HyperMD-list-line-6 { --list-color: var(--phycat-primary-color); /* #ff5555 */ } /* ----------------------------------------------------------------- 2. 列表圆点 (Bullet) - 解决重叠冲突 ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .list-bullet { /* 【核心修改】将原本的星号 (*) 设为透明 */ color: transparent !important; /* 依然保留占位，确保后面的文字缩进正确 */ position: relative; /* 调整圆点区域的间距 */ margin-right: 12px !important; /* 确保伪元素定位基准 */ display: inline-block; } /* 实心圆点 (伪元素) */ .markdown-source-view.mod-cm6 .list-bullet:after { content: ""; position: absolute; /* 居中定位 */ top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.1); height: 6px; width: 6px; border-radius: 50%; /* 【核心修改】读取父级定义的变量，而不是 currentColor */ background-color: var(--list-color) !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Hover 动效：圆点放大 + 发光 */ .markdown-source-view.mod-cm6 .HyperMD-list-line:hover .list-bullet:after { transform: translate(-50%, -50%) scale(1.6); box-shadow: 0 0 8px var(--list-color); } /* ----------------------------------------------------------------- 3. 布局与行间距 ----------------------------------------------------------------- */ /* .markdown-source-view.mod-cm6 .HyperMD-list-line { padding-top: 0.5em !important; padding-bottom: 0.5em !important; line-height: 1.8 !important; } */ /* ================================================================= 4. 编辑模式缩进线 (Indentation Guides) - 纯净连贯版 ================================================================= */ .markdown-source-view.is-live-preview { --list-padding-inline-start: 0; } .markdown-source-view.mod-cm6 .cm-indent::before { margin-inline-start: 3px !important; } /* 3. 激活状态 (Active State) */ /* 当光标在当前层级时，线条变亮，方便确认层级 */ .markdown-source-view.mod-cm6 .cm-active-indent::before { opacity: 1 !important; /* 变成实心 */ box-shadow: 0 0 8px var(--phycat-primary-color); /* 加一点霓虹光晕 */ /* 激活时让它处于最上层，防止被上下遮挡 */ z-index: 1; } /* ----------------------------------------------------------------- 5. 任务列表复选框适配 ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-list-line .task-list-item-checkbox { border-color: var(--list-color) !important; } .markdown-source-view.mod-cm6 .HyperMD-list-line .task-list-item-checkbox:checked { background-color: var(--list-color) !important; box-shadow: 0 0 5px var(--list-color); } .markdown-source-view.mod-cm6 .list-number { /* 【核心】统一使用主题色，与左侧缩进线呼应 */ color: var(--phycat-primary-color) !important; /* 使用等宽字体，确保数字对齐 */ font-family: "Cascadia Code", "Lucida Console", monospace !important; /* 稍微加粗，提高辨识度 */ font-weight: bold; /* 增加一点右边距，让数字和后面的文字稍微分开 */ margin-right: 4px; } /* ================================================================= 图片排版与对齐 (Image Alignment & Layout) - 独占一行修复版 使用语法: ![[image.png|left]], ![[image.png|right]], ![[image.png|center]] 修复 1：使用 Flex 布局替代 Float，确保图片独占一行，文字不环绕 修复 2：统一作用于 .image-embed 容器，完美兼容【实时预览】和【阅读模式】 ================================================================= */ /* --- 1. 通用容器强制独占一行 --- */ .image-embed[alt*="right" i], .image-embed[alt*="+R" i], .image-embed[alt*="left" i], .image-embed[alt*="+L" i], .image-embed[alt*="center" i], .image-embed[alt*="+C" i], .image-embed[alt*="banner" i] { /* 强制设为 flex 容器，独占整行宽度 */ display: flex !important; width: 100% !important; margin-top: 0.5rem; margin-bottom: 0.5rem; } /* --- 2. 居右对齐 (独占一行，靠右) --- */ .image-embed[alt*="right" i], .image-embed[alt*="+R" i] { justify-content: flex-end; /* 把图片推到最右边 */ } /* --- 3. 居左对齐 (独占一行，靠左) --- */ .image-embed[alt*="left" i], .image-embed[alt*="+L" i] { justify-content: flex-start; /* 把图片推到最左边 */ } /* --- 4. 居中对齐 (独占一行，居中) --- */ .image-embed[alt*="center" i], .image-embed[alt*="+C" i] { justify-content: center; /* 居中 */ } /* --- 5. 图片本身的圆角和阴影美化 --- */ .image-embed[alt*="right" i] img, .image-embed[alt*="+R" i] img, .image-embed[alt*="left" i] img, .image-embed[alt*="+L" i] img, .image-embed[alt*="center" i] img, .image-embed[alt*="+C" i] img { border-radius: 8px; box-shadow: 0 4px 15px var(--phycat-interface-box-shadow); /* 添加精致的轻微悬浮阴影 */ } /* --- 6. 横幅宽图 (Banner) --- */ /* 语法: ![[image.png|banner]] */ .image-embed[alt*="banner" i] { justify-content: center; } .image-embed[alt*="banner" i] img { width: 100% !important; /* 强制填满容器 */ max-height: 250px; /* 限制最高高度 */ object-fit: cover; /* 裁剪填充，保证图片比例不变形 */ border-radius: 12px; box-shadow: 0 4px 15px var(--phycat-interface-box-shadow); } /* ================================================================= Typora 任务列表 - 强制修复版 (Fix Missing Checkmark) ================================================================= */ .markdown-preview-view ul.contains-task-list { margin-left: 10px; } .markdown-preview-view ul.contains-task-list { margin-left: 10px; } /* 1. 【核心修复】重置复选框基础样式 */ .markdown-preview-view input[type="checkbox"], .markdown-preview-view .task-list-item-checkbox { /* 强制去掉原生外观 */ -webkit-appearance: none !important; appearance: none !important; /* 强制去掉背景和边框 */ background: transparent !important; border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; /* 关键：重置位置 */ position: absolute !important; margin: 0 !important; padding: 0 !important; left: -1.3rem !important; /* 【修复点】动态计算 Top 值：(行高 - 复选框大小) / 2 */ /* 这能确保无论你如何调整行高，复选框永远垂直居中 */ top: calc((var(--line-height-customize) * 1.1rem - var(--checkbox-size)) / 2) !important; width: var(--checkbox-size) !important; height: var(--checkbox-size) !important; z-index: 10; /* 关键：杀掉原生的 SVG 遮罩 */ -webkit-mask-image: none !important; mask-image: none !important; } /* 2. 圆形底座 (::before) */ .markdown-preview-view input[type="checkbox"]::before, .markdown-preview-view .task-list-item-checkbox::before { content: "" !important; display: block !important; position: absolute !important; inset: 0 !important; width: 1.2rem !important; height: 1.2rem !important; border-radius: 50% !important; /* --- 适配变量：未选中状态 --- */ background-color: var(--checkbox-bg-unchecked) !important; border: 2px solid var(--checkbox-border-unchecked) !important; box-sizing: border-box !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4); z-index: 1; } /* 选中状态 - 底座 */ .markdown-preview-view input[type="checkbox"]:checked::before, .markdown-preview-view .task-list-item-checkbox:checked::before { /* 边框变为主题色 */ border: 1px solid var(--phycat-primary-color) !important; /* --- 适配变量：选中背景与光晕 --- */ background-color: var(--checkbox-bg-checked) !important; box-shadow: var(--checkbox-shadow-checked) !important; animation: task-pulse 0.4s forwards; } /* 3. 【重点】白色对勾 (::after) - 居中优化 */ .markdown-preview-view input[type="checkbox"]::after, .markdown-preview-view .task-list-item-checkbox::after { content: "" !important; display: block !important; position: absolute !important; z-index: 2 !important; /* 【修复点】使用绝对居中，不再写死 top/left */ top: 45% !important; left: 50% !important; width: 0.45rem !important; height: 0.25rem !important; background-color: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; /* --- 适配变量：对勾颜色 --- */ border: 2.5px solid var(--checkmark-color) !important; border-top: 0 !important; border-right: 0 !important; /* 动画初始状态 (包含居中位移) */ transform: translate(-50%, -50%) rotate(-45deg) scale(0); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4); } /* 选中状态 - 对勾显示 */ .markdown-preview-view input[type="checkbox"]:checked::after, .markdown-preview-view .task-list-item-checkbox:checked::after { opacity: 1 !important; /* 保持居中位移 */ transform: translate(-50%, -50%) rotate(-45deg) scale(1) !important; border-color: var(--checkmark-color) !important; } .markdown-preview-view .task-list-item[data-task="/"] { color: var(--text-normal) !important; /* 恢复正常文字色 */ text-decoration: none !important; /* 去掉删除线 */ opacity: 1 !important; /* 保持不透明 */ } /* 强制子元素（粗体等）也去掉删除线 */ .markdown-preview-view .task-list-item[data-task="/"] p, .markdown-preview-view .task-list-item[data-task="/"] strong, .markdown-preview-view .task-list-item[data-task="/"] em, .markdown-preview-view .task-list-item[data-task="/"] code { text-decoration: none !important; color: inherit !important; } /* 1.2 图标样式：将“对勾”替换为“圆点” */ .markdown-preview-view .task-list-item[data-task="/"] input[type="checkbox"]:checked::after { content: "" !important; /* 重置对勾的边框样式 */ border: none !important; /* 绘制实心圆点 */ width: 6px !important; height: 6px !important; border-radius: 50% !important; background-color: var(--checkmark-color) !important; /* 绝对居中 */ top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; } /* 1.3 底座样式：可以使用不同的颜色（可选） */ /* 这里保持主题色，但如果你想让“进行中”是蓝色的，可以解开下面注释 */ /* .markdown-preview-view .task-list-item[data-task="/"] input[type="checkbox"]:checked::before { background-color: #3498db !important; border-color: #3498db !important; box-shadow: 0 0 8px rgba(52, 152, 219, 0.6) !important; } */ /* ----------------------------------------------------------------- 2. 已取消 (Canceled) -> [ - ] 设计：圆圈内叉号，文字删除线 + 变灰 ----------------------------------------------------------------- */ /* 2.1 文本样式：加强删除感，整体变暗 */ .markdown-preview-view .task-list-item[data-task="-"] { color: var(--text-muted) !important; /* 使用更淡的颜色 */ text-decoration: line-through !important; opacity: 0.7 !important; /* 降低整体不透明度 */ } /* 确保粗体等子元素也被划掉 */ .markdown-preview-view .task-list-item[data-task="-"] strong, .markdown-preview-view .task-list-item[data-task="-"] em { text-decoration: line-through !important; color: inherit !important; } /* 2.2 底座样式：变灰 (灰色代表无效/取消) */ .markdown-preview-view .task-list-item[data-task="-"] input[type="checkbox"]:checked::before { background-color: var(--text-muted) !important; /* 底座变灰 */ border-color: var(--text-muted) !important; box-shadow: none !important; /* 取消发光，低调处理 */ } /* 2.3 图标样式：将“对勾”替换为“叉号 (X)” */ .markdown-preview-view .task-list-item[data-task="-"] input[type="checkbox"]:checked::after { /* 使用 Unicode 粗叉号 */ content: "\2715" !important; /* 重置样式 */ border: none !important; transform: none !important; background: transparent !important; /* 字体排版 */ font-size: 13px !important; font-weight: 800 !important; color: var(--phycat-task-color) !important; /* 白色叉号 */ /* 绝对居中 */ display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 100% !important; top: -1px !important; left: -0.3px !important; } /* 4. 脉冲动画 */ @keyframes task-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } /* ================================================================= 5. 文本柔和过渡动画 (Text Smooth Transition) - 修复版 ================================================================= */ /* 5.1 基础状态 (未完成) */ .markdown-preview-view .task-list-item { position: relative; list-style: none; padding-left: 4px; min-height: calc(var(--line-height-customize) * 1em); /* --- 关键动画配置 --- */ transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), text-decoration-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* 未完成任务不要预设透明删除线，否则选中文字时会被选区颜色显现。 */ text-decoration: none !important; text-decoration-color: transparent !important; text-decoration-thickness: 2px !important; } /* 5.2 选中状态 (已完成) - 父级控制 */ .markdown-preview-view .task-list-item.is-checked { color: var(--phycat-task-color-2) !important; opacity: 0.8; /* 让删除线显现 */ text-decoration-line: line-through !important; text-decoration-color: var(--text-color-secondary) !important; } /* 5.3 【核心修复】强制穿透子元素 (Fix Bold/Italic Strikethrough) */ /* 因为 strong 是 inline-block，父级的删除线传不进去，必须单独给它们也加上 */ .markdown-preview-view .task-list-item.is-checked p, .markdown-preview-view .task-list-item.is-checked strong, .markdown-preview-view .task-list-item.is-checked em, .markdown-preview-view .task-list-item.is-checked mark, .markdown-preview-view .task-list-item.is-checked code { text-decoration: line-through !important; text-decoration-color: var(--text-color-secondary) !important; text-decoration-thickness: 2px !important; /* 确保子元素颜色也变淡，不然粗体还是黑的 */ color: inherit !important; opacity: 1 !important; /* 使用继承的透明度 */ } /* ================================================================= 引用块样式 (Blockquote) - 玻璃拟态卡片风格 ================================================================= */ /* 引用块行高设置 */ .markdown-preview-view blockquote p,.HyperMD-quote.HyperMD-quote-1.cm-line { line-height: var(--blockquote-line-height); } /* 1. 容器主体样式 */ .theme-dark .markdown-preview-view blockquote { position: relative; margin: 20px 0; padding: 18px 20px 18px 48px; /* 左侧留出 48px 给图标 */ /* 颜色与背景 */ color: var(--text-color-secondary); background-color: var(--phycat-blockquote-background); /* 边框处理 */ border: 1px solid color-mix(in srgb, var(--secondary-color), transparent 70%); /* 使用主题定义的边框 */ border-radius: 16px; /* 动画过渡 */ transition: all 0.3s ease; } /* 2. 图标装饰 (::before) */ .theme-dark .markdown-preview-view blockquote::before { content: "💡"; /* 可以按需修改为 📌, 📝, ✨ */ position: absolute; left: 14px; /* 根据 padding 微调，确保居中 */ top: 18px; /* 【微调】Typora 原版是 2px，但在 Obsidian 中 2px 会太靠上，18px 与第一行文字对齐更好看 */ font-size: 20px; line-height: 1; filter: grayscale(1); /* 默认黑白 */ opacity: 0.8; /* 初始状态：稍微歪一点，有点俏皮的感觉 */ transform: rotate(30deg); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 贝塞尔曲线：带回弹效果 */ } /* 3. 内部文字样式 */ .theme-dark .markdown-preview-view blockquote p { color: var(--text-color-secondary); margin-block-start: 0; margin-block-end: 0; margin-bottom: 0.5em; /* 稍微紧凑一点的行高，适合引用 */ } .theme-dark .markdown-preview-view blockquote p:last-child { margin-bottom: 0; } /* 4. Hover 交互效果 (悬停时高亮) */ .theme-dark .markdown-preview-view blockquote:hover { border-color: var(--phycat-primary-color); background-color: color-mix(in srgb, var(--hover-background-color), transparent 95%); /* 光晕效果 */ box-shadow: 0 0 15px color-mix(in srgb, var(--hover-background-color), transparent 90%), inset 0 0 10px color-mix(in srgb, var(--hover-background-color), transparent 95%); transform: scale(1.01); /* 微微放大 */ } /* 5. Hover 时图标的动画 */ .theme-dark .markdown-preview-view blockquote:hover::before { filter: grayscale(0); /* 恢复彩色 */ opacity: 1; transform: rotate(0deg); /* 转正 */ text-shadow: 0 0 10px var(--phycat-primary-color); /* 图标发光 */ } /* ================================================================= 引用块优化 (Light Mode) - 樱花便签风格 (修正版) ================================================================= */ /* 1. 容器主体样式 (预览模式) */ .theme-light .markdown-preview-view blockquote { position: relative; margin: 20px 0; padding: 18px 20px 18px 48px; /* 左侧留出 48px 给图标 */ /* --- 修正2：背景颜色加深 --- */ /* 之前是 white 90%，现在改为 82%，增加饱和度，避免和页面背景混在一起 */ background-color: var(--blockquote-background-color); /* --- 修正1：增加浅浅的边框 --- */ /* 平时就显示一个淡淡的主题色边框 (20%不透明度) */ border: 1px solid color-mix(in srgb, var(--phycat-primary-color), transparent 80%); border-radius: 16px; /* 文字颜色 */ color: var(--text-muted); /* 动画过渡 */ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } /* 2. 图标装饰 (::before) - 使用星星 ✨ */ .theme-light .markdown-preview-view blockquote::before { content: "✨"; position: absolute; left: 14px; top: 18px; font-size: 20px; line-height: 1; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; /* --- 修正3：未Hover时不要变灰 --- */ filter: none; /* 去掉 grayscale */ opacity: 1; /* 保持完全不透明 (或者 0.8 稍微淡一点点) */ /* 依然保留一点俏皮的歪头角度 */ transform: rotate(30deg); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } /* 3. 内部文字样式 */ .theme-light .markdown-preview-view blockquote p { color: var(--text-muted); margin-block-start: 0; margin-block-end: 0; margin-bottom: 0.5em; } .theme-light .markdown-preview-view blockquote p:last-child { margin-bottom: 0; } /* 4. Hover 交互效果 (悬停时变为实体卡片) */ .theme-light .markdown-preview-view blockquote:hover { /* 微微放大 */ transform: scale(1.02); /* 背景稍微再深一点，增加交互感 */ background-color: color-mix(in srgb, var(--phycat-primary-color), white 92%); /* 边框颜色加深 (从20%变成100%) */ border-color: var(--phycat-primary-color); /* 投影显现 */ box-shadow: 0 8px 20px color-mix(in srgb, var(--phycat-primary-color), transparent 85%); } /* 5. Hover 时图标的动画 */ .theme-light .markdown-preview-view blockquote:hover::before { /* 只需要转正和发光，不需要再处理 filter 了 */ transform: rotate(0deg); text-shadow: 0 0 8px var(--phycat-primary-color); } /* ================================================================= 超链接样式 (Link Style) - 呼吸扩充 (Breathing Expand) 风格：方括号包裹，悬停时向两侧弹开 + 背景浮现 适配：亮/暗模式通用 + 彻底去除编辑模式干扰图标 ================================================================= */ /* 1. 通用基础样式 (阅读模式 & 编辑模式 & 表格) */ .markdown-preview-view a.internal-link, .markdown-preview-view a.external-link, .markdown-source-view.mod-cm6 .cm-link .cm-underline, .markdown-source-view.mod-cm6 .cm-table-widget a { /* --- 文本样式 --- */ color: var(--phycat-interactive-color) !important; text-decoration: none !important; font-weight: 500; /* --- 布局准备 --- */ padding: 0 2px; /* 基础内边距 */ margin: 0; border-radius: 4px; position: relative; /* --- 清理旧版样式 (核心修复) --- */ border-bottom: none !important; background-image: none !important; /* 杀掉右上角小图标 */ padding-right: 2px !important; /* 杀掉给图标留的右边距 */ cursor: pointer; /* --- 动效基础 --- */ transition: all 0.3s ease; } /* 2. 定义括弧 (Pseudo Brackets) */ .markdown-preview-view a.internal-link::before, .markdown-preview-view a.external-link::before, .markdown-source-view.mod-cm6 .cm-link .cm-underline::before, .markdown-source-view.mod-cm6 .cm-table-widget a::before { content: "["; display: inline-block; color: var(--text-muted); /* 平时是低调的灰色 */ margin-right: 1px; opacity: 0.7; /* 动效：位移 + 颜色 */ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s, opacity 0.3s; } .markdown-preview-view a.internal-link::after, .markdown-preview-view a.external-link::after, .markdown-source-view.mod-cm6 .cm-link .cm-underline::after, .markdown-source-view.mod-cm6 .cm-table-widget a::after { content: "]"; display: inline-block; color: var(--text-muted); margin-left: 1px; opacity: 0.7; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s, opacity 0.3s; } /* 3. 悬停交互 (Hover Effects) */ .markdown-preview-view a.internal-link:hover, .markdown-preview-view a.external-link:hover, .markdown-source-view.mod-cm6 .cm-link .cm-underline:hover, .markdown-source-view.mod-cm6 .cm-table-widget a:hover { /* --- 背景浮现 (极淡) --- */ background-color: color-mix(in srgb, var(--phycat-interactive-hover), transparent 90%); /* 文字颜色提亮 */ color: var(--phycat-interactive-hover) !important; text-decoration: none !important; } /* Hover 时：左括号向左弹射 */ .markdown-preview-view a.internal-link:hover::before, .markdown-preview-view a.external-link:hover::before, .markdown-source-view.mod-cm6 .cm-link .cm-underline:hover::before, .markdown-source-view.mod-cm6 .cm-table-widget a:hover::before { transform: translateX(-4px); /* 向左弹 */ color: var(--phycat-interactive-hover); /* 变主题色 */ font-weight: bold; opacity: 1; } /* Hover 时：右括号向右弹射 */ .markdown-preview-view a.internal-link:hover::after, .markdown-preview-view a.external-link:hover::after, .markdown-source-view.mod-cm6 .cm-link .cm-underline:hover::after, .markdown-source-view.mod-cm6 .cm-table-widget a:hover::after { transform: translateX(4px); /* 向右弹 */ color: var(--phycat-interactive-hover); font-weight: bold; opacity: 1; } /* 4. 彻底移除干扰图标 (Cleanup Icons) */ /* 隐藏阅读模式可能存在的图标 */ .markdown-preview-view .external-link-icon, /* 编辑模式：只隐藏那个专门显示图标的 span */ .markdown-source-view.mod-cm6 .cm-link .external-link, .markdown-source-view.mod-cm6 .cm-formatting-link-string.external-link, .markdown-source-view.mod-cm6 .cm-url.external-link { display: none !important; width: 0 !important; height: 0 !important; content: none !important; background-image: none !important; padding: 0 !important; margin: 0 !important; } /* 表格中的链接：紧凑处理 */ .markdown-preview-view table td a, .markdown-source-view.mod-cm6 .cm-table-widget a { padding: 0 2px !important; } /* ----------------------------------------------------------------- 1. 高亮文本 (Mark / ==text==) - 弹性注水风格 (Elastic Ink) 修复：兼容用户自定义颜色 (e.g. ) ----------------------------------------------------------------- */ /* [第一层：通用基础结构] */ /* 这些样式对所有高亮生效（包括用户自定义颜色的高亮），保证圆角和间距统一 */ .markdown-preview-view mark, .markdown-source-view.mod-cm6 mark, .markdown-source-view.mod-cm6 .cm-highlight { padding: 0 2px; margin: 0; border-radius: 4px; font-weight: inherit; color: inherit; text-decoration: none; text-shadow: none; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 彻底移除之前的伪元素 (花括号) */ .markdown-preview-view mark::before, .markdown-preview-view mark::after, .markdown-source-view.mod-cm6 mark::before, .markdown-source-view.mod-cm6 mark::after, .markdown-source-view.mod-cm6 .cm-highlight::before, .markdown-source-view.mod-cm6 .cm-highlight::after { content: none !important; display: none !important; } /* [第二层：主题特效] */ /* 【关键修复】使用 :not([style*="background"]) 排除掉用户自定义了背景色的元素 */ /* 只有当用户没有手动设置 style="background..." 时，才应用主题的特效 */ .markdown-preview-view mark:not([style*="background"]), .markdown-source-view.mod-cm6 mark:not([style*="background"]), .markdown-source-view.mod-cm6 .cm-highlight:not([style*="background"]) { /* 暴力重置默认黄色，只针对主题样式的mark */ background-color: transparent !important; /* 关键：使用 background-image 实现半高背景 */ background-repeat: no-repeat; background-position: 0 100%; /* 从底部开始 */ /* 动效：只过渡背景大小 */ transition: background-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease, text-shadow 0.3s ease, box-shadow 0.3s ease; } /* --- [亮色模式] 弹性注水 (Elastic Ink) --- */ body.theme-light .markdown-preview-view mark:not([style*="background"]), body.theme-light .markdown-source-view.mod-cm6 mark:not([style*="background"]), body.theme-light .markdown-source-view.mod-cm6 .cm-highlight:not([style*="background"]) { /* 定义渐变背景：底部深 -> 顶部透明 */ background-image: linear-gradient(to top, color-mix(in srgb, var(--phycat-primary-color), transparent 80%), transparent); /* 常态：只显示底部 40% 高度 */ background-size: 100% 40%; /* 文字颜色保持原样 */ color: var(--text-normal); } /* Light Hover: 向上弹跳填满 */ body.theme-light .markdown-preview-view mark:not([style*="background"]):hover, body.theme-light .markdown-source-view.mod-cm6 mark:not([style*="background"]):hover, body.theme-light .markdown-source-view.mod-cm6 .cm-highlight:not([style*="background"]):hover { /* 悬停：背景向上填满 100% */ background-size: 100% 100%; /* 轻微加深，保留文字与背景的对比 */ background-image: linear-gradient(to top, color-mix(in srgb, var(--phycat-primary-color), transparent 75%), color-mix(in srgb, var(--phycat-primary-color), transparent 92%)); } /* --- [暗色模式] 霓虹注水 (Neon Ink) --- */ body.theme-dark .markdown-preview-view mark:not([style*="background"]), body.theme-dark .markdown-source-view.mod-cm6 mark:not([style*="background"]), body.theme-dark .markdown-source-view.mod-cm6 .cm-highlight:not([style*="background"]) { /* 底部 40% 的微光渐变 */ background-image: linear-gradient(to top, color-mix(in srgb, var(--phycat-primary-color), transparent 70%), transparent) !important; background-size: 100% 40%; /* 常态文字带一点点主色调，但不发光 */ color: color-mix(in srgb, var(--phycat-primary-color), white 20%) !important; text-shadow: none; box-shadow: none; } /* Dark Hover: 柔和填满 */ body.theme-dark .markdown-preview-view mark:not([style*="background"]):hover, body.theme-dark .markdown-source-view.mod-cm6 mark:not([style*="background"]):hover, body.theme-dark .markdown-source-view.mod-cm6 .cm-highlight:not([style*="background"]):hover { /* 填满 */ background-size: 100% 100%; /* 控制遮罩浓度，避免压住文字 */ background-image: linear-gradient(to top, color-mix(in srgb, var(--phycat-primary-color), transparent 65%), color-mix(in srgb, var(--phycat-primary-color), transparent 90%)) !important; /* 保留悬停文字配色，去掉模糊字形的光晕 */ color: var(--phycat-highlight-hover-color) !important; text-shadow: none; box-shadow: 0 0 8px color-mix(in srgb, var(--phycat-primary-color), transparent 90%); /* 重置可能存在的位移 */ transform: none; } /* 高亮与粗体组合时，悬停只保留高亮背景，不叠加粗体横线和文字光晕。 */ body:is(.theme-light, .theme-dark) :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(strong, .cm-strong):is(mark, .cm-highlight, mark *, .cm-highlight *, :has(mark:hover, .cm-highlight:hover)):hover { border-bottom-color: transparent; text-shadow: none; } /* 亮色保留原有粗体深色；暗色与高亮悬停文字配色一致。 */ body.theme-light :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(strong, .cm-strong):is(mark, .cm-highlight, mark *, .cm-highlight *, :has(mark:hover, .cm-highlight:hover)):hover { color: var(--text-bold) !important; } body.theme-dark :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(strong, .cm-strong):is(mark, .cm-highlight, mark *, .cm-highlight *, :has(mark:hover, .cm-highlight:hover)):hover { color: var(--phycat-highlight-hover-color) !important; } /* ----------------------------------------------------------------- 2. 粗体 (Strong / **text**) - 底部微光风格 (Underglow) 对应编辑模式类名: .cm-strong 特性：悬停时底部浮现光带 + 文字柔和发光，支持完美跨行 ----------------------------------------------------------------- */ /* [通用结构] */ .markdown-preview-view strong, .markdown-source-view.mod-cm6 .cm-strong, .markdown-source-view.mod-cm6 strong { font-weight: bold; /* 保持 inline 布局，确保可以正常换行 */ display: inline; position: relative; /* 预留底部边框位置，防止 Hover 时高度突变导致抖动 */ border-bottom: 2px solid transparent; /* 确保样式在换行时每一行都独立渲染 */ -webkit-box-decoration-break: clone; box-decoration-break: clone; /* 动效：监听边框颜色和文字光影 */ transition: border-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease; } /* --- [暗色模式] 霓虹底线 (Neon Line) --- */ body.theme-dark .markdown-preview-view strong, body.theme-dark .markdown-source-view.mod-cm6 .cm-strong, body.theme-dark .markdown-source-view.mod-cm6 strong { color: var(--phycat-primary-color); } body.theme-dark .markdown-preview-view strong:hover, body.theme-dark .markdown-source-view.mod-cm6 .cm-strong:hover, body.theme-dark .markdown-source-view.mod-cm6 strong:hover { /* 底部出现实心光线 */ border-bottom-color: var(--phycat-primary-color); /* 文字强发光 */ text-shadow: 0 0 10px var(--phycat-primary-color); /* 稍微提升层级 */ z-index: 1; } /* --- [亮色模式] 柔光底座 (Soft Underglow) --- */ body.theme-light .markdown-preview-view strong, body.theme-light .markdown-source-view.mod-cm6 .cm-strong, body.theme-light .markdown-source-view.mod-cm6 strong { color: var(--text-bold); } body.theme-light .markdown-preview-view strong:hover, body.theme-light .markdown-source-view.mod-cm6 .cm-strong:hover, body.theme-light .markdown-source-view.mod-cm6 strong:hover { color: var(--phycat-primary-color) !important; /* 底部出现半透明光带 (30% 浓度) */ border-bottom-color: color-mix(in srgb, var(--phycat-primary-color), transparent 70%); /* 文字下方增加柔和投影，增加立体感 */ text-shadow: 0 2px 10px color-mix(in srgb, var(--phycat-primary-color), transparent 60%); } /* ================================================================= 3. 斜体 (Em / *text*) - 可跨行的流动波浪线 使用两段圆弧背景拼接波浪；每行独立绘制，颜色跟随主题 ================================================================= */ /* 1. 基础结构 (通用) */ .markdown-preview-view em, .markdown-source-view.mod-cm6 .cm-em, .markdown-source-view.mod-cm6 em { font-style: italic; text-decoration: none !important; /* 保持普通行内文字，背景随文本片段换行 */ display: inline; padding-bottom: 2px; background-repeat: repeat-x; background-position: 0 100%, 0 calc(100% - 2px); background-size: 16px 2px; /* 上下圆弧各占半个波长，在两层背景的交界处连续相接。 直接使用颜色变量，避免 SVG 背景无法继承主题颜色。 */ background-image: radial-gradient(circle at 4px -7.5px, transparent calc(8.5px - var(--phycat-italic-wave-half-width, 0.5px)), var(--phycat-italic-wave-color) calc(8.833px - var(--phycat-italic-wave-half-width, 0.5px)), var(--phycat-italic-wave-color) calc(8.167px + var(--phycat-italic-wave-half-width, 0.5px)), transparent calc(8.5px + var(--phycat-italic-wave-half-width, 0.5px))), radial-gradient(circle at 12px 9.5px, transparent calc(8.5px - var(--phycat-italic-wave-half-width, 0.5px)), var(--phycat-italic-wave-color) calc(8.833px - var(--phycat-italic-wave-half-width, 0.5px)), var(--phycat-italic-wave-color) calc(8.167px + var(--phycat-italic-wave-half-width, 0.5px)), transparent calc(8.5px + var(--phycat-italic-wave-half-width, 0.5px))); transition: color 0.2s ease, -webkit-text-stroke 0.2s ease, text-shadow 0.2s ease; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 移除旧的伪元素 */ .markdown-preview-view em::after, .markdown-source-view.mod-cm6 .cm-em::after, .markdown-source-view.mod-cm6 em::after { content: none !important; display: none !important; } /* 移动完整波长，两层圆弧同步流动且循环时无跳动 */ @keyframes phycatItalicWaveFlow { from { background-position-x: 0; } to { background-position-x: 16px; } } /* --- [亮色模式] 墨水波浪 --- */ body.theme-light .markdown-preview-view em, body.theme-light .markdown-source-view.mod-cm6 .cm-em, body.theme-light .markdown-source-view.mod-cm6 em { color: var(--secondary-color); --phycat-italic-wave-color: color-mix(in srgb, var(--secondary-color), transparent 60%); } /* Light Hover: 充能流动 */ body.theme-light .markdown-preview-view em:hover, body.theme-light .markdown-source-view.mod-cm6 .cm-em:hover, body.theme-light .markdown-source-view.mod-cm6 em:hover { color: var(--phycat-primary-color); /* Hover 时：变为主色，且不透明度提高 */ --phycat-italic-wave-color: var(--phycat-primary-color); /* 模拟加粗 */ -webkit-text-stroke: 0.6px var(--phycat-primary-color); /* 流动动画 */ animation: phycatItalicWaveFlow 0.8s linear infinite; } /* --- [暗色模式] 霓虹波浪 --- */ body.theme-dark .markdown-preview-view em, body.theme-dark .markdown-source-view.mod-cm6 .cm-em, body.theme-dark .markdown-source-view.mod-cm6 em { color: var(--secondary-color); /* 暗色模式下，波浪线稍微亮一点 */ --phycat-italic-wave-color: color-mix(in srgb, var(--secondary-color), white 20%); } /* Dark Hover */ body.theme-dark .markdown-preview-view em:hover, body.theme-dark .markdown-source-view.mod-cm6 .cm-em:hover, body.theme-dark .markdown-source-view.mod-cm6 em:hover { color: var(--phycat-primary-color); --phycat-italic-wave-color: var(--phycat-primary-color); -webkit-text-stroke: 0.5px var(--phycat-primary-color); text-shadow: var(--glow-shadow-text); animation: phycatItalicWaveFlow 0.8s linear infinite; } /* 粗斜体悬停：移除粗体横线，仅保留加厚的流动波浪。 兼容 strong/em 两种嵌套顺序，以及编辑模式的组合类名。 外层含部分斜体/粗体时，仅在悬停组合文字时切换装饰。 */ body:is(.theme-light, .theme-dark) :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(strong, .cm-strong):is(em, .cm-em, em *, .cm-em *, :has(em:hover, .cm-em:hover)):hover { border-bottom-color: transparent; -webkit-text-stroke: 0; text-shadow: none; } body:is(.theme-light, .theme-dark) :is(.markdown-preview-view, .markdown-source-view.mod-cm6) :is(em, .cm-em):is(strong, .cm-strong, strong *, .cm-strong *, :has(strong:hover, .cm-strong:hover)):hover { --phycat-italic-wave-half-width: 1px; /* 已有粗体字重，无需再用描边或光晕增粗字形。 */ -webkit-text-stroke: 0; text-shadow: none; } /* 尊重系统的减少动态效果设置，保留波浪线和悬停配色 */ @media (prefers-reduced-motion: reduce) { body.theme-light .markdown-preview-view em:hover, body.theme-light .markdown-source-view.mod-cm6 .cm-em:hover, body.theme-light .markdown-source-view.mod-cm6 em:hover, body.theme-dark .markdown-preview-view em:hover, body.theme-dark .markdown-source-view.mod-cm6 .cm-em:hover, body.theme-dark .markdown-source-view.mod-cm6 em:hover { animation: none; } } /* ----------------------------------------------------------------- 4. 删除线 (Del & S / ~~text~~) 对应编辑模式类名: .cm-strikethrough ----------------------------------------------------------------- */ /* [通用结构] */ .markdown-preview-view s, .markdown-preview-view del, .markdown-source-view.mod-cm6 .cm-strikethrough { text-decoration: line-through; transition: all 0.3s ease; } /* --- [暗色模式] 禁手特效 --- */ body.theme-dark .markdown-preview-view s, body.theme-dark .markdown-preview-view del, body.theme-dark .markdown-source-view.mod-cm6 .cm-strikethrough { text-decoration-color: var(--phycat-primary-color); color: var(--phycat-strikethrough-color); } body.theme-dark .markdown-preview-view s:hover, body.theme-dark .markdown-preview-view del:hover, body.theme-dark .markdown-source-view.mod-cm6 .cm-strikethrough:hover { opacity: 1; color: var(--phycat-primary-color) !important; text-decoration-color: var(--secondary-color); cursor: not-allowed; text-shadow: 0 0 8px var(--phycat-primary-color); } /* --- [亮色模式] 修正液特效 --- */ body.theme-light .markdown-preview-view s, body.theme-light .markdown-preview-view del, body.theme-light .markdown-source-view.mod-cm6 .cm-strikethrough { text-decoration-color: color-mix(in srgb, var(--phycat-primary-color), transparent 40%); color: var(--phycat-strikethrough-color); } body.theme-light .markdown-preview-view s:hover, body.theme-light .markdown-preview-view del:hover, body.theme-light .markdown-source-view.mod-cm6 .cm-strikethrough:hover { opacity: 1; color: var(--text-normal) !important; text-decoration-color: var(--phycat-strikethrough-hover-text-decoration); cursor: not-allowed; text-shadow: none; } /* ================================================================= 分割线样式 (Horizontal Rule) - 渐变线条 + 动态菱形 ================================================================= */ /* 1. 线条主体 */ .markdown-preview-view hr { border: none; /* 去掉系统默认边框 */ height: 1px; /* 线的粗细 */ /* 渐变背景：两头透明，中间实色 */ background: linear-gradient(90deg, transparent, var(--phycat-primary-color), transparent); position: relative; overflow: visible; /* 【关键】必须可见，否则中间的菱形会被切掉 */ opacity: 0.5; /* 默认半透明，不抢眼 */ transition: all 0.3s ease; } /* 2. 中间的装饰菱形 (::after) */ .markdown-preview-view hr::after { content: ''; position: absolute; left: 50%; top: 50%; /* 居中定位 + 旋转45度变成菱形 */ transform: translate(-50%, -50%) rotate(45deg); width: 8px; height: 8px; border: 2px solid var(--phycat-primary-color); /* 背景色设为页面背景色，这样可以“遮挡”住穿过菱形的那条线 */ background-color: var(--bg-color); box-sizing: border-box; transition: all 0.3s ease; } /* 3. Hover 交互效果 */ .markdown-preview-view hr:hover { opacity: 1; /* 变亮 */ /* 加强渐变范围（可选） */ background: linear-gradient(90deg, transparent, var(--phycat-primary-color), transparent); } /* Hover 时菱形的动画 */ .markdown-preview-view hr:hover::after { border-color: var(--phycat-primary-color); background-color: var(--phycat-primary-color); /* 变成实心 */ /* 发光特效 */ box-shadow: 0 0 10px var(--phycat-primary-color); /* 旋转 225度 (45+180) 并放大，形成一种“充能”的感觉 */ transform: translate(-50%, -50%) rotate(225deg) scale(1.5); } /* ================================================================= 表格样式 (Tables) - 玻璃拟态 + 交互高亮 ================================================================= */ /* 表格容器 */ .markdown-preview-view table { /* 【关键】必须强制设为 separate，否则圆角无法显示 */ border-collapse: separate !important; border-spacing: 0 !important; width: 100%; /* 边框与圆角 */ border: 1px solid var(--border-color); border-radius: var(--table-border-radius); overflow: hidden; /* 背景适配 */ background-color: var(--table-bg); line-height: var(--table-line-height); } /* 3. 单元格通用样式 (th & td) */ .markdown-preview-view table th, .markdown-preview-view table td { padding: 10px 15px; color: var(--text-color); /* 内部网格线：使用适配变量 */ border-top: none !important; border-left: none !important; border-right: 1px solid var(--table-border-inner); border-bottom: 1px solid var(--table-border-inner); transition: all 0.2s ease; } /* 4. 去掉最右侧和最底部的边框 (防止与外边框重叠变粗) */ .markdown-preview-view table th:last-child, .markdown-preview-view table td:last-child { border-right: none !important; } .markdown-preview-view table tr:last-child td { border-bottom: none !important; } /* 5. 表头样式 (Header) */ .markdown-preview-view table th { /* 背景适配 */ background-color: var(--table-th-bg) !important; color: var(--phycat-primary-color); font-weight: bold; white-space: nowrap; /* 右侧竖线适配 */ border-right: 1px solid var(--table-th-border) !important; /* 表头底部分割线适配 */ border-bottom: 1px solid var(--table-th-border) !important; } /* 修复：去掉表头最后一个单元格的右边框 */ .markdown-preview-view table th:last-child { border-right: none !important; } /* 6. 交互：鼠标滑过行 (Row Hover) */ .markdown-preview-view table tbody tr:hover td { background-color: var(--table-row-hover-bg); } /* 7. 交互：鼠标滑过单元格 (Cell Hover) - 高亮特效 */ .markdown-preview-view table tbody td:hover { background-color: var(--table-cell-hover-bg); color: var(--table-cell-hover-text); /* 变量控制文字颜色 */ /* 选中光环 */ box-shadow: inset 0 0 0 1px var(--phycat-primary-color); /* 仅在暗色模式下启用文字发光，亮色模式发光会模糊 */ /* text-shadow 交给下面的独立逻辑处理 */ cursor: default; } /* 8. 修正：防止 Obsidian 默认的隔行变色干扰 */ .markdown-preview-view table tr:nth-child(2n), .markdown-preview-view table tr:nth-child(2n+1) { background-color: transparent !important; } /* ================================================================= 表格表头颜色修复 (Fix Header Zebra Striping) ================================================================= */ /* 强制去掉表头行的背景色 */ .markdown-preview-view table thead tr, .markdown-preview-view table thead tr:nth-child(2n), .markdown-preview-view table thead tr:nth-child(2n+1) { background-color: transparent !important; } /* 再次确保所有表头单元格背景一致 */ .markdown-preview-view table th { background-color: var(--table-th-bg) !important; } /* ================================================================= 特有修饰：文字发光 (Text Shadow) ================================================================= */ /* 暗色模式下：文字发光 */ .theme-dark .markdown-preview-view table tbody td:hover { text-shadow: 0 0 8px var(--phycat-primary-color); } /* 亮色模式下：文字不发光 (或者发很淡的光)，保证清晰度 */ .theme-light .markdown-preview-view table tbody td:hover { text-shadow: none; } /* ... [Existing Code] ... */ /* ================================================================= 编辑模式表格样式 (Live Preview Table) - 视觉统一化 目标：复刻阅读模式的玻璃拟态与配色，同时保留原生编辑功能 ================================================================= */ /* 1. 表格容器 (外壳) */ .markdown-source-view.mod-cm6 .cm-table-widget .table-editor { /* 复用阅读模式的玻璃拟态背景 */ background-color: var(--table-bg) !important; /* backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); */ /* 边框与圆角 */ border: 1px solid var(--border-color) !important; border-radius: var(--table-border-radius); /* 关键：强制独立边框模型，实现圆角 */ border-collapse: separate !important; /* 间距 */ margin-top: 1em; margin-bottom: 1em; /* 确保宽度适配 */ width: 100%; } /* 2. 表头样式 (Header) */ .markdown-source-view.mod-cm6 .cm-table-widget thead th { /* 背景色 */ background-color: var(--table-th-bg) !important; /* 文字颜色 */ color: var(--phycat-primary-color) !important; font-weight: bold; /* 边框逻辑：使用阅读模式的变量 */ border-bottom: 1px solid var(--table-th-border) !important; border-right: 1px solid var(--table-th-border) !important; border-top: none !important; border-left: none !important; /* 确保拖拽手柄不被背景遮挡 */ position: relative; } /* 3. 单元格通用样式 (Cell) */ .markdown-source-view.mod-cm6 .cm-table-widget tbody td { /* 边框逻辑：只保留右和下 */ border-right: 1px solid var(--table-border-inner) !important; border-bottom: 1px solid var(--table-border-inner) !important; border-top: none !important; border-left: none !important; /* 文字颜色 */ color: var(--text-color); /* 平滑过渡 */ transition: background-color 0.2s ease; } /* 4. 单元格内边距 (Cell Wrapper) */ /* Obsidian 编辑器将内容包裹在 .table-cell-wrapper 中 */ .markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper { /* 调整为阅读模式的舒适间距 (10px 15px) */ padding: 10px 15px !important; /* 确保内容垂直居中 */ display: block; min-height: 100%; } /* 5. 边界修复 (Remove Outer Borders) */ /* 去掉最右侧和最底部的内部边框，防止与容器边框重叠 */ /* 最后一列去右边框 */ .markdown-source-view.mod-cm6 .cm-table-widget th:last-child, .markdown-source-view.mod-cm6 .cm-table-widget td:last-child { border-right: none !important; } /* 最后一行去底边框 */ .markdown-source-view.mod-cm6 .cm-table-widget tbody tr:last-child td { border-bottom: none !important; } /* 6. 交互：高亮效果 (Hover) */ /* 行高亮 */ .markdown-source-view.mod-cm6 .cm-table-widget tbody tr:hover td { background-color: var(--table-row-hover-bg); } /* 单元格高亮 */ .markdown-source-view.mod-cm6 .cm-table-widget tbody td:hover { background-color: var(--table-cell-hover-bg) !important; /* 编辑模式下不建议改文字颜色，以免光标看不清，但可以加内阴影 */ box-shadow: inset 0 0 0 1px var(--phycat-primary-color) !important; } /* 7. 编辑控件美化 (Drag Handles & Add Buttons) */ /* 拖拽手柄 (默认淡化) */ .markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle, .markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle { opacity: 0; /* 平时隐藏，保持界面干净 */ transition: opacity 0.2s ease; background-color: color-mix(in srgb, var(--border-color), transparent 70%); /* 拖拽条底色 */ } /* 鼠标悬停时显示拖拽手柄 */ .markdown-source-view.mod-cm6 .cm-table-widget th:hover .table-col-drag-handle, .markdown-source-view.mod-cm6 .cm-table-widget th:hover .table-row-drag-handle, .markdown-source-view.mod-cm6 .cm-table-widget td:hover .table-row-drag-handle { opacity: 1; } /* 新增行/列按钮 (+) */ .markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn, .markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn { color: var(--text-muted); transition: all 0.2s ease; background-color: transparent; /* 默认透明 */ } .markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn { width: 97%; } .markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn:hover, .markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn:hover { border: none; color: var(--phycat-interactive-hover); background-color: transparent; transform: scale(1.1); /* 微微放大 */ } /* 8. 选中编辑状态修复 */ /* 当正在输入时，去掉背景高亮，防止干扰视线 */ .markdown-source-view.mod-cm6 .cm-table-widget .cm-active { background-color: transparent !important; } /* ================================================================= 代码块样式 (Code Blocks) - Mac 风格 & 双模适配 ================================================================= */ /* 1. 复制按钮微调 */ .markdown-rendered button.copy-code-button { top: -4px; /* 调整位置以适应 Mac 顶栏 */ } /* 2. 容器样式 (pre block) */ .markdown-preview-view pre { position: relative; /* 背景色：自动引用 Light/Dark 定义的 code-block-bg */ background-color: var(--code-background) !important; /* 边框：使用混合色，确保在不同配色下都能看清轮廓 */ border: 1px solid color-mix(in srgb, var(--border-color), transparent 50%) !important; border-radius: var(--code-radius); /* 顶部留白给 Mac 三色点 */ padding-top: 38px !important; padding-bottom: 12px; padding-left: 0; padding-right: 0; margin: 20px 0; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; } /* Hover 时边框高亮 + 微微浮起 */ .markdown-preview-view pre:hover { border-color: var(--phycat-primary-color) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--phycat-primary-color), transparent 85%); } /* 3. Mac 风格顶栏 (Header) */ .markdown-preview-view pre::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 32px; /* 顶栏高度 */ /* 顶栏背景：使用混合色，让顶栏比代码背景稍微深/浅一点点 */ background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 96%); /* Mac 三色点 SVG */ background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDUwcHgiIGhlaWdodD0iMTMwcHgiPgogIDxlbGxpcHNlIGN4PSI2NSIgY3k9IjY1IiByeD0iNTAiIHJ5PSI1MiIgc3Ryb2tlPSJyZ2IoMjIwLDYwLDU0KSIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJyZ2IoMjM3LDEwOCw5NikiLz4KICA8ZWxsaXBzZSBjeD0iMjI1IiBjeT0iNjUiIHJ4PSI1MCIgcnk9IjUyIiAgc3Ryb2tlPSJyZ2IoMjE4LDE1MSwzMykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiKDI0NywxOTMsODEpIi8+CiAgPGVsbGlwc2UgY3g9IjM4NSIgY3k9IjY1IiByeD0iNTAiIHJ5PSI1MiIgIHN0cm9rZT0icmdiKDI3LDE2MSwzNykiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0icmdiKDEwMCwyMDAsODYpIi8+Cjwvc3ZnPg==); background-repeat: no-repeat; background-size: 54px; background-position: 12px center; /* 顶栏分割线 */ border-bottom: 1px solid color-mix(in srgb, var(--border-color), transparent 70%); border-radius: 8px 8px 0 0; z-index: 5; } /* Hover 时顶栏背景变色 (更有交互感) */ .markdown-preview-view pre:hover::before { background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 95%); border-bottom-color: color-mix(in srgb, var(--phycat-primary-color), transparent 80%); } /* 4. 代码内容区域 (Code Element) */ .markdown-preview-view pre code { display: block; padding: 0 16px; overflow-x: auto; /* 横向滚动 */ /* 【关键修复】使用变量，而不是硬编码的 #f8f8f2 */ color: var(--code-normal) !important; font-family: var(--font-monospace); /* 稍微调小一点，更精致 */ line-height: var(--code-line-height); /* 强制透明，防止遮挡 pre 的背景 */ background-color: transparent !important; } /* 5. 适配 Mermaid 图表 (去掉 Mac 顶栏) */ .markdown-preview-view pre.language-mermaid { padding-top: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .markdown-preview-view pre.language-mermaid::before { display: none !important; } /* 6. 适配 Obsidian 复制按钮 */ .markdown-preview-view .copy-code-button { background-color: transparent; color: var(--code-comment); /* 默认用注释色，不抢眼 */ /* 定位 */ top: 4px; right: 6px; height: 24px; padding: 0 8px; border-radius: 4px; z-index: 10; transition: all 0.2s; } /* Hover 复制按钮 */ .markdown-preview-view .copy-code-button:hover { background-color: var(--phycat-interactive-hover); color: var(--phycat-copy-button-hover-color); } /* ================================================================= Jupyter/Raw Output Fix (Style A: Classic Strip) 针对: 没有 class 的 pre 标签 (通常是 Jupyter 导出的输出结果) ================================================================= */ /* 1. 容器样式重置与重定义 */ .markdown-preview-view pre:not([class]) { /* --- 核心动作: 去除 Mac 顶栏留白 --- */ padding-top: 12px !important; /* 原来是 38px */ padding-bottom: 12px !important; padding-left: 16px !important; padding-right: 16px !important; /* --- Visual Style: 经典侧边条 --- */ /* 背景: 极淡的主题色背景 (96% 透明度)，保持清透 */ background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 96%) !important; /* 边框: 去掉四周细边框，只保留左侧粗条 */ border: none !important; border-left: 4px solid var(--phycat-primary-color) !important; /* 圆角:稍微方正一点，区别于代码块的大圆角 */ border-radius: 4px !important; /* 阴影: 去掉悬浮感，让它贴在纸面上 */ box-shadow: none !important; /* 间距 */ margin: 16px 0; } /* 2. 隐藏 Mac 三色点顶栏 (::before) */ .markdown-preview-view pre:not([class])::before { content: none !important; display: none !important; height: 0 !important; width: 0 !important; } /* 3. 输出文字样式微调 */ .markdown-preview-view pre:not([class]) code { /* 颜色: 使用普通文本色，而不是代码高亮色 */ color: var(--text-normal) !important; /* 字体: 等宽字体，稍小一点 */ font-family: var(--font-monospace); /* 布局重置 */ padding: 0 !important; background-color: transparent !important; display: block; white-space: pre-wrap; /* 允许输出结果自动换行，防止横向滚动条太长 */ } /* 4. 暗色模式微调 (Dark Mode Override) */ /* 暗色模式下，背景用深色微光，防止看起来发灰 */ body.theme-dark .markdown-preview-view pre:not([class]) { background-color: var(--phycat-code-block-background) !important; border-left-color: var(--phycat-primary-color) !important; } /* ================================================================= 编辑模式代码块优化 (Editor Code Block) - 双模适配版 ================================================================= */ /* ----------------------------------------------------------------- 1. 全局代码行基础设置 (Base Style) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-codeblock { font-family: var(--font-monospace) !important; line-height: 1.5; /* 左右边框：统一使用透明度变量，适配亮暗 */ border-left: 1px solid var(--code-border-color, var(--phycat-code-block-border-left)); border-right: 1px solid var(--code-border-color, var(--phycat-code-block-border-right)); } /* --- [暗色模式] 背景策略 --- */ .theme-dark .markdown-source-view.mod-cm6 .HyperMD-codeblock { /* 极淡的微光背景 */ background-color: var(--phycat-code-block-background) !important; color: var(--text-normal); } /* --- [亮色模式] 背景策略 --- */ .theme-light .markdown-source-view.mod-cm6 .HyperMD-codeblock { /* 引用之前定义的清透背景 (白色/淡粉/淡蓝) */ background-color: var(--code-background) !important; /* 边框颜色调整为主题色淡化版 */ --code-border-color: color-mix(in srgb, var(--phycat-primary-color), transparent 85%); border-left: 1px solid var(--code-border-color); border-right: 1px solid var(--code-border-color); /* 文字颜色适配 (引用 Layer 1 定义的变量) */ color: var(--code-normal) !important; } /* ----------------------------------------------------------------- 2. 头部行 (Header) - 交互式红绿灯 ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-codeblock-begin { border-top-left-radius: 8px; border-top-right-radius: 8px; padding-top: var(--editor-code-header-padding, 2px) !important; padding-bottom: var(--editor-code-header-padding, 2px) !important; margin-top: 12px; position: relative; font-weight: bold; /* 顶部边框 */ border-top: 1px solid var(--code-border-color, var(--phycat-code-block-border-top)); } /* Keep the first code line clear of the header; empty blocks have no content gap. */ .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock-begin + .cm-line.HyperMD-codeblock:not(.HyperMD-codeblock-end):not(.HyperMD-codeblock-begin) { padding-top: var(--editor-code-first-line-gap, 10px) !important; } /* [暗色] 头部背景 */ .theme-dark .markdown-source-view.mod-cm6 .HyperMD-codeblock-begin { background-color: var(--phycat-code-block-background-2) !important; color: var(--secondary-color) !important; } /* [亮色] 头部背景 */ .theme-light .markdown-source-view.mod-cm6 .HyperMD-codeblock-begin { /* 引用之前定义的 Header 背景变量 */ background-color: var(--code-block-header-bg, var(--phycat-code-block-background)) !important; color: var(--phycat-primary-color) !important; } /* ----------------------------------------------------------------- 3. 尾部行 (Footer) ----------------------------------------------------------------- */ .markdown-source-view.mod-cm6 .HyperMD-codeblock-end { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 12px; /* 底部边框 */ border-bottom: 1px solid var(--code-border-color, var(--phycat-code-block-border-bottom)); } /* [暗色] 尾部 */ .theme-dark .markdown-source-view.mod-cm6 .HyperMD-codeblock-end { color: var(--text-muted) !important; } /* [亮色] 尾部 */ .theme-light .markdown-source-view.mod-cm6 .HyperMD-codeblock-end { color: var(--code-comment) !important; /* 用注释色，不抢眼 */ } /* ----------------------------------------------------------------- 4. 光标激活行 (Active Line in Code) ----------------------------------------------------------------- */ /* [暗色] 激活行微微变亮 */ .theme-dark .markdown-source-view.mod-cm6 .HyperMD-codeblock.cm-active { background-color: var(--phycat-code-block-background-3) !important; } /* [亮色] 激活行微微变深 (或用混合色) */ .theme-light .markdown-source-view.mod-cm6 .HyperMD-codeblock.cm-active { background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 94%) !important; } /* ----------------------------------------------------------------- 5. 语法高亮 (Syntax Highlighting) - 关键适配！ ----------------------------------------------------------------- */ /* Obsidian 编辑模式 (CM6) 的类名和预览模式 (PrismJS) 不同。 我们需要把之前定义的变量映射到 .cm-X 类名上。 */ /* 通用映射 (亮暗自动生效) */ .cm-keyword { color: var(--code-keyword) !important; } .cm-def { color: var(--code-function) !important; } .cm-string { color: var(--code-string) !important; } .cm-number { color: var(--code-value) !important; } .cm-comment { color: var(--code-comment) !important; } .cm-variable { color: var(--code-operator) !important; } .cm-property { color: var(--code-property) !important; } .cm-type { color: var(--code-function) !important; } /* Java 类名通常是 cm-type */ .cm-atom { color: var(--code-value) !important; } /* 布尔值等 */ /* [特殊] 亮色模式下的标点符号颜色修复 */ /* 默认标点可能是白色的，亮色下看不见 */ .theme-light .cm-punctuation, .theme-light .cm-operator { color: var(--code-punctuation, var(--phycat-interface-color)) !important; } /* ================================================================= Callout (警告块) - Typora 风格终极修复版 包含：胶囊标题、右下角果冻水印、悬停上浮动画 ================================================================= */ /* ----------------------------------------------------------------- 1. 容器基础结构 (Container) ----------------------------------------------------------------- */ .callout { /* --- 布局重置 --- */ padding: 12px 16px !important; margin-block: 1em !important; /* --- 核心外观 --- */ border: none !important; /* 去掉默认边框 */ border-radius: 12px !important; /* 圆角 */ position: relative !important; overflow: hidden !important; /* 裁剪溢出的水印 */ mix-blend-mode: normal; /* --- 关键：动效定义必须写在这里，否则Hover没动画 --- */ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, background-color 0.3s ease !important; } /* Hover 交互：整体上浮 */ .callout:hover { z-index: 5; } /* ----------------------------------------------------------------- 2. 标题栏 (Title Capsule) - 胶囊化 ----------------------------------------------------------------- */ .callout-title { /* --- 布局 --- */ display: inline-flex !important; /* 关键：胶囊必须是 inline-flex */ align-items: center; margin-bottom: 12px !important; padding: 4px 12px !important; /* --- 外观 --- */ border-radius: 50px !important; font-weight: 700; font-size: 0.9em; line-height: 1.2; /* --- 颜色继承 --- */ color: inherit !important; background-color: var(--phycat-callout-common-title-background) !important; /* 默认半透明白底 */ border: 1px solid var(--phycat-callout-common-title-border) !important; /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */ position: relative; z-index: 2; } /* ----------------------------------------------------------------- 3. 标题小图标修复 (Small Icon) ----------------------------------------------------------------- */ .callout-icon { display: inline-flex !important; align-items: center; justify-content: center; margin-right: 6px !important; flex: 0 0 auto !important; color: currentColor !important; /* 跟随标题颜色 */ } /* 强制 SVG 显示 */ .callout-icon svg { width: 16px !important; height: 16px !important; display: block !important; opacity: 1 !important; fill: currentColor !important; /* 实心图标填充 */ stroke: currentColor !important; /* 描边图标描边 */ stroke-width: 2px; } /* ----------------------------------------------------------------- 4. 右下角果冻水印 (Big Watermark) ----------------------------------------------------------------- */ .callout::after { /* 默认图标，防止没有匹配到类型时空白 */ content: "✨"; position: absolute !important; right: -10px !important; bottom: -15px !important; font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 80px !important; /* 够大才够果冻 */ line-height: 1; opacity: 0.12 !important; transform: rotate(-15deg); filter: grayscale(100%); pointer-events: none; z-index: 0; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } /* Hover 时水印动效 */ .callout:hover::after { transform: rotate(0deg) scale(1.1) !important; opacity: 0.25 !important; right: 0px !important; bottom: -5px !important; filter: grayscale(0%) !important; /* 恢复彩色 */ } /* 内容层级修正 */ .callout-content { position: relative; z-index: 2; } /* Reserve marker space inside the scrolling content instead of clipping numbers at its edge. */ .markdown-preview-view .callout-content ol, .markdown-source-view.mod-cm6 .callout-content ol { padding-inline-start: 2.8em !important; margin-inline-start: 0 !important; } .markdown-preview-view .callout-content ol > li, .markdown-source-view.mod-cm6 .callout-content ol > li { margin-inline-start: 0; } .markdown-preview-view .callout-content ol > li::marker, .markdown-source-view.mod-cm6 .callout-content ol > li::marker { font-variant-numeric: tabular-nums; } .callout-content ul.contains-task-list { margin-left: 2px; } /* 编辑模式下位置微调 */ .markdown-source-view.mod-cm6 .callout-content ul.contains-task-list input.task-list-item-checkbox { transform: translateY(4px); } /* ================================================================= 亮色模式配色 (Light Mode) - 还原 Typora ================================================================= */ /* --- Note (紫色) --- */ .theme-light .callout[data-callout="note"], .theme-light .callout[data-callout="info"], .theme-light .callout[data-callout="todo"] { background-color: var(--phycat-callout-note-background) !important; } .theme-light .callout[data-callout="note"] .callout-title { color: var(--phycat-callout-note-title-color) !important; } .theme-light .callout[data-callout="note"]:hover { background-color: var(--phycat-callout-note-hover-background) !important; } .theme-light .callout[data-callout="note"]::after { content: "📝"; color: var(--phycat-callout-note-watermark-color); } .theme-light .callout[data-callout="info"]::after { content: "ℹ️"; color: var(--phycat-callout-info-watermark-color); } .theme-light .callout[data-callout="todo"]::after { content: "✅"; color: var(--phycat-callout-todo-watermark-color); } /* --- Tip (薄荷绿) --- */ .theme-light .callout[data-callout="tip"] { background-color: var(--phycat-callout-tip-background) !important; } .theme-light .callout[data-callout="tip"] .callout-title { color: var(--phycat-callout-tip-title-color) !important; } .theme-light .callout[data-callout="tip"]:hover { background-color: var(--phycat-callout-tip-hover-background) !important; } .theme-light .callout[data-callout="tip"]::after { content: "💡"; color: var(--phycat-callout-tip-watermark-color); } /* --- Warning (橙色) --- */ .theme-light .callout[data-callout="warning"] { background-color: var(--phycat-callout-warning-background) !important; } .theme-light .callout[data-callout="warning"] .callout-title { color: var(--phycat-callout-warning-title-color) !important; } .theme-light .callout[data-callout="warning"]:hover { background-color: var(--phycat-callout-warning-hover-background) !important; } .theme-light .callout[data-callout="warning"]::after { content: "⚠️"; color: var(--phycat-callout-warning-watermark-color); } /* --- Important (红色) --- */ .theme-light .callout[data-callout="important"] { background-color: var(--phycat-callout-important-background) !important; } .theme-light .callout[data-callout="important"] .callout-title { color: var(--phycat-callout-important-title-color) !important; } .theme-light .callout[data-callout="important"]:hover { background-color: var(--phycat-callout-important-hover-background) !important; } .theme-light .callout[data-callout="important"]::after { content: "📌"; color: var(--phycat-callout-important-watermark-color); } /* --- Caution (深红) --- */ .theme-light .callout[data-callout="caution"], .theme-light .callout[data-callout="bug"] { background-color: var(--phycat-callout-caution-background) !important; } .theme-light .callout[data-callout="caution"] .callout-title { color: var(--phycat-callout-caution-title-color) !important; } .theme-light .callout[data-callout="caution"]:hover { background-color: var(--phycat-callout-caution-hover-background) !important; } .theme-light .callout[data-callout="caution"]::after { content: "🔥"; color: var(--phycat-callout-caution-watermark-color); } /* --- Success (绿色) --- */ .theme-light .callout[data-callout="success"], .theme-light .callout[data-callout="done"] { background-color: var(--phycat-callout-success-background) !important; } .theme-light .callout[data-callout="success"] .callout-title { color: var(--phycat-callout-success-title-color) !important; } .theme-light .callout[data-callout="success"]:hover { background-color: var(--phycat-callout-success-hover-background) !important; } .theme-light .callout[data-callout="success"]::after { content: "🎉"; color: var(--phycat-callout-success-watermark-color); } /* --- Example (紫色/紫罗兰) --- */ /* 这里的紫色比 Note 稍微偏红一点，用于区分 */ .theme-light .callout[data-callout="example"] { background-color: var(--phycat-callout-example-background) !important; } .theme-light .callout[data-callout="example"] .callout-title { color: var(--phycat-callout-example-title-color) !important; } .theme-light .callout[data-callout="example"]:hover { background-color: var(--phycat-callout-example-hover-background) !important; } .theme-light .callout[data-callout="example"]::after { content: "🧩"; /* 或者用 🧪 */ color: var(--phycat-callout-example-watermark-color); } /* --- Quote (灰色/引用) --- */ .theme-light .callout[data-callout="quote"] { background-color: var(--phycat-callout-quote-background) !important; } .theme-light .callout[data-callout="quote"] .callout-title { color: var(--phycat-callout-quote-title-color) !important; } .theme-light .callout[data-callout="quote"]:hover { background-color: var(--phycat-callout-quote-hover-background) !important; } .theme-light .callout[data-callout="quote"]::after { content: "💬"; /* 或者用 ❞ */ color: var(--phycat-callout-quote-watermark-color); } /* --- Danger / Error (深红/危险) --- */ /* 比 Caution 更强烈的红色，或者复用 Caution 的红色 */ .theme-light .callout[data-callout="danger"], .theme-light .callout[data-callout="error"] { background-color: var(--phycat-callout-danger-background) !important; border-left-color: var(--phycat-callout-danger-border-left) !important; /* 强制左侧边框更明显 */ } .theme-light .callout[data-callout="danger"] .callout-title, .theme-light .callout[data-callout="error"] .callout-title { color: var(--phycat-callout-danger-title-color) !important; } .theme-light .callout[data-callout="danger"]:hover, .theme-light .callout[data-callout="error"]:hover { background-color: var(--phycat-callout-danger-hover-background) !important; } .theme-light .callout[data-callout="danger"]::after { content: "⚡"; /* 闪电或 ⛔ */ color: var(--phycat-callout-danger-watermark-color); } .theme-light .callout[data-callout="error"]::after { content: "❌"; color: var(--phycat-callout-error-watermark-color); } /* --- Bug (单独补充图标，样式复用 Caution/Danger) --- */ /* 你之前的代码将 Bug 和 Caution 合并了，这里单独给 Bug 一个虫子图标 */ .theme-light .callout[data-callout="bug"]::after { content: "🐛"; color: var(--phycat-callout-bug-watermark-color); } /* --- Failure / Missing (暗红/失败) --- */ .theme-light .callout[data-callout="failure"], .theme-light .callout[data-callout="missing"] { background-color: var(--phycat-callout-failure-background) !important; /* 稍微灰一点的背景表示“无” */ } .theme-light .callout[data-callout="failure"] .callout-title { color: var(--phycat-callout-failure-title-color) !important; } .theme-light .callout[data-callout="failure"]:hover { background-color: var(--phycat-callout-failure-hover-background) !important; } .theme-light .callout[data-callout="failure"]::after { content: "📉"; color: var(--phycat-callout-failure-watermark-color); } /* --- Question / FAQ (黄色/问题) --- */ /* 与 Warning 的橙色区分，使用明亮的向日葵黄 */ .theme-light .callout[data-callout="question"], .theme-light .callout[data-callout="faq"], .theme-light .callout[data-callout="help"] { background-color: var(--phycat-callout-question-background) !important; /* 为了文字可读性，字体颜色稍微深一点 */ } .theme-light .callout[data-callout="question"] .callout-title { color: var(--phycat-callout-question-title-color) !important; } .theme-light .callout[data-callout="question"]:hover { background-color: var(--phycat-callout-question-hover-background) !important; } .theme-light .callout[data-callout="question"]::after { content: "❓"; color: var(--phycat-callout-question-watermark-color); } /* --- Abstract / Summary (青色/摘要) --- */ /* 区别于 Success 的绿色，使用青色/天蓝色 */ .theme-light .callout[data-callout="abstract"], .theme-light .callout[data-callout="summary"], .theme-light .callout[data-callout="tldr"] { background-color: var(--phycat-callout-abstract-background) !important; } .theme-light .callout[data-callout="abstract"] .callout-title { color: var(--phycat-callout-abstract-title-color) !important; } .theme-light .callout[data-callout="abstract"]:hover { background-color: var(--phycat-callout-abstract-hover-background) !important; } .theme-light .callout[data-callout="abstract"]::after { content: "📑"; color: var(--phycat-callout-abstract-watermark-color); } /* ================================================================= 暗色模式配色 (Dark Mode) - 玻璃拟态适配 ================================================================= */ .theme-dark .callout { background-color: var(--phycat-callout-common-background) !important; border: 1px solid var(--phycat-callout-common-border) !important; } .theme-dark .callout-title { background-color: var(--phycat-callout-common-title-background-2) !important; border: 1px solid var(--phycat-callout-common-title-border-2) !important; color: var(--text-normal) !important; } /* ========================================= 暗色模式 (Dark Mode) 基础修正 - 霓虹果冻风格 ========================================= */ /* --- Note (笔记 - 紫色) --- */ .theme-dark .callout[data-callout="note"] { border-color: var(--phycat-callout-note-border) !important; background-color: var(--phycat-callout-note-background) !important; /* 新增背景 */ } .theme-dark .callout[data-callout="note"] .callout-title { color: var(--phycat-callout-note-title-color) !important; } .theme-dark .callout[data-callout="note"]:hover { background-color: var(--phycat-callout-note-hover-background) !important; /* 悬停加深 */ } .theme-dark .callout[data-callout="note"]::after { content: "📝"; color: var(--phycat-callout-note-watermark-color); } /* --- Tip (提示 - 青色) --- */ .theme-dark .callout[data-callout="tip"] { border-color: var(--phycat-callout-tip-border) !important; background-color: var(--phycat-callout-tip-background) !important; /* 新增背景 */ } .theme-dark .callout[data-callout="tip"] .callout-title { color: var(--phycat-callout-tip-title-color) !important; } .theme-dark .callout[data-callout="tip"]:hover { background-color: var(--phycat-callout-tip-hover-background) !important; /* 悬停加深 */ } .theme-dark .callout[data-callout="tip"]::after { content: "💡"; color: var(--phycat-callout-tip-watermark-color); } /* --- Warning (警告 - 橙色) --- */ .theme-dark .callout[data-callout="warning"] { border-color: var(--phycat-callout-warning-border) !important; background-color: var(--phycat-callout-warning-background) !important; /* 新增背景 */ } .theme-dark .callout[data-callout="warning"] .callout-title { color: var(--phycat-callout-warning-title-color) !important; } .theme-dark .callout[data-callout="warning"]:hover { background-color: var(--phycat-callout-warning-hover-background) !important; /* 悬停加深 */ } .theme-dark .callout[data-callout="warning"]::after { content: "⚠️"; color: var(--phycat-callout-warning-watermark-color); } /* --- Important (重要 - 红色) --- */ .theme-dark .callout[data-callout="important"] { border-color: var(--phycat-callout-important-border) !important; background-color: var(--phycat-callout-important-background) !important; /* 新增背景 */ } .theme-dark .callout[data-callout="important"] .callout-title { color: var(--phycat-callout-important-title-color) !important; } .theme-dark .callout[data-callout="important"]:hover { background-color: var(--phycat-callout-important-hover-background) !important; /* 悬停加深 */ } .theme-dark .callout[data-callout="important"]::after { content: "🔥"; /* 保持你原本选用的火焰图标 */ color: var(--phycat-callout-important-watermark-color); } /* ========================================= 暗色模式 (Dark Mode) 补充 - 霓虹果冻风格 ========================================= */ /* --- Info (蓝色) --- */ /* 使用柔和的天蓝色，区别于 Tip 的青色 */ .theme-dark .callout[data-callout="info"] { border-color: var(--phycat-callout-info-border) !important; background-color: var(--phycat-callout-info-background) !important; } .theme-dark .callout[data-callout="info"] .callout-title { color: var(--phycat-callout-info-title-color) !important; } .theme-dark .callout[data-callout="info"]::after { content: "ℹ️"; color: var(--phycat-callout-info-watermark-color); } /* --- Todo (待办 - 绿色) --- */ .theme-dark .callout[data-callout="todo"] { border-color: var(--phycat-callout-todo-border) !important; background-color: var(--phycat-callout-todo-background) !important; } .theme-dark .callout[data-callout="todo"] .callout-title { color: var(--phycat-callout-todo-title-color) !important; } .theme-dark .callout[data-callout="todo"]::after { content: "✅"; color: var(--phycat-callout-todo-watermark-color); } /* --- Success / Done (成功 - 鲜绿色) --- */ .theme-dark .callout[data-callout="success"], .theme-dark .callout[data-callout="done"] { border-color: var(--phycat-callout-success-border) !important; background-color: var(--phycat-callout-success-background) !important; } .theme-dark .callout[data-callout="success"] .callout-title { color: var(--phycat-callout-success-title-color) !important; } .theme-dark .callout[data-callout="success"]:hover { background-color: var(--phycat-callout-success-hover-background) !important; } .theme-dark .callout[data-callout="success"]::after { content: "🎉"; color: var(--phycat-callout-success-watermark-color); } /* --- Question / FAQ (问题 - 黄色) --- */ .theme-dark .callout[data-callout="question"], .theme-dark .callout[data-callout="faq"], .theme-dark .callout[data-callout="help"] { border-color: var(--phycat-callout-question-border) !important; background-color: var(--phycat-callout-question-background) !important; } .theme-dark .callout[data-callout="question"] .callout-title { color: var(--phycat-callout-question-title-color) !important; /* Dracula Yellow */ } .theme-dark .callout[data-callout="question"]:hover { background-color: var(--phycat-callout-question-hover-background) !important; } .theme-dark .callout[data-callout="question"]::after { content: "❓"; color: var(--phycat-callout-question-watermark-color); } /* --- Example (示例 - 粉色) --- */ /* 使用粉色区别于 Note 的紫色 */ .theme-dark .callout[data-callout="example"] { border-color: var(--phycat-callout-example-border) !important; background-color: var(--phycat-callout-example-background) !important; } .theme-dark .callout[data-callout="example"] .callout-title { color: var(--phycat-callout-example-title-color) !important; /* Dracula Pink */ } .theme-dark .callout[data-callout="example"]:hover { background-color: var(--phycat-callout-example-hover-background) !important; } .theme-dark .callout[data-callout="example"]::after { content: "🧩"; color: var(--phycat-callout-example-watermark-color); } /* --- Quote (引用 - 灰色) --- */ .theme-dark .callout[data-callout="quote"] { border-color: var(--phycat-callout-quote-border) !important; background-color: var(--phycat-callout-quote-background) !important; } .theme-dark .callout[data-callout="quote"] .callout-title { color: var(--phycat-callout-quote-title-color) !important; } .theme-dark .callout[data-callout="quote"]::after { content: "💬"; color: var(--phycat-callout-quote-watermark-color); } /* --- Danger / Error (危险 - 鲜红) --- */ .theme-dark .callout[data-callout="danger"], .theme-dark .callout[data-callout="error"] { border-color: var(--phycat-callout-danger-border) !important; background-color: var(--phycat-callout-danger-background) !important; box-shadow: 0 0 10px var(--phycat-callout-danger-box-shadow); /* 增加一点微弱的发光感 */ } .theme-dark .callout[data-callout="danger"] .callout-title, .theme-dark .callout[data-callout="error"] .callout-title { color: var(--phycat-callout-danger-title-color) !important; } .theme-dark .callout[data-callout="danger"]::after { content: "⚡"; color: var(--phycat-callout-danger-watermark-color); } .theme-dark .callout[data-callout="error"]::after { content: "❌"; color: var(--phycat-callout-error-watermark-color); } /* --- Bug (漏洞 - 继承 Danger 颜色，图标不同) --- */ .theme-dark .callout[data-callout="bug"] { border-color: var(--phycat-callout-bug-border) !important; background-color: var(--phycat-callout-bug-background) !important; } .theme-dark .callout[data-callout="bug"] .callout-title { color: var(--phycat-callout-bug-title-color) !important; } .theme-dark .callout[data-callout="bug"]::after { content: "🐛"; color: var(--phycat-callout-bug-watermark-color); } /* --- Failure / Missing (失败 - 暗灰红) --- */ .theme-dark .callout[data-callout="failure"], .theme-dark .callout[data-callout="missing"] { border-color: var(--phycat-callout-failure-border) !important; background-color: var(--phycat-callout-failure-background) !important; /* 更深的背景 */ } .theme-dark .callout[data-callout="failure"] .callout-title { color: var(--phycat-callout-failure-title-color) !important; } .theme-dark .callout[data-callout="failure"]::after { content: "📉"; color: var(--phycat-callout-failure-watermark-color); } /* --- Abstract / Summary (摘要 - 青绿) --- */ .theme-dark .callout[data-callout="abstract"], .theme-dark .callout[data-callout="summary"] { border-color: var(--phycat-callout-abstract-border) !important; background-color: var(--phycat-callout-abstract-background) !important; } .theme-dark .callout[data-callout="abstract"] .callout-title { color: var(--phycat-callout-abstract-title-color) !important; } .theme-dark .callout[data-callout="abstract"]::after { content: "📑"; color: var(--phycat-callout-abstract-watermark-color); } .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget, .cm-lang-base):hover { box-shadow: none; } /* ================================================================= 行内代码样式 (Inline Code) - 双模完美适配版 ================================================================= */ /* 1. 核心样式定义 (同时适配阅读模式 & 编辑模式) */ /* 编辑模式下：只给内容(.cm-inline-code)加胶囊，排除反引号(.cm-formatting) */ .markdown-preview-view :not(pre)>code, .markdown-source-view.mod-cm6 .cm-inline-code:not(.cm-formatting) { /* 字体: 使用之前定义的 Cascadia Code 变量 */ font-family: var(--font-monospace) !important; letter-spacing: 0.5px; /* 默认状态：10% 透明度的主题色背景 */ background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 90%); color: var(--phycat-primary-color) !important; /* 极淡的边框 */ border: 1px solid color-mix(in srgb, var(--phycat-primary-color), transparent 85%); padding: 2px 6px !important; margin: 0 2px; border-radius: 6px; vertical-align: middle; /* 动效参数 */ transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* 关键：确保跨行时样式连贯 (像荧光笔一样断开而不是粘连) */ -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* 2. 悬停交互 (Hover Effects) */ .markdown-preview-view :not(pre)>code:hover { /* 悬停状态：实心主题色背景 + 白色文字 */ background-color: var(--phycat-primary-color) !important; color: var(--phycat-code-block-hover-color) !important; border-color: var(--phycat-primary-color); /* 爆发光晕 (Glow) */ box-shadow: 0 0 15px color-mix(in srgb, var(--phycat-primary-color), transparent 60%); /* 弹性放大 */ transform: scale(1.05); text-decoration: none !important; /* 确保文字在深色背景上清晰可见 (覆盖可能存在的渐变文字) */ -webkit-text-fill-color: var(--phycat-code-block-hover-text-fill) !important; /* 提升层级，防止被遮挡 */ position: relative; z-index: 1; } /* 3. [编辑模式特有] 反引号 (`) 的美化 */ /* 让反引号稍微淡一点，不要抢了代码内容的风头 */ .markdown-source-view.mod-cm6 .cm-formatting-code { color: var(--phycat-primary-color) !important; opacity: 0.4; /* 半透明 */ font-family: var(--font-monospace); font-weight: bold; } /* ================================================================= 键盘按键样式 (KBD) - 双模适配 (Fix Editor Mode) ================================================================= */ /* ----------------------------------------------------------------- 1. [公共结构] 布局与字体 (Common Structure) ----------------------------------------------------------------- */ .markdown-preview-view kbd, .markdown-source-view.mod-cm6 .cm-kbd, /* 兼容插件 */ .markdown-source-view.mod-cm6 kbd /* 【核心修复】兼容原生 标签 */ { /* --- 字体与排版 --- */ font-family: var(--font-monospace), "CascadiaCode", Consolas, monospace; font-size: 0.9em; font-weight: 600; /* 加粗一点更有质感 */ line-height: 1; text-align: center; /* --- 盒子模型 --- */ display: inline-block; min-width: 1.6em; /* 保证单个字母的按键也是正方形的，不显瘦 */ padding: 3px 6px; margin: 0 4px; border-radius: 6px; vertical-align: middle; /* --- 动效基础 --- */ /* 使用贝塞尔曲线，模拟物理按键回弹的 Q 弹感 */ transition: all 0.15s cubic-bezier(0.25, 0.8, 0.25, 1); /* 覆盖 Obsidian 默认样式 */ text-shadow: none; cursor: default; } /* ----------------------------------------------------------------- 2. [暗色模式] 物理黑键 (Dark Mode - Physical Black) ----------------------------------------------------------------- */ body.theme-dark .markdown-preview-view kbd, body.theme-dark .markdown-source-view.mod-cm6 .cm-kbd, body.theme-dark .markdown-source-view.mod-cm6 kbd { /* --- 基础外观 --- */ background-color: var(--phycat-keyboard-background); color: var(--text-color); /* --- 3D 边框 (光照模拟) --- */ border: 1px solid var(--phycat-keyboard-border); border-top-color: var(--phycat-keyboard-border-top); /* 顶光 */ border-bottom-color: var(--phycat-keyboard-border-bottom); /* 底影 */ /* --- 关键：使用 Box-Shadow 模拟厚度 --- */ box-shadow: 0 4px 0 var(--phycat-keyboard-box-shadow), 0 5px 5px var(--phycat-keyboard-box-shadow-2); } /* Dark Hover: 按压效果 */ body.theme-dark .markdown-preview-view kbd:hover, body.theme-dark .markdown-source-view.mod-cm6 .cm-kbd:hover, body.theme-dark .markdown-source-view.mod-cm6 kbd:hover { /* 物理位移：向下走 */ transform: translateY(2px); /* 阴影压缩：看起来像被压扁了 */ box-shadow: 0 2px 0 var(--phycat-keyboard-hover-box-shadow), 0 3px 3px var(--phycat-keyboard-hover-box-shadow-2); /* 点亮：赛博朋克光效 */ color: var(--phycat-primary-color); border-color: var(--phycat-primary-color); } /* ----------------------------------------------------------------- 3. [亮色模式] 白底彩边 (Light Mode - Typora Style) ----------------------------------------------------------------- */ body.theme-light .markdown-preview-view kbd, body.theme-light .markdown-source-view.mod-cm6 .cm-kbd, body.theme-light .markdown-source-view.mod-cm6 kbd { /* --- 基础外观 --- */ background-color: var(--phycat-keyboard-background); /* 纯白键帽 */ color: var(--phycat-primary-color); /* 字体使用主题色 (对应 element-color-deep) */ /* --- 3D 边框 (实线模拟) --- */ /* 边框颜色使用主题色 */ border: 1px solid var(--phycat-primary-color); /* 【核心技巧】底部边框加粗，模拟侧面厚度 */ border-bottom-width: 3px; /* 底部加一点淡淡的投影，增加立体感 */ box-shadow: 0 2px 4px color-mix(in srgb, var(--phycat-primary-color), transparent 85%); } /* Light Hover: 按压效果 */ body.theme-light .markdown-preview-view kbd:hover, body.theme-light .markdown-source-view.mod-cm6 .cm-kbd:hover, body.theme-light .markdown-source-view.mod-cm6 kbd:hover { /* 1. 物理位移：向下移动 2px */ transform: translateY(2px); /* 2. 边框变细：从 3px 变成 1px，配合位移，视觉上按键没有跑位，只是“变矮”了 */ border-bottom-width: 1px; /* 3. 背景变色：变成极淡的主题色 */ background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 90%); /* 4. 阴影消失：贴地了 */ box-shadow: none; } /* ================================================================= Mermaid 流程图 - 最终优化版 (横向滚动 + 玻璃拟态 + 文字防截断修复) ================================================================= */ /* 1. 容器设置：限制宽度 + 开启滚动 */ .mermaid { /* 强制块级显示，以便应用宽度和滚动 */ display: block !important; /* 【核心】宽度限制与滚动 */ width: 100% !important; overflow-x: auto !important; /* 超出部分显示横向滚动条 */ overflow-y: hidden; /* 布局微调 */ margin: 1em 0; padding-bottom: 8px; /* 给滚动条留出空间 */ text-align: center; /* 图片较小时居中 */ background-color: transparent !important; } /* ================================================================= 3. 节点样式 (复刻 Typora 逻辑 + 玻璃拟态) ================================================================= */ /* 矩形、圆角、圆形等基础节点 */ .mermaid .node rect, .mermaid .node circle, .mermaid .node ellipse, .mermaid .node path { /* 背景：使用 10% 透明度的主题色 (参考你的 Typora 设置，但改为透明混合) */ fill: color-mix(in srgb, var(--phycat-primary-color), transparent 90%) !important; /* 边框：主题色 */ stroke: var(--phycat-primary-color) !important; stroke-width: 1.5px !important; /* 确保不透明度正常 */ opacity: 1 !important; } /* 菱形/判断框 (使用副色调) */ .mermaid .node polygon { fill: color-mix(in srgb, var(--secondary-color), transparent 85%) !important; stroke: var(--secondary-color) !important; stroke-width: 1.5px !important; } /* ================================================================= 4. 文字显示修复 (解决截断 + 纯白文字) ================================================================= */ /* 暴力重置所有文字容器，防止背景干扰 */ .mermaid .label, .mermaid foreignObject, .mermaid foreignObject div, .mermaid foreignObject span, .mermaid foreignObject p, .mermaid span.nodeLabel { font-size: 12px !important; } .edgeLabel p{ background-color: color-mix(in srgb, var(--phycat-primary-color), white 90%)!important; border: 1px solid var(--phycat-primary-color) !important; border-radius: 4px !important; letter-spacing:0!important; padding: 0 3px; } .cluster rect{ fill: color-mix(in srgb, var(--secondary-color), transparent 90%)!important; stroke: var(--secondary-color)!important; stroke-width: 1px!important; stroke-linejoin: round; rx: 5px; ry: 5px; } .cluster-label span p{ letter-spacing:0!important; } #m54fff87155a51594 .actor { fill: color-mix(in srgb, var(--phycat-primary-color), white 90%)!important; stroke: var(--phycat-primary-color) !important; rx: 5px; ry: 5px; } .statediagram-cluster rect{ fill: color-mix(in srgb, var(--phycat-primary-color), white 90%)!important; stroke: var(--phycat-primary-color) !important; } .mermaid *{ letter-spacing: 0; } /* 【核心修复】解决文字显示不全/被切掉的问题 */ .mermaid foreignObject { overflow: visible !important; /* 让溢出的文字显示出来，不要切断 */ } /* 针对 HTML 标签的文字描边去除 (防止字发虚) */ .mermaid .node .label, .mermaid .label { stroke: none !important; } /* ================================================================= 6. 滚动条美化 (适配主题色) ================================================================= */ .mermaid::-webkit-scrollbar { height: 6px; /* 稍微细一点 */ } .mermaid::-webkit-scrollbar-track { background: var(--phycat-interface-background); border-radius: 3px; } .mermaid::-webkit-scrollbar-thumb { background: var(--phycat-primary-color); border-radius: 3px; } .mermaid::-webkit-scrollbar-thumb:hover { background: var(--secondary-color); } /* ================================================================= SETTING ITEMS OPTIMIZATION (设置项全局美化) ================================================================= */ .community-modal-info { --h2-color: var(--phycat-primary-color); } /* 页面UI */ .nav-file-tag { line-height: 1rem; } /* ================================================================= MODAL & SETTINGS - 纯净版 (仅美化容器与侧边栏，恢复默认控件以保证对齐) ================================================================= */ /* 1. 模态框容器 - 保持现代感与毛玻璃效果 */ .modal { background-color: var(--background-primary); border-radius: 16px; /* 大圆角 */ border: 1px solid var(--border-color); box-shadow: 0 20px 60px -10px var(--phycat-modal-box-shadow); overflow: auto; /* 确保子元素不溢出圆角 */ max-width: 1100px; transition: transform 0.2s ease, opacity 0.2s ease; } /* 深色模式 - 质感增强 */ .theme-dark .modal { background-color: var(--phycat-modal-background); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--phycat-modal-border); box-shadow: 0 0 0 1px var(--phycat-modal-box-shadow-2), 0 30px 80px -10px var(--phycat-modal-box-shadow-3); } /* 亮色模式 - 清透增强 */ .theme-light .modal { background-color: var(--phycat-modal-background); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid var(--phycat-modal-border); box-shadow: 0 10px 40px -5px var(--phycat-modal-box-shadow-2); } /* Let the settings content reveal the modal glass instead of an opaque native surface. */ body:not(.is-phone) .modal.mod-settings .vertical-tab-content { background-color: transparent; } /* 关闭按钮 - 悬浮右上角 */ .modal-close-button { position: absolute; top: 16px; right: 16px; z-index: 10; opacity: 0.6; transition: all 0.2s ease; } .modal-close-button:hover { opacity: 1; background-color: var(--background-modifier-hover); color: var(--text-error); /* 悬停变为红色警告色，符合关闭直觉 */ transform: rotate(90deg); } /* ================================================================= 2. 左侧侧边栏 - 紧凑优化版 ================================================================= */ /* 侧边栏容器 */ .vertical-tab-header { background-color: color-mix(in srgb, var(--background-secondary), transparent 60%); border-right: 1px solid var(--border-color); width: 230px; padding: 15px 8px; /* 减少容器整体的内边距 */ flex-shrink: 0; } /* 分组小标题 - 更加紧凑 */ .vertical-tab-header-group-title { font-size: 11px; /* 稍微调小字号 */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 2px 0 4px 10px; /* 关键：大幅减少标题上下的留白 */ } /* 导航项 - 基础样式 (高度压缩) */ .vertical-tab-nav-item { display: flex; align-items: center; padding: 5px 10px; /* 关键：从 8px 减小到 5px，大幅降低单行高度 */ margin-bottom: 2px; /* 关键：减少项与项之间的距离 */ border-radius: 6px; /* 圆角稍微改小一点点以适配低高度 */ cursor: pointer; font-size: 14px; /* 字体微调 */ color: var(--text-normal); transition: all 0.2s ease; position: relative; } /* 导航项 - 图标 */ .vertical-tab-nav-item-icon { margin-right: 8px; color: var(--text-muted); display: flex; align-items: center; transition: color 0.2s ease; } .vertical-tab-nav-item-icon svg { width: 16px; /* 图标稍微调小，适配紧凑布局 */ height: 16px; stroke-width: 2px; } /* 导航项 - 悬停状态 */ .vertical-tab-nav-item:hover { background-color: var(--background-modifier-hover); color: var(--text-normal); } .vertical-tab-nav-item:hover .vertical-tab-nav-item-icon { color: var(--text-normal); } /* 导航项 - 激活选中状态 */ .vertical-tab-nav-item.is-active { background-color: var(--phycat-interactive-color) !important; color: var(--phycat-settings-nav-active-color) !important; font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--phycat-interactive-color), transparent 50%); /* 阴影也稍微收敛一点 */ } /* 选中时，强制图标和文字变白 */ .vertical-tab-nav-item.is-active .vertical-tab-nav-item-icon { color: var(--phycat-settings-nav-active-color) !important; opacity: 1; } /* ================================================================= BASES VIEW OPTIMIZATION - 数据库表格/列表美化 (去线化、现代化、清单化) ================================================================= */ /* 1. 核心变量重置：移除网格线，调整间距 */ .workspace-leaf-content[data-type="bases"] { /* 移除行与列的边框线 (原本是通过 box-shadow 实现的) */ --bases-table-row-border-width: 0px !important; --bases-table-column-border-width: 0px !important; --table-border-width: 0px !important; /* 调整行高，让列表更松散透气 */ --bases-table-row-height: 40px !important; /* 调整文字大小 */ --bases-table-font-size: 14px !important; /* 背景色处理 */ --bases-table-header-background: var(--background-primary); --bases-table-group-background: var(--background-primary); } /* 2. 顶部工具栏 (Filter, Sort, New) */ .bases-toolbar { border-bottom: 1px solid var(--border-color); padding: 8px 16px; gap: 12px; } /* 工具栏按钮 - 胶囊化 */ .bases-toolbar .text-icon-button { background-color: transparent; border: 1px solid transparent; border-radius: 8px; padding: 4px 12px; color: var(--text-muted); font-size: 13px; transition: all 0.2s ease; box-shadow: none !important; } .bases-toolbar .text-icon-button:hover, .bases-toolbar .text-icon-button.is-active { background-color: var(--background-modifier-hover); color: var(--text-normal); } .bases-toolbar .text-button-icon svg { width: 16px; height: 16px; opacity: 0.8; } /* 3. 表头 (Table Header) */ .bases-thead { background-color: var(--background-primary) !important; border-bottom: 2px solid var(--background-modifier-border); /* 仅保留表头底部的分割线 */ box-shadow: none !important; z-index: 10; } .bases-table-header { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding-left: 12px; /* 增加左侧对齐间距 */ } /* ================================================================= BASES VIEW HOVER FIX - 列表交互增强补丁 (让悬停效果清晰、灵动、有质感) ================================================================= */ /* 1. 基础行样式重置 */ .bases-tr { box-shadow: none !important; border-bottom: 1px solid transparent; /* 保持占位 */ transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); /* 更平滑的动画曲线 */ cursor: pointer; /* 鼠标变为手型，提示可点击 */ margin: 0 4px; /* 每一行左右留出一点空隙，为了显示圆角 */ width: calc(100% - 8px) !important; /* 配合 margin 调整宽度 */ border-radius: 8px; /* 默认就有圆角，虽然平时看不见 */ } /* 2. 悬停状态 (Hover) - 强力增强 */ .bases-tr:hover { /* 背景色：使用主题色与透明度混合，保证无论在什么配色下都清晰可见且协调 */ /* 亮色模式下是淡粉色/淡绿色，深色模式下是微光 */ background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 88%) !important; /* 阴影：添加轻微的投影，制造悬浮感 */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05), inset 0 0 0 1px color-mix(in srgb, var(--phycat-primary-color), transparent 90%) !important; /* 核心修复：防止底边框消失带来的视觉跳动，用透明边框占位 */ border-bottom-color: transparent; /* 稍微放大，增加触感 (Micro-interaction) */ transform: scale(1.005); z-index: 10; /* 确保悬浮时盖在其他元素上面 */ } /* 3. 悬停时的文字颜色优化 */ .bases-tr:hover .bases-rendered-value { color: var(--text-normal) !important; } /* 只有鼠标划过的那一行，内部的链接才会高亮 */ .bases-tr:hover .internal-link { color: var(--phycat-primary-color) !important; text-decoration: none !important; /* 保持干净，不要下划线，只变色 */ } /* 4. 选中状态 (如果表格支持选中) */ .bases-tr.is-selected { background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 80%) !important; box-shadow: inset 3px 0 0 var(--phycat-primary-color); /* 左侧加一条明显的色条指示 */ } /* 5. 修复单元格圆角溢出 */ /* 确保背景色不会溢出圆角 */ .bases-tr:hover .bases-td:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; } .bases-tr:hover .bases-td:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; } /* 5. 单元格 (Cells) */ .bases-td { box-shadow: none !important; /* 移除列分割线 */ padding: 0 12px !important; /* 增加左右内边距，内容不贴边 */ border-right: none !important; } /* 6. 内容净化 - 链接美化 */ .bases-rendered-value { padding: 0 !important; display: flex; align-items: center; } /* 去掉下划线，让它看起来像普通文字 */ .bases-rendered-value .internal-link { text-decoration: none !important; color: var(--text-normal) !important; font-weight: 400; transition: color 0.2s ease; } /* 只有鼠标悬停在具体文字上时，才显示链接色 */ .bases-rendered-value .internal-link:hover { color: var(--phycat-primary-color) !important; text-decoration: underline !important; text-underline-offset: 4px; } /* 7. 细节微调 */ /* 图标列（如果有） */ .bases-table-header-icon { display: none; /* 如果觉得表头图标乱，可以隐藏，或者调淡 */ } /* 滚动条区域背景 */ .bases-view { background-color: var(--background-primary); } /* ----------------------------------------------------------------- 主题适配 ----------------------------------------------------------------- */ .theme-light .bases-tr:not(:hover) { border-bottom: 1px solid var(--phycat-database-row-hover-border-bottom); /* 极淡的分割线，保持列表感但不可见 */ } .theme-dark .bases-tr:not(:hover) { border-bottom: 1px solid var(--phycat-database-row-hover-border-bottom); } /* ================================================================= 7. 滚动条美化 (Global Scrollbars) 保留你的自定义样式，全局生效 ================================================================= */ body { --scrollbar-bg: transparent; } body.theme-dark { } /* 亮色模式补充变量 (防止 mono-rgb-100 无效) */ body.theme-light { } body:not(.restored-scrollbars) ::-webkit-scrollbar, body:not(.restored-scrollbars) .kanban-plugin__scroll-container::-webkit-scrollbar { width: 8px; /* 保持精致宽度 */ height: 8px; background-color: var(--scrollbar-bg); } body:not(.restored-scrollbars) ::-webkit-scrollbar-thumb, body:not(.restored-scrollbars) .kanban-plugin__scroll-container::-webkit-scrollbar-thumb { background-clip: padding-box; border-radius: 20px; border: 2px solid transparent; /* 制造内缩效果 */ min-height: 45px; /* 【核心恢复】默认透明，实现自动隐藏 */ background-color: transparent; } /* 移动端特殊处理 */ body:not(.restored-scrollbars) .mobile-toolbar-options-container::-webkit-scrollbar { display: none; } /* 【核心恢复】只有悬停在容器上时，才显示滚动条滑块 */ body:not(.restored-scrollbars):not(.is-mobile) :hover::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-bg) !important; } /* 鼠标悬停在滑块本身时加深颜色 */ body:not(.restored-scrollbars) ::-webkit-scrollbar-thumb:hover, body:not(.restored-scrollbars) ::-webkit-scrollbar-thumb:active { background-color: var(--scrollbar-active-thumb-bg) !important; } .workspace-leaf-content:is([data-type="surfing-view"], [data-type="graph"], [data-type="localgraph"]) ::-webkit-scrollbar, .scrollbar-hide ::-webkit-scrollbar { display: none; } /* ================================================================= 界面布局引擎 (Layout Engine) - 卡片式布局 启用条件：Style Settings 选中 layout-cards ================================================================= */ /* ----------------------------------------------------------------- 1. 基础布局结构 (Layout Structure) - 亮暗通用 ----------------------------------------------------------------- */ /* 容器背景透明化 (透出底色) */ body.layout-cards:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf, body.layout-cards:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .workspace-leaf-content, body.layout-cards:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-header:not(.animate), body.layout-cards:not(.is-mobile) .workspace-tabs:not(.mod-stacked) .view-content:not(.vignette-radial, .vignette-linear, .animate, .ptm-fullscreen-writing-focus-element), body.layout-cards .mod-left-split .workspace-tab-header.has-active-menu, body.layout-cards .mod-right-split .workspace-tab-header.has-active-menu, body.layout-cards:not(.is-mobile) .workspace-tab-header-container, body.layout-cards .workspace>.workspace-split { background-color: transparent !important; } /* 移除默认边框 */ body.layout-cards .workspace-tab-header-container, body.layout-cards .workspace-tabs.mod-top .workspace-tab-header-container { border-bottom: 1px solid var(--background-card) !important; } /* 左侧功能栏顶部与标题区域连成一体，兼容新版和旧版功能栏类名 */ body .workspace-ribbon.mod-primary::before, body .workspace-ribbon.mod-left::before { border-bottom: none !important; } body.layout-cards .workspace-ribbon { border-right: transparent !important; background-color: var(--background-card); } body.layout-cards .sidebar-toggle-button,body.layout-cards .workspace-tabs.mod-top{ background-color: var(--background-card); } body.layout-cards .workspace-ribbon.mod-left:before { background: transparent !important; } /* 分割线透明 */ body.layout-cards .workspace-leaf-resize-handle { --workspace-divider-color: transparent; border-color: var(--workspace-divider-color); } /* 标题栏按钮背景透明 */ body.layout-cards .is-hidden-frameless:not(.is-fullscreen).is-focused .titlebar-button-container.mod-right { background-color: transparent; } /* 侧边栏停靠区透明 */ body.layout-cards:not(.is-mobile).mod-left-split .workspace-sidedock-vault-profile { border: 0; padding: 0; z-index: 99; } body.layout-cards .workspace-sidedock-vault-profile { border-top: transparent !important; } body.layout-cards:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile { background-color: var(--background-card); } body.layout-cards:not(.is-mobile) .workspace-split.mod-left-split { position: relative; } body.layout-cards:not(.is-mobile) .workspace-split.mod-left-split .workspace-tabs:last-of-type .workspace-tab-container { padding-bottom: 44px; } body.layout-cards:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile { position: absolute; right: 10px; bottom: 8px; left: 10px; box-sizing: border-box; height: 44px; margin: 0; padding: 6px; padding-right: 25px; background: transparent !important; border: 0 !important; z-index: 10; } body.layout-cards:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile .workspace-drawer-vault-switcher { height: 32px; } /* ----------------------------------------------------------------- 2. 亮色模式卡片样式 (Light Mode Cards) - 你的原版设计 ----------------------------------------------------------------- */ /* 2.1 卡片容器 */ body.layout-cards:not(.is-mobile).theme-light .workspace-tab-container { border-radius: 20px 20px 10px 10px; border: 1px solid color-mix(in srgb, var(--phycat-primary-color), transparent 80%); /* backdrop-filter: blur(20px); */ margin: 8px 10px; background-color: color-mix(in srgb, var(--phycat-primary-color), #fff 96%); /* 保留你的注释以备选: backdrop-filter: blur(15px) saturate(180%); */ } /* 2.2 标签栏布局 */ body.layout-cards.theme-light .mod-vertical .workspace-tab-header-container { padding-left: 20px; /* 恢复默认 */ } body.layout-cards.theme-light .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner { align-items: center; justify-content: center; margin: 0; margin-top: 3px; width: 100%; gap: 10px; z-index: 1; } /* 2.3 标签样式 (未激活) */ body.layout-cards.theme-light .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header { background: color-mix(in srgb, var(--phycat-primary-color), #fff 96%); border-radius: 6px; border: 1px solid var(--phycat-cards-border); box-shadow: 0 0 8px var(--phycat-cards-box-shadow), inset 0 1px 1px var(--phycat-cards-box-shadow-2); height: 32px; padding: 0 !important; transition: 400ms, background-color 150ms ease-in-out; } /* 2.4 标签样式 (激活) */ body.layout-cards.theme-light .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active { border: 1px solid color-mix(in srgb, var(--phycat-primary-color), #fff 70%); box-shadow: 0 0 8px color-mix(in srgb, var(--phycat-primary-color), transparent 75%), inset 0 1px 1px color-mix(in srgb, var(--phycat-primary-color), transparent 75%); /* 增加激活态背景色，防止全白看不清 */ background-color: var(--background-primary); font-weight: bold; flex-grow: 1.67; /* 展开效果 */ max-width: var(--tab-max-width); } /* 2.5 Tab 内容微调 */ body.layout-cards.theme-light .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner { padding: 0 4px 0 8px; transition: 400ms, background-color 150ms ease-in-out, max-width 400ms; } /* 2.6 隐藏 Tab 分割线 */ body.layout-cards .workspace-tab-header-container .workspace-tab-header::before, body.layout-cards .workspace-tab-header-container .workspace-tab-header::after, body.layout-cards .workspace .mod-root .workspace-tab-header-inner::after { display: none; } /* 2.7 模态框与状态栏 (悬浮玻璃) */ body.layout-cards:not(.is-phone).theme-light .modal-container.mod-dim .modal, body.layout-cards:not(.is-phone).theme-light .status-bar { border-radius: var(--radius-xl); background: var(--phycat-cards-modal-background); /* 模拟你的 glass-bg-color */ /* backdrop-filter: blur(15px) saturate(180%); -webkit-backdrop-filter: blur(15px) saturate(180%); */ border: 1px solid var(--phycat-cards-modal-border); box-shadow: 0 0 8px var(--phycat-cards-modal-box-shadow), inset 0 1px 1px var(--phycat-cards-modal-box-shadow-2); } /* Only the status bar needs an offset. Plugin modals keep their own centering transform. */ body.layout-cards:not(.is-phone).theme-light .status-bar { margin: 0 5px 5px 5px; transform: translate(0, -5px); /* 微调位置 */ } body.layout-cards:not(.is-phone).theme-light .workspace-tabs{ background: var(--background-card); } /* ----------------------------------------------------------------- 3. 暗色模式卡片适配 (Dark Mode Adaptation) 逻辑：复用亮色的布局结构，替换为深色变量 ----------------------------------------------------------------- */ /* 3.1 卡片容器 (深色背景) */ body.layout-cards:not(.is-mobile).theme-dark .workspace-tab-container { border-radius: 20px 20px 10px 10px; /* 边框：极淡的白色 */ border: 1px solid var(--phycat-cards-border); margin: 8px 10px; /* 背景：深色主题背景 */ background-color: var(--background-primary); box-shadow: 0 2px 6px var(--phycat-cards-box-shadow); /* 深色阴影 */ } /* 3.2 标签样式 (未激活) */ body.layout-cards.theme-dark .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header { background: var(--phycat-cards-background); border-radius: 6px; border: 1px solid var(--phycat-cards-border-2); box-shadow: none; height: 32px; padding: 0 !important; transition: 400ms, background-color 150ms ease-in; } /* 3.3 标签样式 (激活) */ body.layout-cards.theme-dark .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active { border: 1px solid var(--phycat-cards-active-border); box-shadow: 0 2px 10px var(--phycat-cards-active-box-shadow); background-color: var(--background-secondary); /* 稍微亮一点的深色 */ font-weight: bold; flex-grow: 1.67; max-width: 240px; } /* 激活文字颜色 */ body.layout-cards.theme-dark .workspace-tab-header.is-active .workspace-tab-header-inner-title { color: var(--text-normal); } /* 3.4 Tab 容器对齐 */ body.layout-cards.theme-dark .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner { align-items: center; justify-content: center; margin: 0; margin-top: 3px; width: 100%; gap: 10px; } /* 3.5 模态框与状态栏 (深色悬浮) */ body.layout-cards:not(.is-phone).theme-dark .modal-container.mod-dim .modal, body.layout-cards:not(.is-phone).theme-dark .status-bar { border-radius: var(--radius-xl); background: var(--phycat-cards-modal-background); /* backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); */ border: 1px solid var(--phycat-cards-modal-border); box-shadow: 0 0 20px var(--phycat-cards-modal-box-shadow); } body.layout-cards:not(.is-phone).theme-dark .status-bar { margin: 0 5px 5px 5px; transform: translate(0, -5px); } /* ... [Existing Code] ... */ /* ================================================================= 插件市场详情页优化 (Community Plugin Modal) - Style A: Clean Card (Fix V2) Adapted for actual Obsidian DOM structure ================================================================= */ /* 1. Container Card Style */ /* 2. Metadata Grid Layout */ .community-modal-meta { display: grid; /* Define explicit grid areas */ grid-template-areas: "name name name name" "desc desc desc desc" "downloads version author updated" "repo repo repo repo" "buttons buttons buttons buttons"; /* 【修改比例】前三个占 2 份，最后一个占 1 份 */ grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); gap: 16px; margin-bottom: 0 !important; /* Remove default margin */ } /* 3. Header Section (Name & Desc) */ /* 3.1 Name */ .community-modal-info-name { grid-area: name; font-size: 24px; font-weight: 800; color: var(--phycat-primary-color); line-height: 1.2; margin-bottom: 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* Flair (Installed badge) */ .flair { font-size: 11px; background-color: var(--background-secondary) !important; border: 1px solid var(--border-color); color: var(--text-muted) !important; padding: 2px 8px; border-radius: 50px; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; top: -2px; position: relative; } .flair.mod-pop { color: var(--secondary-color) !important; border-color: var(--secondary-color); background-color: color-mix(in srgb, var(--secondary-color), transparent 90%) !important; } /* 3.2 Description */ .community-modal-info-desc { grid-area: desc; font-size: 15px; line-height: 1.6; color: var(--text-normal); opacity: 0.9; padding-bottom: 20px; border-bottom: 1px dashed var(--border-color); margin-bottom: 8px; } /* 4. Stats Grid (Middle Section) */ /* Force these items to flow into the 'stats' area */ .community-modal-info-downloads, .community-modal-info-version, .community-modal-info-author, .community-modal-info-repo { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 12px; background-color: var(--background-secondary); border-radius: 8px; font-size: 13px; color: var(--text-muted); /* Reset margins */ margin: 0 !important; /* 【关键】允许格子比内容小，确保 fr 比例生效，防止长内容撑破比例 */ min-width: 0; } /* Assign to specific grid columns in the stats row */ /* Specific placement based on DOM order */ .community-modal-info-downloads { grid-area: downloads; } .community-modal-info-version { grid-area: version; } .community-modal-info-author { grid-area: author; } .community-modal-info-repo { grid-area: repo; grid-column: 1 / -1; align-items: flex-start; } .community-modal-info-repo + .community-modal-info-repo { grid-area: updated; grid-column: auto; align-items: stretch; } /* Mobile adaptation */ @media (max-width: 700px) { .community-modal-meta { grid-template-areas: "name" "desc" "downloads" "version" "author" "updated" "repo" "buttons"; grid-template-columns: 1fr; } } /* 4.1 Downloads Styling */ .community-modal-info-downloads { color: var(--text-normal); font-weight: bold; border: 1px solid color-mix(in srgb, var(--phycat-primary-color), transparent 80%); background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 96%); } .community-modal-info-downloads::before { content: "DOWNLOADS"; font-size: 10px; font-weight: bold; color: var(--phycat-primary-color); opacity: 0.7; margin-bottom: 4px; letter-spacing: 0.5px; } .community-modal-info-downloads span { display: flex; align-items: center; gap: 6px; font-size: 16px; } .community-modal-info-downloads svg { width: 16px; height: 16px; color: var(--phycat-primary-color); } /* 4.2 Other Stats Labels */ .community-modal-info-version::before { content: "VERSION"; } .community-modal-info-author::before { content: "AUTHOR"; } .community-modal-info-repo::before { content: "REPOSITORY"; } .community-modal-info-repo + .community-modal-info-repo::before { content: "UPDATED"; } .community-modal-info-version::before, .community-modal-info-author::before, .community-modal-info-repo::before { font-size: 10px; font-weight: bold; color: var(--text-muted); opacity: 0.6; margin-bottom: 2px; display: block; } /* Links */ .community-modal-info-author a, .community-modal-info-repo a { color: var(--text-normal); text-decoration: none; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .community-modal-info-author + .community-modal-info-repo a { color: var(--phycat-primary-color); overflow: visible; overflow-wrap: anywhere; text-decoration: underline; text-overflow: clip; white-space: normal; } .community-modal-info-author a:hover, .community-modal-info-repo a:hover { color: var(--phycat-primary-color); text-decoration: underline; } /* 5. Button Container */ .community-modal-button-container { grid-area: buttons; margin-top: 20px; padding-top: 20px; border-top: 1px dashed var(--border-color); display: flex; gap: 10px; flex-wrap: wrap; } .community-modal-button-container button { flex: 1; justify-content: center; } /* 插件优化 */ .codeblock-customizer-line-number, .codeblock-customizer-line-number-specific { background: transparent; } /* ================================================================= 文件树：柔和圆角标题、彩虹图标与细层级线 颜色继续使用现有调色盘；选中项使用最终全局主色。 ================================================================= */ body.rainbow-folders .nav-files-container { --folder-color: var(--text-muted); --nav-item-color: var(--text-muted); --nav-item-color-hover: var(--text-normal); --nav-item-color-active: var(--phycat-primary-color); --nav-item-weight-hover: var(--nav-item-weight); --nav-item-background-hover: color-mix(in srgb, var(--phycat-primary-color), transparent 96%); --nav-item-background-active: color-mix(in srgb, var(--phycat-primary-color), transparent 91%); --background-modifier-active-hover: var(--nav-item-background-active); } body.theme-dark.rainbow-folders .nav-files-container { --nav-item-background-hover: color-mix(in srgb, var(--phycat-primary-color), transparent 94%); --nav-item-background-active: color-mix(in srgb, var(--phycat-primary-color), transparent 86%); } /* 根文件夹循环使用七色；兼容平铺列表与原生根节点包装。 */ body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+1), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+1) { --folder-color: var(--nav-c-pink); } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+2), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+2) { --folder-color: var(--nav-c-cyan); } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+3), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+3) { --folder-color: var(--nav-c-orange); } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+4), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+4) { --folder-color: var(--nav-c-green); } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+5), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+5) { --folder-color: var(--nav-c-purple); } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+6), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+6) { --folder-color: var(--nav-c-red); } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root):nth-child(7n+7), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder:nth-child(7n+7) { --folder-color: var(--nav-c-blue); } /* 颜色仅出现在标题行和图标中，展开内容保持通透。 */ body.rainbow-folders .nav-files-container .nav-folder { border: 0; border-radius: 0; background-color: transparent; } body.rainbow-folders .nav-files-container > div > .nav-folder:not(.mod-root), body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder { margin-bottom: 10px; } body.rainbow-folders .nav-files-container .nav-folder-title { position: relative; align-items: center; min-height: 34px; padding: 6px 10px; margin: 2px 0; border-radius: 10px; color: var(--text-normal); font-weight: 500; transition: background-color 160ms ease; } body.rainbow-folders :where(.nav-files-container > div > .nav-folder:not(.mod-root), .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder) > .nav-folder-title { min-height: 36px; background-color: color-mix(in srgb, var(--folder-color), transparent 95%); } body.theme-dark.rainbow-folders :where(.nav-files-container > div > .nav-folder:not(.mod-root), .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder) > .nav-folder-title { background-color: color-mix(in srgb, var(--folder-color), transparent 92%); } body.rainbow-folders .nav-files-container .nav-folder-title-content, body.rainbow-folders .nav-files-container .nav-file-title-content { flex: 1 1 auto; min-width: 0; } body.rainbow-folders .nav-files-container .nav-folder-title-content:not([contenteditable="true"]), body.rainbow-folders .nav-files-container .nav-file-title-content:not([contenteditable="true"]) { white-space: var(--nav-item-white-space, nowrap); overflow: hidden; text-overflow: ellipsis; } /* 移动原生箭头，保留点击、折叠状态和键盘操作。 */ body.rainbow-folders .nav-files-container .nav-folder-title > .collapse-icon { position: static; order: 2; display: flex; flex: 0 0 16px; width: 16px; margin-inline: 8px 0; align-items: center; justify-content: center; color: var(--text-muted); opacity: 0.65; } body.rainbow-folders .nav-files-container .nav-folder-title > .collapse-icon svg.svg-icon { width: 12px; height: 12px; color: inherit; stroke-width: 1.6px; } /* 层级线对齐图标中心；子文件夹继承所属根文件夹的颜色。 */ body.rainbow-folders .nav-files-container .nav-folder-children { margin-inline-start: 18px; padding-inline-start: 10px; margin-block: 4px 6px; border-inline-start: 1px solid color-mix(in srgb, var(--folder-color), transparent 82%); transition: border-color 160ms ease; } body.rainbow-folders .nav-files-container .nav-folder.mod-root > .nav-folder-children { margin: 0; padding: 0; border: 0; } /* 原生文件行用负边距铺满列表；在文件自身的范围内裁切背景，保留缩进。 */ body.rainbow-folders .nav-files-container .nav-file { overflow: clip; border-radius: 8px; } /* 子文件夹的悬停背景也限制在所属层级内；根节点包装不算嵌套。 */ body.rainbow-folders .nav-files-container .nav-folder:not(.mod-root) .nav-folder { overflow: clip; border-radius: 10px; } /* 文件行保持紧凑；激活颜色与外观中的主题色保持一致。 */ body.rainbow-folders .nav-files-container .nav-file-title { align-items: center; min-height: 30px; padding: 5px 8px; margin: 1px 0; border-radius: 8px; color: var(--text-muted); transition: background-color 160ms ease, color 160ms ease; } body.rainbow-folders .nav-files-container .nav-file-title.is-active { background-color: var(--nav-item-background-active); color: var(--phycat-primary-color); font-weight: 500; } body.rainbow-folders .nav-files-container .nav-file-title.is-active .nav-file-title-content::before { background-color: var(--phycat-primary-color); opacity: 1; } @media (hover: hover) { body.rainbow-folders:not(.is-grabbing) .nav-files-container .nav-folder-title:where(:not(.is-selected, .is-being-dragged, .is-being-dragged-over)):hover { color: var(--text-normal); font-weight: 500; background-color: color-mix(in srgb, var(--folder-color), transparent 90%); } body.rainbow-folders:not(.is-grabbing) .nav-files-container .nav-file-title:where(:not(.is-selected, .is-being-dragged, .is-being-dragged-over)):hover { color: var(--text-normal); font-weight: var(--nav-item-weight); background-color: var(--nav-item-background-hover); } body.rainbow-folders:not(.is-grabbing) .nav-files-container .nav-file-title.is-active:where(:not(.is-selected, .is-being-dragged, .is-being-dragged-over)):hover { color: var(--phycat-primary-color); font-weight: 500; background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 85%); } body.rainbow-folders .nav-files-container .nav-folder:hover > .nav-folder-children { border-inline-start-color: color-mix(in srgb, var(--folder-color), transparent 70%); } body.rainbow-folders .nav-files-container .nav-folder-title:hover > .collapse-icon { opacity: 0.95; } } /* 保留原生多选与拖放反馈，覆盖标题行的浅色背景。 */ body.rainbow-folders .nav-files-container :is(.nav-file-title, .nav-folder-title).is-selected { color: var(--nav-item-color-selected); background-color: var(--nav-item-background-selected); } body.rainbow-folders .nav-files-container .nav-folder.is-being-dragged-over > .nav-folder-title, body.rainbow-folders .nav-files-container :is(.nav-file-title, .nav-folder-title).is-being-dragged-over { color: var(--phycat-primary-color); background-color: color-mix(in srgb, var(--phycat-primary-color), transparent 85%); } body.rainbow-folders .nav-files-container :is(.nav-file-title, .nav-folder-title).is-being-dragged { color: var(--text-on-accent); background-color: var(--interactive-accent); } body.rainbow-folders .nav-files-container .nav-folder-title.is-being-dragged > .collapse-icon { color: var(--text-on-accent); } /* 图标沿用现有 SVG；关闭 folder-icons 时不创建自定义文件夹图标。 */ /* --- 6.1 通用图标结构 --- */ body.folder-icons .nav-files-container .nav-folder-title-content:not([contenteditable="true"])::before, .nav-files-container .nav-file-title-content:not([contenteditable="true"])::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: text-bottom; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; transition: transform 0.2s ease, opacity 0.2s ease; } /* 降低文件图标的默认透明度，主次分明 */ .nav-files-container .nav-file-title-content:not([contenteditable="true"])::before { width: 14px; height: 14px; opacity: 0.6; } .nav-files-container .nav-file-title:hover .nav-file-title-content:not([contenteditable="true"])::before { opacity: 0.9; } /* --- 6.2 文件夹状态图标 --- */ /* 默认：折叠状态 (Folder Closed) */ body.folder-icons .nav-files-container .nav-folder-title-content:not([contenteditable="true"])::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'/%3E%3C/svg%3E"); opacity: 0.8; } /* 展开状态 (Folder Open) */ body.folder-icons .nav-files-container .nav-folder:not(.is-collapsed) > .nav-folder-title .nav-folder-title-content:not([contenteditable="true"])::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); opacity: 1; } /* --- 6.3 文件类型图标智能匹配 --- */ /* 1. 默认文件 */ .nav-files-container .nav-file-title-content:not([contenteditable="true"])::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"); } /* 2. 图像文件 */ .nav-files-container .nav-file-title[data-path$=".png" i] .nav-file-title-content:not([contenteditable="true"])::before, .nav-files-container .nav-file-title[data-path$=".jpg" i] .nav-file-title-content:not([contenteditable="true"])::before, .nav-files-container .nav-file-title[data-path$=".jpeg" i] .nav-file-title-content:not([contenteditable="true"])::before, .nav-files-container .nav-file-title[data-path$=".gif" i] .nav-file-title-content:not([contenteditable="true"])::before, .nav-files-container .nav-file-title[data-path$=".svg" i] .nav-file-title-content:not([contenteditable="true"])::before, .nav-files-container .nav-file-title[data-path$=".webp" i] .nav-file-title-content:not([contenteditable="true"])::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2' ry='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); } /* 3. Canvas 文件 */ .nav-files-container .nav-file-title[data-path$=".canvas" i] .nav-file-title-content:not([contenteditable="true"])::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='9' x='3' y='3' rx='1'/%3E%3Crect width='7' height='5' x='14' y='3' rx='1'/%3E%3Crect width='7' height='9' x='14' y='12' rx='1'/%3E%3Crect width='7' height='5' x='3' y='16' rx='1'/%3E%3C/svg%3E"); } /* 4. Base 数据文件 */ .nav-files-container .nav-file-title[data-path$=".base" i] .nav-file-title-content:not([contenteditable="true"])::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5V19A9 3 0 0 0 21 19V5'/%3E%3Cpath d='M3 12A9 3 0 0 0 21 12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5V19A9 3 0 0 0 21 19V5'/%3E%3Cpath d='M3 12A9 3 0 0 0 21 12'/%3E%3C/svg%3E"); } /* 文件夹图标独立着色，文字保持中性色；子文件夹图标退回灰色。 */ body.rainbow-folders.folder-icons .nav-files-container .nav-folder-title-content::before { background-color: var(--folder-color); margin-right: 10px; opacity: 0.9; } body.rainbow-folders.folder-icons .nav-files-container .nav-folder .nav-folder .nav-folder-title-content::before { background-color: var(--text-muted); opacity: 0.75; } body.rainbow-folders.folder-icons .nav-files-container .nav-folder.mod-root > .nav-folder-children > .nav-folder > .nav-folder-title .nav-folder-title-content::before { background-color: var(--folder-color); opacity: 0.9; } body.rainbow-folders .nav-files-container :is(.nav-file-title, .nav-folder-title).is-being-dragged :is(.nav-file-title-content, .nav-folder-title-content)::before { background-color: currentColor !important; } .codeblock-customizer-active-line-highlight .cm-active, .codeblock-customizer-active-line-highlight-editor .cm-active{ background-color: color-mix(in srgb, var(--phycat-primary-color) , transparent 95%)!important; }