├── .editorconfig ├── .github └── workflows │ └── release-version.yml ├── .gitignore ├── LICENSE ├── README.md ├── README_zh.md ├── assets ├── callout-style.png ├── qing-dark.png ├── qing-light.png ├── su-dark.png ├── su-light.png ├── table-style.png ├── text-formatting.png ├── xia-dark.png └── xia-light.png ├── manifest.json ├── package.json ├── screenshot-original.png ├── screenshot.png ├── theme.css ├── version-bump.mjs └── versions.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | end_of_line = lf 7 | insert_final_newline = true 8 | indent_style = tab 9 | indent_size = 4 10 | tab_width = 4 -------------------------------------------------------------------------------- /.github/workflows/release-version.yml: -------------------------------------------------------------------------------- 1 | name: Publish new theme version 2 | 3 | on: 4 | push: 5 | # Sequence of patterns matched against refs/tags 6 | tags: 7 | - "*" # Push events to matching any tag format, i.e. 1.0, 20.15.10 8 | 9 | permissions: 10 | contents: write 11 | 12 | env: 13 | THEME_NAME: Composer 14 | 15 | jobs: 16 | build: 17 | runs-on: ubuntu-22.04 18 | 19 | steps: 20 | - uses: actions/checkout@v2 21 | with: 22 | fetch-depth: 0 # 获取完整的git历史 23 | 24 | - name: Use Node.js 25 | uses: actions/setup-node@v3 26 | with: 27 | node-version: "18.x" 28 | 29 | - name: Prepare manifest 30 | id: prepare_manifest 31 | run: | 32 | if [[ ${{ github.ref }} == *"beta"* ]]; then 33 | cp manifest-beta.json manifest.json 34 | fi 35 | 36 | - name: Build 37 | id: build 38 | run: | 39 | mkdir ${{ env.THEME_NAME }} 40 | cp manifest.json theme.css ${{ env.THEME_NAME }} 41 | zip -r ${{ env.THEME_NAME }}.zip ${{ env.THEME_NAME }} 42 | ls 43 | echo "tag_name=$(git tag --sort version:refname | tail -n 1)" >> $GITHUB_OUTPUT 44 | 45 | - name: Generate Changelog 46 | id: changelog 47 | run: | 48 | # 检查是否存在任何tag 49 | if ! git describe --tags > /dev/null 2>&1; then 50 | # 如果没有任何tag，使用初始commit作为起点 51 | echo "## 🎉 First Release" > temp_changelog.md 52 | COMMITS=$(git log --pretty=format:"- %s" --reverse) 53 | else 54 | # 获取最近的两个tag 55 | LATEST_TAG=$(git describe --tags --abbrev=0) 56 | 57 | # 尝试获取前一个tag，如果不存在则使用第一个commit 58 | if git describe --tags --abbrev=0 `git rev-list --tags --skip=1 --max-count=1` > /dev/null 2>&1; then 59 | PREVIOUS_TAG=$(git describe --tags --abbrev=0 `git rev-list --tags --skip=1 --max-count=1`) 60 | COMMITS=$(git log ${PREVIOUS_TAG}..${LATEST_TAG} --no-merges --pretty=format:"- %s" --reverse) 61 | else 62 | FIRST_COMMIT=$(git rev-list --max-parents=0 HEAD) 63 | COMMITS=$(git log ${FIRST_COMMIT}..${LATEST_TAG} --no-merges --pretty=format:"- %s" --reverse) 64 | fi 65 | 66 | echo -e "## Changes\n" > temp_changelog.md 67 | fi 68 | 69 | # 定义要处理的commit类型 70 | TYPES=("feat" "fix" "perf" "refactor" "style" "docs" "test" "chore") 71 | 72 | for TYPE in "${TYPES[@]}"; do 73 | # 从所有commits中过滤出特定类型的commits 74 | TYPE_COMMITS=$(echo "$COMMITS" | grep "^- ${TYPE}:" || true) 75 | 76 | if [ ! -z "$TYPE_COMMITS" ]; then 77 | # 转换commit类型为可读文本 78 | case $TYPE in 79 | "feat") TITLE="✨ New Features";; 80 | "fix") TITLE="🐛 Bug Fixes";; 81 | "perf") TITLE="⚡ Performance";; 82 | "refactor") TITLE="♻️ Refactors";; 83 | "style") TITLE="💄 Styles";; 84 | "docs") TITLE="📝 Documentation";; 85 | "test") TITLE="✅ Tests";; 86 | "chore") TITLE="🔧 Chores";; 87 | *) TITLE="Other";; 88 | esac 89 | 90 | # 添加分类标题 91 | echo -e "\n### ${TITLE}\n" >> temp_changelog.md 92 | 93 | # 处理每个commit消息，提取描述 94 | while IFS= read -r COMMIT; do 95 | if [[ $COMMIT =~ ^-\ ${TYPE}:\ (.*)$ ]]; then 96 | DESC="${BASH_REMATCH[1]}" 97 | echo "- ${DESC}" >> temp_changelog.md 98 | fi 99 | done <<< "$TYPE_COMMITS" 100 | fi 101 | done 102 | 103 | # 将处理后的changelog保存到GITHUB_OUTPUT 104 | echo "changelog<> $GITHUB_OUTPUT 105 | cat temp_changelog.md >> $GITHUB_OUTPUT 106 | echo "EOF" >> $GITHUB_OUTPUT 107 | 108 | - name: Create Release 109 | id: create_release 110 | uses: actions/create-release@v1 111 | env: 112 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 113 | with: 114 | tag_name: ${{ github.ref }} 115 | release_name: ${{ github.ref }} 116 | draft: false 117 | prerelease: ${{ contains(github.ref, 'beta') }} 118 | body: | 119 | ${{ contains(github.ref, 'beta') && '🚧 This is a beta release' || '🎉 This is a stable release' }} 120 | 121 | **Version:** ${{ github.ref_name }} 122 | 123 | ${{ steps.changelog.outputs.changelog }} 124 | 125 | ## Installation 126 | 1. Download the files from the Assets section below 127 | 2. Copy them to your vault's themes folder: `/.obsidian/themes/Composer/` 128 | 3. Reload Obsidian 129 | 4. Enable theme in settings 130 | 131 | - name: Upload zip file 132 | id: upload-zip 133 | uses: actions/upload-release-asset@v1 134 | env: 135 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 136 | with: 137 | upload_url: ${{ steps.create_release.outputs.upload_url }} 138 | asset_path: ./${{ env.THEME_NAME }}.zip 139 | asset_name: ${{ env.THEME_NAME }}.zip 140 | asset_content_type: application/zip 141 | 142 | - name: Upload manifest.json 143 | id: upload-manifest 144 | uses: actions/upload-release-asset@v1 145 | env: 146 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 147 | with: 148 | upload_url: ${{ steps.create_release.outputs.upload_url }} 149 | asset_path: ./manifest.json 150 | asset_name: manifest.json 151 | asset_content_type: application/json 152 | 153 | - name: Upload theme.css 154 | id: upload-styles 155 | uses: actions/upload-release-asset@v1 156 | env: 157 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 158 | with: 159 | upload_url: ${{ steps.create_release.outputs.upload_url }} 160 | asset_path: ./theme.css 161 | asset_name: theme.css 162 | asset_content_type: text/css 163 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # vscode 2 | .vscode 3 | 4 | # Intellij 5 | *.iml 6 | .idea 7 | 8 | # npm 9 | node_modules 10 | 11 | # Exclude sourcemaps 12 | *.map 13 | 14 | # Exclude macOS Finder (System Explorer) View States 15 | .DS_Store 16 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 vran 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [中文](README_zh.md) | English 2 | ## Brief 3 | 4 | an out-of-box theme for Obsidian, which is designed for reading and writing comfortably. 5 | 6 | 7 | 8 | ## Screenshots 9 | 10 | You can install `style settings` plugin and change the theme color in the plugin setting. 11 | 12 | ### Color Scheme 13 | 14 | > [!NOTE] 15 | > color scheme change needs to install `style settings` plugin 16 | 17 | - Xiá 霞 18 | 19 | ![xia light](assets/xia-light.png) 20 | 21 | ![xia dark](assets/xia-dark.png) 22 | 23 | - Sù 素 24 | 25 | ![su light](assets/su-light.png) 26 | 27 | ![su dark](assets/su-dark.png) 28 | 29 | - Qīng 青 30 | 31 | ![qing light](assets/qing-light.png) 32 | 33 | ![qing dark](assets/qing-dark.png) 34 | 35 | ### Text Formatting 36 | 37 | ![text formatting](assets/text-formatting.png) 38 | 39 | ### Table Style 40 | 41 | ![table style](assets/table-style.png) 42 | 43 | ### Callout Style 44 | 45 | ![callout style](assets/callout-style.png) 46 | 47 | ## Thanks 48 | 49 | - Task checkbox is referenced from [Minimal Theme](https://github.com/kepano/obsidian-minimal) which is a great theme for Obsidian build by @Kepano 50 | 51 | -------------------------------------------------------------------------------- /README_zh.md: -------------------------------------------------------------------------------- 1 | 中文 | [English](README.md) 2 | ## 简介 3 | 4 | 一个开箱即用的 obsidian 主题，为更舒适的阅读与写作体验设计。 5 | 6 | 7 | 8 | ## 截图 9 | 10 | 你可以安装 `style settings` 插件并用它修改 Composer 配色。 11 | 12 | ### 配色方案 13 | 14 | > [!NOTE] 15 | > 改变配色方案需先安装`style settings`插件 16 | 17 | - Xiá 霞 18 | 19 | ![霞 亮色](assets/xia-light.png) 20 | 21 | ![霞 暗色](assets/xia-dark.png) 22 | 23 | - Sù 素 24 | 25 | ![素 亮色](assets/su-light.png) 26 | 27 | ![素 暗色](assets/su-dark.png) 28 | 29 | - Qīng 青 30 | 31 | ![青 亮色](assets/qing-light.png) 32 | 33 | ![青 暗色](assets/qing-dark.png) 34 | 35 | ### 文字样式 36 | 37 | ![文字样式](assets/text-formatting.png) 38 | 39 | ### 表格样式 40 | 41 | ![表格样式](assets/table-style.png) 42 | 43 | ### Callout样式 44 | 45 | ![callout样式](assets/callout-style.png) 46 | 47 | ## 鸣谢 48 | 49 | - 任务的复选框样式参考了 @Kepano 的 [Minimal 主题](https://github.com/kepano/obsidian-minimal)。 50 | 51 | -------------------------------------------------------------------------------- /assets/callout-style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/callout-style.png -------------------------------------------------------------------------------- /assets/qing-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/qing-dark.png -------------------------------------------------------------------------------- /assets/qing-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/qing-light.png -------------------------------------------------------------------------------- /assets/su-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/su-dark.png -------------------------------------------------------------------------------- /assets/su-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/su-light.png -------------------------------------------------------------------------------- /assets/table-style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/table-style.png -------------------------------------------------------------------------------- /assets/text-formatting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/text-formatting.png -------------------------------------------------------------------------------- /assets/xia-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/xia-dark.png -------------------------------------------------------------------------------- /assets/xia-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/assets/xia-light.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Composer", 3 | "version": "0.0.7", 4 | "minAppVersion": "1.0.0", 5 | "author": "vran", 6 | "authorUrl": "https://github.com/vran-dev" 7 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "composer", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "version": "node version-bump.mjs && git add manifest.json versions.json" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /screenshot-original.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/screenshot-original.png -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vran-dev/obsidian-composer/e1b229408339033eb7b27c82e8e5474cce1b1564/screenshot.png -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* @settings 2 | name: Composer Theme 3 | id: obsidian-composer-theme 4 | settings: 5 | - 6 | id: learn-about-components-plugin 7 | title: About Components 8 | title.zh: 关于 Components 9 | description: "[https://cp.cc1234.cc/](https://cp.cc1234.cc/)" 10 | type: info-text 11 | markdown: true 12 | - id: theme-variant-light 13 | title: Color Scheme 14 | title.zh: 亮色主题配色方案 15 | description: Choose a color scheme for the theme 16 | description.zh: 为亮色主题选择一个预设的配色方案 17 | type: class-select 18 | allowEmpty: false 19 | default: composer--XiaScheme-light 20 | options: 21 | - label: Sù 素 22 | value: composer--SuScheme-light 23 | - label: Xiá 霞 24 | value: composer--XiaScheme-light 25 | - label: Qīng 青 26 | value: composer--QingScheme-light 27 | - id: theme-variant-dark 28 | title: Color Scheme 29 | title.zh: 暗色主题配色方案 30 | description: Choose a color scheme for the theme 31 | description.zh: 为暗色主题选择一个预设的配色方案 32 | type: class-select 33 | allowEmpty: false 34 | default: composer--XiaScheme-dark 35 | options: 36 | - label: Sù 素 37 | value: composer--SuScheme-dark 38 | - label: Xiá 霞 39 | value: composer--XiaScheme-dark 40 | - label: Qīng 青 41 | value: composer--QingScheme-dark 42 | - id: typograph-settings 43 | title: Typograph Settings 44 | title.zh: 排版设置 45 | type: heading 46 | level: 2 47 | collapsed: true 48 | - id: file-line-width 49 | title: Content Area width 50 | title.zh: 内容区域宽度 51 | description: The maximum line width 52 | description.zh: 最大行宽 53 | type: variable-number-slider 54 | default: 700 55 | min: 420 56 | max: 1200 57 | format: px 58 | step: 1 59 | - id: callout-setting 60 | title: Callout 61 | title.zh: Callout 62 | type: heading 63 | level: 3 64 | collapsed: true 65 | - id: callout-style 66 | title: Callout Style 67 | title.zh: Callout 样式 68 | description: Choose prefered Callout style 69 | description.zh: 选择喜欢的 Callout 风格 70 | type: class-select 71 | allowEmpty: false 72 | default: composer--DefaultCalloutStyle 73 | options: 74 | - label: Default 默认 75 | value: composer--DefaultCalloutStyle 76 | - label: Subtle Grid 渐隐网格 77 | value: composer--SubtleGridCallout 78 | - label: Clean Line 简洁线条 79 | value: composer--CleanLineCallout 80 | - label: Github Style 81 | value: composer--GithubCallout 82 | - label: Window Panel 窗格 83 | value: composer--WindowPanelCallout 84 | - id: table-setting 85 | title: Table 86 | title.zh: 表格 87 | type: heading 88 | level: 3 89 | collapsed: true 90 | - id: table-style 91 | title: Table Style 92 | title.zh: 表格样式 93 | description: Choose prefered table style 94 | description.zh: 选择表格的样式 95 | type: class-select 96 | allowEmpty: false 97 | default: composer--DefaultTableStyle 98 | options: 99 | - label: Default 默认 100 | value: composer--DefaultTableStyle 101 | - label: Obsidian 102 | value: composer--ObsidianTableStyle 103 | - label: Borderless 无边框 104 | value: composer--BorderlessTableStyle 105 | - label: Three Line(Academic) 三线表(学术) 106 | value: composer--AcademicTableStyle 107 | - id: composer--HideStripedTableBackground 108 | title: Hide Striped Background 109 | title.zh: 关闭斑马纹背景 110 | type: class-toggle 111 | - id: typograph-paragraph 112 | title: Paragraph 113 | title.zh: 段落 114 | type: heading 115 | level: 3 116 | collapsed: true 117 | - id: composer--ParagraphIndent 118 | title: Paragraph Indent 119 | title.zh: 段落首行缩进 120 | description: indent the first line of a paragraph 121 | description.zh: 段落首行自动缩进 2 个字符 122 | type: class-toggle 123 | - id: paragraph-line-height 124 | title: Paragraph Line Height 125 | title.zh: 段落行高 126 | description: Set the line height of the paragraph 127 | description.zh: 设置段落的行高 128 | type: variable-number 129 | default: 1.7 130 | min: 1.2 131 | max: 2.5 132 | - id: paragraph-letter-spacing 133 | title: Paragraph Letter Spacing 134 | title.zh: 段落字间距 135 | description: Set the letter spacing of the paragraph, you should specify the unit em or px 136 | description.zh: 设置段落的字间距，需要指定单位 em 或 px 137 | type: variable-text 138 | default: 0.035em 139 | - id: paragraph-word-spacing 140 | title: Paragraph Word Spacing 141 | title.zh: 段落词间距 142 | description: Set the word spacing of the paragraph, you should specify the unit em or px 143 | description.zh: 设置段落的词间距，需要指定单位 em 或 px 144 | type: variable-text 145 | default: 0.035em 146 | - id: bold-style-setting 147 | title: Bold 148 | title.zh: 加粗 149 | type: heading 150 | level: 3 151 | collapsed: true 152 | - id: bold-color 153 | title: Bold Color 154 | title.zh: 加粗颜色 155 | type: variable-themed-color 156 | format: hex 157 | default-light: "#2d3748" 158 | default-dark: "#f0f4f8" 159 | - id: bold-modifier 160 | title: Bold Weight 161 | title.zh: 加粗粗细 162 | type: variable-number 163 | default: 200 164 | 165 | - id: task-setting 166 | title: Task Settings 167 | title.zh: 任务 168 | type: heading 169 | level: 3 170 | collapsed: true 171 | - id: composer--RemoveTaskCompletedDecoration 172 | title: Remove Task Completed Decoration 173 | title.zh: 移除任务完成装饰 174 | description: Remove the strikethrough for completed tasks 175 | description.zh: 移除完成任务的划线 176 | type: class-toggle 177 | 178 | - id: inline-code-style-setting 179 | title: Inline Code Style 180 | title.zh: 内联代码 181 | type: heading 182 | level: 3 183 | collapsed: true 184 | - id: inline-code-normal 185 | title: Inline Code Text Color 186 | title.zh: 内联代码文本色 187 | type: variable-themed-color 188 | format: hex 189 | default-light: "#eb5757" 190 | default-dark: "#ff7b72" 191 | - id: inline-code-background 192 | title: Inline Code Background Color 193 | title.zh: 内联代码背景色 194 | type: variable-themed-color 195 | format: hsl 196 | default-light: "hsla(31, 41%, 90%, 0.6)" 197 | default-dark: "hsla(204, 15%, 25%, 0.4)" 198 | 199 | 200 | - id: typograph-heading-decoration-setting 201 | title: Heading Decoration 202 | title.zh: 标题装饰 203 | type: heading 204 | level: 3 205 | collapsed: true 206 | 207 | - id: composer--DisableHeadingLineEditingHighlight 208 | title: Disable Heading Line Editing Highlight 209 | title.zh: 禁用标题行编辑时高亮 210 | description: Disable line highlight when editing heading 211 | description.zh: 编辑标题时是否高亮所在行 212 | type: class-toggle 213 | default: false 214 | 215 | - id: composer--DisableHeadingDecoration-ReadingView 216 | title: Disable Heading Decoration (Reading View) 217 | title.zh: 禁用标题装饰（阅读模式） 218 | description: Disable decoration before heading (reading view) 219 | description.zh: 禁用标题前方的竖杠装饰（阅读模式） 220 | type: class-toggle 221 | default: false 222 | - id: composer--DisableHeadingDecoration-LivePreview 223 | title: Disable Heading Decoration (Live Preview View) 224 | title.zh: 禁用标题装饰（实时编辑模式） 225 | description: Disable decoration before heading (live preview view) 226 | description.zh: 禁用标题前方的竖杠装饰（实时编辑模式） 227 | type: class-toggle 228 | default: false 229 | 230 | - id: typograph-heading-size 231 | title: Heading Font Size (H1-H6) 232 | title.zh: 标题字体大小（H1-H6） 233 | type: heading 234 | level: 3 235 | collapsed: true 236 | - id: h1-size 237 | title: H1 Size 238 | title.zh: 一级标题大小 239 | description: you should specify the unit em or px 240 | description.zh: 需要指定单位 em 或 px 241 | type: variable-text 242 | default: 1.69em 243 | - id: h2-size 244 | title: H2 Size 245 | title.zh: 二级标题大小 246 | description: you should specify the unit em or px 247 | description.zh: 需要指定单位 em 或 px 248 | type: variable-text 249 | default: 1.51em 250 | - id: h3-size 251 | title: H3 Size 252 | title.zh: 三级标题大小 253 | description: you should specify the unit em or px 254 | description.zh: 需要指定单位 em 或 px 255 | type: variable-text 256 | default: 1.35em 257 | - id: h4-size 258 | title: H4 Size 259 | title.zh: 四级标题大小 260 | description: you should specify the unit em or px 261 | description.zh: 需要指定单位 em 或 px 262 | type: variable-text 263 | default: 1.21em 264 | - id: h6-size 265 | title: H6 Size 266 | title.zh: 五级标题大小 267 | description: you should specify the unit em or px 268 | description.zh: 需要指定单位 em 或 px 269 | type: variable-text 270 | default: 1.1em 271 | - id: h6-size 272 | title: H6 Size 273 | title.zh: 六级标题大小 274 | description: you should specify the unit em or px 275 | description.zh: 需要指定单位 em 或 px 276 | type: variable-text 277 | default: 1em 278 | 279 | - id: typograph-heading-color-setting 280 | title: Heading Font Color (H1-H6) 281 | title.zh: 标题字体颜色（H1-H6） 282 | type: heading 283 | level: 3 284 | collapsed: true 285 | - id: h1-color 286 | title: H1 287 | type: variable-themed-color 288 | format: hex 289 | default-light: "#2d3748" 290 | default-dark: "#e2e6eb" 291 | - id: h2-color 292 | title: H2 293 | type: variable-themed-color 294 | format: hex 295 | default-light: "#4a556b" 296 | default-dark: "#c5cad4" 297 | - id: h3-color 298 | title: H3 299 | type: variable-themed-color 300 | format: hex 301 | default-light: "#66788d" 302 | default-dark: "#a8aeb9" 303 | - id: h4-color 304 | title: H4 305 | type: variable-themed-color 306 | format: hex 307 | default-light: "#7f8a9b" 308 | default-dark: "#8f96a1" 309 | - id: h5-color 310 | title: H5 311 | type: variable-themed-color 312 | format: hex 313 | default-light: "#9aa5b5" 314 | default-dark: "#787f8a" 315 | - id: h6-color 316 | title: H6 317 | type: variable-themed-color 318 | format: hex 319 | default-light: "#808080" 320 | default-dark: "#666d78" 321 | 322 | 323 | - id: layout-settings 324 | title: Layout Settings 325 | title.zh: 布局设置 326 | type: heading 327 | level: 2 328 | collapsed: true 329 | - id: composer--DisableNavHeaderAutoHide 330 | title: Disable Nav Header Auto Hide 331 | title.zh: 关闭自动隐藏导航栏 332 | description: Enable this option to disable the auto-hide of the nav header 333 | description.zh: 启用以后，相关视图的导航栏将会常驻（比如文件列表、标签、目录栏的导航栏菜单），不会在失去焦点时自动隐藏 334 | type: class-toggle 335 | - id: composer--DisableFileFolderIcon 336 | title: Disable File Folder Icon 337 | title.zh: 禁用目录列表文件夹图标 338 | type: class-toggle 339 | - id: composer--EnableIndentationGuidLine 340 | title: Enable Indentation Guide Line 341 | title.zh: 启用缩进指导线 342 | description: show indentation guide line for file tree, ordered list, unordered list, and task list 343 | description.zh: 显示文件树、有序列表、无序列表和任务列表的缩进指导线 344 | type: class-toggle 345 | - id: modal-bg-blur 346 | title: Modal Backdrop Blur Intensity 347 | title.zh: 模态框背景模糊强度 348 | type: variable-number-slider 349 | default: 3 350 | min: 0 351 | max: 10 352 | step: 1 353 | format: px 354 | - id: nav-file-settings 355 | title: Nav File Settings 356 | title.zh: 导航文件 357 | type: heading 358 | level: 3 359 | collapsed: true 360 | - id: composer--EnableFilenameLineFeed 361 | title: Enable Filename Line Feed 362 | title.zh: 启用文件名换行 363 | description: enable line feed for filename 364 | description.zh: 文件名换行显示 365 | type: class-toggle 366 | - id: composer--EnableHiddenFileTag 367 | title: Enable Hidden File Tag 368 | title.zh: 启用隐藏文件标签 369 | description: enable hidden file tag 370 | description.zh: 隐藏文件后缀标签 371 | type: class-toggle 372 | - id: composer--EnableHiddenFileTagHover 373 | title: Enable Hidden File Tag Hover 374 | title.zh: 文件标签悬停显示 375 | description: enable hidden file tag hover 376 | description.zh: 文件后缀标签鼠标悬停显示 377 | type: class-toggle 378 | - id: outline-settings 379 | title: Outline Settings 380 | title.zh: 大纲 381 | type: heading 382 | level: 3 383 | collapsed: true 384 | - id: outline-style 385 | title: Outline Style 386 | title.zh: 大纲样式 387 | description: Choose prefered outline style 388 | description.zh: 选择大纲的样式 389 | type: class-select 390 | allowEmpty: false 391 | default: composer--DefaultOutlineStyle 392 | options: 393 | - label: Default 默认 394 | value: composer--DefaultOutlineStyle 395 | - label: Node 节点 396 | value: composer--NodeOutlineStyle 397 | - id: outline-collapsed-icon-opacity 398 | title: Outline Collapsed Icon Opacity 399 | title.zh: 大纲折叠图标透明度 400 | description: Set the opacity of the collapsed icon 401 | description.zh: 设置折叠图标的透明度 402 | type: variable-number-slider 403 | default: 1 404 | min: 0 405 | max: 1 406 | step: 0.1 407 | - id: color-settings 408 | title: Color Settings 409 | title.zh: 色彩设置 410 | type: heading 411 | level: 2 412 | collapsed: true 413 | - id: background-primary 414 | title: Background Primary 415 | title.zh: 主要背景色 416 | type: variable-themed-color 417 | format: hex 418 | default-light: "#fafafa" 419 | default-dark: "#1a1e24" 420 | - id: background-primary-alt 421 | title: Background Primary Alt 422 | title.zh: 主要背景色（备用） 423 | type: variable-themed-color 424 | format: hex 425 | default-light: "#e8eaee" 426 | default-dark: "#252a32" 427 | - id: background-secondary 428 | title: Background Secondary 429 | title.zh: 次要背景色 430 | type: variable-themed-color 431 | format: hex 432 | default-light: "#f1f0ee" 433 | default-dark: "#2d333b" 434 | - id: background-secondary-alt 435 | title: Background Secondary Alt 436 | title.zh: 次要背景色（备用） 437 | type: variable-themed-color 438 | format: hex 439 | default-light: "#dddfe3" 440 | default-dark: "#373e48" 441 | - id: plugin-components 442 | title: Components Plugin 443 | title.zh: Components 插件 444 | type: heading 445 | level: 2 446 | collapsed: true 447 | - id: dynamic-dataview-component 448 | title: Dynamic Dataview 449 | title.zh: 数据视图 450 | type: heading 451 | level: 3 452 | collapsed: true 453 | - id: composer--ComponentsSimpleTag 454 | title: Simple Tag Style 455 | title.zh: 简单标签样式 456 | description: switch to simple tag style to select / multi-select / group-name... 457 | description.zh: 改变数据视图中单选、多选项的样式 458 | type: class-toggle 459 | - id: composer--ComponentsFilledGallaryCover 460 | title: Notion Style Gallary Cover 461 | title.zh: Notion 风格的封面 462 | description: remove Gallary dynamic data view's cover padding 463 | description.zh: 移除动态数据视图中的封面内边距 464 | type: class-toggle 465 | - id: count-component 466 | title: Count Component 467 | title.zh: 统计数字组件 468 | type: heading 469 | level: 3 470 | collapsed: true 471 | - id: components--count-component-value-font-size 472 | title: Value Font Size 473 | title.zh: 数值字体大小 474 | type: variable-number 475 | default: 1.6 476 | format: rem 477 | - id: quote-component 478 | title: Quote Component 479 | title.zh: 摘录组件 480 | type: heading 481 | level: 3 482 | collapsed: true 483 | - id: components-quote-title-font-size 484 | title: Title Font Size 485 | title.zh: 标题字体大小 486 | description: "rem" 487 | type: variable-number 488 | default: 1 489 | format: rem 490 | - id: components-quote-content-font-size 491 | title: Content Font Size 492 | title.zh: 内容字体大小 493 | description: "rem" 494 | type: variable-number 495 | default: 0.875 496 | format: rem 497 | - id: card-component 498 | title: Card Component 499 | title.zh: 卡片组件 500 | type: heading 501 | level: 3 502 | collapsed: true 503 | - id: components--card-component-title-icon-size 504 | title: Title Icon Size 505 | title.zh: 标题图标大小 506 | description: "rem" 507 | type: variable-number 508 | default: 1 509 | format: rem 510 | - id: components--card-component-title-font-size 511 | title: Title Font Size 512 | title.zh: 标题字体大小 513 | description: "rem" 514 | type: variable-number 515 | default: 1 516 | format: rem 517 | - id: components--card-component-description-font-size 518 | title: Content Font Size 519 | title.zh: 描述字体大小 520 | description: "rem" 521 | type: variable-number 522 | default: 0.8125 523 | format: rem 524 | */ 525 | 526 | ::-webkit-scrollbar { 527 | width: 6px; 528 | height: 6px; 529 | } 530 | 531 | ::-webkit-scrollbar-thumb { 532 | background-color: transparent; 533 | border-radius: var(--size-4-1); 534 | } 535 | 536 | ::-webkit-scrollbar-thumb { 537 | background-color: transparent; 538 | } 539 | 540 | :hover::-webkit-scrollbar-thumb { 541 | background-color: var(--background-modifier-hover); 542 | } 543 | 544 | body { 545 | --inline-title-weight: 500; 546 | --inline-title-size: 1.6rem; 547 | --inline-title-color: var(--text-normal); 548 | --header-height: 36px; 549 | --modal-bg-blur: 3px; 550 | --metadata-input-font-size: 14px; 551 | --file-margins: 24px; 552 | 553 | /* font-size */ 554 | --h1-size: 1.69em; 555 | --h2-size: 1.51em; 556 | --h3-size: 1.35em; 557 | --h4-size: 1.21em; 558 | --h5-size: 1.1em; 559 | --h6-size: 1em; 560 | --heading-spacing: calc(var(--p-spacing) * 1.8); 561 | 562 | --link-decoration: none; 563 | --link-decoration-hover: none; 564 | --link-external-decoration: underline; 565 | --link-external-decoration-hover: underline; 566 | 567 | --indentation-guide-color: transparent; 568 | /* callout */ 569 | --callout-color: transparent; 570 | --callout-radius: 8px; 571 | 572 | /* Typography */ 573 | --paragraph-letter-spacing: 0.035em; 574 | --paragraph-line-height: 1.7; 575 | --paragraph-word-spacing: 0.035em; 576 | --line-height-normal: var(--paragraph-line-height); 577 | 578 | /* list */ 579 | --list-spacing: 0.225em; 580 | /* embed */ 581 | --embed-border-start: 2px solid #cbd5e0; 582 | /* suggestion */ 583 | --suggesttion-highlight-color: var(--code-normal); 584 | 585 | --ribbon-padding: 0px; 586 | --ribbon-background: transparent; 587 | --titlebar-background: transparent; 588 | --titlebar-background-focused: transparent; 589 | --tab-container-background: transparent; 590 | --tab-background-active: var(--background-modifier-hover); 591 | --tab-text-color-active: var(--text-normal); 592 | --tab-text-color-focused-active-current: var(--text-normal); 593 | --tab-text-color-focused-active: var(--text-normal); 594 | --tab-text-color-focused: var(--text-faint); 595 | --tab-radius: var(--radius-s); 596 | 597 | /* tag */ 598 | --tag-radius: 2em; 599 | --tag-padding-y: 0.2em; 600 | --tag-border-width: 1px; 601 | --tag-size: 0.8em; 602 | 603 | --background-modifier-form-field: hsl( 604 | var(--accent-h), 605 | var(--accent-s), 606 | var(--accent-l), 607 | 0.1 608 | ); 609 | --background-modifier-message: var(--background-secondary); 610 | --ribbon-background-collapsed: transparent; 611 | 612 | --heading-indicator-spacing: 6px; 613 | 614 | --workspace-header-background: transparent; 615 | --ribbon-background-collapsed: transparent; 616 | --mod-left-ribbon-background: transparent; 617 | --mod-left-ribbon-background-collapsed: transparent; 618 | 619 | --mod-root-background: transparent; 620 | --mod-root-border: 0px 1px 0px 1px solid var(--background-modifier-border); 621 | --mod-root-header-background: transparent; 622 | --mod-root-header-margin: 0px 0px 4px 0px; 623 | 624 | --mod-left-split-background: transparent; 625 | --mod-right-split-background: transparent; 626 | 627 | --root-workspace-padding-bottom: 28px; 628 | --root-workspace-radius: var(--radius-m); 629 | --root-workspace-shadow: var(--background-modifier-border) 0px 0px 3px 0px, 630 | var(--background-modifier-border) 0px 1px 2px 0px; 631 | --root-workspace-background: transparent; 632 | --root-workspace-margin-spacing: 16px; 633 | --side-dock-actions-border-color: var(--background-modifier-border); 634 | --side-dock-actions-shadow: var(--background-modifier-border) 0px 1px 2px 635 | 0px, 636 | var(--background-modifier-border) 0px 0px 0px 1px; 637 | /* outline */ 638 | --outline-collapsed-icon-opacity: 1; 639 | } 640 | 641 | /* body { 642 | --ribbon-background-collapsed: transparent; 643 | --mod-left-ribbon-background: transparent; 644 | --mod-left-ribbon-background-collapsed: var(--background-primary); 645 | --mod-root-header-background: var(--background-primary); 646 | --mod-root-header-margin: 0px; 647 | --root-workspace-padding-bottom: 0px; 648 | --root-workspace-radius: 0px; 649 | --root-workspace-shadow: none; 650 | --root-workspace-margin-spacing: 0px; 651 | --side-dock-actions-border-color: transparent; 652 | } */ 653 | 654 | /* ---- Xia ---- */ 655 | .theme-light { 656 | --accent-h: 12; 657 | --accent-s: 31%; 658 | --accent-l: 60%; 659 | 660 | --background-primary: rgb(243, 237, 233); 661 | --background-primary-alt: rgb(238, 230, 225); 662 | --background-secondary: rgb(232, 223, 217); 663 | --background-secondary-alt: rgb(225, 215, 208); 664 | 665 | --background-gradient: linear-gradient( 666 | rgb(217, 224, 227), 667 | rgb(235, 215, 210) 668 | ); 669 | --background-modifier-border: hsla(25, 20%, 70%, 0.4); 670 | 671 | /* text */ 672 | --color-base-00: #f8f4f0; 673 | --color-base-05: #f3ece6; 674 | --color-base-10: #eee6df; 675 | --color-base-20: #e6dcd3; 676 | --color-base-25: #d8ccc2; 677 | --color-base-30: #c8b9af; 678 | --color-base-35: #b6a79d; 679 | --color-base-40: #a3958c; 680 | --color-base-50: #8a7e76; 681 | --color-base-60: #6b625b; 682 | --color-base-70: #554d47; 683 | --color-base-100: #3a3330; 684 | --bold-color: #2d3748; 685 | --bold-modifier: 200; 686 | 687 | /* title */ 688 | --h1-color: #2d3748; 689 | --h2-color: #4a556b; 690 | --h3-color: #66788d; 691 | --h4-color: #7f8a9b; 692 | --h5-color: #9aa5b5; 693 | --h6-color: #808080; 694 | --h1-indicator-color: var(--h1-color); 695 | --h2-indicator-color: var(--h2-color); 696 | --h3-indicator-color: var(--h3-color); 697 | --h4-indicator-color: var(--h4-color); 698 | --h5-indicator-color: var(--h5-color); 699 | --h6-indicator-color: var(--h6-color); 700 | 701 | /* inline code */ 702 | --code-normal: #eb5757; 703 | --code-border-color: transparent; 704 | --inline-code-normal: #eb5757; 705 | --inline-code-background: hsla(31, 41%, 90%, 0.6); 706 | 707 | /* quote */ 708 | --blockquote-border-color: hsl(25, 20%, 70%); 709 | --blockquote-background-color: rgba(237, 228, 222, 0.811); 710 | --blockquote-color: hsl(25, 20%, 30%); 711 | 712 | /* codeblock */ 713 | --codeblock-background: rgba(234, 223, 215, 0.749); 714 | --codeblock-caret-color: hsl(25, 20%, 30%); 715 | --codeblock-border-radius: 8px; 716 | 717 | /* text highlight */ 718 | --text-highlight-background: rgba(248, 227, 217, 0.9); 719 | --text-highlight-border-color: rgb(167, 98, 64); 720 | --text-highlight-color: rgb(102, 80, 63); 721 | --text-highlight-border-radius: 4px; 722 | 723 | /* basic color */ 724 | --color-red-rgb: 174, 62, 76; 725 | --color-blue-rgb: 74, 85, 107; 726 | --color-purple-rgb: 94, 72, 146; 727 | --color-cyan-rgb: 52, 136, 152; 728 | --color-blue-rgb: 95, 164, 218; 729 | --color-orange-rgb: 184, 110, 51; 730 | --color-green-rgb: 62, 132, 98; 731 | --color-yellow-rgb: 191, 143, 63; 732 | --color-pink-rgb: 184, 92, 132; 733 | 734 | /* callout */ 735 | --callout-bug: var(--color-red-rgb); 736 | --callout-default: var(--color-blue-rgb); 737 | --callout-error: 158, 48, 57; 738 | --callout-example: var(--color-purple-rgb); 739 | --callout-fail: var(--color-red-rgb); 740 | --callout-important: var(--color-cyan-rgb); 741 | --callout-info: var(--color-blue-rgb); 742 | --callout-question: var(--color-orange-rgb); 743 | --callout-success: var(--color-green-rgb); 744 | --callout-summary: var(--color-cyan-rgb); 745 | --callout-tip: var(--color-cyan-rgb); 746 | --callout-todo: var(--color-blue-rgb); 747 | --callout-warning: 191, 127, 63; 748 | --callout-quote: 158, 158, 158; 749 | 750 | /* customize */ 751 | --nav-button-container-bg: rgba(31, 34, 37, 0.03); 752 | --header-active-bg: rgba(31, 34, 37, 0.03); 753 | } 754 | 755 | .theme-dark { 756 | --accent-h: 30; 757 | --accent-s: 40%; 758 | --accent-l: 65%; 759 | 760 | --background-primary: hsl(215, 22%, 15%); 761 | --background-primary-alt: hsl(215, 18%, 19%); 762 | --background-secondary: hsl(225, 15%, 20%); 763 | --background-secondary-alt: hsl(235, 15%, 28%); 764 | 765 | --background-gradient: linear-gradient( 766 | 155deg, 767 | var(--background-primary) 0%, 768 | rgb(38, 45, 54), 769 | rgb(67, 63, 80) 770 | ); 771 | 772 | --background-modifier-border: rgb(69, 74, 84); 773 | 774 | --color-base-00: #181c22; 775 | --color-base-05: #1d2128; 776 | --color-base-10: #22262e; 777 | --color-base-20: #282d35; 778 | --color-base-25: #2f343d; 779 | --color-base-30: #373c46; 780 | --color-base-35: #404650; 781 | --color-base-40: #4a5059; 782 | --color-base-50: #5a616a; /* --text-faint */ 783 | --color-base-60: #6c737b; 784 | --color-base-70: #8d949d; /* 提升明度+12% */ 785 | --color-base-100: #e3e7eb; 786 | /* bold */ 787 | --bold-color: #f0f4f8; 788 | --bold-modifier: 200; 789 | 790 | /* title */ 791 | --h1-color: #e2e6eb; 792 | --h2-color: #c5cad4; 793 | --h3-color: #a8aeb9; 794 | --h4-color: #8f96a1; 795 | --h5-color: #787f8a; 796 | --h6-color: #666d78; 797 | --h1-indicator-color: var(--h1-color); 798 | --h2-indicator-color: var(--h2-color); 799 | --h3-indicator-color: var(--h3-color); 800 | --h4-indicator-color: var(--h4-color); 801 | --h5-indicator-color: var(--h5-color); 802 | --h6-indicator-color: var(--h6-color); 803 | 804 | /* quote */ 805 | --blockquote-border-color: #67594c; 806 | --blockquote-background-color: rgba(42, 49, 60, 0.6); 807 | --blockquote-color: rgb(207, 197, 175); 808 | 809 | /* codeblock*/ 810 | --codeblock-background: rgba(37, 44, 55, 0.85); 811 | --codeblock-caret-color: rgb(201, 166, 130); 812 | --codeblock-border-radius: 8px; 813 | --codeblock-border: #e5e7eb; 814 | 815 | /* text highlight */ 816 | --text-highlight-background: hsla(38, 27%, 54%, 0.5); 817 | --text-highlight-border-color: hsl(31, 48%, 66%); 818 | --text-highlight-color: hsl(40, 20%, 90%); 819 | 820 | /* inline code */ 821 | --code-normal: #ff7b72; 822 | --code-border-color: transparent; 823 | --inline-code-normal: #ff7b72; 824 | --inline-code-background: hsla(204, 15%, 25%, 0.4); 825 | 826 | /* basic color */ 827 | --color-red-rgb: 255, 123, 114; 828 | --color-blue-rgb: 123, 175, 222; 829 | --color-purple-rgb: 182, 155, 255; 830 | --color-cyan-rgb: 123, 204, 214; 831 | --color-orange-rgb: 255, 182, 104; 832 | --color-green-rgb: 123, 204, 148; 833 | --color-yellow-rgb: 255, 203, 107; 834 | --color-pink-rgb: 255, 157, 194; 835 | 836 | /* callout */ 837 | --callout-error: 255, 100, 92; 838 | --callout-warning: 255, 170, 92; 839 | --callout-quote: 158, 158, 158; 840 | 841 | /* 自定义组件 */ 842 | --nav-button-container-bg: rgba(255, 255, 255, 0.03); 843 | --header-active-bg: rgba(255, 255, 255, 0.05); 844 | } 845 | 846 | /* ---- Su ---- */ 847 | .composer--SuScheme-light.theme-light { 848 | --accent-h: 204; 849 | --accent-s: 15%; 850 | --accent-l: 58%; 851 | 852 | --background-primary: #fafafa; 853 | --background-primary-alt: #f4f4f5; 854 | --background-secondary: #f1f0ee; 855 | --background-secondary-alt: #dddfe3; 856 | 857 | --color-base-00: #fafafa; 858 | --color-base-05: #f7f7f7; 859 | --color-base-10: #f1f1f2; 860 | --color-base-20: #e8e8ea; 861 | --color-base-25: #dfdfe2; 862 | --color-base-30: #d4d4d8; 863 | --color-base-35: #bcbcc4; 864 | --color-base-40: #a3a3af; 865 | --color-base-50: #8a8a98; 866 | --color-base-60: #6d6d7a; 867 | --color-base-70: #53535f; 868 | --color-base-100: #313139; 869 | 870 | --background-gradient: radial-gradient( 871 | ellipse at 50% 30%, 872 | hsl(0, 0%, 100%) 20%, 873 | hsl(220, 16%, 95%) 80% 874 | ); 875 | 876 | --background-modifier-border: rgba(225, 219, 214, 0.6); 877 | 878 | /* quote */ 879 | --blockquote-border-color: hsl(220, 15%, 80%); 880 | --blockquote-background-color: hsl(220, 20%, 97%); 881 | --blockquote-color: hsl(220, 25%, 35%); 882 | 883 | /* codeblock */ 884 | --codeblock-background: #d6d4d440; 885 | --codeblock-caret-color: #4a556b; 886 | --codeblock-border-radius: 8px; 887 | 888 | /* text-highlight */ 889 | --text-highlight-background: hsla(41, 61%, 92%); 890 | --text-highlight-border-color: hsl(47, 48%, 42%); 891 | --text-highlight-color: hsl(220, 25%, 25%); 892 | --text-highlight-border-radius: 4px; 893 | } 894 | 895 | .composer--SuScheme-dark.theme-dark { 896 | --accent-h: 204; 897 | --accent-s: 18%; 898 | --accent-l: 42%; 899 | 900 | --background-primary: #1a1e24; 901 | --background-primary-alt: #252a32; 902 | --background-secondary: #2d333b; 903 | --background-secondary-alt: #373e48; 904 | 905 | --color-base-00: #1a1e24; 906 | --color-base-05: #20242b; 907 | --color-base-10: #252a32; 908 | --color-base-20: #2d333b; 909 | --color-base-25: #333a43; 910 | --color-base-30: #3b424d; 911 | --color-base-35: #444c58; 912 | --color-base-40: #4d5666; 913 | --color-base-50: #5e6778; 914 | --color-base-60: #717b8c; 915 | --color-base-70: #8b93a2; 916 | --color-base-100: #e6e9ee; 917 | 918 | --background-gradient: radial-gradient( 919 | ellipse at 50% 30%, 920 | hsl(220, 12%, 18%) 20%, 921 | hsl(220, 14%, 12%) 80% 922 | ); 923 | 924 | --background-modifier-border: rgba(67, 73, 83, 0.6); 925 | 926 | /* quote */ 927 | --blockquote-border-color: hsl(204, 15%, 35%); 928 | --blockquote-background-color: hsla(204, 15%, 15%, 0.3); 929 | --blockquote-color: hsl(204, 15%, 75%); 930 | 931 | /* codeblock */ 932 | --codeblock-background: #2b303880; 933 | --codeblock-caret-color: #c5cad4; 934 | --codeblock-border-radius: 8px; 935 | --codeblock-border: #e5e7eb; 936 | 937 | /* text highlight */ 938 | --text-highlight-background: hsla(40, 30%, 25%, 0.4); 939 | --text-highlight-border-color: hsl(40, 27%, 61%); 940 | --text-highlight-color: hsl(40, 60%, 85%); 941 | --text-highlight-border-radius: 4px; 942 | } 943 | 944 | /* ---- Qing ---- */ 945 | .composer--QingScheme-light.theme-light { 946 | --accent-h: 198; 947 | --accent-s: 22%; 948 | --accent-l: 55%; 949 | 950 | --background-primary: #f8fbfb; 951 | --background-primary-alt: #ecf2f4; 952 | --background-secondary: #e0e8eb; 953 | --background-secondary-alt: #d4dfe2; 954 | 955 | --color-base-00: #f8fbfb; 956 | --color-base-05: #f2f8f8; 957 | --color-base-10: #eaf3f4; 958 | --color-base-20: #dfeaec; 959 | --color-base-25: #d1e0e3; 960 | --color-base-30: #c2d5d9; 961 | --color-base-35: #b0c9cf; 962 | --color-base-40: #9bbbc2; 963 | --color-base-50: #82a4ac; 964 | --color-base-60: #668890; 965 | --color-base-70: #4f6b72; 966 | --color-base-100: #2c3f44; 967 | 968 | --background-gradient: linear-gradient( 969 | 160deg, 970 | hsl(190, 30%, 95%) 0%, 971 | hsl(190, 20%, 90%) 100% 972 | ); 973 | 974 | --background-modifier-border: #dce3e5; 975 | 976 | /* quote */ 977 | --blockquote-border-color: hsl(190, 15%, 70%); 978 | --blockquote-background-color: hsla(190, 20%, 95%, 0.8); 979 | --blockquote-color: hsl(190, 25%, 35%); 980 | 981 | /* codeblock */ 982 | --codeblock-background: hsla(190, 15%, 92%, 0.9); 983 | --codeblock-caret-color: hsl(192, 33%, 15%); 984 | 985 | /* text-highlight */ 986 | --text-highlight-background: hsla(201, 39%, 84%, 0.45); 987 | --text-highlight-border-color: hsl(198, 25%, 70%); 988 | --text-highlight-color: hsl(197, 35%, 30%); 989 | } 990 | 991 | .composer--QingScheme-dark.theme-dark { 992 | --accent-h: 198; 993 | --accent-s: 28%; 994 | --accent-l: 45%; 995 | 996 | --background-primary: hsl(198, 25%, 18%); 997 | --background-primary-alt: hsl(198, 22%, 21%); 998 | --background-secondary: hsl(198, 20%, 24%); 999 | --background-secondary-alt: hsl(198, 18%, 27%); 1000 | 1001 | --color-base-00: #192c33; 1002 | --color-base-05: #1e313a; 1003 | --color-base-10: #233640; 1004 | --color-base-20: #293e49; 1005 | --color-base-25: #30454f; 1006 | --color-base-30: #384d58; 1007 | --color-base-35: #405861; 1008 | --color-base-40: #49636d; 1009 | --color-base-50: #5a7680; 1010 | --color-base-60: #6d8891; 1011 | --color-base-70: #869fa8; 1012 | --color-base-100: #dae5e9; 1013 | 1014 | --background-gradient: linear-gradient( 1015 | 165deg, 1016 | hsl(198, 28%, 16%) 0%, 1017 | hsl(198, 24%, 20%) 50%, 1018 | hsl(198, 20%, 23%) 100% 1019 | ); 1020 | 1021 | /* quote */ 1022 | --blockquote-border-color: hsl(200, 20%, 35%); 1023 | --blockquote-background-color: hsla(200, 25%, 18%, 0.8); 1024 | --blockquote-color: hsl(200, 32%, 71%); 1025 | 1026 | /* codeblock */ 1027 | --codeblock-background: hsla(200, 20%, 22%, 0.9); 1028 | --codeblock-caret-color: hsl(200, 30%, 65%); 1029 | 1030 | /* text-highlight */ 1031 | --text-highlight-background: hsla(200, 38%, 74%, 0.4); 1032 | --text-highlight-border-color: hsl(199, 55%, 88%); 1033 | --text-highlight-color: hsl(200, 13%, 91%); 1034 | } 1035 | 1036 | .notice, 1037 | .tooltip { 1038 | color: var(--text-normal); 1039 | border: 1px solid var(--background-modifier-border); 1040 | } 1041 | 1042 | .notice { 1043 | box-shadow: var(--background-modifier-border) 0px 1px 3px 1px, 1044 | var(--background-modifier-border) 0px 1px 3px 1px; 1045 | } 1046 | 1047 | .markdown-source-view, 1048 | .markdown-preview-view { 1049 | letter-spacing: var(--paragraph-letter-spacing); 1050 | line-height: var(--paragraph-line-height); 1051 | word-spacing: var(--paragraph-word-spacing); 1052 | } 1053 | 1054 | /* reduce spacing between metadata-container and first cm-line */ 1055 | .metadata-container 1056 | ~ .cm-contentContainer 1057 | .cm-content 1058 | > div[contenteditable="false"] 1059 | + .cm-line { 1060 | padding-top: 0.5rem; 1061 | } 1062 | 1063 | /* blockquote */ 1064 | .markdown-source-view.mod-cm6 .cm-line.HyperMD-quote, 1065 | .HyperMD-quote { 1066 | color: var(--blockquote-color); 1067 | padding-top: 4px; 1068 | padding-bottom: 4px; 1069 | } 1070 | 1071 | /* quote reading view */ 1072 | .el-blockquote blockquote { 1073 | padding-top: 4px; 1074 | padding-bottom: 4px; 1075 | padding-inline-start: 14px; 1076 | } 1077 | 1078 | /* title */ 1079 | .markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator { 1080 | padding-inline-end: 12px; 1081 | } 1082 | 1083 | .markdown-rendered .heading-collapse-indicator { 1084 | margin-inline-start: -28px; 1085 | } 1086 | 1087 | /* decoration before heading (reading view) */ 1088 | body:not(.composer--DisableHeadingDecoration-ReadingView) { 1089 | .markdown-rendered > h1::before, 1090 | .markdown-rendered > h2::before, 1091 | .markdown-rendered > h3::before, 1092 | .markdown-rendered > h4::before, 1093 | .markdown-rendered > h5::before, 1094 | .markdown-rendered > h6::before, 1095 | .markdown-rendered .el-h1 > h1::before, 1096 | .markdown-rendered .el-h2 > h2::before, 1097 | .markdown-rendered .el-h3 > h3::before, 1098 | .markdown-rendered .el-h4 > h4::before, 1099 | .markdown-rendered .el-h5 > h5::before, 1100 | .markdown-rendered .el-h6 > h6::before { 1101 | content: " "; 1102 | height: 0.8em; 1103 | display: inline-block; 1104 | width: 4px; 1105 | border-radius: var(--size-4-1); 1106 | margin-right: var(--heading-indicator-spacing); 1107 | background-color: var(--h1-indicator-color); 1108 | transform: translateY(-0.1em); 1109 | vertical-align: middle; 1110 | } 1111 | 1112 | .markdown-rendered > h2::before, 1113 | .markdown-rendered .el-h2 > h2::before { 1114 | background-color: var(--h2-indicator-color); 1115 | } 1116 | 1117 | .markdown-rendered > h3::before, 1118 | .markdown-rendered .el-h3 > h3::before { 1119 | background-color: var(--h3-indicator-color); 1120 | } 1121 | 1122 | .markdown-rendered > h4::before, 1123 | .markdown-rendered .el-h4 > h4::before { 1124 | background-color: var(--h4-indicator-color); 1125 | } 1126 | 1127 | .markdown-rendered > h5::before, 1128 | .markdown-rendered .el-h5 > h5::before { 1129 | background-color: var(--h5-indicator-color); 1130 | } 1131 | 1132 | .markdown-rendered > h6::before, 1133 | .markdown-rendered .el-h6 > h6::before { 1134 | background-color: var(--h6-indicator-color); 1135 | } 1136 | } 1137 | 1138 | .markdown-source-view.mod-cm6 .HyperMD-header { 1139 | padding-top: var(--heading-spacing); 1140 | padding-bottom: 1rem; 1141 | } 1142 | 1143 | /* heading line highlight */ 1144 | .composer--enable-heading-line-editing-highlight 1145 | .markdown-source-view.mod-cm6 1146 | .HyperMD-header.cm-active { 1147 | background-color: var(--header-active-bg); 1148 | } 1149 | 1150 | /* decoration before heading (live preview) */ 1151 | body:not(.composer--DisableHeadingDecoration-LivePreview) { 1152 | .is-live-preview .HyperMD-header::before { 1153 | content: " "; 1154 | display: inline-block; 1155 | width: 4px; 1156 | border-radius: var(--size-4-1); 1157 | margin-right: var(--heading-indicator-spacing); 1158 | background-color: var(--h1-indicator-color); 1159 | vertical-align: middle; 1160 | height: 0.8em; 1161 | transform: translateY(-0.1em); 1162 | } 1163 | 1164 | .is-live-preview .HyperMD-header-2.HyperMD-header::before { 1165 | background-color: var(--h2-indicator-color); 1166 | } 1167 | 1168 | .is-live-preview .HyperMD-header-3.HyperMD-header::before { 1169 | background-color: var(--h3-indicator-color); 1170 | } 1171 | 1172 | .is-live-preview .HyperMD-header-4.HyperMD-header::before { 1173 | background-color: var(--h4-indicator-color); 1174 | } 1175 | 1176 | .is-live-preview .HyperMD-header-5.HyperMD-header::before { 1177 | background-color: var(--h5-indicator-color); 1178 | } 1179 | 1180 | .is-live-preview .HyperMD-header-6.HyperMD-header::before { 1181 | background-color: var(--h6-indicator-color); 1182 | } 1183 | } 1184 | 1185 | /* list */ 1186 | /* add top margin at the start of list */ 1187 | .markdown-source-view .cm-line:not(.HyperMD-list-line) + .HyperMD-list-line-1 { 1188 | padding-top: 0.5rem; 1189 | } 1190 | 1191 | /* reading view */ 1192 | .markdown-rendered ul > li { 1193 | margin-inline-start: 26px; 1194 | } 1195 | 1196 | /* default callout */ 1197 | .callout { 1198 | border: 1px solid rgba(var(--callout-color), 0.35); 1199 | } 1200 | 1201 | .callout:hover { 1202 | border-color: rgba(var(--callout-color), 0.8); 1203 | } 1204 | 1205 | .markdown-source-view.mod-cm6 .cm-embed-block:not(.cm-table-widget):hover { 1206 | box-shadow: initial; 1207 | border-radius: initial; 1208 | overflow: hidden; 1209 | cursor: text; 1210 | } 1211 | 1212 | /* subtle grid callout style */ 1213 | .composer--SubtleGridCallout .callout { 1214 | background: linear-gradient( 1215 | 150deg, 1216 | rgba(var(--callout-color), 0.15) 0%, 1217 | rgba(var(--callout-color), 0.05) 10%, 1218 | var(--background-primary) 38% 1219 | ); 1220 | border: 1px solid rgba(var(--callout-color), 0.38); 1221 | position: relative; 1222 | padding: 4px; 1223 | } 1224 | 1225 | .composer--SubtleGridCallout .callout::before { 1226 | content: ""; 1227 | position: absolute; 1228 | top: 8px; 1229 | left: 8px; 1230 | width: 42%; 1231 | height: 88%; 1232 | background: repeating-linear-gradient( 1233 | to right, 1234 | transparent 0, 1235 | transparent 19px, 1236 | rgba(var(--callout-color), 0.6) 20px 1237 | ), 1238 | repeating-linear-gradient( 1239 | to bottom, 1240 | transparent 0, 1241 | transparent 19px, 1242 | rgba(var(--callout-color), 0.6) 20px 1243 | ); 1244 | mask: linear-gradient(to right, var(--background-primary), transparent 80%), 1245 | linear-gradient(to bottom, var(--background-primary), transparent 80%); 1246 | mask-composite: intersect; 1247 | } 1248 | 1249 | .composer--SubtleGridCallout .callout-title { 1250 | padding: 8px 16px 8px 16px; 1251 | } 1252 | 1253 | .composer--SubtleGridCallout .callout-content { 1254 | padding: 0px 16px 0px 16px; 1255 | } 1256 | 1257 | /* window panel callout */ 1258 | .composer--WindowPanelCallout .callout { 1259 | border: 1px solid rgba(var(--callout-color), 0.68); 1260 | position: relative; 1261 | background-color: transparent; 1262 | padding: 0px; 1263 | } 1264 | 1265 | .composer--WindowPanelCallout .callout-title { 1266 | border-bottom: 1px solid rgba(var(--callout-color), 0.68); 1267 | background-color: rgba(var(--callout-color), 0.1); 1268 | padding: 8px 16px 8px 16px; 1269 | } 1270 | 1271 | .composer--WindowPanelCallout .callout-content { 1272 | padding: 0px 16px; 1273 | } 1274 | 1275 | /* clean line callout */ 1276 | .composer--CleanLineCallout .callout { 1277 | background-color: transparent; 1278 | } 1279 | 1280 | .composer--CleanLineCallout .callout-title { 1281 | position: relative; 1282 | padding: 0px 0px 8px 0px; 1283 | } 1284 | 1285 | .composer--CleanLineCallout .callout.is-collapsed .callout-title { 1286 | padding: initial; 1287 | } 1288 | 1289 | .composer--CleanLineCallout .callout.is-collapsed .callout-title::after { 1290 | display: none; 1291 | height: 0px; 1292 | background: initial; 1293 | } 1294 | 1295 | .composer--CleanLineCallout .callout-title::after { 1296 | content: ""; 1297 | position: absolute; 1298 | left: 0; 1299 | bottom: 0; 1300 | width: 100%; 1301 | height: 2px; 1302 | background: linear-gradient( 1303 | to right, 1304 | rgba(var(--callout-color), 0.1) 0%, 1305 | rgba(var(--callout-color), 0.6) 12%, 1306 | rgba(var(--callout-color), 0.1) 62%, 1307 | transparent 100% 1308 | ); 1309 | } 1310 | 1311 | /* github callout */ 1312 | .composer--GithubCallout .callout { 1313 | border: none; 1314 | border-left: rgba(var(--callout-color), 0.6) 4px solid; 1315 | border-radius: 0px; 1316 | background-color: transparent; 1317 | padding: 8px 16px 8px 16px; 1318 | } 1319 | 1320 | .composer--GithubCallout .callout-title { 1321 | gap: var(--size-4-2); 1322 | } 1323 | 1324 | /* inline-code */ 1325 | .cm-s-obsidian span.cm-inline-code { 1326 | color: var(--inline-code-normal); 1327 | background-color: var(--inline-code-background); 1328 | } 1329 | 1330 | .markdown-rendered code { 1331 | color: var(--inline-code-normal); 1332 | background-color: var(--inline-code-background); 1333 | } 1334 | 1335 | /* codeblock */ 1336 | .markdown-source-view.mod-cm6 .code-block-flair { 1337 | color: var(--text-normal); 1338 | } 1339 | 1340 | .markdown-source-view .HyperMD-codeblock { 1341 | line-height: 1.5; 1342 | letter-spacing: initial; 1343 | word-spacing: initial; 1344 | } 1345 | 1346 | /* .markdown-source-view .HyperMD-codeblock.HyperMD-codeblock-begin::before { 1347 | content: ""; 1348 | background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1NCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDU0IDE0Ij4KICAgICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIj4KICAgICAgICA8Y2lyY2xlIGN4PSI2IiBjeT0iNiIgcj0iNiIgZmlsbD0iI0ZGNUY1NiIgc3Ryb2tlPSIjRTA0NDNFIiBzdHJva2Utd2lkdGg9Ii41Ij48L2NpcmNsZT4KICAgICAgICA8Y2lyY2xlIGN4PSIyNiIgY3k9IjYiIHI9IjYiIGZpbGw9IiNGRkJEMkUiIHN0cm9rZT0iI0RFQTEyMyIgc3Ryb2tlLXdpZHRoPSIuNSI+PC9jaXJjbGU+CiAgICAgICAgPGNpcmNsZSBjeD0iNDYiIGN5PSI2IiByPSI2IiBmaWxsPSIjMjdDOTNGIiBzdHJva2U9IiMxQUFCMjkiIHN0cm9rZS13aWR0aD0iLjUiPjwvY2lyY2xlPgogICAgICA8L2c+CiAgICA8L3N2Zz4="); 1349 | background-repeat: no-repeat; 1350 | display: inline-block; 1351 | position: absolute; 1352 | top: 6px; 1353 | height: 26px; 1354 | width: 100px; 1355 | } */ 1356 | 1357 | .HyperMD-codeblock.HyperMD-codeblock-begin.HyperMD-codeblock-begin-bg { 1358 | border-top-left-radius: var(--codeblock-border-radius); 1359 | border-top-right-radius: var(--codeblock-border-radius); 1360 | min-height: 32px; 1361 | } 1362 | 1363 | .HyperMD-codeblock.HyperMD-codeblock-end.HyperMD-codeblock-end-bg { 1364 | border-bottom-left-radius: var(--codeblock-border-radius); 1365 | border-bottom-right-radius: var(--codeblock-border-radius); 1366 | } 1367 | 1368 | .markdown-source-view.mod-cm6 .code-block-flair:hover { 1369 | color: var(--code-normal); 1370 | } 1371 | 1372 | .cm-s-obsidian div.HyperMD-codeblock-bg { 1373 | background-color: var(--codeblock-background); 1374 | caret-color: var(--codeblock-caret-color); 1375 | } 1376 | 1377 | /* codeblock reading view */ 1378 | .markdown-rendered pre { 1379 | background-color: var(--codeblock-background); 1380 | caret-color: var(--codeblock-caret-color); 1381 | border-radius: var(--codeblock-border-radius); 1382 | } 1383 | 1384 | :not(pre) > code[class*="language-"], 1385 | pre[class*="language-"] { 1386 | background-color: var(--codeblock-background); 1387 | caret-color: var(--codeblock-caret-color); 1388 | border-radius: var(--codeblock-border-radius); 1389 | } 1390 | 1391 | /* highlight */ 1392 | body .cm-s-obsidian .cm-scroller span.cm-formatting-highlight, 1393 | body .cm-s-obsidian .cm-scroller span.cm-highlight { 1394 | color: var(--text-highlight-color); 1395 | background-color: var(--text-highlight-background); 1396 | border-bottom: 1px dashed var(--text-highlight-border-color); 1397 | padding: 2px 4px; 1398 | } 1399 | 1400 | .cm-s-obsidian span.cm-formatting-highlight { 1401 | border: none; 1402 | background-color: initial; 1403 | } 1404 | 1405 | /* highlight for reading view */ 1406 | body .markdown-rendered mark { 1407 | color: var(--text-highlight-color); 1408 | background-color: var(--text-highlight-background); 1409 | border-bottom: 1px dashed var(--text-highlight-border-color); 1410 | padding: 2px 4px; 1411 | } 1412 | 1413 | /* table */ 1414 | .el-table table th, 1415 | .el-table table td, 1416 | .table-wrapper table th, 1417 | .table-wrapper table td { 1418 | border-right: none; 1419 | border-left: none; 1420 | } 1421 | 1422 | .markdown-source-view.mod-cm6 .cm-table-widget .table-cell-wrapper, 1423 | .cm-html-embed thead > tr > th, 1424 | .markdown-rendered thead > tr > th, 1425 | .cm-html-embed tbody > tr > td, 1426 | .markdown-rendered tbody > tr > td { 1427 | padding: var(--size-4-2); 1428 | } 1429 | 1430 | .markdown-source-view.mod-cm6 .cm-table-widget .table-col-btn, 1431 | .markdown-source-view.mod-cm6 .cm-table-widget .table-row-btn { 1432 | background-color: var(--background-secondary); 1433 | } 1434 | 1435 | .composer--ObsidianTableStyle { 1436 | .el-table table th, 1437 | .el-table table td, 1438 | .table-wrapper table th, 1439 | .table-wrapper table td { 1440 | border-right: 1px solid var(--background-modifier-border); 1441 | border-left: 1px solid var(--background-modifier-border); 1442 | } 1443 | } 1444 | 1445 | .composer--BorderlessTableStyle { 1446 | .el-table table, 1447 | .table-wrapper table { 1448 | --table-border-width: 0px; 1449 | --table-header-border-width: 0px; 1450 | --table-row-last-border-width: 0px; 1451 | 1452 | box-shadow: hsl(var(--accent-h), var(--accent-l), var(--accent-s), 0.25) 1453 | 0px 0px 5px -1px, 1454 | hsl(var(--accent-h), var(--accent-l), var(--accent-s), 0.3) 0px 1px 1455 | 0px -1px; 1456 | } 1457 | } 1458 | 1459 | body:not(.composer--HideStripedTableBackground) { 1460 | .el-table table, 1461 | .table-wrapper table { 1462 | background-color: var(--background-primary-alt); 1463 | --table-row-alt-background: var(--background-primary); 1464 | --table-row-alt-background-hover: var(--background-primary); 1465 | } 1466 | } 1467 | 1468 | .composer--AcademicTableStyle { 1469 | --table-header-border-width: 2px; 1470 | --table-header-border-color: var(--text-normal); 1471 | 1472 | --table-row-last-border-width: 2px; 1473 | --table-row-last-border-color: var(--text-normal); 1474 | 1475 | --table-row-first-border-color: var(--text-faint); 1476 | --table-row-first-top-border-width: 1px; 1477 | 1478 | --table-border-width: 0px; 1479 | 1480 | .el-table table tbody tr:first-child > td, 1481 | .table-wrapper table tbody tr:first-child > td { 1482 | border-color: var(--table-row-first-border-color); 1483 | border-top-width: var(--table-row-first-top-border-width); 1484 | } 1485 | 1486 | .el-table table tbody tr:last-child > td, 1487 | .table-wrapper table tbody tr:last-child > td { 1488 | border-color: var(--table-row-last-border-color); 1489 | } 1490 | } 1491 | 1492 | /* link/internal */ 1493 | .metadata-container .internal-link, 1494 | .markdown-rendered .internal-link, 1495 | .cm-hmd-internal-link a, 1496 | .internal-link, 1497 | .markdown-embed-link { 1498 | text-decoration-line: none; 1499 | } 1500 | 1501 | .metadata-container .internal-link { 1502 | color: var(--text-muted); 1503 | } 1504 | 1505 | /* link/external */ 1506 | .external-link { 1507 | background-image: linear-gradient(transparent, transparent), 1508 | url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(136, 136, 136)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E"); 1509 | background-size: calc(var(--font-text-size) + 0.2em), 1em; 1510 | background-position: right center; 1511 | background-repeat: no-repeat; 1512 | line-height: var(--line-height-normal); 1513 | padding-inline-end: 16px; 1514 | background-size: 14px 14px; 1515 | } 1516 | 1517 | .markdown-reading-view .external-link { 1518 | text-decoration: none; 1519 | } 1520 | 1521 | .markdown-source-view.mod-cm6 .cm-link .cm-underline:hover, 1522 | .markdown-source-view.mod-cm6 .cm-url .cm-underline:hover { 1523 | border-bottom-color: var(--link-external-color); 1524 | } 1525 | 1526 | /* ======== For UI Components ======== */ 1527 | /* Workspace leaf Tab */ 1528 | /* ribbon */ 1529 | .workspace-ribbon { 1530 | --divider-color: transparent; 1531 | --divider-width: 0px; 1532 | } 1533 | 1534 | body:not(.is-mobile) .workspace-ribbon.mod-left { 1535 | background-color: var(--mod-left-ribbon-background); 1536 | margin-top: 0px; 1537 | padding-top: var(--header-height); 1538 | padding-right: 4px; 1539 | } 1540 | 1541 | body:not(.is-mobile) .workspace-ribbon.mod-left.is-collapsed { 1542 | background-color: var(--mod-left-ribbon-background-collapsed); 1543 | } 1544 | 1545 | .workspace-ribbon.mod-left:before { 1546 | background-color: var(--mod-left-ribbon-background); 1547 | display: none; 1548 | } 1549 | 1550 | body.is-focused .titlebar, 1551 | body.is-focused .workspace-ribbon.mod-left { 1552 | border: none; 1553 | } 1554 | 1555 | .side-dock-settings { 1556 | margin-bottom: 9px; 1557 | } 1558 | 1559 | .side-dock-settings .side-dock-ribbon-action, 1560 | .side-dock-actions .side-dock-ribbon-action { 1561 | margin: 0 auto; 1562 | --icon-size: var(--icon-xs); 1563 | } 1564 | 1565 | .side-dock-actions { 1566 | border-style: none; 1567 | border-color: var(--side-dock-actions-border-color); 1568 | border-radius: 0px var(--radius-m) var(--radius-m) 0px; 1569 | overflow: hidden; 1570 | padding: 2px; 1571 | margin-top: 2px; 1572 | box-shadow: var(--side-dock-actions-shadow); 1573 | } 1574 | 1575 | /* Workspace nav header */ 1576 | body:not(.is-mobile) .nav-header { 1577 | display: flex; 1578 | justify-content: center; 1579 | align-items: center; 1580 | padding: var(--size-4-1); 1581 | padding-left: var(--size-4-3); 1582 | } 1583 | 1584 | body:not(.is-mobile) .nav-buttons-container { 1585 | background-color: var(--nav-button-container-bg); 1586 | border-radius: var(--radius-m); 1587 | padding: 2px 4px; 1588 | width: fit-content; 1589 | } 1590 | 1591 | body:not(.is-mobile):not(.composer--DisableNavHeaderAutoHide) 1592 | .mod-sidedock 1593 | .workspace-leaf-content 1594 | .nav-header 1595 | .nav-buttons-container { 1596 | background-color: transparent; 1597 | } 1598 | 1599 | body:not(.is-mobile):not(.composer--DisableNavHeaderAutoHide) 1600 | .mod-sidedock 1601 | .workspace-leaf-content 1602 | .nav-header:hover 1603 | .nav-buttons-container { 1604 | background-color: var(--nav-button-container-bg); 1605 | } 1606 | 1607 | body:not(.is-mobile):not(.composer--DisableNavHeaderAutoHide) 1608 | .mod-sidedock 1609 | .workspace-leaf 1610 | .workspace-leaf-content 1611 | .nav-header 1612 | .nav-action-button:hover { 1613 | background-color: var(--background-modifier-hover); 1614 | opacity: var(--icon-opacity); 1615 | border-radius: var(--clickable-icon-radius); 1616 | } 1617 | 1618 | body:not(.is-mobile):not(.composer--DisableNavHeaderAutoHide) 1619 | .mod-sidedock 1620 | .workspace-leaf-content 1621 | .nav-header 1622 | .nav-action-button { 1623 | flex-grow: 0; 1624 | max-width: 5px; 1625 | max-height: 5px; 1626 | overflow: hidden; 1627 | border-radius: 50%; 1628 | padding: 0px; 1629 | background-color: var(--text-faint); 1630 | transition: max-width 240ms cubic-bezier(0.4, 0, 0.2, 1), 1631 | max-height 240ms cubic-bezier(0.4, 0, 0.2, 1), 1632 | opacity 240ms cubic-bezier(0.4, 0, 0.2, 1), 1633 | padding 240ms cubic-bezier(0.4, 0, 0.2, 1), 1634 | background-color 120ms linear; 1635 | } 1636 | 1637 | body:not(.is-mobile):not(.composer--DisableNavHeaderAutoHide) 1638 | .mod-sidedock 1639 | .workspace-leaf-content 1640 | .nav-header 1641 | .nav-action-button.is-active { 1642 | background-color: var(--icon-color-active); 1643 | } 1644 | 1645 | body:not(.is-mobile):not(.composer--DisableNavHeaderAutoHide) 1646 | .mod-sidedock 1647 | .workspace-leaf-content 1648 | .nav-header:hover 1649 | .nav-action-button { 1650 | max-width: 32px; 1651 | max-height: 64px; 1652 | opacity: 0.85; 1653 | flex-grow: 1; 1654 | background-color: transparent; 1655 | padding: var(--size-2-2) var(--size-2-3); 1656 | } 1657 | 1658 | /* workspace tab header */ 1659 | .mod-left-split .workspace-tab-header-container-inner, 1660 | .mod-right-split .workspace-tab-header-container-inner { 1661 | gap: 4px; 1662 | opacity: 1; 1663 | } 1664 | 1665 | body:not(.is-phone) 1666 | .workspace:not(.is-left-sidedock-open) 1667 | .sidebar-toggle-button.mod-left { 1668 | margin-top: 2px; 1669 | } 1670 | 1671 | body:not(.is-phone) 1672 | .workspace:not(.is-right-sidedock-open) 1673 | .sidebar-toggle-button.mod-right { 1674 | margin-top: 2px; 1675 | } 1676 | 1677 | .workspace-tab-header-tab-list, 1678 | .workspace-tab-header-new-tab, 1679 | .workspace-tab-header-spacer { 1680 | margin-top: 6px; 1681 | } 1682 | 1683 | .nav-header .nav-buttons-container, 1684 | .clickable-icon.side-dock-ribbon-action .svg-icon, 1685 | .mod-left-split .workspace-tab-header-inner-icon .svg-icon, 1686 | .mod-right-split .workspace-tab-header-inner-icon .svg-icon { 1687 | --icon-size: var(--icon-s); 1688 | } 1689 | 1690 | /* tab for all area */ 1691 | body:not(.is-phone) .workspace { 1692 | background-color: var(--background-secondary); 1693 | background: var(--background-gradient); 1694 | } 1695 | 1696 | body.is-phone .workspace { 1697 | background-color: var(--background-secondary); 1698 | } 1699 | 1700 | .workspace-tabs .workspace-leaf { 1701 | background-color: transparent; 1702 | } 1703 | 1704 | .workspace-tab-header-container { 1705 | border-bottom: none; 1706 | background-color: var(--workspace-header-background); 1707 | } 1708 | 1709 | .workspace-tab-header.is-active:hover { 1710 | background-color: var(--tab-background-active); 1711 | } 1712 | 1713 | .workspace-tab-header-inner { 1714 | padding: 0 4px; 1715 | } 1716 | 1717 | body:not(.is-phone) .workspace-tab-container { 1718 | background-color: var(--background-primary); 1719 | } 1720 | 1721 | .workspace .mod-left-split .workspace-tab-container { 1722 | background-color: transparent; 1723 | } 1724 | 1725 | .workspace .mod-right-split .workspace-tab-container { 1726 | background-color: transparent; 1727 | } 1728 | 1729 | .mod-root .workspace-tabs .workspace-leaf { 1730 | background-color: transparent; 1731 | } 1732 | 1733 | /* Root tab */ 1734 | .workspace .mod-root { 1735 | background-color: var(--mod-root-background); 1736 | border: var(--mod-root-border); 1737 | } 1738 | 1739 | .workspace .mod-root .workspace-tab-header-container { 1740 | background-color: var(--mod-root-header-background); 1741 | } 1742 | 1743 | .workspace .mod-root .workspace-tab-header { 1744 | padding: 2px; 1745 | border: 1px solid transparent; 1746 | border-radius: var(--radius-s); 1747 | } 1748 | 1749 | .workspace .mod-root .workspace-tab-header:not(.is-active):hover { 1750 | color: var(--text-normal); 1751 | background-color: var(--tab-background-active); 1752 | } 1753 | 1754 | .workspace .mod-root .workspace-tab-header.is-active { 1755 | box-shadow: none; 1756 | color: var(--tab-text-color-active); 1757 | background-color: var(--tab-background-active); 1758 | position: relative; 1759 | } 1760 | 1761 | .mod-root .workspace-tab-header-container-inner { 1762 | padding: 1px 12px 0px 6px; 1763 | } 1764 | 1765 | .workspace 1766 | .mod-root 1767 | .workspace-tab-header:not(.is-active):hover 1768 | .workspace-tab-header-inner { 1769 | border: none; 1770 | background-color: transparent; 1771 | } 1772 | 1773 | .workspace .mod-root .workspace-tab-header-inner::after, 1774 | .workspace-split.mod-root .workspace-tab-header.is-active::before, 1775 | .workspace-split.mod-root .workspace-tab-header.is-active::after { 1776 | display: none; 1777 | } 1778 | 1779 | .mod-macos.is-hidden-frameless:not(.is-popout-window) 1780 | .sidebar-toggle-button.mod-right { 1781 | background-color: transparent; 1782 | } 1783 | 1784 | /* content leaf */ 1785 | body:not(.is-mobile) .workspace-split.mod-vertical, 1786 | body:not(.is-mobile) .workspace-split.mod-horizontal { 1787 | gap: 16px; 1788 | } 1789 | 1790 | body:not(.is-mobile) .mod-root .workspace-tabs { 1791 | overflow: visible; 1792 | } 1793 | 1794 | body:not(.is-mobile) .mod-root .workspace-tab-container { 1795 | border-radius: var(--root-workspace-radius); 1796 | box-shadow: var(--root-workspace-shadow); 1797 | background-color: var(--root-workspace-background); 1798 | } 1799 | 1800 | body:not(.is-phone) .mod-root .workspace-tab-header-container { 1801 | padding: 0px 12px 4px 0px; 1802 | margin: var(--mod-root-header-margin); 1803 | } 1804 | 1805 | body:not(.is-phone) 1806 | .workspace 1807 | .mod-root 1808 | .workspace-tabs.mod-stacked 1809 | .workspace-tab-container 1810 | .workspace-tab-header { 1811 | border-radius: 0px; 1812 | border: none; 1813 | border-right: 1.5px dashed var(--background-modifier-border); 1814 | box-shadow: none; 1815 | } 1816 | 1817 | body:not(.is-phone) 1818 | .workspace:is(.is-left-sidedock-open.is-right-sidedock-open) 1819 | .mod-root.workspace-split.mod-vertical { 1820 | margin-left: 0; 1821 | margin-right: 0; 1822 | padding-bottom: var(--root-workspace-padding-bottom); 1823 | } 1824 | 1825 | body:not(.is-phone) 1826 | .workspace:is(.is-left-sidedock-open):not(.is-right-sidedock-open) 1827 | .mod-root.workspace-split.mod-vertical { 1828 | margin-left: 0; 1829 | margin-right: var(--root-workspace-margin-spacing); 1830 | padding-bottom: var(--root-workspace-padding-bottom); 1831 | } 1832 | 1833 | body:not(.is-phone) 1834 | .workspace:is(.is-right-sidedock-open):not(.is-left-sidedock-open) 1835 | .mod-root.workspace-split.mod-vertical { 1836 | margin-left: var(--root-workspace-margin-spacing); 1837 | margin-right: 0; 1838 | padding-bottom: var(--root-workspace-padding-bottom); 1839 | } 1840 | 1841 | body:not(.is-phone) 1842 | .workspace:not(.is-right-sidedock-open):not(.is-left-sidedock-open) 1843 | .mod-root.workspace-split.mod-vertical { 1844 | margin-left: var(--root-workspace-margin-spacing); 1845 | margin-right: var(--root-workspace-margin-spacing); 1846 | padding-bottom: var(--root-workspace-padding-bottom); 1847 | } 1848 | 1849 | .workspace-split.mod-right-split { 1850 | padding-bottom: var(--root-workspace-padding-bottom); 1851 | } 1852 | 1853 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle, 1854 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle, 1855 | .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle { 1856 | opacity: 0 !important; 1857 | } 1858 | 1859 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle:hover, 1860 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle:hover, 1861 | .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:hover { 1862 | opacity: 1 !important; 1863 | } 1864 | 1865 | .workspace-split.mod-horizontal:not(.mod-left-split, .mod-right-split) 1866 | > * 1867 | > .workspace-leaf-resize-handle { 1868 | opacity: 0 !important; 1869 | } 1870 | 1871 | .workspace-split.mod-horizontal:not(.mod-left-split, .mod-right-split) 1872 | > * 1873 | > .workspace-leaf-resize-handle:hover { 1874 | opacity: 1 !important; 1875 | } 1876 | 1877 | /* left and right */ 1878 | .workspace-split.mod-left-split { 1879 | padding-right: 12px; 1880 | background-color: var(--mod-left-split-background); 1881 | } 1882 | 1883 | .workspace-split.mod-right-split { 1884 | padding-left: 12px; 1885 | background-color: var(--mod-right-split-background); 1886 | } 1887 | 1888 | /* vault profile */ 1889 | body:not(.is-mobile) 1890 | .workspace-split.mod-left-split 1891 | .workspace-sidedock-vault-profile { 1892 | border: none; 1893 | background-color: transparent; 1894 | } 1895 | 1896 | /* status bar */ 1897 | .status-bar { 1898 | max-height: 24px; 1899 | padding: 0px; 1900 | border: none; 1901 | background-color: transparent; 1902 | } 1903 | 1904 | /* markdown */ 1905 | /* file header title */ 1906 | body:not(.is-phone) .view-header-title-parent { 1907 | width: 0; 1908 | opacity: 0; 1909 | } 1910 | 1911 | @media (hover: hover) { 1912 | body:not(.is-phone) 1913 | .view-header-title-container:hover 1914 | .view-header-title-parent { 1915 | width: auto; 1916 | opacity: 1; 1917 | transition: opacity 0.5s; 1918 | } 1919 | } 1920 | 1921 | /* outline */ 1922 | .workspace-leaf-content[data-type="outline"] { 1923 | border-radius: var(--radius-m); 1924 | } 1925 | 1926 | .workspace-leaf-content[data-type="outline"] .tree-item-children { 1927 | border-inline-start: none; 1928 | } 1929 | 1930 | .workspace-leaf-content[data-type="outline"] .tree-item-self .tree-item-icon { 1931 | opacity: 0; 1932 | } 1933 | 1934 | .workspace-leaf-content[data-type="outline"] .tree-item-self.is-active { 1935 | color: var(--text-accent); 1936 | } 1937 | 1938 | .workspace-leaf-content[data-type="outline"] 1939 | .tree-item-self:hover 1940 | .tree-item-icon, 1941 | .workspace-leaf-content[data-type="outline"] 1942 | .tree-item-self 1943 | .tree-item-icon.is-collapsed { 1944 | opacity: 1; 1945 | } 1946 | 1947 | /* enable indentation for file explorer, ordered list, unordered list, etc.*/ 1948 | body.composer--EnableIndentationGuidLine { 1949 | --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); 1950 | } 1951 | 1952 | /* enable filename line feed */ 1953 | body.composer--EnableFilenameLineFeed .nav-file-title-content { 1954 | overflow-wrap: break-word; 1955 | word-wrap: break-word; 1956 | word-break: break-all; 1957 | white-space: normal; 1958 | } 1959 | 1960 | /* enable hidden file tag */ 1961 | body.composer--EnableHiddenFileTag .nav-file-tag { 1962 | display: none; 1963 | } 1964 | body.composer--EnableHiddenFileTag.composer--EnableHiddenFileTagHover 1965 | .nav-file:hover 1966 | .nav-file-tag { 1967 | display: inline; 1968 | } 1969 | 1970 | /* 1971 | * Modified Outline Pane Component 1972 | * Based on original work Copyright (c) 2022 subframe7536 1973 | * Source: https://github.com/subframe7536/obsidian-theme-maple 1974 | * Licensed under MIT License (https://github.com/subframe7536/obsidian-theme-maple/blob/main/LICENSE) 1975 | */ 1976 | .composer--NodeOutlineStyle 1977 | .workspace-leaf-content[data-type="outline"] 1978 | .view-content { 1979 | /* Base styles for outline container */ 1980 | .collapse-icon { 1981 | padding-inline-end: var(--size-2-3); 1982 | opacity: var(--outline-collapsed-icon-opacity); 1983 | 1984 | &::before { 1985 | content: "" !important; 1986 | } 1987 | } 1988 | 1989 | /* Tree item base styles */ 1990 | .tree-item { 1991 | &:not(.is-grabbing) { 1992 | position: relative; 1993 | 1994 | &::after { 1995 | content: ""; 1996 | position: absolute; 1997 | width: 2px; 1998 | background-color: transparent; 1999 | top: calc(var(--nav-item-size) * 1.8 / 2 * -1); 2000 | left: -9px; 2001 | height: calc( 2002 | 100% - var(--nav-item-size) * 1.8 + var(--size-4-8) 2003 | ); 2004 | } 2005 | } 2006 | 2007 | /* Tree item self styling */ 2008 | .tree-item-self { 2009 | position: relative; 2010 | margin: -1px 0 0; 2011 | white-space: nowrap; 2012 | 2013 | .tree-item-inner { 2014 | padding-left: 16px; 2015 | margin-left: -16px; 2016 | overflow: hidden; 2017 | text-overflow: ellipsis; 2018 | height: calc(var(--nav-item-size) * 1.8); 2019 | line-height: calc(var(--nav-item-size) * 1.8); 2020 | position: relative; 2021 | 2022 | &::before { 2023 | content: ""; 2024 | width: var(--size-4-1); 2025 | height: var(--size-4-1); 2026 | border: 2px solid var(--color-accent); 2027 | border-radius: 50%; 2028 | position: absolute; 2029 | left: 0; 2030 | top: 50%; 2031 | transform: translateY(-50%); 2032 | } 2033 | } 2034 | 2035 | /* Hide circle for items with icons */ 2036 | .tree-item-icon ~ .tree-item-inner::before { 2037 | content: none; 2038 | } 2039 | } 2040 | 2041 | /* Tree item icon styling */ 2042 | .tree-item-icon { 2043 | cursor: pointer; 2044 | top: 50%; 2045 | transform: translateY(-50%); 2046 | z-index: 1; 2047 | 2048 | &::before { 2049 | width: var(--size-4-2); 2050 | height: var(--size-4-2); 2051 | background-color: var(--color-accent); 2052 | border-radius: 50%; 2053 | position: absolute; 2054 | left: 4px; 2055 | top: 50%; 2056 | transform: translateY(-50%); 2057 | } 2058 | 2059 | svg { 2060 | display: block; 2061 | path { 2062 | display: none; 2063 | } 2064 | } 2065 | } 2066 | 2067 | /* Collapsed state */ 2068 | &.is-collapsed .tree-item-icon::before { 2069 | box-shadow: 0 0 0 4px var(--background-modifier-active-hover); 2070 | } 2071 | 2072 | /* Hover states */ 2073 | &:hover { 2074 | > .tree-item-children > .tree-item::after { 2075 | background-color: var(--color-accent); 2076 | } 2077 | 2078 | > .tree-item-self:hover + .tree-item-children .tree-item::after, 2079 | > .tree-item-children > .tree-item:hover::after, 2080 | > .tree-item-children > .tree-item:hover ~ .tree-item::after { 2081 | background-color: transparent; 2082 | } 2083 | } 2084 | 2085 | /* Hover decoration for child items */ 2086 | &:hover > .tree-item-children > .tree-item:hover::before { 2087 | content: ""; 2088 | position: absolute; 2089 | top: calc(var(--nav-item-size) * 1.8 / 2 * -1); 2090 | left: -9px; 2091 | bottom: calc( 2092 | 100% - (var(--nav-item-size) * 1.8 + var(--size-4-2)) / 2 - 1px 2093 | ); 2094 | width: 16px; 2095 | border-bottom-left-radius: var(--radius-m); 2096 | border-bottom: 2px solid var(--color-accent); 2097 | border-left: 2px solid var(--color-accent); 2098 | } 2099 | } 2100 | 2101 | /* Child items spacing */ 2102 | :is(.tree-item-children, .tree-item-self .tree-item-self) { 2103 | padding-left: 0; 2104 | margin-left: var(--size-4-5); 2105 | border-left: none; 2106 | } 2107 | } 2108 | 2109 | /* windows titlebar button */ 2110 | .is-hidden-frameless:not(.is-fullscreen).is-focused 2111 | .titlebar-button-container.mod-right, 2112 | .is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-right { 2113 | background-color: transparent; 2114 | } 2115 | 2116 | /* inline title */ 2117 | .inline-title:not([data-level]) { 2118 | color: var(--inline-title-color); 2119 | border-bottom: 1px solid var(--background-modifier-border); 2120 | padding-bottom: 16px; 2121 | } 2122 | 2123 | /* property */ 2124 | .metadata-container { 2125 | margin-block-end: 0rem; 2126 | } 2127 | 2128 | .metadata-container + .cm-contentContainer > div > .cm-line:first-child { 2129 | padding-top: 8px; 2130 | margin-top: 8px; 2131 | } 2132 | 2133 | .metadata-properties-title { 2134 | color: var(--text-muted); 2135 | } 2136 | 2137 | .metadata-content { 2138 | --metadata-gap: 4px; 2139 | --metadata-property-radius-hover: 0px; 2140 | --metadata-property-radius-focus: 0px; 2141 | } 2142 | 2143 | .metadata-properties { 2144 | padding-bottom: 16px; 2145 | border-bottom: 1px solid var(--metadata-divider-color); 2146 | } 2147 | 2148 | .is-mobile .metadata-properties { 2149 | padding-bottom: 8px; 2150 | } 2151 | 2152 | .metadata-property { 2153 | border-radius: 0px; 2154 | border-bottom: 0px; 2155 | } 2156 | 2157 | .metadata-property .metadata-property-key, 2158 | .metadata-property .metadata-property-value { 2159 | border: none; 2160 | } 2161 | 2162 | @media (hover: hover) { 2163 | .metadata-property:hover { 2164 | --metadata-divider-color: var(--metadata-divider-color-hover); 2165 | background-color: var(--metadata-property-background-hover); 2166 | box-shadow: none; 2167 | } 2168 | 2169 | .metadata-property-key:hover { 2170 | background-color: var(--background-modifier-hover); 2171 | } 2172 | 2173 | .metadata-property-value:hover { 2174 | background-color: var(--background-modifier-hover); 2175 | } 2176 | } 2177 | 2178 | .metadata-property-icon { 2179 | --icon-size: var(--icon-xs); 2180 | } 2181 | 2182 | .metadata-property-key { 2183 | align-items: center; 2184 | } 2185 | 2186 | .metadata-property-value a, 2187 | .metadata-property-value .external-link { 2188 | border: none; 2189 | } 2190 | 2191 | .metadata-container .metadata-show-source-button, 2192 | .metadata-container .metadata-add-button { 2193 | margin-top: 0.3em; 2194 | opacity: 0; 2195 | } 2196 | 2197 | .metadata-content:hover .metadata-add-button { 2198 | opacity: 1; 2199 | transition: opacity 0.5s; 2200 | } 2201 | 2202 | /* file list */ 2203 | .nav-file-title, 2204 | .nav-folder-title { 2205 | margin-bottom: 4px; 2206 | } 2207 | 2208 | .nav-file-title, 2209 | .nav-folder-title { 2210 | gap: 2px; 2211 | } 2212 | 2213 | body:not(.composer--DisableFileFolderIcon) 2214 | .workspace-leaf-content[data-type="file-explorer"] 2215 | .tree-item-icon.collapse-icon, 2216 | body:not(.composer--DisableFileFolderIcon) 2217 | .workspace-leaf-content[data-type="bookmarks"] 2218 | .tree-item-icon.collapse-icon { 2219 | background-color: var(--icon-color); 2220 | -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M4 9.333 4.967 7.4a1.333 1.333 0 0 1 1.193-.733h7.173m0 0a1.333 1.333 0 0 1 1.294 1.666l-1.034 4a1.333 1.333 0 0 1-1.293 1H2.667A1.333 1.333 0 0 1 1.333 12V3.333C1.333 2.6 1.933 2 2.667 2h2.62a1.333 1.333 0 0 1 1.106.6l.547.8a1.333 1.333 0 0 0 1.107.6H12a1.333 1.333 0 0 1 1.333 1.333v1.334Z'/%3e%3c/svg%3e"); 2221 | background-repeat: no-repeat; 2222 | -webkit-mask-repeat: no-repeat; 2223 | } 2224 | 2225 | body:not(.composer--DisableFileFolderIcon) 2226 | .workspace-leaf-content[data-type="file-explorer"] 2227 | .is-collapsed 2228 | .tree-item-icon.collapse-icon, 2229 | body:not(.composer--DisableFileFolderIcon) 2230 | .workspace-leaf-content[data-type="bookmarks"] 2231 | .is-collapsed 2232 | .tree-item-icon.collapse-icon { 2233 | background-color: var(--icon-color); 2234 | -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.333' d='M2.667 13.333h10.666A1.333 1.333 0 0 0 14.667 12V5.333A1.333 1.333 0 0 0 13.333 4H8.047a1.333 1.333 0 0 1-1.107-.6l-.547-.8A1.333 1.333 0 0 0 5.287 2h-2.62a1.333 1.333 0 0 0-1.334 1.333V12c0 .733.6 1.333 1.334 1.333Z'/%3e%3c/svg%3e"); 2235 | background-repeat: no-repeat; 2236 | -webkit-mask-repeat: no-repeat; 2237 | } 2238 | 2239 | /* modal */ 2240 | .modal-container { 2241 | backdrop-filter: blur(var(--modal-bg-blur)); 2242 | } 2243 | 2244 | /* suggest */ 2245 | .suggestion-highlight { 2246 | color: var(--suggesttion-highlight-color); 2247 | } 2248 | 2249 | /* typograph */ 2250 | /* 2251 | * Paragraph indent 2252 | * thanks for https://forum-zh.obsidian.md/t/topic/40452 2253 | */ 2254 | .composer--ParagraphIndent { 2255 | --paragraph-indent: calc(var(--font-text-size) * 2); 2256 | } 2257 | 2258 | .composer--ParagraphIndent 2259 | .markdown-reading-view 2260 | :is([class="cm-line"], [class="cm-active cm-line"], p), 2261 | .composer--ParagraphIndent 2262 | .is-live-preview 2263 | :is([class="cm-line"], [class="cm-active cm-line"], p) { 2264 | text-indent: var(--paragraph-indent); 2265 | } 2266 | 2267 | .composer--ParagraphIndent .markdown-reading-view p > br, 2268 | .composer--ParagraphIndent .is-live-preview p > br { 2269 | content: ""; 2270 | white-space: pre; 2271 | } 2272 | 2273 | .composer--ParagraphIndent .markdown-reading-view p > br::after, 2274 | .composer--ParagraphIndent .is-live-preview p > br::after { 2275 | content: "\000A\200B"; 2276 | margin-inline-end: var(--paragraph-indent); 2277 | } 2278 | 2279 | /* exclude

