cyriusweng_opal-theme/theme.css

1560 lines
92 KiB
CSS
Raw Permalink Normal View History

/* =====================================================================
Opal Theme · v2.0满配 90 个可调控件 + 界面线条/边框全覆盖
Opal 配色浅深双 flavour+ 559 主题精华
轴一审美路线class-select轴二自定义输入与数值微调本版补齐
健壮性每个变量项都带默认兜底@supports / reduced-motion / reduced-transparency / 打印复位
===================================================================== */
/* @settings
name: Opal
id: opal-theme
settings:
-
id: opal-h-color
title: 配色
type: heading
level: 1
-
id: opal-accent
title: 主强调色
description: 链接选中焦点等核心交互色
type: variable-themed-color
format: hex
opacity: false
default-light: '#4C50C8'
default-dark: '#8098FF'
-
id: opal-accent-2
title: 副强调色
description: 第二强调色用于次级高亮渐变的另一端默认青
type: variable-themed-color
format: hex
opacity: false
default-light: '#127367'
default-dark: '#82D9C8'
-
id: opal-accent-saturation
title: 强调色鲜艳度
description: 1=原样小于 1 更灰更沉大于 1 更艳老引擎不支持时自动忽略
type: variable-number-slider
default: 1
min: 0.4
max: 1.6
step: 0.05
-
id: opal-tone-light
title: 浅色底色温
description: 给浅色背景掺入的色调暖灰选桃冷灰选蓝紫灰选紫要配合下面的强度才生效
type: variable-themed-color
format: hex
opacity: false
default-light: '#EDEFF4'
default-dark: '#EDEFF4'
-
id: opal-tone-dark
title: 深色底色温
description: 给深色背景掺入的色调要配合下面的强度才生效
type: variable-themed-color
format: hex
opacity: false
default-light: '#20232E'
default-dark: '#20232E'
-
id: opal-tone-strength
title: 底色温强度
description: 上面色温掺进背景的比例0=纯中性灰默认越大染色越明显
type: variable-number-slider
default: 0
min: 0
max: 18
step: 1
format: '%'
-
id: opal-surface-contrast
title: 面板分层强度
description: 侧栏/卡片这些相对正文背景的明暗差100=正常分层默认越小越扁平越贴近背景
type: variable-number-slider
default: 100
min: 40
max: 100
step: 5
format: '%'
-
id: opal-code-bg
title: 代码块底色
type: variable-themed-color
format: hex
opacity: false
default-light: '#E2E5EE'
default-dark: '#2B2F3C'
-
id: opal-mark-bg
title: 高亮主色
description: 荧光笔高亮的基准色波浪线/辉光都取自它
type: variable-themed-color
format: hex
opacity: false
default-light: '#F6E1A2'
default-dark: '#EBD08A'
-
id: opal-mark-style
title: 高亮风格
description: 霓虹波浪=波浪下划线+辉光默认纯色底=传统荧光块柔和底=淡色块裁字=只给字上色
type: class-select
allowEmpty: false
default: opal-mark-wave
options:
- label: 霓虹波浪
value: opal-mark-wave
- label: 纯色底块
value: opal-mark-fill
- label: 柔和底块
value: opal-mark-soft
- label: 霓虹裁字
value: opal-mark-text
-
id: opal-heading-scheme
title: 标题配色
description: 彩虹多色=每级一色默认同色渐变=一色族由亮到暗单色=都用主色逐级自定=用下面 6 个色钮关闭=退回正文色
type: class-select
allowEmpty: false
default: opal-h-rainbow
options:
- label: 彩虹多色
value: opal-h-rainbow
- label: 同色渐变
value: opal-h-mono
- label: 单色
value: opal-h-single
- label: 逐级自定
value: opal-h-custom
- label: 关闭分级上色
value: opal-h-plain
-
id: opal-tag-scheme
title: 标签配色
description: 首字母伪哈希=按标签首字母散成 26 默认语义=只给紧急/完成等词库上色其余统一单色=统一
type: class-select
allowEmpty: false
default: opal-tag-hash
options:
- label: 首字母伪哈希
value: opal-tag-hash
- label: 语义词库
value: opal-tag-semantic
- label: 单色统一
value: opal-tag-mono
-
id: opal-unresolved-link
title: 未创建笔记的链接样式
description: 指向还不存在笔记的链接怎么显示虚线默认/ 变灰 / 模糊 / 加问号角标
type: class-select
allowEmpty: false
default: opal-unres-dash
options:
- label: 虚线下划
value: opal-unres-dash
- label: 变灰
value: opal-unres-dim
- label: 模糊
value: opal-unres-blur
- label: 问号角标
value: opal-unres-badge
-
id: opal-h-font
title: 字体
type: heading
level: 1
-
id: opal-font-text
title: 正文字体
description: 填字体名即可多个用英文逗号隔开 Inter 换成你要的 Beiruti后面自动接系统中文兜底
type: variable-text
default: Inter
-
id: opal-font-heading
title: 标题字体
description: 标题专用字体 Inter 或换成你的展示字体
type: variable-text
default: Inter
-
id: opal-font-code
title: 代码/等宽字体
type: variable-text
default: JetBrains Mono
-
id: opal-font-ui
title: 界面字体
description: 侧栏菜单标签页等界面文字的字体
type: variable-text
default: Inter
-
id: opal-font-size
title: 正文字号
type: variable-number-slider
default: 16
min: 12
max: 22
step: 1
format: px
-
id: opal-line-height
title: 正文行高
type: variable-number-slider
default: 1.5
min: 1.2
max: 2.2
step: 0.05
-
id: opal-letter-spacing
title: 正文字间距
type: variable-number-slider
default: 0
min: -0.5
max: 2
step: 0.1
format: px
-
id: opal-uncolored-bold
title: 粗体不上色
description: 默认粗体是桃色打开后粗体回退成正文色只加粗不变色
type: class-toggle
default: false
-
id: opal-font-features
title: 代码字体特性
description: 高级项 OpenType 特性 "liga" 1, "calt" 1 开连字"zero" 1 斜杠零 normal 则默认
type: variable-text
default: normal
-
id: opal-h-heading
title: 标题分级
type: heading
level: 1
-
id: opal-h1-size
title: H1 字号
type: variable-number-slider
default: 2
min: 0.9
max: 3.2
step: 0.05
format: em
-
id: opal-h2-size
title: H2 字号
type: variable-number-slider
default: 1.65
min: 0.9
max: 3
step: 0.05
format: em
-
id: opal-h3-size
title: H3 字号
type: variable-number-slider
default: 1.4
min: 0.9
max: 2.6
step: 0.05
format: em
-
id: opal-h4-size
title: H4 字号
type: variable-number-slider
default: 1.2
min: 0.9
max: 2.2
step: 0.05
format: em
-
id: opal-h5-size
title: H5 字号
type: variable-number-slider
default: 1.1
min: 0.9
max: 2
step: 0.05
format: em
-
id: opal-h6-size
title: H6 字号
type: variable-number-slider
default: 1
min: 0.8
max: 1.8
step: 0.05
format: em
-
id: opal-h1-weight
title: H1 字重
type: variable-number-slider
default: 700
min: 100
max: 900
step: 50
-
id: opal-h2-weight
title: H2 字重
type: variable-number-slider
default: 700
min: 100
max: 900
step: 50
-
id: opal-h3-weight
title: H3 字重
type: variable-number-slider
default: 650
min: 100
max: 900
step: 50
-
id: opal-h4-weight
title: H4 字重
type: variable-number-slider
default: 600
min: 100
max: 900
step: 50
-
id: opal-h5-weight
title: H5 字重
type: variable-number-slider
default: 600
min: 100
max: 900
step: 50
-
id: opal-h6-weight
title: H6 字重
type: variable-number-slider
default: 600
min: 100
max: 900
step: 50
-
id: opal-hd-line
title: 标题下划线
description: 标题的下边线可与下面的标题前缀叠加渐变下划线默认各级自身色淡出/ 单线底边 /
type: class-select
allowEmpty: false
default: opal-hdl-gradient
options:
- label: 渐变下划线
value: opal-hdl-gradient
- label: 单线底边
value: opal-hdl-underline
- label:
value: opal-hdl-none
-
id: opal-hd-prefix
title: 标题前缀
description: 标题前的标记可与上面的标题下划线叠加默认/ 悬挂井号左侧露出 #/ 自动序号1.2.3
type: class-select
allowEmpty: false
default: opal-hdp-none
options:
- label:
value: opal-hdp-none
- label: 悬挂井号
value: opal-hdp-hash
- label: 自动序号
value: opal-hdp-counter
-
id: opal-h1-color
title: H1 颜色逐级自定时用
type: variable-themed-color
format: hex
opacity: false
default-light: '#4C50C8'
default-dark: '#A6A8F2'
-
id: opal-h2-color
title: H2 颜色逐级自定时用
type: variable-themed-color
format: hex
opacity: false
default-light: '#1E69A1'
default-dark: '#86BFF0'
-
id: opal-h3-color
title: H3 颜色逐级自定时用
type: variable-themed-color
format: hex
opacity: false
default-light: '#0E6E82'
default-dark: '#82CFE6'
-
id: opal-h4-color
title: H4 颜色逐级自定时用
type: variable-themed-color
format: hex
opacity: false
default-light: '#127266'
default-dark: '#82D9C8'
-
id: opal-h5-color
title: H5 颜色逐级自定时用
type: variable-themed-color
format: hex
opacity: false
default-light: '#5C6B1B'
default-dark: '#C6D98A'
-
id: opal-h6-color
title: H6 颜色逐级自定时用
type: variable-themed-color
format: hex
opacity: false
default-light: '#B13A56'
default-dark: '#F08AA0'
-
id: opal-h-layout
title: 布局尺寸
type: heading
level: 1
-
id: opal-line-width
title: 正文行宽
description: 一行最多多宽可读宽度最常调的一项
type: variable-number-slider
default: 700
min: 400
max: 1400
step: 20
format: px
-
id: opal-table-widen
title: 表格铺满行宽
description: 打开后表格占满可用宽度不再被行宽夹窄
type: class-toggle
default: false
-
id: opal-mermaid-scroll
title: 图表超宽改横向滚动
description: 默认超出行宽的 Mermaid 图会等比缩放适应行宽打开此项改为保持原大小超宽部分横向滚动查看
type: class-toggle
default: false
-
id: opal-para-spacing
title: 段落间距
type: variable-number-slider
default: 16
min: 0
max: 40
step: 2
format: px
-
id: opal-first-indent
title: 首行缩进排版
description: 打开后段落首行缩进两字段间不留空书本式关闭则段间留空不缩进网页式默认
type: class-toggle
default: false
-
id: opal-list-indent
title: 列表缩进
type: variable-number-slider
default: 2
min: 0.8
max: 4
step: 0.1
format: em
-
id: opal-file-margin
title: 编辑区上下边距
type: variable-number-slider
default: 40
min: 0
max: 120
step: 5
format: px
-
id: opal-img-radius
title: 图片圆角
type: variable-number-slider
default: 10
min: 0
max: 30
step: 1
format: px
-
id: opal-img-width
title: 图片最大宽度
type: variable-number-slider
default: 100
min: 30
max: 100
step: 5
format: '%'
-
id: opal-img-shadow
title: 图片投影
description: 打开后图片带柔和投影像浮起的照片
type: class-toggle
default: false
-
id: opal-bg-texture
title: 背景纹理
description: 编辑区背景纹理默认/ 点阵 / 方格纸 / 横线纸
type: class-select
allowEmpty: false
default: opal-tex-none
options:
- label:
value: opal-tex-none
- label: 点阵
value: opal-tex-dot
- label: 方格纸
value: opal-tex-grid
- label: 横线纸
value: opal-tex-line
-
id: opal-radius
title: 圆角大小
type: variable-number-slider
default: 10
min: 0
max: 20
step: 1
format: px
-
id: opal-corner
title: 圆角形状
description: 超椭圆=iOS 式更柔的角默认老引擎自动退标准圆角标准圆角 / 凹角 scoop / 斜角 bevel
type: class-select
allowEmpty: false
default: opal-corner-squircle
options:
- label: 超椭圆 squircle
value: opal-corner-squircle
- label: 标准圆角
value: opal-corner-round
- label: 凹角 scoop
value: opal-corner-scoop
- label: 斜角 bevel
value: opal-corner-bevel
-
id: opal-h-border
title: 界面线条与边框
type: heading
level: 1
-
id: opal-border-width
title: 全局边框粗细
description: 卡片输入框表格菜单等所有描边的统一粗细
type: variable-number-slider
default: 1
min: 0
max: 3
step: 0.5
format: px
-
id: opal-border-color
title: 全局边框颜色
type: variable-themed-color
format: hex
opacity: false
default-light: '#D3D8E3'
default-dark: '#3A3F4E'
-
id: opal-divider-style
title: 分隔线风格
description: 正文分隔线---的样式渐隐默认/ 实线 / 虚线 / 圆点 / 双线
type: class-select
allowEmpty: false
default: opal-div-fade
options:
- label: 渐隐
value: opal-div-fade
- label: 实线
value: opal-div-solid
- label: 虚线
value: opal-div-dash
- label: 圆点
value: opal-div-dot
- label: 双线
value: opal-div-double
-
id: opal-pane-borders
title: 显示面板分隔边框
description: 打开后相邻面板之间画出分隔线边界更清楚默认关靠留白区分
type: class-toggle
default: false
-
id: opal-nav-indent-line
title: 文件树缩进参考线
description: 侧栏文件树每层缩进画一条竖参考线默认开关闭则只靠缩进
type: class-toggle
default: true
-
id: opal-indent-guide
title: 正文列表缩进线
description: 正文里多级列表每层画竖参考线看清层级默认关
type: class-toggle
default: false
-
id: opal-focus-ring
title: 焦点环风格
description: 输入框/按钮获得焦点时的提示描边默认/ 发光 /
type: class-select
allowEmpty: false
default: opal-ring-outline
options:
- label: 描边
value: opal-ring-outline
- label: 发光
value: opal-ring-glow
- label:
value: opal-ring-none
-
id: opal-scrollbar-width
title: 滚动条粗细
type: variable-number-slider
default: 12
min: 0
max: 18
step: 1
format: px
-
id: opal-table-border
title: 表格边框
description: 仅横线默认/ 全框每格描边/ 无框
type: class-select
allowEmpty: false
default: opal-tb-row
options:
- label: 仅横线
value: opal-tb-row
- label: 全框
value: opal-tb-full
- label: 无框
value: opal-tb-none
-
id: opal-h-toggle
title: 元素开关
type: heading
level: 1
-
id: opal-link-plain
title: 去掉链接下划线
description: 打开后所有链接不带下划线只用颜色区分
type: class-toggle
default: false
-
id: opal-code-wrap
title: 代码块自动换行
description: 打开后长代码行自动折行不再横向滚动
type: class-toggle
default: false
-
id: opal-code-ligatures
title: 代码连字
description: 打开后代码里连字合成合字需字体支持
type: class-toggle
default: false
-
id: opal-table-plain
title: 关闭表格斑马纹
description: 默认偶数行有淡色底打开此项取消斑马纹
type: class-toggle
default: false
-
id: opal-active-line
title: 高亮当前行
description: 打开后光标所在行有淡强调色底便于定位
type: class-toggle
default: false
-
id: opal-focus-mode
title: 聚焦暗化
description: 打开后非当前段落变淡只有正在写的那段清晰
type: class-toggle
default: false
-
id: opal-tasks-native
title: 复选框回退原生
description: 打开后不用自定义状态样式退回系统原生复选框
type: class-toggle
default: false
-
id: opal-list-scheme
title: 列表符号
description: 分层形状=按深度 变形+单色默认彩虹循环=形状不变按深度换色单色圆点=各级都用同色实心圆点
type: class-select
allowEmpty: false
default: opal-list-shape
options:
- label: 分层形状
value: opal-list-shape
- label: 彩虹循环
value: opal-list-rainbow
- label: 单色圆点
value: opal-list-dot
-
id: opal-no-bg-orb
title: 关闭氛围背景光晕
description: 编辑区背后默认有极淡角落光晕打开此项关掉它
type: class-toggle
default: false
-
id: opal-h-skin
title: 皮肤与动效
type: heading
level: 1
-
id: opal-surface
title: 表面质感
description: 实底=性能/可读最佳默认毛玻璃=通透液态玻璃=最有质感最吃性能系统开减少透明度自动退实底
type: class-select
allowEmpty: false
default: opal-surface-solid
options:
- label: 实底不透明
value: opal-surface-solid
- label: 毛玻璃
value: opal-surface-glass
- label: 液态玻璃
value: opal-surface-liquid
-
id: opal-ui-language
title: 界面设计语言
description: 整体控件观感中性默认/ Cupertino圆润+轻投影/ Fluent微亮描边/ Material实底+明确阴影
type: class-select
allowEmpty: false
default: opal-ui-neutral
options:
- label: 中性
value: opal-ui-neutral
- label: Cupertino
value: opal-ui-cupertino
- label: Fluent
value: opal-ui-fluent
- label: Material
value: opal-ui-material
-
id: opal-callout-skin
title: Callout 皮肤
description: 融合款=软底+左条+轻抬升默认硬阴影 / 描边 / HUD发光 / 反色标题条 / 折角纸片
type: class-select
allowEmpty: false
default: opal-co-fused
options:
- label: 融合款软底+左条
value: opal-co-fused
- label: 硬阴影新粗野
value: opal-co-brutal
- label: 描边极简
value: opal-co-outline
- label: HUD 发光
value: opal-co-glow
- label: 反色标题条
value: opal-co-bar
- label: 折角纸片
value: opal-co-paper
-
id: opal-folder-scheme
title: 文件夹着色
description: 彩虹脊柱=顶层循环色+子树继承默认编号分区= 00/10/20 前缀分色单色 / 关闭
type: class-select
allowEmpty: false
default: opal-folder-rainbow
options:
- label: 彩虹脊柱
value: opal-folder-rainbow
- label: 编号分区
value: opal-folder-numbered
- label: 单色
value: opal-folder-mono
- label: 关闭
value: opal-folder-plain
-
id: opal-motion
title: 动效总取向
description: 一个旋钮统管全站微动效=全静态=更轻更慢标准=克制快顺默认活泼=幅度大带回弹系统开减少动态自动全关
type: class-select
allowEmpty: false
default: opal-motion-standard
options:
- label:
value: opal-motion-off
- label:
value: opal-motion-mini
- label: 标准
value: opal-motion-standard
- label: 活泼
value: opal-motion-lively
-
id: opal-entrance
title: 入场动效
description: 开笔记时整篇淡入一次去模糊合焦默认/ 平滑平移 / 弹性过冲
type: class-select
allowEmpty: false
default: opal-ent-blur
options:
- label: 去模糊合焦
value: opal-ent-blur
- label: 平滑无过冲
value: opal-ent-smooth
- label: 弹性过冲
value: opal-ent-bounce
-
id: opal-retro
title: 复古皮肤
description: 整套复古外壳默认/ 合成波 / 绿磷终端 / 琥珀CRT / 数字雨
type: class-select
allowEmpty: false
default: opal-retro-none
options:
- label:
value: opal-retro-none
- label: 合成波 Synthwave
value: opal-retro-synth
- label: 绿磷终端
value: opal-retro-green
- label: 琥珀 CRT
value: opal-retro-amber
- label: 数字雨
value: opal-retro-matrix
-
id: opal-h-print
title: 打印导出
type: heading
level: 1
-
id: opal-print-dark
title: 导出保留暗色
description: 默认导出转纸面浅色省墨可读打开后保留暗底需在导出设置里开 printBackground
type: class-toggle
default: false
-
id: opal-print-font
title: 打印正文字体
description: 导出时正文换成衬线默认纸面易读/ 不置换 / 打字机
type: class-select
allowEmpty: false
default: opal-pf-serif
options:
- label: 衬线
value: opal-pf-serif
- label: 不置换
value: opal-pf-keep
- label: 打字机
value: opal-pf-mono
-
id: opal-print-align
title: 打印段落对齐
description: 两端对齐+首行缩进默认书本式/ 齐左
type: class-select
allowEmpty: false
default: opal-pa-justify
options:
- label: 两端对齐
value: opal-pa-justify
- label: 齐左
value: opal-pa-left
*/
/* =====================================================================
1. Opal 原色令牌浅深两套中性色可掺色温 + 全局旋钮
===================================================================== */
.theme-dark {
--o-crust-n:#14161F; --o-mantle-n:#191C26; --o-base-n:#20232E;
--o-s0-n:#2B2F3C; --o-s1-n:#3A3F4E; --o-s2-n:#4C5262;
--o-tone: var(--opal-tone-dark, #20232E);
--o-overlay0:#646B7E; --o-overlay1:#7B8294; --o-overlay2:#969DAF;
--o-subtext0:#ACB3C6; --o-subtext1:#C2C8D8; --o-text:#D8DDEC;
--o-rose:#F08AA0; --o-coral:#F0998C; --o-peach:#F2AE7B; --o-amber:#EBD08A;
--o-lime:#C6D98A; --o-green:#92DBA8; --o-teal:#82D9C8; --o-cyan:#82CFE6;
--o-sky:#86BFF0; --o-blue:#8FAEF5; --o-indigo:#A6A8F2; --o-violet:#C0A2F0;
--o-orchid:#D29AEE; --o-pink:#EE9AD6;
--o-on-accent:#0B1120;
--o-hl-default:#EBD08A; --o-hl-line-default:#EBD08A; --o-accent-default:#8098FF;
--o-cc-blue:143 174 245; --o-cc-cyan:130 207 230; --o-cc-green:146 219 168;
--o-cc-amber:235 208 138; --o-cc-rose:240 138 160; --o-cc-teal:130 217 200;
--o-cc-orchid:210 154 238; --o-cc-indigo:166 168 242;
}
.theme-light {
--o-crust-n:#DADEE8; --o-mantle-n:#E4E7EF; --o-base-n:#EDEFF4;
--o-s0-n:#E2E5EE; --o-s1-n:#D3D8E3; --o-s2-n:#C3C9D8;
--o-tone: var(--opal-tone-light, #EDEFF4);
--o-overlay0:#A6ABB8; --o-overlay1:#8E94A2; --o-overlay2:#767B88;
--o-subtext0:#565A66; --o-subtext1:#474B57; --o-text:#33363F;
--o-rose:#B13A56; --o-coral:#AA4430; --o-peach:#94561D; --o-amber:#7B6214;
--o-lime:#5C6B1B; --o-green:#287244; --o-teal:#127266; --o-cyan:#0E6E82;
--o-sky:#1E69A1; --o-blue:#3A5FC4; --o-indigo:#4C50C8; --o-violet:#7B47C0;
--o-orchid:#9040B3; --o-pink:#A73A8A;
--o-on-accent:#FFFFFF;
--o-hl-default:#F6E1A2; --o-hl-line-default:#946F0E; --o-accent-default:#4C50C8;
--o-cc-blue:58 95 196; --o-cc-cyan:14 110 130; --o-cc-green:40 114 68;
--o-cc-amber:123 98 20; --o-cc-rose:177 58 86; --o-cc-teal:18 114 102;
--o-cc-orchid:146 65 180; --o-cc-indigo:76 80 200;
}
body {
/* 中性层:默认直接取原色(无 color-mix 也安全) */
--o-crust:var(--o-crust-n); --o-mantle:var(--o-mantle-n); --o-base:var(--o-base-n);
--o-surface0:var(--o-s0-n); --o-surface1:var(--o-s1-n); --o-surface2:var(--o-s2-n);
--o-tone-k: var(--opal-tone-strength, 0%);
--o-sc: var(--opal-surface-contrast, 100%);
--o-accent-raw: var(--opal-accent, var(--o-accent-default));
--o-accent: var(--o-accent-raw);
--o-accent2: var(--opal-accent-2, var(--o-teal));
--o-hl-bg: var(--opal-mark-bg, var(--o-hl-default));
--o-hl-line: var(--o-hl-line-default); /* 线色独立于填充色,保证默认下划线在浅底也够深可见 */
--o-r: var(--opal-radius, 10px);
--o-bw: var(--opal-border-width, 1px);
--o-m-fast: .12s; --o-m-base: .22s; --o-m-slow: .34s;
--o-ease: cubic-bezier(.2,.7,.3,1);
--o-m-scale: 1;
--o-cshape: superellipse(1.2);
--o-fallback-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
--o-fallback-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--o-fallback-serif: "Source Han Serif SC", "Songti SC", Georgia, "Times New Roman", serif;
--o-soft-accent: var(--o-surface1);
--o-soft-err: var(--o-surface0);
--o-soft-ok: var(--o-surface0);
}
@supports (background: color-mix(in oklab, red, blue)) {
body {
--o-crust: color-mix(in oklab, var(--o-tone) var(--o-tone-k), var(--o-crust-n));
--o-mantle: color-mix(in oklab, var(--o-tone) var(--o-tone-k), var(--o-mantle-n));
--o-base: color-mix(in oklab, var(--o-tone) var(--o-tone-k), var(--o-base-n));
/* 面板明暗对比:先按 --o-sc 缩放 surface 与 base 的差,再掺色温 */
--o-surface0: color-mix(in oklab, color-mix(in oklab, var(--o-s0-n), var(--o-base-n) calc(100% - var(--o-sc))), var(--o-tone) var(--o-tone-k));
--o-surface1: color-mix(in oklab, color-mix(in oklab, var(--o-s1-n), var(--o-base-n) calc(100% - var(--o-sc))), var(--o-tone) var(--o-tone-k));
--o-surface2: color-mix(in oklab, color-mix(in oklab, var(--o-s2-n), var(--o-base-n) calc(100% - var(--o-sc))), var(--o-tone) var(--o-tone-k));
--o-soft-accent: color-mix(in oklab, var(--o-accent) 16%, var(--o-base));
--o-soft-err: color-mix(in oklab, var(--o-rose) 14%, var(--o-base));
--o-soft-ok: color-mix(in oklab, var(--o-green) 14%, var(--o-base));
}
}
@supports (color: oklch(from red l c h)) {
body { --o-accent: oklch(from var(--o-accent-raw) l calc(c * var(--opal-accent-saturation, 1)) h); }
}
/* =====================================================================
2. 绑定 Obsidian 原生变量全部带默认兜底
===================================================================== */
body {
--background-primary: var(--o-base); --background-primary-alt: var(--o-mantle);
--background-secondary: var(--o-mantle); --background-secondary-alt: var(--o-crust);
--background-modifier-border: var(--opal-border-color, var(--o-surface1));
--background-modifier-border-hover: var(--o-surface2);
--background-modifier-border-focus: var(--o-accent);
--background-modifier-hover: var(--o-surface0);
--background-modifier-active-hover: var(--o-soft-accent);
--background-modifier-form-field: var(--o-surface0);
--background-modifier-error: var(--o-soft-err);
--background-modifier-success: var(--o-soft-ok);
--background-modifier-message: var(--o-surface0);
--text-normal: var(--o-text); --text-muted: var(--o-subtext0); --text-faint: var(--o-overlay2);
--text-on-accent: var(--o-on-accent); --text-on-accent-inverted: var(--o-text);
--text-accent: var(--o-blue); --text-accent-hover: var(--o-sky);
--text-selection: var(--o-surface2); --text-highlight-bg: transparent;
--text-error: var(--o-rose); --text-success: var(--o-green); --text-warning: var(--o-amber);
--caret-color: var(--o-cyan);
--interactive-normal: var(--o-surface0); --interactive-hover: var(--o-surface1);
--interactive-accent: var(--o-accent); --interactive-accent-hover: var(--o-violet);
--link-color: var(--o-blue); --link-color-hover: var(--o-sky);
--link-external-color: var(--o-blue); --link-external-color-hover: var(--o-sky);
--link-unresolved-color: var(--o-overlay1); --link-unresolved-opacity: 1;
--h1-color: var(--o-indigo); --h2-color: var(--o-sky); --h3-color: var(--o-cyan);
--h4-color: var(--o-teal); --h5-color: var(--o-lime); --h6-color: var(--o-rose);
--h1-size: var(--opal-h1-size, 2em); --h2-size: var(--opal-h2-size, 1.65em);
--h3-size: var(--opal-h3-size, 1.4em); --h4-size: var(--opal-h4-size, 1.2em);
--h5-size: var(--opal-h5-size, 1.1em); --h6-size: var(--opal-h6-size, 1em);
--h1-weight: var(--opal-h1-weight, 700); --h2-weight: var(--opal-h2-weight, 700);
--h3-weight: var(--opal-h3-weight, 650); --h4-weight: var(--opal-h4-weight, 600);
--h5-weight: var(--opal-h5-weight, 600); --h6-weight: var(--opal-h6-weight, 600);
--bold-color: var(--o-peach); --bold-weight: 700; --italic-color: var(--o-green);
--code-background: var(--opal-code-bg, var(--o-surface0)); --code-normal: var(--o-pink); --code-size: .9em;
--blockquote-border-color: var(--o-surface2); --blockquote-color: var(--o-subtext0); --blockquote-background-color: var(--o-surface0);
--hr-color: var(--o-surface1);
--tag-color: var(--o-orchid); --tag-background: var(--o-surface0); --tag-background-hover: var(--o-surface1);
--checkbox-color: var(--o-green); --checkbox-marker-color: var(--o-base); --checkbox-border-color: var(--o-overlay0);
--list-marker-color: var(--o-overlay2);
--nav-item-color: var(--o-subtext0); --nav-item-color-hover: var(--o-text); --nav-item-color-active: var(--o-text);
--nav-item-background-hover: var(--o-surface0); --nav-item-background-active: var(--o-soft-accent);
--titlebar-background: var(--o-mantle); --titlebar-background-focused: var(--o-mantle);
--titlebar-text-color: var(--o-subtext0); --status-bar-background: var(--o-mantle);
--scrollbar-thumb-bg: var(--o-surface1); --scrollbar-active-thumb-bg: var(--o-overlay0);
--scrollbar-bg: transparent; --divider-color: var(--o-surface1); --collapse-icon-color: var(--o-overlay1);
--radius-s: calc(var(--o-r) * .5); --radius-m: var(--o-r); --radius-l: calc(var(--o-r) * 1.5);
--input-radius: var(--o-r); --tab-radius: calc(var(--o-r) * .75);
--border-width: var(--o-bw);
/* 字体(自定义在前,安全字栈兜底在后) */
--font-text: var(--opal-font-text, Inter), var(--o-fallback-sans);
--font-interface: var(--opal-font-ui, Inter), var(--o-fallback-sans);
--font-monospace: var(--opal-font-code, "JetBrains Mono"), var(--o-fallback-mono);
--font-text-size: var(--opal-font-size, 16px);
--line-height-normal: var(--opal-line-height, 1.5);
--o-font-heading: var(--opal-font-heading, Inter), var(--o-fallback-sans);
--file-line-width: var(--opal-line-width, 700px);
--p-spacing: var(--opal-para-spacing, 16px);
--list-indent: var(--opal-list-indent, 2em);
--file-margins: var(--opal-file-margin, 40px) var(--size-4-8);
}
/* =====================================================================
3. 形状squircle / round / scoop / bevel
===================================================================== */
.opal-corner-round :is(.callout,.markdown-rendered code,button,.nav-file-title,.nav-folder-title){ corner-shape: round; }
@supports (corner-shape: superellipse(1.2)) {
.opal-corner-squircle :is(.callout,.markdown-rendered code,button,.nav-file-title,.nav-folder-title){ corner-shape: var(--o-cshape); }
.opal-corner-scoop :is(.callout,button,.nav-file-title,.nav-folder-title){ corner-shape: scoop; }
}
.opal-corner-bevel .callout{ clip-path: polygon(var(--o-r) 0,100% 0,100% calc(100% - var(--o-r)),calc(100% - var(--o-r)) 100%,0 100%,0 var(--o-r)); box-shadow: none; }
/* =====================================================================
4. 基础排版 + 字体
===================================================================== */
.markdown-rendered :is(h1,h2,h3,h4,h5,h6){ font-family: var(--o-font-heading); }
.markdown-rendered,.cm-content{ letter-spacing: var(--opal-letter-spacing, 0px); }
.opal-hdl-gradient .markdown-rendered :is(h1,h2,h3,h4,h5,h6){
padding-bottom:2px; background-image:linear-gradient(90deg,currentColor,transparent 65%);
background-size:100% 2px; background-position:0 100%; background-repeat:no-repeat;
}
.opal-hdl-underline .markdown-rendered :is(h1,h2,h3,h4,h5,h6){ border-bottom:var(--o-bw) solid color-mix(in oklab,currentColor 45%,transparent); padding-bottom:3px; }
.opal-hdp-hash .markdown-rendered :is(h1,h2,h3,h4,h5,h6){ position:relative; }
.opal-hdp-hash .markdown-rendered h1::before{content:"#";} .opal-hdp-hash .markdown-rendered h2::before{content:"##";}
.opal-hdp-hash .markdown-rendered h3::before{content:"###";} .opal-hdp-hash .markdown-rendered h4::before{content:"####";}
.opal-hdp-hash .markdown-rendered h5::before{content:"#####";} .opal-hdp-hash .markdown-rendered h6::before{content:"######";}
.opal-hdp-hash .markdown-rendered :is(h1,h2,h3,h4,h5,h6)::before{position:absolute;right:calc(100% + 8px);color:var(--o-overlay1);font-weight:400;opacity:.6;font-size:.8em}
.opal-hdp-counter .markdown-preview-view{counter-reset:oh2 oh3;}
.opal-hdp-counter .markdown-rendered h2{counter-increment:oh2;counter-reset:oh3;}
.opal-hdp-counter .markdown-rendered h2::before{content:counter(oh2) ". ";color:var(--o-overlay1);font-weight:600}
.opal-hdp-counter .markdown-rendered h3{counter-increment:oh3;}
.opal-hdp-counter .markdown-rendered h3::before{content:counter(oh2) "." counter(oh3) " ";color:var(--o-overlay1);font-weight:600}
/* 标题配色方案 */
.opal-h-mono{
--h2-color:color-mix(in oklab,var(--o-indigo) 82%,var(--o-overlay1));
--h3-color:color-mix(in oklab,var(--o-indigo) 64%,var(--o-overlay1));
--h4-color:color-mix(in oklab,var(--o-indigo) 50%,var(--o-overlay1));
--h5-color:color-mix(in oklab,var(--o-indigo) 40%,var(--o-overlay1));
--h6-color:color-mix(in oklab,var(--o-indigo) 32%,var(--o-overlay1));
--h1-color:var(--o-indigo);
}
.opal-h-single{--h1-color:var(--o-indigo);--h2-color:var(--o-indigo);--h3-color:var(--o-indigo);--h4-color:var(--o-indigo);--h5-color:var(--o-indigo);--h6-color:var(--o-indigo)}
.opal-h-custom{--h1-color:var(--opal-h1-color,var(--o-indigo));--h2-color:var(--opal-h2-color,var(--o-sky));--h3-color:var(--opal-h3-color,var(--o-cyan));--h4-color:var(--opal-h4-color,var(--o-teal));--h5-color:var(--opal-h5-color,var(--o-lime));--h6-color:var(--opal-h6-color,var(--o-rose))}
.opal-h-plain{--h1-color:var(--o-text);--h2-color:var(--o-text);--h3-color:var(--o-text);--h4-color:var(--o-text);--h5-color:var(--o-text);--h6-color:var(--o-text)}
.opal-h-plain .markdown-rendered :is(h1,h2,h3,h4,h5,h6){background-image:none}
.cm-header-1{color:var(--h1-color)}.cm-header-2{color:var(--h2-color)}.cm-header-3{color:var(--h3-color)}
.cm-header-4{color:var(--h4-color)}.cm-header-5{color:var(--h5-color)}.cm-header-6{color:var(--h6-color)}
.cm-strong{color:var(--o-peach)}.cm-em{color:var(--o-green)}
.opal-uncolored-bold{--bold-color:var(--o-text)} .opal-uncolored-bold .cm-strong{color:var(--o-text)}
.markdown-rendered strong em,.markdown-rendered em strong{color:var(--o-coral)}
.markdown-rendered del,.cm-strikethrough{color:var(--o-overlay1)}
/* 链接 */
.markdown-rendered a.internal-link{color:var(--link-color);text-decoration-color:color-mix(in oklab,currentColor 40%,transparent)}
.opal-link-plain .markdown-rendered a{text-decoration:none}
.markdown-rendered a.internal-link.is-unresolved{color:var(--link-unresolved-color)}
.opal-unres-dash .markdown-rendered a.is-unresolved{text-decoration:underline dashed;text-underline-offset:2px}
.opal-unres-dim .markdown-rendered a.is-unresolved{opacity:.5;text-decoration:none}
.opal-unres-blur .markdown-rendered a.is-unresolved{filter:blur(.4px);opacity:.7}
.opal-unres-badge .markdown-rendered a.is-unresolved::after{content:"?";font-size:.7em;vertical-align:super;color:var(--o-amber);margin-left:1px}
/* 代码 */
.markdown-rendered code:not([class*="language-"]),.cm-inline-code{color:var(--o-pink);background:var(--code-background);border-radius:var(--radius-s)}
.opal-code-wrap .markdown-rendered pre>code,.opal-code-wrap .cm-line{white-space:pre-wrap;word-break:break-word}
:is(.markdown-rendered code,.cm-line){font-variant-ligatures:none}
.opal-code-ligatures :is(.markdown-rendered code,.cm-line){font-variant-ligatures:contextual common-ligatures}
.markdown-rendered pre>code{font-feature-settings:var(--opal-font-features, normal)}
/* 高亮:波浪下划线=默认(无辉光)。同时覆盖阅读态 mark / 实时预览 .cm-highlight / 编辑态内联 <mark> */
.markdown-rendered mark,.cm-content mark,.markdown-source-view .cm-highlight,.cm-editor .cm-highlight,span.cm-highlight{background:transparent;color:inherit;text-decoration:underline wavy var(--o-hl-line);text-underline-offset:2px;text-decoration-thickness:2px}
.opal-mark-fill :is(mark,.cm-highlight){background:var(--o-hl-bg);color:#20232E;border-radius:3px;padding:0 2px;text-decoration:none;text-shadow:none}
.opal-mark-soft :is(mark,.cm-highlight){background:color-mix(in srgb,var(--o-hl-bg) 32%,transparent);border-radius:3px;padding:0 2px;text-decoration:none;text-shadow:none}
.opal-mark-text :is(mark,.cm-highlight){background:transparent;color:var(--o-hl-bg);font-weight:600;text-decoration:none;text-shadow:0 0 8px color-mix(in srgb,var(--o-hl-bg) 45%,transparent)}
.opal-hl-amber{--o-hl-bg:var(--o-amber);--o-hl-line:var(--o-amber)}.opal-hl-green{--o-hl-bg:var(--o-green);--o-hl-line:var(--o-green)}
.opal-hl-sky{--o-hl-bg:var(--o-sky);--o-hl-line:var(--o-sky)}.opal-hl-rose{--o-hl-bg:var(--o-rose);--o-hl-line:var(--o-rose)}.opal-hl-orchid{--o-hl-bg:var(--o-orchid);--o-hl-line:var(--o-orchid)}
/* --text-highlight-bg 被清零(供 ==高亮== 走波浪线),会连带抹掉搜索命中/建议命中的底色,这里单独补回实底,保证命中可见 */
.search-result-file-matched-text,.suggestion-highlight{background-color:var(--o-hl-bg);color:#20232E;border-radius:3px}
/* 标签:三种方案 */
.markdown-rendered a.tag{color:var(--o-orchid);background:var(--o-surface0);border-radius:20px}
.opal-tag-mono .markdown-rendered a.tag{color:var(--o-orchid)}
.opal-tag-hash a.tag[href^="#a"],.opal-tag-hash a.tag[href^="#A"]{color:var(--o-rose)}
.opal-tag-hash a.tag[href^="#b"],.opal-tag-hash a.tag[href^="#B"]{color:var(--o-coral)}
.opal-tag-hash a.tag[href^="#c"],.opal-tag-hash a.tag[href^="#C"]{color:var(--o-peach)}
.opal-tag-hash a.tag[href^="#d"],.opal-tag-hash a.tag[href^="#D"]{color:var(--o-amber)}
.opal-tag-hash a.tag[href^="#e"],.opal-tag-hash a.tag[href^="#E"]{color:var(--o-lime)}
.opal-tag-hash a.tag[href^="#f"],.opal-tag-hash a.tag[href^="#F"]{color:var(--o-green)}
.opal-tag-hash a.tag[href^="#g"],.opal-tag-hash a.tag[href^="#G"]{color:var(--o-teal)}
.opal-tag-hash a.tag[href^="#h"],.opal-tag-hash a.tag[href^="#H"]{color:var(--o-cyan)}
.opal-tag-hash a.tag[href^="#i"],.opal-tag-hash a.tag[href^="#I"]{color:var(--o-sky)}
.opal-tag-hash a.tag[href^="#j"],.opal-tag-hash a.tag[href^="#J"]{color:var(--o-blue)}
.opal-tag-hash a.tag[href^="#k"],.opal-tag-hash a.tag[href^="#K"]{color:var(--o-indigo)}
.opal-tag-hash a.tag[href^="#l"],.opal-tag-hash a.tag[href^="#L"]{color:var(--o-violet)}
.opal-tag-hash a.tag[href^="#m"],.opal-tag-hash a.tag[href^="#M"]{color:var(--o-orchid)}
.opal-tag-hash a.tag[href^="#n"],.opal-tag-hash a.tag[href^="#N"]{color:var(--o-pink)}
.opal-tag-hash a.tag[href^="#o"],.opal-tag-hash a.tag[href^="#O"]{color:var(--o-rose)}
.opal-tag-hash a.tag[href^="#p"],.opal-tag-hash a.tag[href^="#P"]{color:var(--o-peach)}
.opal-tag-hash a.tag[href^="#q"],.opal-tag-hash a.tag[href^="#Q"]{color:var(--o-amber)}
.opal-tag-hash a.tag[href^="#r"],.opal-tag-hash a.tag[href^="#R"]{color:var(--o-green)}
.opal-tag-hash a.tag[href^="#s"],.opal-tag-hash a.tag[href^="#S"]{color:var(--o-teal)}
.opal-tag-hash a.tag[href^="#t"],.opal-tag-hash a.tag[href^="#T"]{color:var(--o-sky)}
.opal-tag-hash a.tag[href^="#u"],.opal-tag-hash a.tag[href^="#U"]{color:var(--o-blue)}
.opal-tag-hash a.tag[href^="#v"],.opal-tag-hash a.tag[href^="#V"]{color:var(--o-violet)}
.opal-tag-hash a.tag[href^="#w"],.opal-tag-hash a.tag[href^="#W"]{color:var(--o-orchid)}
.opal-tag-hash a.tag[href^="#x"],.opal-tag-hash a.tag[href^="#X"]{color:var(--o-pink)}
.opal-tag-hash a.tag[href^="#y"],.opal-tag-hash a.tag[href^="#Y"]{color:var(--o-coral)}
.opal-tag-hash a.tag[href^="#z"],.opal-tag-hash a.tag[href^="#Z"]{color:var(--o-cyan)}
.opal-tag-semantic a.tag[href="#紧急"],.opal-tag-semantic a.tag[href="#urgent"],.opal-tag-semantic a.tag[href="#阻塞"],.opal-tag-semantic a.tag[href="#blocked"],.opal-tag-semantic a.tag[href="#bug"]{color:var(--o-rose)}
.opal-tag-semantic a.tag[href="#重要"],.opal-tag-semantic a.tag[href="#important"],.opal-tag-semantic a.tag[href="#star"]{color:var(--o-peach)}
.opal-tag-semantic a.tag[href="#待办"],.opal-tag-semantic a.tag[href="#todo"],.opal-tag-semantic a.tag[href="#wip"],.opal-tag-semantic a.tag[href="#进行中"],.opal-tag-semantic a.tag[href="#doing"],.opal-tag-semantic a.tag[href="#问题"],.opal-tag-semantic a.tag[href="#question"],.opal-tag-semantic a.tag[href="#review"],.opal-tag-semantic a.tag[href="#待审"]{color:var(--o-amber)}
.opal-tag-semantic a.tag[href="#完成"],.opal-tag-semantic a.tag[href="#done"],.opal-tag-semantic a.tag[href="#已完成"],.opal-tag-semantic a.tag[href="#通过"],.opal-tag-semantic a.tag[href="#resolved"]{color:var(--o-green)}
.opal-tag-semantic a.tag[href="#想法"],.opal-tag-semantic a.tag[href="#idea"],.opal-tag-semantic a.tag[href="#灵感"]{color:var(--o-sky)}
.opal-tag-semantic a.tag[href="#项目"],.opal-tag-semantic a.tag[href="#project"]{color:var(--o-blue)}
.opal-tag-semantic a.tag[href="#moc"],.opal-tag-semantic a.tag[href="#index"]{color:var(--o-indigo)}
.opal-tag-semantic a.tag[href="#参考"],.opal-tag-semantic a.tag[href="#reference"],.opal-tag-semantic a.tag[href="#ref"]{color:var(--o-violet)}
.opal-tag-semantic a.tag[href="#归档"],.opal-tag-semantic a.tag[href="#archive"],.opal-tag-semantic a.tag[href="#archived"],.opal-tag-semantic a.tag[href="#废弃"],.opal-tag-semantic a.tag[href="#deprecated"]{color:var(--o-overlay1)}
/* 列表符号 Obsidian 自绘的 .list-bullet::after决不设 list-style-type否则被藏起的原生 marker 会与自绘点重影
默认=按深度 (实心圆) (空心圆) (方块) (短横) + 单色--list-marker-color=overlay2
阅读态靠 .has-list-bullet 祖先层数递增特异度深层覆盖浅层实时预览靠 .HyperMD-list-line-N每条自足指定形状 */
.markdown-rendered .has-list-bullet .has-list-bullet .list-bullet::after,
.HyperMD-list-line-2 .list-bullet::after{
background-color:transparent;border:1.5px solid var(--list-marker-color);border-radius:50%;
width:var(--list-bullet-size,.32em);height:var(--list-bullet-size,.32em)
}
.markdown-rendered .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
.HyperMD-list-line-3 .list-bullet::after{
background-color:var(--list-marker-color);border:none;border-radius:0;
width:var(--list-bullet-size,.3em);height:var(--list-bullet-size,.3em)
}
.markdown-rendered .has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet .list-bullet::after,
.HyperMD-list-line-4 .list-bullet::after{
background-color:var(--list-marker-color);border:none;border-radius:0;width:.5em;height:2px
}
/* 彩虹循环:只覆盖 --list-marker-color背景与描边都取自它形状沿用上面 */
.opal-list-rainbow{--list-marker-color:var(--o-rose)}
.opal-list-rainbow :is(.has-list-bullet .has-list-bullet,.HyperMD-list-line-2){--list-marker-color:var(--o-amber)}
.opal-list-rainbow :is(.has-list-bullet .has-list-bullet .has-list-bullet,.HyperMD-list-line-3){--list-marker-color:var(--o-green)}
.opal-list-rainbow :is(.has-list-bullet .has-list-bullet .has-list-bullet .has-list-bullet,.HyperMD-list-line-4){--list-marker-color:var(--o-sky)}
/* 单色圆点:强制各级回到实心圆点 */
.opal-list-dot .list-bullet::after{
background-color:var(--list-marker-color)!important;border:none!important;border-radius:50%!important;
width:var(--list-bullet-size,.3em)!important;height:var(--list-bullet-size,.3em)!important
}
/* 缩进统一Obsidian 一级 li 硬编码 3ch、二级+才走 --list-indent导致首层步距偏窄。让一级也走 --list-indent各层齐平 */
.markdown-rendered ul>li,.markdown-rendered ol>li{margin-inline-start:var(--list-indent)}
.opal-indent-guide .markdown-rendered :is(ul,ol) :is(ul,ol){border-left:1px solid color-mix(in oklab,var(--o-surface2) 60%,transparent);margin-left:.2em}
/* 段落排版(间距走原生 --p-spacing此处只做首行缩进覆盖 */
.opal-first-indent .markdown-rendered p{text-indent:2em;margin-block:0}
.markdown-rendered blockquote{border-left:3px solid var(--o-surface2);background:var(--o-surface0);border-radius:0 var(--radius-m) var(--radius-m) 0}
/* 分隔线风格 */
.markdown-rendered hr{border:none;height:2px;background:linear-gradient(90deg,transparent,var(--o-surface2),transparent)}
.opal-div-solid .markdown-rendered hr{height:0;border-top:var(--o-bw) solid var(--o-surface2);background:none}
.opal-div-dash .markdown-rendered hr{height:0;border-top:var(--o-bw) dashed var(--o-surface2);background:none}
.opal-div-double .markdown-rendered hr{height:0;border-top:3px double var(--o-surface2);background:none}
.opal-div-dot .markdown-rendered hr{height:4px;background:radial-gradient(circle,var(--o-surface2) 1.4px,transparent 1.4px);background-size:12px 4px}
/* =====================================================================
5. Callout融合默认 + 26 类型语义色 + 皮肤
===================================================================== */
.callout{
background:var(--o-base);border:0;border-left:3px solid rgb(var(--callout-color));
border-radius:var(--radius-s) var(--radius-m) var(--radius-m) var(--radius-s);
box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 16px -8px rgba(0,0,0,.28);
}
@supports (background: color-mix(in oklab, red, blue)){.callout{background:color-mix(in oklab,rgb(var(--callout-color)) 6%,var(--o-base))}}
.callout-title,.callout-icon{color:rgb(var(--callout-color))}
.callout[data-callout="info"],.callout[data-callout="todo"]{--callout-color:var(--o-cc-blue)}
.callout[data-callout="tip"],.callout[data-callout="hint"],.callout[data-callout="important"]{--callout-color:var(--o-cc-teal)}
.callout[data-callout="success"],.callout[data-callout="check"],.callout[data-callout="done"]{--callout-color:var(--o-cc-green)}
.callout[data-callout="question"],.callout[data-callout="help"],.callout[data-callout="faq"],.callout[data-callout="warning"],.callout[data-callout="caution"],.callout[data-callout="attention"]{--callout-color:var(--o-cc-amber)}
.callout[data-callout="danger"],.callout[data-callout="error"],.callout[data-callout="failure"],.callout[data-callout="fail"],.callout[data-callout="missing"],.callout[data-callout="bug"]{--callout-color:var(--o-cc-rose)}
.callout[data-callout="note"],.callout[data-callout="abstract"],.callout[data-callout="summary"],.callout[data-callout="tldr"]{--callout-color:var(--o-cc-indigo)}
.callout[data-callout="example"]{--callout-color:var(--o-cc-orchid)}
.callout[data-callout="quote"],.callout[data-callout="cite"]{--callout-color:var(--o-cc-cyan)}
/* Callout 中文别名:[!笔记][!警告] 等直接映射到语义色(对 Cyrius 重要 + 共享友好;图标 Obsidian 无内置则退默认) */
.callout[data-callout="笔记"],.callout[data-callout="摘要"],.callout[data-callout="总结"]{--callout-color:var(--o-cc-indigo)}
.callout[data-callout="信息"],.callout[data-callout="待办"]{--callout-color:var(--o-cc-blue)}
.callout[data-callout="提示"],.callout[data-callout="技巧"],.callout[data-callout="重要"]{--callout-color:var(--o-cc-teal)}
.callout[data-callout="成功"],.callout[data-callout="完成"],.callout[data-callout="通过"]{--callout-color:var(--o-cc-green)}
.callout[data-callout="问题"],.callout[data-callout="疑问"],.callout[data-callout="警告"],.callout[data-callout="注意"],.callout[data-callout="小心"]{--callout-color:var(--o-cc-amber)}
.callout[data-callout="危险"],.callout[data-callout="错误"],.callout[data-callout="失败"],.callout[data-callout="缺陷"],.callout[data-callout="故障"]{--callout-color:var(--o-cc-rose)}
.callout[data-callout="示例"],.callout[data-callout="例子"]{--callout-color:var(--o-cc-orchid)}
.callout[data-callout="引用"],.callout[data-callout="引文"]{--callout-color:var(--o-cc-cyan)}
.opal-co-brutal .callout{border:2px solid rgb(var(--callout-color));border-radius:4px;box-shadow:4px 4px 0 rgb(var(--callout-color));background:var(--o-base)}
.opal-co-outline .callout{background:transparent;border:var(--o-bw) solid color-mix(in oklab,rgb(var(--callout-color)) 55%,var(--o-surface1));box-shadow:none}
.opal-co-glow .callout{box-shadow:0 0 12px -2px rgb(var(--callout-color)),inset 0 0 10px -6px rgb(var(--callout-color))}
.opal-co-bar .callout{padding-left:0;border-left:0;overflow:hidden}
.opal-co-bar .callout-title{background:rgb(var(--callout-color));color:var(--o-base);padding:5px 12px}
.opal-co-paper .callout{border:0;box-shadow:0 2px 6px -2px rgba(0,0,0,.3);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);background:color-mix(in oklab,rgb(var(--callout-color)) 7%,var(--o-mantle))}
/* =====================================================================
6. 复选框 / 任务收进 :not(.opal-tasks-native) 便于回退
===================================================================== */
.task-list-item-checkbox{border-radius:var(--radius-s)}
body:not(.opal-tasks-native) .task-list-item-checkbox:checked{background-color:var(--o-green);border-color:var(--o-green)}
body:not(.opal-tasks-native) .task-list-item[data-task="/"] .task-list-item-checkbox{background:conic-gradient(var(--o-green) 0 42%,transparent 42%);border-color:var(--o-green)}
body:not(.opal-tasks-native) .task-list-item[data-task="-"]{text-decoration:line-through;color:var(--o-overlay1)}
body:not(.opal-tasks-native) .task-list-item[data-task="-"] .task-list-item-checkbox{border-color:var(--o-rose)}
body:not(.opal-tasks-native) .task-list-item[data-task=">"] .task-list-item-checkbox{border-color:var(--o-sky)}
body:not(.opal-tasks-native) .task-list-item[data-task="<"] .task-list-item-checkbox{border-color:var(--o-sky)}
body:not(.opal-tasks-native) .task-list-item[data-task="?"] .task-list-item-checkbox{border-color:var(--o-amber)}
body:not(.opal-tasks-native) .task-list-item[data-task="!"] .task-list-item-checkbox{border-color:var(--o-rose)}
body:not(.opal-tasks-native) .task-list-item[data-task="*"] .task-list-item-checkbox{border-color:var(--o-amber)}
body:not(.opal-tasks-native) ul ul .task-list-item-checkbox:checked{background-color:var(--o-amber);border-color:var(--o-amber)}
body:not(.opal-tasks-native) ul ul ul .task-list-item-checkbox:checked{background-color:var(--o-sky);border-color:var(--o-sky)}
/* 扩展/数字任务态字形图标mask 把语义色裁成字形,脚本生成编码零错;阅读态+编辑态 */
body:not(.opal-tasks-native) .task-list-item[data-task=">"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task=">"] .task-list-item-checkbox{border:none;background-color:var(--o-sky);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%80%BA%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%80%BA%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="<"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="<"] .task-list-item-checkbox{border:none;background-color:var(--o-sky);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%80%B9%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%80%B9%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="?"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="?"] .task-list-item-checkbox{border:none;background-color:var(--o-amber);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%3F%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%3F%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="!"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="!"] .task-list-item-checkbox{border:none;background-color:var(--o-rose);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%21%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%21%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="*"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="*"] .task-list-item-checkbox{border:none;background-color:var(--o-amber);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%98%85%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%98%85%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="\""] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="\""] .task-list-item-checkbox{border:none;background-color:var(--o-teal);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%80%9C%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2713%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E%E2%80%9C%3C%2Ftext%3E%3C%2Fsvg%3E") center/80% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="0"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="0"] .task-list-item-checkbox{border:none;background-color:var(--o-rose);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E0%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E0%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="1"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="1"] .task-list-item-checkbox{border:none;background-color:var(--o-coral);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E1%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E1%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="2"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="2"] .task-list-item-checkbox{border:none;background-color:var(--o-peach);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E2%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E2%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="3"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="3"] .task-list-item-checkbox{border:none;background-color:var(--o-amber);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E3%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E3%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="4"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="4"] .task-list-item-checkbox{border:none;background-color:var(--o-lime);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E4%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E4%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="5"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="5"] .task-list-item-checkbox{border:none;background-color:var(--o-green);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E5%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E5%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="6"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="6"] .task-list-item-checkbox{border:none;background-color:var(--o-teal);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E6%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E6%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="7"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="7"] .task-list-item-checkbox{border:none;background-color:var(--o-cyan);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E7%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E7%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="8"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="8"] .task-list-item-checkbox{border:none;background-color:var(--o-sky);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E8%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E8%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
body:not(.opal-tasks-native) .task-list-item[data-task="9"] > input.task-list-item-checkbox,body:not(.opal-tasks-native) .HyperMD-task-line[data-task="9"] .task-list-item-checkbox{border:none;background-color:var(--o-blue);-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E9%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2016%2016%27%3E%3Ctext%20x%3D%278%27%20y%3D%2712.2%27%20font-size%3D%2711%27%20font-family%3D%27-apple-system%2CBlinkMacSystemFont%2Csans-serif%27%20font-weight%3D%27700%27%20text-anchor%3D%27middle%27%3E9%3C%2Ftext%3E%3C%2Fsvg%3E") center/90% no-repeat}
/* =====================================================================
7. 表格 / Bases / Dataview
===================================================================== */
.markdown-rendered th{background:var(--o-surface0);color:var(--o-subtext0);border-bottom:var(--o-bw) solid var(--o-surface1)}
.markdown-rendered td{border-bottom:var(--o-bw) solid color-mix(in oklab,var(--o-surface1) 55%,transparent)}
.markdown-rendered tbody tr:nth-child(even),.dataview.table-view-table tbody tr:nth-child(even){background:color-mix(in oklab,var(--o-surface0) 45%,transparent)}
.opal-table-plain .markdown-rendered tbody tr:nth-child(even){background:none}
.markdown-rendered tbody tr:hover,.dataview.table-view-table tbody tr:hover{background:color-mix(in oklab,var(--o-accent) 8%,transparent)}
.opal-tb-full .markdown-rendered :is(th,td){border:var(--o-bw) solid var(--o-surface1)}
.opal-tb-none .markdown-rendered :is(th,td){border:none}
.opal-table-widen .markdown-rendered table{width:100%;display:table}
/* =====================================================================
8. Canvas / 背景纹理
===================================================================== */
/* Canvas底色/点阵走原生变量不自绘避免和 Obsidian 点阵重影卡片 squircle + 语义左条
6 号预设色映射 Opal注意 --canvas-color 用逗号三元组 rgb()/rgba() legacy 语法编组框靛蓝虚线 */
.canvas-wrapper{--canvas-background:var(--o-mantle);--canvas-dot-pattern:var(--o-surface1)}
.theme-dark .canvas-wrapper{--canvas-color-1:240,138,160;--canvas-color-2:242,174,123;--canvas-color-3:235,208,138;--canvas-color-4:146,219,168;--canvas-color-5:130,207,230;--canvas-color-6:192,162,240}
.theme-light .canvas-wrapper{--canvas-color-1:177,58,86;--canvas-color-2:148,86,29;--canvas-color-3:123,98,20;--canvas-color-4:40,114,68;--canvas-color-5:14,110,130;--canvas-color-6:123,71,192}
.canvas-node-container{border-radius:var(--radius-m);border-left:3px solid rgb(var(--canvas-color,126,126,126))}
@supports (corner-shape: superellipse(1.2)){.opal-corner-squircle .canvas-node-container{corner-shape:var(--o-cshape)}}
.canvas-node-label{color:var(--o-subtext0)}
.canvas-node-group{border:2px dashed var(--o-indigo);border-radius:var(--radius-m)}
/* Mermaid 图表默认超宽等比缩放到行宽内小图保持原样只缩超宽的压过 Mermaid 内联的 max-width
.opal-mermaid-scroll 档改为保持原大小横向滚动覆盖阅读态与实时预览 */
.mermaid{max-width:100%;text-align:center}
.mermaid svg{max-width:100%!important;height:auto!important}
.opal-mermaid-scroll .mermaid{overflow-x:auto;text-align:left}
.opal-mermaid-scroll .mermaid svg{max-width:none!important}
.opal-tex-dot .markdown-source-view .cm-sizer,.opal-tex-dot .markdown-preview-sizer{background-image:radial-gradient(color-mix(in oklab,var(--o-text) 7%,transparent) 1px,transparent 1px);background-size:22px 22px}
.opal-tex-grid .markdown-source-view .cm-sizer,.opal-tex-grid .markdown-preview-sizer{background-image:linear-gradient(color-mix(in oklab,var(--o-text) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in oklab,var(--o-text) 6%,transparent) 1px,transparent 1px);background-size:24px 24px}
.opal-tex-line .markdown-source-view .cm-sizer,.opal-tex-line .markdown-preview-sizer{background-image:linear-gradient(color-mix(in oklab,var(--o-text) 7%,transparent) 1px,transparent 1px);background-size:100% 1.7em}
/* =====================================================================
9. Properties
===================================================================== */
.metadata-container{background:var(--o-surface0);border:var(--o-bw) solid var(--o-surface1);border-radius:var(--radius-m)}
.metadata-property-key{color:var(--o-subtext0)}
/* =====================================================================
10. 文件树 / 文件夹四种着色方案
===================================================================== */
.nav-folder-title{border-radius:var(--radius-s);position:relative}
.opal-nav-indent-line .nav-folder-children{border-left:var(--o-bw) solid color-mix(in oklab,var(--o-surface1) 60%,transparent);margin-left:12px}
/* 彩虹脊柱:顶层夹设色调变量 --o-folder-hue子树所有标题继承决策「子树继承」 */
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+1){--o-folder-hue:var(--o-rose)}
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+2){--o-folder-hue:var(--o-peach)}
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+3){--o-folder-hue:var(--o-green)}
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+4){--o-folder-hue:var(--o-teal)}
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+5){--o-folder-hue:var(--o-sky)}
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+6){--o-folder-hue:var(--o-violet)}
.opal-folder-rainbow .nav-folder.mod-root>.nav-folder-children>.nav-folder:nth-child(7n+7){--o-folder-hue:var(--o-orchid)}
.opal-folder-rainbow .nav-folder-title{color:var(--o-folder-hue,var(--o-subtext0))}
.opal-folder-numbered .nav-folder-title[data-path^="00"]{color:var(--o-rose)}
.opal-folder-numbered .nav-folder-title[data-path^="10"]{color:var(--o-blue)}
.opal-folder-numbered .nav-folder-title[data-path^="20"]{color:var(--o-green)}
.opal-folder-numbered .nav-folder-title[data-path^="90"]{color:var(--o-overlay1)}
.opal-folder-mono .nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title{color:var(--o-subtext1)}
.nav-file-title{position:relative}
.nav-file-title.is-active::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:2px;background:var(--o-accent)}
/* =====================================================================
11. 整页语义态cssclasses
===================================================================== */
.important.markdown-preview-view,.important.markdown-source-view{border-left:3px solid var(--o-amber);background:color-mix(in oklab,var(--o-amber) 5%,var(--o-base))}
.alert.markdown-preview-view,.alert.markdown-source-view{box-shadow:inset 0 0 0 1.5px var(--o-rose),0 0 0 3px color-mix(in srgb,var(--o-rose) 16%,transparent)}
.archived{filter:grayscale(.6) brightness(.85)}
.pinned.markdown-preview-view,.pinned.markdown-source-view{border-top:3px solid var(--o-teal)}
.draft .markdown-preview-sizer,.draft .cm-sizer{position:relative}
.draft .markdown-preview-sizer::before{content:"草稿";position:absolute;top:38%;left:50%;transform:translate(-50%,-50%) rotate(-18deg);font-size:70px;font-weight:900;color:color-mix(in oklab,var(--o-overlay2) 18%,transparent);pointer-events:none;z-index:0}
.wide{--file-line-width:55rem}
.narrow{--file-line-width:30rem}
.full-width{--file-line-width:100%}
.meeting.markdown-preview-view{border-top:2px solid var(--o-sky)}
.daily{--o-base:var(--o-base-n)}
@supports (background: color-mix(in oklab, red, blue)){.daily{--o-base:color-mix(in oklab,var(--o-amber) 4%,var(--o-base-n))}}
[class*="accent-"].markdown-preview-view,[class*="accent-"].markdown-source-view{--interactive-accent:var(--o-note-accent);--link-color:var(--o-note-accent);--text-accent:var(--o-note-accent);--h1-color:var(--o-note-accent)}
.accent-rose{--o-note-accent:var(--o-rose)}.accent-peach{--o-note-accent:var(--o-peach)}.accent-amber{--o-note-accent:var(--o-amber)}
.accent-green{--o-note-accent:var(--o-green)}.accent-teal{--o-note-accent:var(--o-teal)}.accent-sky{--o-note-accent:var(--o-sky)}
.accent-blue{--o-note-accent:var(--o-blue)}.accent-indigo{--o-note-accent:var(--o-indigo)}.accent-violet{--o-note-accent:var(--o-violet)}
.accent-orchid{--o-note-accent:var(--o-orchid)}.accent-pink{--o-note-accent:var(--o-pink)}
/* =====================================================================
12. 图片
===================================================================== */
.markdown-rendered img{border-radius:var(--opal-img-radius, 10px);max-width:var(--opal-img-width, 100%)}
.opal-img-shadow .markdown-rendered img{box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
.theme-dark img[alt*="img-invert"]{filter:invert(1) hue-rotate(180deg)}
img[alt*="img-banner"]{width:100%;object-fit:cover}
img[alt*="img-left"]{float:left;margin:0 1em .5em 0;max-width:45%}
img[alt*="img-right"]{float:right;margin:0 0 .5em 1em;max-width:45%}
@supports selector(:has(*)){
.markdown-rendered p:has(> img[alt*="img-grid"]){display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
}
.internal-embed.image-embed.mod-error{border:var(--o-bw) dashed var(--o-surface2);border-radius:var(--radius-m);min-height:40px}
/* =====================================================================
13. 界面 chrome边框 / 焦点环 / 滚动条 / 面板 / 输入 / 标签页
===================================================================== */
:is(input[type="text"],input[type="search"],textarea,.dropdown,button.mod-cta,button:not(.clickable-icon)){border:var(--o-bw) solid var(--background-modifier-border)}
.opal-pane-borders .workspace-leaf{border:var(--o-bw) solid var(--o-surface1)}
.opal-ring-outline :is(input,textarea,button,.dropdown):focus-visible{outline:2px solid var(--o-accent);outline-offset:1px}
.opal-ring-glow :is(input,textarea,button,.dropdown):focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--o-accent) 30%,transparent)}
.opal-ring-none :is(input,textarea,button,.dropdown):focus-visible{outline:none}
::-webkit-scrollbar{width:var(--opal-scrollbar-width, 12px);height:var(--opal-scrollbar-width, 12px)}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-bg);border-radius:8px}
.workspace-tab-header{border-radius:var(--tab-radius) var(--tab-radius) 0 0}
.opal-active-line .cm-active.cm-line{background:color-mix(in oklab,var(--o-accent) 6%,transparent)}
.opal-focus-mode .cm-content .cm-line:not(.cm-active){opacity:.42;transition:opacity .2s var(--o-ease)}
/* 界面设计语言 */
.opal-ui-cupertino :is(.menu,.suggestion-container,.popover,.modal){border-radius:14px;box-shadow:0 10px 34px -10px rgba(0,0,0,.5)}
.opal-ui-cupertino button{border-radius:999px}
.opal-ui-fluent :is(.menu,.suggestion-container,.popover){border:1px solid color-mix(in srgb,#fff 16%,transparent);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.opal-ui-material :is(.menu,.suggestion-container,.popover,.modal){border-radius:4px;box-shadow:0 8px 10px 1px rgba(0,0,0,.28),0 3px 14px 2px rgba(0,0,0,.22)}
.opal-ui-material button{text-transform:uppercase;letter-spacing:.04em;font-size:.85em}
/* =====================================================================
14. 表面质感毛玻璃 / 液态玻璃
===================================================================== */
.opal-surface-glass :is(.menu,.suggestion-container,.popover){background:color-mix(in srgb,var(--o-mantle) 72%,transparent);backdrop-filter:blur(12px) saturate(1.2)}
.opal-surface-liquid :is(.menu,.suggestion-container,.popover){background:color-mix(in srgb,var(--o-surface0) 60%,transparent);backdrop-filter:blur(14px) saturate(1.4) brightness(1.05);border:1px solid color-mix(in srgb,#fff 20%,transparent);box-shadow:0 8px 22px -8px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent)}
@media (prefers-reduced-transparency: reduce){
.opal-surface-glass :is(.menu,.suggestion-container,.popover),
.opal-surface-liquid :is(.menu,.suggestion-container,.popover){backdrop-filter:none;background:var(--o-mantle);border:var(--o-bw) solid var(--o-surface1);box-shadow:none}
}
/* =====================================================================
15. 氛围背景光晕默认开.opal-no-bg-orb
===================================================================== */
@supports (background: color-mix(in srgb, red, blue)){
body:not(.opal-no-bg-orb) .cm-editor,
body:not(.opal-no-bg-orb) .markdown-preview-view{
background-image:
radial-gradient(circle at 12% 10%, color-mix(in srgb,var(--o-accent) 13%,transparent), transparent 30%),
radial-gradient(circle at 88% 90%, color-mix(in srgb,var(--o-accent2) 13%,transparent), transparent 30%);
/* 用默认 background-attachment:scroll光晕钉在编辑区角落且不随内容滚动 -> 不触发滚动逐帧重绘 */
}
}
/* =====================================================================
16. 动效系统
===================================================================== */
.opal-motion-off{--o-m-scale:0}
.opal-motion-mini{--o-m-scale:1.4}
.opal-motion-standard{--o-m-scale:1}
.opal-motion-lively{--o-m-scale:.85;--o-ease:cubic-bezier(.34,1.3,.4,1)}
.callout,button,.nav-file-title,.nav-folder-title{transition:transform calc(var(--o-m-base) * var(--o-m-scale)) var(--o-ease),box-shadow calc(var(--o-m-base) * var(--o-m-scale)) var(--o-ease),background calc(var(--o-m-fast) * var(--o-m-scale)) var(--o-ease)}
.markdown-rendered .callout:hover{transform:translateY(-2px)}
button:active{transform:scale(.96) translateY(1px);filter:brightness(.9)}
@keyframes opalBlurIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
@keyframes opalSmoothIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes opalBounceIn{0%{opacity:0;transform:translateY(12px)}60%{opacity:1;transform:translateY(-4px)}100%{transform:translateY(0)}}
.opal-ent-blur:not(.opal-motion-off) :is(.markdown-preview-sizer,.cm-sizer){animation:opalBlurIn calc(var(--o-m-slow) * var(--o-m-scale)) var(--o-ease) both}
.opal-ent-smooth:not(.opal-motion-off) :is(.markdown-preview-sizer,.cm-sizer){animation:opalSmoothIn calc(var(--o-m-base) * var(--o-m-scale)) var(--o-ease) both}
.opal-ent-bounce:not(.opal-motion-off) :is(.markdown-preview-sizer,.cm-sizer){animation:opalBounceIn calc(var(--o-m-slow) * var(--o-m-scale)) cubic-bezier(.34,1.4,.4,1) both}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
.opal-motion-off *{animation:none!important;transition:none!important}
/* =====================================================================
17. 复古皮肤
===================================================================== */
.opal-retro-synth{--o-base-n:#1a0f2e;--o-mantle-n:#140a24;--o-text:#e6d8ff}
.opal-retro-synth .cm-header-1{color:#ff5fd0;text-shadow:0 0 8px #ff5fd0}
.opal-retro-green{--o-base-n:#001100;--o-text:#33ff66;--o-mantle-n:#000a00}
.opal-retro-green .markdown-rendered{text-shadow:0 0 6px rgba(51,255,102,.5)}
.opal-retro-amber{--o-base-n:#1a1000;--o-text:#ffb642;--o-mantle-n:#120b00}
.opal-retro-amber .markdown-rendered{text-shadow:0 0 6px rgba(255,182,66,.45)}
.opal-retro-matrix{--o-base-n:#000806;--o-text:#4dffa6;--o-mantle-n:#00110b}
.opal-retro-matrix .markdown-preview-sizer{background-image:linear-gradient(rgba(77,255,166,.05) 1px,transparent 1px);background-size:100% 3px}
/* =====================================================================
19. 界面区域适配标签页/命令面板/ribbon/内联标题/设置/图谱/脚注/状态栏/提示
多数靠设 Obsidian 原生变量稳且不与未来类名改动冲突
===================================================================== */
body{
--tab-background-active: var(--o-base);
--tab-text-color-active: var(--o-text);
--tab-text-color-focused-active-current: var(--o-text);
--prompt-border-color: var(--o-surface1);
--ribbon-background: var(--o-mantle);
--inline-title-color: var(--h1-color);
--inline-title-weight: var(--h1-weight);
--modal-background: var(--o-base);
--modal-border-color: var(--o-surface1);
--modal-radius: var(--radius-l);
--graph-node: var(--o-subtext1);
--graph-node-focused: var(--o-accent);
--graph-node-tag: var(--o-orchid);
--graph-node-attachment: var(--o-teal);
--graph-node-unresolved: var(--o-overlay1);
--graph-line: var(--o-surface2);
--graph-text: var(--o-subtext0);
--footnote-id-color: var(--o-accent);
--footnote-divider-color: var(--o-surface1);
--status-bar-text-color: var(--o-subtext0);
--status-bar-border-color: var(--o-surface1);
}
body{--inline-title-font: var(--o-font-heading)}
.workspace-tab-header.is-active{box-shadow:inset 0 2px 0 var(--o-accent)}
.prompt{border:var(--o-bw) solid var(--o-surface1);border-radius:var(--o-r)}
.suggestion-item.is-selected{background:var(--o-soft-accent)}
.side-dock-ribbon-action:hover{color:var(--o-accent)}
.vertical-tab-nav-item.is-active{background:var(--o-soft-accent);color:var(--o-text)}
.graph-controls{background:var(--o-mantle);border:var(--o-bw) solid var(--o-surface1);border-radius:var(--radius-m)}
.status-bar-item.mod-clickable:hover{color:var(--o-text)}
.tooltip{color:var(--o-text)} /* 原生硬编码 #FAFAFA浅色下会看不见这里跟随主题文字色 */
.footnote-ref a,sup.footnote-ref{color:var(--o-accent)}
/* =====================================================================
20. Basesnative 数据库视图接进 Opal 调色板
===================================================================== */
.bases-view{
--bases-table-header-background: var(--o-surface0);
--bases-table-header-color: var(--o-subtext0);
--bases-table-border-color: var(--o-surface1);
--bases-table-row-background-hover: color-mix(in oklab,var(--o-accent) 8%,transparent);
--bases-table-group-background: var(--o-mantle);
--bases-cards-background: var(--o-mantle);
--bases-cards-cover-background: var(--o-surface0);
}
.bases-table-container{border-radius:var(--radius-m)}
.bases-cards-item{border-radius:var(--radius-m)}
@supports (corner-shape: superellipse(1.2)){.opal-corner-squircle .bases-cards-item{corner-shape:var(--o-cshape)}}
/* =====================================================================
21. 插件适配用户已装有明显 UI
===================================================================== */
/* editing-toolbar容器 id 选择器 + 官方变量 */
#editingToolbarModalBar,.editingToolbarPopoverBar{
--editing-toolbar-background-color: var(--o-mantle);
--editing-toolbar-icon-color: var(--o-subtext0);
background:var(--o-mantle);border:var(--o-bw) solid var(--o-surface1);
border-radius:var(--o-r);box-shadow:0 6px 22px -6px rgba(0,0,0,.45)
}
#editingToolbarModalBar .editingToolbarCommandItem:hover{background:var(--o-surface0);color:var(--o-text)}
.editingToolbar-Divider-Line{background:var(--o-surface1)}
.editingToolbarGlassAesthetic{backdrop-filter:blur(12px) saturate(1.2)}
/* calendar只吃它文档化的 12 个稳定变量,作用域锁 #calendar-container */
#calendar-container{
--color-background-heading: transparent;
--color-background-weekend: color-mix(in oklab,var(--o-surface0) 40%,transparent);
--color-dot: var(--o-accent);
--color-arrow: var(--o-subtext0);
--color-button: var(--o-subtext0);
--color-text-title: var(--o-text);
--color-text-heading: var(--o-subtext0);
--color-text-day: var(--o-text);
--color-text-today: var(--o-accent);
--color-text-weeknum: var(--o-overlay1);
}
/* admonition主体渲染成原生 callout皮肤已自动套这里补私有类兜底 */
.admonition-title-content{font-weight:600}
/* timeline-view */
.timeline-view--timeline{--timeline-view--item-color:var(--o-accent);--timeline-view--selected-item-color:var(--o-accent2);--canvas-background:var(--o-mantle)}
/* excel吃它的外壳变量 */
.workspace-leaf-content[data-type="excel-view"]{--sheet-toolbar-background-color:var(--o-mantle);--sheet-header-background-color:var(--o-surface0);--sheet-toolbar-divider-color:var(--o-surface1);--sheet-iframe-background-color:var(--o-base)}
/* d2暗色下覆盖重编译按钮的硬白底 */
.theme-dark .Preview__Recompile{background-color:var(--o-surface1)!important;color:var(--o-text)}
/* =====================================================================
22. 编辑态实时预览 CM6补齐把只在阅读态生效的装饰补到编辑器
作用域 .markdown-source-view.mod-cm6表格挂件自带 .markdown-rendered斑马/表头/hover/边框已自动生效
列表 bullet .list-bullet::after 已两态通吃此处补其余
===================================================================== */
/* 标题:字体到行级 + 每级色调变量 --o-hcol不给 # 标记重上色);渐变下划/单线底边跟随档位 */
.markdown-source-view.mod-cm6 .cm-line.HyperMD-header{font-family:var(--o-font-heading)}
.markdown-source-view.mod-cm6 .HyperMD-header-1{--o-hcol:var(--h1-color)}
.markdown-source-view.mod-cm6 .HyperMD-header-2{--o-hcol:var(--h2-color)}
.markdown-source-view.mod-cm6 .HyperMD-header-3{--o-hcol:var(--h3-color)}
.markdown-source-view.mod-cm6 .HyperMD-header-4{--o-hcol:var(--h4-color)}
.markdown-source-view.mod-cm6 .HyperMD-header-5{--o-hcol:var(--h5-color)}
.markdown-source-view.mod-cm6 .HyperMD-header-6{--o-hcol:var(--h6-color)}
.opal-hdl-gradient .markdown-source-view.mod-cm6 .cm-line.HyperMD-header{background-image:linear-gradient(90deg,var(--o-hcol),transparent 65%);background-size:100% 2px;background-position:0 100%;background-repeat:no-repeat}
.opal-hdl-underline .markdown-source-view.mod-cm6 .cm-line.HyperMD-header{border-bottom:var(--o-bw) solid color-mix(in oklab,var(--o-hcol) 45%,transparent)}
/* 分隔线:编辑态真实线是 widget 里的 <hr>,镜像阅读态五档 */
.markdown-source-view.mod-cm6 hr{border:none;height:2px;background:linear-gradient(90deg,transparent,var(--o-surface2),transparent)}
.opal-div-solid .markdown-source-view.mod-cm6 hr{height:0;border-top:var(--o-bw) solid var(--o-surface2);background:none}
.opal-div-dash .markdown-source-view.mod-cm6 hr{height:0;border-top:var(--o-bw) dashed var(--o-surface2);background:none}
.opal-div-double .markdown-source-view.mod-cm6 hr{height:0;border-top:3px double var(--o-surface2);background:none}
.opal-div-dot .markdown-source-view.mod-cm6 hr{height:4px;background:radial-gradient(circle,var(--o-surface2) 1.4px,transparent 1.4px);background-size:12px 4px}
/* 标签药丸:底色/上下 border 走基类,圆角只给首末段(哈希/语义色因 token 无 href 无法移植,编辑态统一 orchid */
.markdown-source-view.mod-cm6 .cm-hashtag{background:var(--o-surface0);color:var(--o-orchid)}
.markdown-source-view.mod-cm6 .cm-hashtag-begin{border-top-left-radius:20px;border-bottom-left-radius:20px}
.markdown-source-view.mod-cm6 .cm-hashtag-end{border-top-right-radius:20px;border-bottom-right-radius:20px}
/* 引用块底色统一走原生 --blockquote-background-color在绑定层已设 surface0两态通吃
不用直设 .HyperMD-quote 背景会被原生带 .is-live-preview 的更高特异度规则盖掉竖条走 --blockquote-border-color */
/* 未创建链接:编辑态 is-unresolved 是独立 mark官方保证的写法不赌复合选择器 */
.opal-unres-dash .markdown-source-view.mod-cm6 .is-unresolved .cm-underline{text-decoration:underline dashed;text-underline-offset:2px}
.opal-unres-dim .markdown-source-view.mod-cm6 .is-unresolved{opacity:.5}
.opal-unres-blur .markdown-source-view.mod-cm6 .is-unresolved{filter:blur(.4px);opacity:.7}
.opal-unres-badge .markdown-source-view.mod-cm6 .is-unresolved::after{content:"?";font-size:.7em;vertical-align:super;color:var(--o-amber);margin-left:1px}
/* 任务扩展态:编辑态 data-task 挂在 .HyperMD-task-line 行上 */
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="/"] .task-list-item-checkbox{background:conic-gradient(var(--o-green) 0 42%,transparent 42%);border-color:var(--o-green)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="-"]{text-decoration:line-through;color:var(--o-overlay1)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="-"] .task-list-item-checkbox{border-color:var(--o-rose)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task=">"] .task-list-item-checkbox{border-color:var(--o-sky)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="<"] .task-list-item-checkbox{border-color:var(--o-sky)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="?"] .task-list-item-checkbox{border-color:var(--o-amber)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="!"] .task-list-item-checkbox{border-color:var(--o-rose)}
body:not(.opal-tasks-native) .HyperMD-task-line[data-task="*"] .task-list-item-checkbox{border-color:var(--o-amber)}
/* 内嵌图片:圆角/投影挂 img两态通用类名 */
.markdown-source-view.mod-cm6 .internal-embed.image-embed img{border-radius:var(--opal-img-radius,10px)}
.opal-img-shadow .markdown-source-view.mod-cm6 .internal-embed.image-embed img{box-shadow:0 6px 20px -8px rgba(0,0,0,.5)}
/* 代码块 OpenType 特性 */
.markdown-source-view.mod-cm6 .HyperMD-codeblock{font-feature-settings:var(--opal-font-features, normal)}
/* =====================================================================
23. 打印 / 导出
===================================================================== */
@media print {
body:not(.opal-print-dark){--background-primary:#fff!important;--background-primary-alt:#fff!important;--background-secondary:#fff!important;--text-normal:#222!important;--text-muted:#555!important}
.opal-pf-serif .markdown-rendered{font-family:var(--o-fallback-serif)}
.opal-pf-mono .markdown-rendered{font-family:var(--o-fallback-mono)}
.opal-pa-justify .markdown-rendered p{text-align:justify;text-indent:2em;hyphens:auto}
.opal-pa-left .markdown-rendered p{text-align:left;text-indent:0}
body:not(.opal-print-dark) .callout{box-shadow:none!important;background:#fff!important;border:1px solid #bbb!important;border-left:3px solid rgb(var(--callout-color))!important}
.markdown-rendered :is(h1,h2,h3,h4,h5,h6){break-after:avoid;background-image:none!important}
body:not(.opal-print-dark) .markdown-rendered :is(h1,h2,h3,h4,h5,h6){filter:saturate(.7) brightness(.55)}
.markdown-rendered p,.markdown-rendered li{orphans:2;widows:2}
.markdown-rendered *,.markdown-rendered{animation:none!important;transition:none!important;filter:none;text-shadow:none!important}
.hr-for-pagination hr{break-after:page;visibility:hidden}
}