input:checked, 2433 | li[data-task="!"] > input:checked, 2434 | /* li[data-task="-"] > input:checked, */ 2435 | li[data-task="<"] > input:checked, 2436 | li[data-task="l"] > input:checked, 2437 | li[data-task="*"] > input:checked, 2438 | li[data-task="/"] > input:checked, 2439 | li[data-task="I"] > input:checked, 2440 | li[data-task="p"] > input:checked, 2441 | li[data-task="f"] > input:checked, 2442 | li[data-task="k"] > input:checked, 2443 | li[data-task="u"] > input:checked, 2444 | li[data-task="d"] > input:checked, 2445 | li[data-task="w"] > input:checked, 2446 | li[data-task="c"] > input:checked, 2447 | li[data-task="b"] > input:checked, 2448 | li[data-task=">"] > p > input:checked, 2449 | li[data-task="!"] > p > input:checked, 2450 | /* li[data-task="-"] > p > input:checked, */ 2451 | li[data-task="<"] > p > input:checked, 2452 | li[data-task="l"] > p > input:checked, 2453 | li[data-task="*"] > p > input:checked, 2454 | li[data-task="/"] > p > input:checked, 2455 | li[data-task="I"] > p > input:checked, 2456 | li[data-task="p"] > p > input:checked, 2457 | li[data-task="f"] > p > input:checked, 2458 | li[data-task="k"] > p > input:checked, 2459 | li[data-task="u"] > p > input:checked, 2460 | li[data-task="d"] > p > input:checked, 2461 | li[data-task="w"] > p > input:checked, 2462 | li[data-task="c"] > p > input:checked, 2463 | li[data-task="b"] > p > input:checked { 2464 | --checkbox-marker-color: transparent; 2465 | border: none; 2466 | border-radius: 0; 2467 | background-image: none; 2468 | background-color: currentColor; 2469 | -webkit-mask-size: var(--checkbox-icon); 2470 | -webkit-mask-position: 50% 50%; 2471 | } 2472 | 2473 | /* `[x]` Completed */ 2474 | /* Removal of strikethrough for completed tasks */ 2475 | body:not(.tasks).composer--RemoveTaskCompletedDecoration 2476 | .markdown-source-view.mod-cm6 2477 | .HyperMD-task-line[data-task]:is([data-task="x"]), 2478 | body:not(.tasks).composer--RemoveTaskCompletedDecoration 2479 | .markdown-preview-view 2480 | ul 2481 | li[data-task="x"].task-list-item.is-checked, 2482 | body:not(.tasks).composer--RemoveTaskCompletedDecoration 2483 | li[data-task="x"].task-list-item.is-checked { 2484 | text-decoration: unset; 2485 | color: var(--text-muted); 2486 | } 2487 | 2488 | /* [>] Forwarded */ 2489 | input[data-task=">"]:checked, 2490 | li[data-task=">"] > input:checked, 2491 | li[data-task=">"] > p > input:checked { 2492 | color: var(--text-faint); 2493 | transform: rotate(90deg); 2494 | -webkit-mask-position: 50% 100%; 2495 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z' /%3E%3C/svg%3E"); 2496 | } 2497 | 2498 | /* [<] Schedule */ 2499 | input[data-task="<"]:checked, 2500 | li[data-task="<"] > input:checked, 2501 | li[data-task="<"] > p > input:checked { 2502 | color: var(--text-faint); 2503 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2504 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2505 | } 2506 | 2507 | /* [?] Question */ 2508 | input[data-task="?"]:checked, 2509 | li[data-task="?"] > input:checked, 2510 | li[data-task="?"] > p > input:checked { 2511 | --checkbox-marker-color: transparent; 2512 | background-color: rgba(var(--color-yellow-rgb), 1); 2513 | border-color: rgba(var(--color-yellow-rgb), 1); 2514 | background-position: 50% 50%; 2515 | background-size: 200% 90%; 2516 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="white" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E'); 2517 | } 2518 | 2519 | .theme-dark input[data-task="?"]:checked, 2520 | .theme-dark li[data-task="?"] > input:checked, 2521 | .theme-dark li[data-task="?"] > p > input:checked { 2522 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="black" fill-opacity="0.8" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E'); 2523 | } 2524 | 2525 | /* [/] Incomplete */ 2526 | input[data-task="/"]:checked, 2527 | li[data-task="/"] > input:checked, 2528 | li[data-task="/"] > p > input:checked { 2529 | color: rgba(var(--color-blue-rgb), 1); 2530 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg t='1741258757843' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='7141' width='16' height='16'%3E%3Cpath d='M870.623079 147.094124a511.04523 511.04523 0 0 1 135.984362 496.646886 512.581053 512.581053 0 0 1-365.589958 363.4782c-63.352714 16.574094-127.985282 20.669623-190.95404 13.182484l26.364968-118.386386a391.954925 391.954925 0 0 0 413.520445-289.246736 390.803058 390.803058 0 0 0-104.052034-379.796324 392.274888 392.274888 0 0 0-314.459837-110.451298L443.472201 4.454528a513.22098 513.22098 0 0 1 427.150878 142.703589zM306.847913 846.597681c22.077461 13.374462 45.242797 24.445189 69.30403 33.212181l-26.300975 118.386385a513.668928 513.668928 0 0 1-119.21829-57.145428l76.215235-94.453138zM181.550322 725.39562c13.054499 20.029697 28.156762 39.099504 45.30679 57.017442l-76.151243 94.517131-7.103183-7.103183a513.604935 513.604935 0 0 1-71.863736-92.277388l109.811372-52.154002z' fill='%2367C23B' p-id='7142'%3E%3C/path%3E%3Cpath d='M121.589218 563.238268c3.071647 23.549292 8.319043 46.906606 15.742189 69.751978l-109.811371 52.09001A510.981237 510.981237 0 0 1 0.0032 563.238268h121.586018z' fill='%238DD16C' p-id='7143'%3E%3C/path%3E%3Cpath d='M26.880109 340.863841l109.939357 51.770046A390.995036 390.995036 0 0 0 121.589218 460.78605H0.0032a511.3012 511.3012 0 0 1 26.876909-119.922209z' fill='%23B3E09D' p-id='7144'%3E%3C/path%3E%3Cpath d='M150.705869 147.094124l76.151243 94.517131-4.095529 4.415492a392.018918 392.018918 0 0 0-42.107158 54.009789l-110.00335-51.770047c21.309549-35.195952 47.226569-68.472126 77.751059-98.86863l2.303735-2.303735z' fill='%23CBEABB' p-id='7145'%3E%3C/path%3E%3Cpath d='M343.515696 27.875834l27.900791 118.066423a389.971153 389.971153 0 0 0-64.632567 31.484379l-76.151242-94.517131a510.08534 510.08534 0 0 1 112.883018-55.033671z' fill='%23E1F3D9' p-id='7146'%3E%3C/path%3E%3Cpath d='M704.498183 326.721467a51.834039 51.834039 0 0 1 52.601951-20.093689l6.527249 1.855786c14.718307 5.119411 26.364968 16.766072 31.548372 31.420387l1.855787 6.463257c4.287507 19.965704-3.647581 40.571334-18.365888 51.066127l-284.703259 283.99934a57.785355 57.785355 0 0 1-79.22289-0.319963L254.501933 522.154992a51.642061 51.642061 0 0 1 19.709733-92.341381c19.965704-4.223514 40.635327 3.647581 51.194113 18.493874L451.151318 576.484744l253.346865-249.763277z' fill='%2367C23B' p-id='7147'%3E%3C/path%3E%3C/svg%3E"); 2531 | } 2532 | 2533 | /* [!] Important */ 2534 | input[data-task="!"]:checked, 2535 | li[data-task="!"] > input:checked, 2536 | li[data-task="!"] > p > input:checked { 2537 | color: rgba(var(--color-orange-rgb), 1); 2538 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2539 | } 2540 | 2541 | /* ["] Quote */ 2542 | input[data-task="“"]:checked, 2543 | li[data-task="“"] > input:checked, 2544 | li[data-task="“"] > p > input:checked, 2545 | input[data-task='"']:checked, 2546 | li[data-task='"'] > input:checked, 2547 | li[data-task='"'] > p > input:checked { 2548 | --checkbox-marker-color: transparent; 2549 | background-position: 50% 50%; 2550 | background-color: rgba(var(--color-cyan-rgb), 1); 2551 | border-color: rgba(var(--color-cyan-rgb), 1); 2552 | background-size: 75%; 2553 | background-repeat: no-repeat; 2554 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E'); 2555 | } 2556 | 2557 | .theme-dark input[data-task="“"]:checked, 2558 | .theme-dark li[data-task="“"] > input:checked, 2559 | .theme-dark li[data-task="“"] > p > input:checked, 2560 | .theme-dark input[data-task='"']:checked, 2561 | .theme-dark li[data-task='"'] > input:checked, 2562 | .theme-dark li[data-task='"'] > p > input:checked { 2563 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="black" fill-opacity="0.7" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E'); 2564 | } 2565 | 2566 | /* [-] Canceled */ 2567 | input[data-task="-"]:checked, 2568 | li[data-task="-"] > input:checked, 2569 | li[data-task="-"] > p > input:checked { 2570 | /* color: var(--text-faint); 2571 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); */ 2572 | --checkbox-marker-color: transparent; 2573 | background-color: var(--text-faint); 2574 | border-color: var(--text-faint); 2575 | background-position: 50% 50%; 2576 | background-size: 200% 90%; 2577 | background-image: url('data:image/svg+xml,%3Csvg t="1741245043664" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16219" width="20" height="20"%3E%3Cpath d="M295.232 205.44l6.016 5.312L512 421.44l210.752-210.688a64 64 0 0 1 95.808 84.48l-5.312 6.016L602.56 512l210.688 210.752a64 64 0 0 1-84.48 95.808l-6.016-5.312L512 602.56l-210.752 210.688a64 64 0 0 1-95.808-84.48l5.312-6.016L421.44 512 210.752 301.248a64 64 0 0 1 84.48-95.808z" fill="%23ffffff" p-id="16220"%3E%3C/path%3E%3C/svg%3E'); 2578 | } 2579 | 2580 | .theme-dark input[data-task="-"]:checked, 2581 | .theme-dark li[data-task="-"] > input:checked, 2582 | .theme-dark li[data-task="-"] > p > input:checked { 2583 | background-image: url('data:image/svg+xml,%3Csvg t="1741245385807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16595" width="20" height="20"%3E%3Cpath d="M295.232 205.44l6.016 5.312L512 421.44l210.752-210.688a64 64 0 0 1 95.808 84.48l-5.312 6.016L602.56 512l210.688 210.752a64 64 0 0 1-84.48 95.808l-6.016-5.312L512 602.56l-210.752 210.688a64 64 0 0 1-95.808-84.48l5.312-6.016L421.44 512 210.752 301.248a64 64 0 0 1 84.48-95.808z" fill="%232c2c2c" p-id="16596"%3E%3C/path%3E%3C/svg%3E'); 2584 | } 2585 | 2586 | body:not(.tasks) 2587 | .markdown-source-view.mod-cm6 2588 | .HyperMD-task-line[data-task]:is([data-task="-"]), 2589 | body:not(.tasks) 2590 | .markdown-preview-view 2591 | ul 2592 | li[data-task="-"].task-list-item.is-checked, 2593 | body:not(.tasks) li[data-task="-"].task-list-item.is-checked { 2594 | color: var(--text-faint); 2595 | text-decoration: line-through solid var(--text-faint) 1px; 2596 | } 2597 | 2598 | /* [*] Star */ 2599 | input[data-task="*"]:checked, 2600 | li[data-task="*"] > input:checked, 2601 | li[data-task="*"] > p > input:checked { 2602 | color: rgba(var(--color-yellow-rgb), 1); 2603 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' /%3E%3C/svg%3E"); 2604 | } 2605 | 2606 | /* [l] Location */ 2607 | input[data-task="l"]:checked, 2608 | li[data-task="l"] > input:checked, 2609 | li[data-task="l"] > p > input:checked { 2610 | color: rgba(var(--color-red-rgb), 1); 2611 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2612 | } 2613 | 2614 | /* [i] Info */ 2615 | input[data-task="i"]:checked, 2616 | li[data-task="i"] > input:checked, 2617 | li[data-task="i"] > p > input:checked { 2618 | --checkbox-marker-color: transparent; 2619 | background-color: rgba(var(--color-blue-rgb), 1); 2620 | border-color: rgba(var(--color-blue-rgb), 1); 2621 | background-position: 50%; 2622 | background-size: 100%; 2623 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="white" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E'); 2624 | } 2625 | 2626 | .theme-dark input[data-task="i"]:checked, 2627 | .theme-dark li[data-task="i"] > input:checked, 2628 | .theme-dark li[data-task="i"] > p > input:checked { 2629 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="black" fill-opacity="0.8" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E'); 2630 | } 2631 | 2632 | /* [S] Amount/savings/money */ 2633 | input[data-task="S"]:checked, 2634 | li[data-task="S"] > input:checked, 2635 | li[data-task="S"] > p > input:checked { 2636 | --checkbox-marker-color: transparent; 2637 | border-color: rgba(var(--color-green-rgb), 1); 2638 | background-color: rgba(var(--color-green-rgb), 1); 2639 | background-size: 100%; 2640 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill="white" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E'); 2641 | } 2642 | 2643 | .theme-dark input[data-task="S"]:checked, 2644 | .theme-dark li[data-task="S"] > input:checked, 2645 | .theme-dark li[data-task="S"] > p > input:checked { 2646 | background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill-opacity="0.8" fill="black" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E'); 2647 | } 2648 | 2649 | /* [I] Idea/lightbulb */ 2650 | input[data-task="I"]:checked, 2651 | li[data-task="I"] > input:checked, 2652 | li[data-task="I"] > p > input:checked { 2653 | color: rgba(var(--color-yellow-rgb), 1); 2654 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z' /%3E%3C/svg%3E"); 2655 | } 2656 | 2657 | /* [f] Fire */ 2658 | input[data-task="f"]:checked, 2659 | li[data-task="f"] > input:checked, 2660 | li[data-task="f"] > p > input:checked { 2661 | color: rgba(var(--color-red-rgb), 1); 2662 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2663 | } 2664 | 2665 | /* [k] Key */ 2666 | input[data-task="k"]:checked, 2667 | li[data-task="k"] > input:checked, 2668 | li[data-task="k"] > p > input:checked { 2669 | color: rgba(var(--color-yellow-rgb), 1); 2670 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2671 | } 2672 | 2673 | /* [u] Up */ 2674 | input[data-task="u"]:checked, 2675 | li[data-task="u"] > input:checked, 2676 | li[data-task="u"] > p > input:checked { 2677 | color: rgba(var(--color-red-green), 1); 2678 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2679 | } 2680 | 2681 | /* [d] Down */ 2682 | input[data-task="d"]:checked, 2683 | li[data-task="d"] > input:checked, 2684 | li[data-task="d"] > p > input:checked { 2685 | color: rgba(var(--color-red-rgb), 1); 2686 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2687 | } 2688 | 2689 | /* [w] Win */ 2690 | input[data-task="w"]:checked, 2691 | li[data-task="w"] > input:checked, 2692 | li[data-task="w"] > p > input:checked { 2693 | color: rgba(var(--color-purple-rgb), 1); 2694 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); 2695 | } 2696 | 2697 | /* [p] Pros */ 2698 | input[data-task="p"]:checked, 2699 | li[data-task="p"] > input:checked, 2700 | li[data-task="p"] > p > input:checked { 2701 | color: rgba(var(--color-green-rgb), 1); 2702 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /%3E%3C/svg%3E"); 2703 | } 2704 | 2705 | /* [c] Cons */ 2706 | input[data-task="c"]:checked, 2707 | li[data-task="c"] > input:checked, 2708 | li[data-task="c"] > p > input:checked { 2709 | color: rgba(var(--color-orange-rgb), 1); 2710 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z' /%3E%3C/svg%3E"); 2711 | } 2712 | 2713 | /* [b] Bookmark */ 2714 | input[data-task="b"]:checked, 2715 | li[data-task="b"] > input:checked, 2716 | li[data-task="b"] > p > input:checked { 2717 | color: rgba(var(--color-orange-rgb), 1); 2718 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z' /%3E%3C/svg%3E"); 2719 | } 2720 | 2721 | /* 2722 | New Tab style is from Cupertino Theme by Alexis C 2723 | --------------------------------------------------------------------------- 2724 | 2725 | Sponsor my work: 2726 | https://buymeacoffee.com/sevenaxis 2727 | 2728 | Readme: 2729 | https://github.com/aaaaalexis/obsidian-cupertino 2730 | 2731 | ----------------------------------------------------------------------------- 2732 | */ 2733 | 2734 | /* Modify the New Tab's view*/ 2735 | .workspace-leaf-content[data-type="empty"] .empty-state { 2736 | .empty-state-container { 2737 | display: flex; 2738 | justify-content: center; 2739 | align-items: center; 2740 | margin: 0; 2741 | margin-top: var(--view-header-height); 2742 | padding: var(--file-margins); 2743 | width: 100%; 2744 | max-width: 100%; 2745 | height: 100%; 2746 | max-height: 100%; 2747 | } 2748 | 2749 | /* Add the icon */ 2750 | .empty-state-container::before { 2751 | -webkit-mask-size: contain; 2752 | -webkit-mask-position: center; 2753 | -webkit-mask-repeat: no-repeat; 2754 | -webkit-mask-image: url('data:image/svg+xml,'); 2755 | position: absolute; 2756 | margin-top: -280px; 2757 | background-color: var(--background-modifier-hover); 2758 | width: 20%; 2759 | height: 20%; 2760 | pointer-events: none; 2761 | max-height: 120px; 2762 | content: ""; 2763 | } 2764 | 2765 | /* Hide the "No file opened" */ 2766 | .empty-state-title { 2767 | display: none; 2768 | } 2769 | /* Change cursor and hide Close */ 2770 | .empty-state-action { 2771 | cursor: pointer; 2772 | } 2773 | .empty-state-action.mod-close { 2774 | display: none; 2775 | } 2776 | } 2777 | -------------------------------------------------------------------------------- /version-bump.mjs: -------------------------------------------------------------------------------- 1 | /** 2 | * This script makes it slightly easier to release new versions of your 3 | * theme. If you are not using Github Releases with your theme, or 4 | * you are not interested in automating the process, you can safely ignore 5 | * this script. 6 | * 7 | * Usage: `$ npm run version` 8 | * 9 | * This script will automatically add a new entry to the versions.json file for 10 | * the current version of your theme. 11 | */ 12 | 13 | import { readFileSync, writeFileSync } from "fs"; 14 | 15 | const targetVersion = process.env.npm_package_version; 16 | 17 | // read minAppVersion from manifest.json and bump version to target version 18 | let manifest = JSON.parse(readFileSync("manifest.json", "utf8")); 19 | const { minAppVersion } = manifest; 20 | manifest.version = targetVersion; 21 | writeFileSync("manifest.json", JSON.stringify(manifest, null, "\t")); 22 | 23 | // update versions.json with target version and minAppVersion from manifest.json 24 | let versions = JSON.parse(readFileSync("versions.json", "utf8")); 25 | versions[targetVersion] = minAppVersion; 26 | writeFileSync("versions.json", JSON.stringify(versions, null, "\t")); 27 | -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | { 2 | "1.0.0": "1.0.0" 3 | } --------------------------------------------------------------------------------