├── .gitignore ├── screenshot.png ├── assets ├── 00-mode.png ├── 01-document.png ├── 02-document.png └── 00-screenshot-small.png ├── manifest.json ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md ├── LICENSE ├── README.md └── theme.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Mac 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ds-package/Dawn/HEAD/screenshot.png -------------------------------------------------------------------------------- /assets/00-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ds-package/Dawn/HEAD/assets/00-mode.png -------------------------------------------------------------------------------- /assets/01-document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ds-package/Dawn/HEAD/assets/01-document.png -------------------------------------------------------------------------------- /assets/02-document.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ds-package/Dawn/HEAD/assets/02-document.png -------------------------------------------------------------------------------- /assets/00-screenshot-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ds-package/Dawn/HEAD/assets/00-screenshot-small.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Dawn", 3 | "version": "1.0.2", 4 | "minAppVersion": "1.0.2", 5 | "author": "min" 6 | } 7 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # https://docs.github.com/en/github/administering-a-repository/managing-repository-settings/displaying-a-sponsor-button-in-your-repository 2 | 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: 'Feature Request: ' 5 | labels: enhancement 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Feature Requested** 11 | Clear and Concise description of the feature. 12 | 13 | **Relevant Screenshots** 14 | If applicable, add screenshots to help explain your request. 15 | 16 | **Checklist** 17 | - [ ] The feature would be useful to more users than just me. (→ If it's only relevant to you, have you considered using a [CSS Snippet](https://help.obsidian.md/How+to/Add+custom+styles.md#Use+Themes+and/or+CSS+snippets)?) 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 min 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 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: "[BUG]" 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the Bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **Relevant Screenshots** 14 | If applicable, add screenshots to help explain your problem. 15 | 16 | **To Reproduce** 17 | Steps to reproduce the behavior, e.g. 18 | 1. Go to '...' 19 | 2. Click on '....' 20 | 3. Scroll down to '....' 21 | 22 | **In which mode does the bug occur?** 23 | - [ ] Reading/Preview Mode 24 | - [ ] Source Mode 25 | - [ ] Live Preview 26 | 27 | **Which editor are you using?** 28 | - [ ] Legacy Editor 29 | - [ ] New Editor 30 | 31 | **Which version of Obsidian are you using?** 32 | - [ ] Public Release (Desktop) 33 | - [ ] Public Release (Mobile) 34 | - [ ] Insider Release (Desktop) 35 | - [ ] Insider Release (Mobile) 36 | 37 | **Checklist** 38 | - [ ] I have updated to the latest version of the theme (`Obsidian Settings → Appearance → Themes - Manage → Update`). 39 | - [ ] I made sure that the issue is related to this theme, by checking that the issue does not occur with other themes or the default theme. 40 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dawn 2 | 3 | ![Dawn-Theme cover image](./screenshot.png) 4 | 5 | By incorporating the serenity of the dawn hours into its design, the Dawn Theme enhances your writing experience with subtle, yet impactful, modifications. 6 | 7 | ## features 8 | 9 | - Enhancing the Elegance with Subtly Spacious Design in UI 10 | - Soft Dark and Light Modes with Crisp Space 11 | - Fine-tuned Markdown Writing and Previewing Experience 12 | 13 | And we plan to continuously update it. 14 | 15 | ## Color 16 | 17 | ![Color set that supports dark mode and white mode](./assets//00-mode.png) 18 | 19 | I personally have a preference for high-contrast modes, but for the initial version, pure white (#FFFFFF) and black (#000000) were intentionally excluded in the creation of design tokens. 20 | 21 | _In the initial version, we aimed to primarily capture the serenity of Dawn. If the opportunity arises, I would like to try making a high-contrast mode that captures the immersive feeling of dawn._ 22 | 23 | Even with low contrast, the theme was created with consideration for readability and accessibility. (It's not perfect though). 24 | 25 | ## Document 26 | 27 | **form** 28 | 29 | ![Images that support the Markdown Document Form](./assets/01-document.png) 30 | 31 | **Blockquotes & Callouts** 32 | 33 | ![More beautiful Blockquotes & Callouts image](./assets/02-document.png) 34 | 35 | With Obsidian, you can create beautiful notes using various markdown options. 36 | 37 | Fine-tune the design with detailed customization for better formatting. 38 | 39 | Make this part more stunning with feedback, please! 40 | 41 | ## To-Do 42 | 43 | - [ ] Mobile View 44 | - [ ] Plug-in support 45 | - [ ] More Dataviews 46 | - [ ] Canvas 47 | - [ ] Cleanup CSS 48 | 49 | ## LICENSE 50 | 51 |

52 | 53 | You can freely change or suggest😁 54 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /*Fonts*/ 2 | :root { 3 | /*Note and Settings Text*/ 4 | /*kr : 노트 기본 폰트와 코드 폰트, 변경하지 않는게 좋습니다.*/ 5 | 6 | --default-font: "Inter", sans-serif; /*Note*/ 7 | --font-monospace: "Source Code Pro", monospace; /*Code*/ 8 | 9 | /* Size Related Values */ 10 | /* kr: 노트 내 사이즈 값들로 사용될 변수들 입니다. */ 11 | --scale-dimension-size-max: 9999px; 12 | --scale-dimension-size-3000: 240px; 13 | --scale-dimension-size-2000: 160px; 14 | --scale-dimension-size-1500: 100px; 15 | --scale-dimension-size-1000: 80px; 16 | --scale-dimension-size-900: 72px; 17 | --scale-dimension-size-800: 64px; 18 | --scale-dimension-size-700: 56px; 19 | --scale-dimension-size-600: 48px; 20 | --scale-dimension-size-500: 40px; 21 | --scale-dimension-size-400: 32px; 22 | --scale-dimension-size-300: 24px; 23 | --scale-dimension-size-250: 20px; 24 | --scale-dimension-size-225: 18px; 25 | --scale-dimension-size-200: 16px; 26 | --scale-dimension-size-175: 14px; 27 | --scale-dimension-size-150: 12px; 28 | --scale-dimension-size-125: 10px; 29 | --scale-dimension-size-100: 8px; 30 | --scale-dimension-size-75: 6px; 31 | --scale-dimension-size-50: 4px; 32 | --scale-dimension-size-25: 2px; 33 | --scale-dimension-size-10: 1px; 34 | --scale-dimension-size-0: 0px; 35 | --scale-dimension-font-size-1300: 72px; 36 | --scale-dimension-font-size-1200: 60px; 37 | --scale-dimension-font-size-1100: 54px; 38 | --scale-dimension-font-size-1000: 48px; 39 | --scale-dimension-font-size-900: 42px; 40 | --scale-dimension-font-size-800: 36px; 41 | --scale-dimension-font-size-700: 32px; 42 | --scale-dimension-font-size-600: 28px; 43 | --scale-dimension-font-size-500: 24px; 44 | --scale-dimension-font-size-400: 20px; 45 | --scale-dimension-font-size-300: 18px; 46 | --scale-dimension-font-size-200: 16px; 47 | --scale-dimension-font-size-100: 14px; 48 | --scale-dimension-font-size-75: 13px; 49 | --scale-dimension-font-size-50: 12px; 50 | --scale-dimension-font-size-25: 11px; 51 | --scale-dimension-font-size-10: 10px; 52 | --static-large: 162%; 53 | --static-medium: 150%; 54 | --static-small: 132%; 55 | 56 | /* radius */ 57 | /* kr: 보더라운드 셋팅입니다. */ 58 | --scale-radius-9999: var(--scale-dimension-size-300); 59 | --scale-radius-6: var(--scale-dimension-size-300); 60 | --scale-radius-5: var(--scale-dimension-size-200); 61 | --scale-radius-4: var(--scale-dimension-size-150); 62 | --scale-radius-3: var(--scale-dimension-size-75); 63 | --scale-radius-2: var(--scale-dimension-size-50); 64 | --scale-radius-1: var(--scale-dimension-size-25); 65 | } 66 | 67 | body { 68 | /* ----------------------------------------------------- 69 | 70 | List of variables is placed in body rather than :root so 71 | that we can combine all property types including colors 72 | and sort alphabetically to maximize readability in 73 | the compiled app.css file. 74 | 75 | kr:변수 목록은 다음과 같이 본문에 배치됩니다:root so 76 | 색상을 포함한 모든 속성 유형을 결합할 수 있습니다 77 | 가독성을 극대화하기 위해 알파벳 순으로 정렬합니다 78 | 79 | ----------------------------------------------------- */ 80 | 81 | /* Animations */ 82 | --anim-duration-none: 0; 83 | --anim-duration-superfast: 70ms; 84 | --anim-duration-fast: 140ms; 85 | --anim-duration-moderate: 300ms; 86 | --anim-duration-slow: 560ms; 87 | --anim-motion-smooth: cubic-bezier(0.45, 0.05, 0.55, 0.95); 88 | --anim-motion-delay: cubic-bezier(0.65, 0.05, 0.36, 1); 89 | --anim-motion-jumpy: cubic-bezier(0.68, -0.55, 0.27, 1.55); 90 | --anim-motion-swing: cubic-bezier(0, 0.55, 0.45, 1); 91 | 92 | /* Blockquotes */ 93 | --blockquote-border-thickness: 1px; 94 | --blockquote-border-color: var(--interactive-accent); 95 | --blockquote-font-style: normal; 96 | --blockquote-color: inherit; 97 | --blockquote-background-color: transparent; 98 | 99 | /* Bold */ 100 | --bold-weight: var(--font-semibold); 101 | --bold-color: inherit; 102 | --bold-background: var(--static-alpha-balck-150); 103 | 104 | /* Borders */ 105 | --border-width: 0.75x; 106 | 107 | /* Buttons */ 108 | --button-radius: var(--input-radius); 109 | 110 | /* Callouts */ 111 | --callout-border-width: 0px; 112 | --callout-border-opacity: 0.2; 113 | --callout-padding: var(--size-4-2) var(--size-4-5) var(--size-4-2) 114 | var(--size-4-5); 115 | --callout-radius: var(--radius-m); 116 | --callout-blend-mode: var(--highlight-mix-blend-mode); 117 | --callout-title-color: inherit; 118 | --callout-title-padding: var(--scale-dimension-size-0); 119 | --callout-title-size: var(--font-ui-medium); 120 | --callout-content-padding: 0; 121 | --callout-content-background: transparent; 122 | --callout-bug: var(--color-red-rgb); 123 | --callout-default: var(--mono-rgb-100); 124 | --callout-error: var(--color-red-rgb); 125 | --callout-example: var(--color-purple-rgb); 126 | --callout-fail: var(--color-red-rgb); 127 | --callout-important: var(--color-cyan-rgb); 128 | --callout-info: var(--color-blue-rgb); 129 | --callout-question: var(--color-yellow-rgb); 130 | --callout-success: var(--color-green-rgb); 131 | --callout-summary: var(--mono-rgb-100); 132 | --callout-tip: var(--color-cyan-rgb); 133 | --callout-todo: var(--color-blue-rgb); 134 | --callout-warning: var(--color-orange-rgb); 135 | --callout-quote: 158, 158, 158; 136 | 137 | /* Canvas */ 138 | --canvas-dot-pattern: var(--color-base-30); 139 | --canvas-color-1: var(--color-red-rgb); 140 | --canvas-color-2: var(--color-orange-rgb); 141 | --canvas-color-3: var(--color-yellow-rgb); 142 | --canvas-color-4: var(--color-green-rgb); 143 | --canvas-color-5: var(--color-cyan-rgb); 144 | --canvas-color-6: var(--color-purple-rgb); 145 | 146 | /* Checkboxes */ 147 | --checkbox-radius: var(--radius-m); 148 | --checkbox-size: calc(var(--font-text-size) * 1.1); 149 | --checkbox-marker-color: var(--background-primary); 150 | --checkbox-color: var(--interactive-accent); 151 | --checkbox-color-hover: var(--interactive-accent-hover); 152 | --checkbox-border-color: var(--text-faint); 153 | --checkbox-border-color-hover: var(--text-muted); 154 | --checklist-done-decoration: line-through; 155 | --checklist-done-color: var(--text-fade); 156 | 157 | /* Code */ 158 | --code-white-space: pre-wrap; 159 | --code-size: var(--font-smaller); 160 | --code-background: var(--color-gray-alpha-50); 161 | --code-normal: var(--text-muted); 162 | --code-comment: var(--text-fade); 163 | --code-function: var(--color-yellow); 164 | --code-important: var(--color-orange); 165 | --code-keyword: var(--color-blue); 166 | --code-operator: var(--color-red); 167 | --code-property: var(--color-cyan); 168 | --code-punctuation: var(--text-muted); 169 | --code-string: var(--color-green); 170 | --code-tag: var(--color-red); 171 | --code-value: var(--color-purple); 172 | 173 | /* Collapse icons */ 174 | --collapse-icon-color: var(--text-faint); 175 | --collapse-icon-color-collapsed: var(--text-accent); 176 | 177 | /* Cursor */ 178 | --cursor: default; 179 | --cursor-link: pointer; 180 | --cursor-action: pointer; 181 | 182 | /* Dialogs - e.g. small modals, confirmations */ 183 | --dialog-width: 560px; 184 | --dialog-max-width: 80vw; 185 | --dialog-max-height: 85vh; 186 | 187 | /* Dividers — between panes */ 188 | --divider-color: var(--background-modifier-border); 189 | --divider-color-hover: var(--interactive-accent); 190 | --divider-width: var(--scale-dimension-size-10); 191 | --divider-width-hover: var(--scale-dimension-size-25); 192 | --divider-vertical-height: calc(100% - var(--header-height)); 193 | 194 | /* Dragging */ 195 | --drag-ghost-background: rgba(0, 0, 0, 0.85); 196 | --drag-ghost-text-color: #fff; 197 | 198 | /* Embeds */ 199 | --embed-max-height: 4000px; 200 | --embed-canvas-max-height: 400px; 201 | --embed-background: inherit; 202 | --embed-border-left: 2px solid var(--interactive-accent); 203 | --embed-border-right: none; 204 | --embed-border-top: none; 205 | --embed-border-bottom: none; 206 | --embed-padding: 0 0 0 var(--size-4-6); 207 | --embed-font-style: inherit; 208 | 209 | /* Blocks */ 210 | --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), 211 | inset 0 0 0 1px var(--background-modifier-border); 212 | 213 | /* File layout */ 214 | --file-line-width: 640px; 215 | --file-folding-offset: 24px; 216 | --file-margins: var(--size-4-8); 217 | --file-header-font-size: var(--font-ui-small); 218 | --file-header-font-weight: 500; 219 | --file-header-border: var(--border-width) solid transparent; 220 | --file-header-justify: center; 221 | 222 | /* Relative font sizes */ 223 | --font-smallest: 0.8rem; 224 | --font-smaller: 0.875rem; 225 | --font-small: 0.933rem; 226 | 227 | /* UI font sizes */ 228 | --font-ui-smaller: var(--scale-dimension-font-size-25); 229 | --font-ui-small: var(--scale-dimension-font-size-75); 230 | --font-ui-medium: var(--scale-dimension-font-size-200); 231 | --font-ui-large: var(--scale-dimension-font-size-400); 232 | 233 | /* Font weights */ 234 | --font-thin: 100; 235 | --font-extralight: 200; 236 | --font-light: 300; 237 | --font-normal: 400; 238 | --font-medium: 500; 239 | --font-semibold: 600; 240 | --font-bold: 700; 241 | --font-extrabold: 800; 242 | --font-black: 900; 243 | 244 | /* Footnotes */ 245 | --footnote-size: var(--font-smaller); 246 | 247 | /* Graphs */ 248 | --graph-controls-width: 240px; 249 | --graph-text: var(--text-normal); 250 | --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); 251 | --graph-node: var(--text-muted); 252 | --graph-node-unresolved: var(--text-faint); 253 | --graph-node-focused: var(--text-accent); 254 | --graph-node-tag: var(--color-green); 255 | --graph-node-attachment: var(--color-yellow); 256 | 257 | /* Headings */ 258 | --heading-formatting: var(--text-faint); 259 | --h1-color: inherit; 260 | --h2-color: inherit; 261 | --h3-color: inherit; 262 | --h4-color: inherit; 263 | --h5-color: inherit; 264 | --h6-color: inherit; 265 | --h1-line-height: 1.2; 266 | --h2-line-height: 1.2; 267 | --h3-line-height: 1.3; 268 | --h4-line-height: 1.4; 269 | --h5-line-height: var(--line-height-normal); 270 | --h6-line-height: var(--line-height-normal); 271 | --h1-size: 1.375rem; 272 | --h2-size: 1.25rem; 273 | --h3-size: 1.125rem; 274 | --h4-size: 1rem; 275 | --h5-size: 0.875rem; 276 | --h6-size: 0.813rem; 277 | --h1-style: normal; 278 | --h2-style: normal; 279 | --h3-style: normal; 280 | --h4-style: normal; 281 | --h5-style: small-caps; 282 | --h6-style: small-caps; 283 | --h1-variant: normal; 284 | --h2-variant: normal; 285 | --h3-variant: normal; 286 | --h4-variant: normal; 287 | --h5-variant: normal; 288 | --h6-variant: normal; 289 | --h1-weight: 600; 290 | --h2-weight: 600; 291 | --h3-weight: 600; 292 | --h4-weight: 600; 293 | --h5-weight: 600; 294 | --h6-weight: 600; 295 | 296 | /* View header */ 297 | --header-height: 42px; 298 | 299 | /* Horizontal rules */ 300 | --hr-color: var(--background-modifier-border); 301 | --hr-thickness: 1px; 302 | 303 | /* Icons */ 304 | --icon-size: var(--icon-m); 305 | --icon-stroke: var(--icon-m-stroke-width); 306 | --icon-xs: 14px; 307 | --icon-s: 16px; 308 | --icon-m: 18px; 309 | --icon-l: 18px; 310 | --icon-xl: 32px; 311 | --icon-xs-stroke-width: 2px; 312 | --icon-s-stroke-width: 2px; 313 | --icon-m-stroke-width: 1.75px; 314 | --icon-l-stroke-width: 1.75px; 315 | --icon-xl-stroke-width: 1.25px; 316 | --icon-color: var(--text-muted); 317 | --icon-color-hover: var(--text-muted); 318 | --icon-color-active: var(--text-accent); 319 | --icon-color-focused: var(--text-normal); 320 | --icon-opacity: 0.6; 321 | --icon-opacity-hover: 1; 322 | --icon-opacity-active: 1; 323 | --clickable-icon-radius: var(--radius-m); 324 | 325 | /* Indentation guide */ 326 | --indentation-guide-width: 1px; 327 | --indentation-guide-color: rgba(var(--mono-rgb-100), 0.1); 328 | --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); 329 | 330 | /* Inline title */ 331 | --inline-title-color: var(--h1-color); 332 | --inline-title-font: var(--h1-font); 333 | --inline-title-line-height: var(--h1-line-height); 334 | --inline-title-size: var(--h1-size); 335 | --inline-title-style: var(--h1-style); 336 | --inline-title-variant: var(--h1-variant); 337 | --inline-title-weight: var(--h1-weight); 338 | 339 | /* Inputs */ 340 | --input-height: var(--scale-dimension-size-400); 341 | --input-radius: var(--radius-m); 342 | --input-font-weight: var(--font-normal); 343 | --input-border-width: var(--scale-dimension-size-0); 344 | 345 | /* Italic */ 346 | --italic-color: inherit; 347 | 348 | /* Z-index */ 349 | --layer-cover: 5; 350 | --layer-sidedock: 10; 351 | --layer-status-bar: 15; 352 | --layer-popover: 30; 353 | --layer-slides: 45; 354 | --layer-modal: 50; 355 | --layer-notice: 60; 356 | --layer-menu: 65; 357 | --layer-tooltip: 70; 358 | --layer-dragged-item: 80; 359 | 360 | /* Line heights */ 361 | --line-height-large: 1.6; 362 | --line-height-normal: 1.5; 363 | --line-height-tight: 1.3; 364 | 365 | /* Links */ 366 | --link-color: var(--text-accent); 367 | --link-color-hover: var(--text-accent-hover); 368 | --link-decoration: none; 369 | --link-decoration-hover: underline; 370 | --link-decoration-thickness: auto; 371 | --link-external-color: var(--text-accent); 372 | --link-external-color-hover: var(--text-accent-hover); 373 | --link-external-decoration: none; 374 | --link-external-decoration-hover: underline; 375 | --link-external-filter: none; 376 | --link-unresolved-color: var(--text-accent); 377 | --link-unresolved-opacity: 0.6; 378 | --link-unresolved-filter: none; 379 | --link-unresolved-decoration-style: solid; 380 | --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); 381 | 382 | /* Lists */ 383 | --list-indent: 1rem; 384 | --list-spacing: 0.14rem; 385 | --list-marker-color: var(--color-base-35); 386 | --list-marker-color-hover: var(--text-muted); 387 | --list-marker-color-collapsed: var(--text-accent); 388 | --list-bullet-border: none; 389 | --list-bullet-radius: 50%; 390 | --list-bullet-size: 0.2rem; 391 | --list-bullet-transform: none; 392 | --list-numbered-style: decimal; 393 | 394 | /* File navigator */ 395 | --nav-item-size: var(--font-ui-small); 396 | --nav-item-color: var(--text-muted); 397 | --nav-item-color-hover: var(--text-normal); 398 | --nav-item-color-active: var(--text-normal); 399 | --nav-item-color-selected: var(--text-normal); 400 | --nav-item-color-highlighted: var(--text-accent-hover); 401 | --nav-item-background-hover: var(--background-modifier-hover); 402 | --nav-item-background-active: var(--background-modifier-hover); 403 | --nav-item-background-selected: hsla(var(--color-accent-hsl), 0.2); 404 | --nav-item-padding: var(--size-4-1) var(--size-4-2); 405 | --nav-item-parent-padding: var(--nav-item-padding); 406 | --nav-item-children-padding-left: var(--size-4-2); 407 | --nav-item-children-margin-left: var(--size-4-3); 408 | --nav-item-weight: inherit; 409 | --nav-item-weight-hover: var(--bold-weight); 410 | --nav-item-weight-active: var(--bold-weight); 411 | --nav-item-white-space: nowrap; 412 | --nav-indentation-guide-width: var(--indentation-guide-width); 413 | --nav-indentation-guide-color: var(--indentation-guide-color); 414 | --nav-collapse-icon-color: var(--collapse-icon-color); 415 | --nav-collapse-icon-color-collapsed: var(--text-faint); 416 | 417 | /* Modals - e.g. settings, community themes, community plugins */ 418 | --modal-background: var(--background-primary); 419 | --modal-width: 90vw; 420 | --modal-height: 85vh; 421 | --modal-max-width: 1100px; 422 | --modal-max-height: 1000px; 423 | --modal-max-width-narrow: 800px; 424 | --modal-border-width: var(--border-width); 425 | --modal-border-color: var( 426 | --color-base-40, 427 | var(--background-modifier-border-focus) 428 | ); 429 | --modal-radius: var(--radius-l); 430 | --modal-community-sidebar-width: 280px; 431 | 432 | /* Popovers - file previews */ 433 | --popover-width: 450px; 434 | --popover-height: 400px; 435 | --popover-max-height: 70vh; 436 | --popover-pdf-width: 600px; 437 | --popover-pdf-height: 800px; 438 | --popover-font-size: var(--font-text-size); 439 | 440 | /* Prompts - e.g. quick switcher, command palette */ 441 | --prompt-width: 700px; 442 | --prompt-max-width: 62vw; 443 | --prompt-max-height: 70vh; 444 | --prompt-border-width: var(--border-width); 445 | --prompt-border-color: var( 446 | --color-base-40, 447 | var(--background-modifier-border-focus) 448 | ); 449 | 450 | /* Radiuses */ 451 | --radius-s: var(--scale-radius-1); 452 | --radius-m: var(--scale-radius-3); 453 | --radius-l: var(--scale-radius-4); 454 | --radius-xl: var(--scale-radius-5); 455 | --radius-full: var(--scale-dimension-size-max); 456 | 457 | /* Ribbon */ 458 | --ribbon-background: var(--background-primary); 459 | --ribbon-background-collapsed: var(--background-primary); 460 | --ribbon-width: var(--scale-dimension-size-600); 461 | --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); 462 | 463 | /* Scrollbars */ 464 | --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2); 465 | --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05); 466 | --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1); 467 | 468 | /* Search */ 469 | --search-clear-button-color: var(--text-muted); 470 | --search-clear-button-size: 13px; 471 | --search-icon-color: var(--text-muted); 472 | --search-icon-size: 18px; 473 | --search-result-background: var(--background-primary); 474 | 475 | /* Layout sizing - for padding and margins */ 476 | --size-2-1: 2px; 477 | --size-2-2: 4px; 478 | --size-2-3: 6px; 479 | --size-4-1: 4px; 480 | --size-4-2: 8px; 481 | --size-4-3: 12px; 482 | --size-4-4: 16px; 483 | --size-4-5: 20px; 484 | --size-4-6: 24px; 485 | --size-4-8: 32px; 486 | --size-4-9: 36px; 487 | --size-4-12: 48px; 488 | --size-4-16: 64px; 489 | --size-4-18: 72px; 490 | 491 | /* Sidebar */ 492 | --sidebar-markdown-font-size: calc(var(--font-text-size) * 0.9); 493 | --sidebar-tab-text-display: none; 494 | 495 | /* Sliders */ 496 | --slider-thumb-border-width: 1px; 497 | --slider-thumb-border-color: var(--background-modifier-border-hover); 498 | --slider-thumb-height: 18px; 499 | --slider-thumb-width: 18px; 500 | --slider-thumb-y: -6px; 501 | --slider-thumb-radius: 50%; 502 | --slider-s-thumb-size: 15px; 503 | --slider-s-thumb-position: -5px; 504 | --slider-track-background: var(--background-modifier-border); 505 | --slider-track-height: 3px; 506 | 507 | /* Status bar */ 508 | --status-bar-background: var(--background-secondary); 509 | --status-bar-border-color: var(--divider-color); 510 | --status-bar-border-width: 1px 0 0 1px; 511 | --status-bar-font-size: var(--font-ui-smaller); 512 | --status-bar-text-color: var(--text-muted); 513 | --status-bar-position: fixed; 514 | --status-bar-radius: var(--radius-m); 515 | 516 | /* Swatch for color inputs */ 517 | --swatch-radius: 14px; 518 | --swatch-height: 24px; 519 | --swatch-width: 24px; 520 | --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); 521 | 522 | /* Tabs */ 523 | --tab-background-active: var(--background-primary); 524 | --tab-text-color: var(--text-faint); 525 | --tab-text-color-active: var(--text-muted); 526 | --tab-text-color-focused: var(--text-muted); 527 | --tab-text-color-focused-active: var(--text-muted); 528 | --tab-text-color-focused-highlighted: var(--text-accent); 529 | --tab-text-color-focused-active-current: var(--text-normal); 530 | --tab-font-size: var(--font-ui-small); 531 | --tab-font-weight: inherit; 532 | --tab-container-background: var(--background-secondary); 533 | --tab-divider-color: var(--background-modifier-border-hover); 534 | --tab-outline-color: var(--divider-color); 535 | --tab-outline-width: 1px; 536 | --tab-curve: 6px; 537 | --tab-radius: var(--radius-s); 538 | --tab-radius-active: 6px 6px 0 0; 539 | --tab-width: 200px; 540 | --tab-max-width: 320px; 541 | 542 | /* Stacked tabs */ 543 | --tab-stacked-pane-width: 700px; 544 | --tab-stacked-header-width: var(--header-height); 545 | --tab-stacked-font-size: var(--font-ui-small); 546 | --tab-stacked-font-weight: 400; 547 | --tab-stacked-text-align: left; 548 | --tab-stacked-text-transform: rotate(0deg); 549 | --tab-stacked-text-writing-mode: vertical-lr; 550 | --tab-stacked-shadow: -8px 0 8px 0 rgba(0, 0, 0, 0.05); 551 | 552 | /* Tables */ 553 | --table-background: transparent; 554 | --table-border-width: 1px; 555 | --table-border-color: var(--background-modifier-border-row); 556 | --table-white-space: normal; 557 | --table-header-background: var(--background-secondary); 558 | --table-header-background-hover: inherit; 559 | --table-header-border-width: var(--table-border-width); 560 | --table-header-border-color: var(--table-border-color); 561 | --table-header-font: inherit; 562 | --table-header-size: var(--font-ui-small); 563 | --table-header-weight: var(--bold-weight); 564 | --table-header-color: var(--text-normal); 565 | --table-text-size: var(--font-ui-medium); 566 | --table-text-color: inherit; 567 | --table-column-max-width: none; 568 | --table-column-alt-background: var(--table-background); 569 | --table-column-first-border-width: var(--table-border-width); 570 | --table-column-last-border-width: var(--table-border-width); 571 | --table-row-background-hover: var(--table-background); 572 | --table-row-alt-background: var(--table-background); 573 | --table-row-last-border-width: var(--table-border-width); 574 | 575 | /* Tags */ 576 | --tag-size: var(--font-smaller); 577 | --tag-color: var(--text-accent); 578 | --tag-color-hover: var(--text-accent); 579 | --tag-decoration: none; 580 | --tag-decoration-hover: none; 581 | --tag-background: hsla(var(--interactive-accent-hsl), 0.1); 582 | --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); 583 | --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); 584 | --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); 585 | --tag-border-width: 0px; 586 | --tag-padding-x: 0.65rem; 587 | --tag-padding-y: 0.25rem; 588 | --tag-radius: var(--radius-m); 589 | 590 | /* Window frame */ 591 | --titlebar-background: var(--background-secondary); 592 | --titlebar-background-focused: var(--background-secondary); 593 | --titlebar-border-width: 0px; 594 | --titlebar-border-color: var(--background-modifier-border); 595 | --titlebar-text-color: var(--text-muted); 596 | --titlebar-text-color-focused: var(--text-normal); 597 | --titlebar-text-weight: var(--font-bold); 598 | 599 | /* Toggles */ 600 | --toggle-border-width: 2px; 601 | --toggle-width: 40px; 602 | --toggle-radius: 18px; 603 | --toggle-thumb-color: white; 604 | --toggle-thumb-radius: 18px; 605 | --toggle-thumb-height: 18px; 606 | --toggle-thumb-width: 18px; 607 | --toggle-s-border-width: 2px; 608 | --toggle-s-width: 34px; 609 | --toggle-s-thumb-height: 15px; 610 | --toggle-s-thumb-width: 15px; 611 | 612 | /* Vault name */ 613 | --vault-name-font-size: var(--font-ui-small); 614 | --vault-name-font-weight: var(--font-medium); 615 | --vault-name-color: var(--text-normal); 616 | 617 | /* Workspace */ 618 | --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); 619 | 620 | /* Color mappings ------------------------ */ 621 | /* Accent HSL values */ 622 | --accent-h: 223; 623 | --accent-s: 100%; 624 | --accent-l: 62%; 625 | 626 | /* Text */ 627 | --text-normal: var(--color-base-60); 628 | --text-muted: var(--color-base-50); 629 | --text-faint: var(--color-base-40); 630 | --text-fade: var(--color-base-30); 631 | --text-on-accent: white; 632 | --text-on-accent-inverted: black; 633 | --text-error: var(--color-red); 634 | --text-success: var(--color-green); 635 | --text-selection: hsla(var(--color-accent-hsl), 0.2); 636 | --text-accent: var(--color-accent); 637 | --text-accent-hover: var(--color-accent-2); 638 | --interactive-accent-hsl: var(--color-accent-hsl); 639 | --interactive-accent: var(--color-accent-1); 640 | --interactive-accent-hover: var(--color-accent-2); 641 | 642 | /* Not affected by Theme */ 643 | --static-black: #000000; 644 | --static-white: #ffffff; 645 | --static-blue: #3d73ff; 646 | --static-alpha-balck-700: rgba(0, 0, 0, 0.7); 647 | --static-alpha-balck-500: rgba(0, 0, 0, 0.5); 648 | --static-alpha-balck-200: rgba(0, 0, 0, 0.2); 649 | --static-alpha-balck-150: rgba(0, 0, 0, 0.1); 650 | --static-alpha-balck-100: rgba(0, 0, 0, 0.06); 651 | --static-alpha-white-200: rgba(255, 255, 255, 0.2); 652 | --static-alpha-white-500: rgba(255, 255, 255, 0.5); 653 | } 654 | 655 | .theme-light { 656 | color-scheme: light; 657 | --highlight-mix-blend-mode: darken; 658 | --mono-rgb-0: 255, 255, 255; 659 | --mono-rgb-100: 0, 0, 0; 660 | --color-red-rgb: 250, 82, 82; 661 | --color-red: #e93147; 662 | --color-green-rgb: 8, 185, 78; 663 | --color-green: #40c057; 664 | --color-orange-rgb: 253, 126, 20; 665 | --color-orange: #fd7e14; 666 | --color-yellow-rgb: 245, 162, 0; 667 | --color-yellow: #f5a200; 668 | --color-cyan-rgb: 40, 173, 202; 669 | --color-cyan: #28adca; 670 | --color-blue-rgb: 3, 105, 224; 671 | --color-blue: #3d73ff; 672 | --color-purple-rgb: 121, 80, 242; 673 | --color-purple: #7950f2; 674 | --color-pink-rgb: 245, 88, 173; 675 | --color-pink: #f558ad; 676 | 677 | /* Option, add the color palette you want to use. */ 678 | --color-base-00: #ffffff; 679 | --color-base-05: #fefefe; 680 | --color-base-10: #f8f9fa; 681 | --color-base-20: #f1f3f5; 682 | --color-base-25: #dee2e6; 683 | --color-base-30: #adb5bd; 684 | --color-base-35: #868e96; 685 | --color-base-40: #495057; 686 | --color-base-50: #343a40; 687 | --color-base-60: #212529; 688 | --color-base-70: #15171a; 689 | --color-base-100: #0e0e0f; 690 | --color-purple-100: #f3f0ff; 691 | --color-purple-200: #e5dbff; 692 | --color-purple-300: #d0bfff; 693 | --color-purple-400: #9775fa; 694 | --color-purple-500: #7950f2; 695 | --color-purple-600: #6741d9; 696 | --color-purple-700: #5f3dc4; 697 | --color-purple-800: #482e94; 698 | --color-purple-900: #2d1d5c; 699 | --color-blue-100: #e7f7ff; 700 | --color-blue-200: #d1e9ff; 701 | --color-blue-300: #b0cdff; 702 | --color-blue-400: #6a94fc; 703 | --color-blue-500: #3d73ff; 704 | --color-blue-600: #3160e1; 705 | --color-blue-700: #2c54cd; 706 | --color-blue-800: #1e409b; 707 | --color-blue-900: #002c67; 708 | --color-green-100: #ebfbee; 709 | --color-green-200: #d3f9d8; 710 | --color-green-300: #b2f2bb; 711 | --color-green-400: #69db7c; 712 | --color-green-500: #40c057; 713 | --color-green-600: #2f9e44; 714 | --color-green-700: #28803a; 715 | --color-green-800: #1c5928; 716 | --color-green-900: #0e2e15; 717 | --color-orange-100: #fff4e6; 718 | --color-orange-200: #ffe8cc; 719 | --color-orange-300: #ffd8a8; 720 | --color-orange-400: #ffa94d; 721 | --color-orange-500: #fd7e14; 722 | --color-orange-600: #e8590c; 723 | --color-orange-700: #d9480f; 724 | --color-orange-800: #8f300a; 725 | --color-orange-900: #4f1905; 726 | --color-red-100: #fff5f5; 727 | --color-red-200: #ffe3e3; 728 | --color-red-300: #ffc9c9; 729 | --color-red-400: #ff8787; 730 | --color-red-500: #fa5252; 731 | --color-red-600: #e03131; 732 | --color-red-700: #c92a2a; 733 | --color-red-800: #9b0404; 734 | --color-red-900: #700707; 735 | --color-ash-100: #f9f8f6; 736 | --color-ash-200: #f2f1ed; 737 | --color-ash-300: #eceae5; 738 | --color-ash-400: #e5e3dc; 739 | --color-ash-500: #dfddd3; 740 | --color-ash-600: #d8d6ca; 741 | --color-ash-700: #d2cfc1; 742 | --color-ash-800: #cbc8b9; 743 | --color-ash-900: #c5c1b0; 744 | --color-ash-1000: #bebaa7; 745 | --color-gray-alpha-25: rgba(0, 0, 0, 0.03); 746 | --color-gray-alpha-50: rgba(0, 0, 0, 0.05); 747 | --color-gray-alpha-75: rgba(0, 0, 0, 0.08); 748 | --color-gray-alpha-100: rgba(0, 0, 0, 0.1); 749 | --color-purple-alpha-100: rgba(121, 80, 242, 0.1); 750 | --color-purple-alpha-200: rgba(121, 80, 242, 0.2); 751 | --color-cyan-alpha-100: rgba(70, 192, 192, 0.1); 752 | --color-green-alpha-100: rgba(64, 192, 87, 0.1); 753 | --color-green-alpha-200: rgba(64, 192, 87, 0.2); 754 | --color-blue-alpha-100: rgba(61, 174, 255, 0.1); 755 | --color-blue-alpha-200: rgba(61, 174, 255, 0.2); 756 | --color-red-alpha-100: rgba(250, 82, 82, 0.1); 757 | --color-red-alpha-200: rgba(250, 82, 82, 0.2); 758 | --color-yellow-alpha-50: rgba(255, 232, 23, 0.05); 759 | --color-yellow-alpha-100: rgba(255, 232, 23, 0.2); 760 | --color-yellow-alpha-200: rgba(255, 232, 23, 0.3); 761 | --alpha-100: 0.1; 762 | --alpha-200: 0.2; 763 | --alpha-500: 0.5; 764 | 765 | --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 766 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 767 | --color-accent-1: hsl( 768 | var(--accent-h), 769 | var(--accent-s), 770 | calc(var(--accent-l) + 2.5%) 771 | ); 772 | 773 | --color-accent-2: hsl( 774 | var(--accent-h), 775 | var(--accent-s), 776 | calc(var(--accent-l) + 5%) 777 | ); 778 | 779 | /* Background and UI Semantic Tokens in Notes */ 780 | /* 백그라운드에 들어가는 시멘틱 토큰들 입니다. */ 781 | --background-primary: var(--color-ash-200); 782 | --background-primary-low: var(--color-ash-100); 783 | --background-primary-alt: var(--color-ash-500); 784 | --background-secondary: var(--color-ash-400); 785 | --background-secondary-alt: var(--color-ash-600); 786 | 787 | --background-modifier-hover: rgba(var(--mono-rgb-100), 0.075); 788 | --background-modifier-hover: var(--color-gray-alpha-100); 789 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 790 | --background-modifier-border: var(--color-ash-400); 791 | --background-modifier-border-row: var(--color-ash-500); 792 | --background-modifier-border-hover: var(--color-base-35); 793 | --background-modifier-border-focus: var(--color-ash-600); 794 | --background-modifier-error-rgb: var(--color-red-rgb); 795 | --background-modifier-error: var(--color-red); 796 | --background-modifier-error-hover: var(--color-red); 797 | --background-modifier-success-rgb: var(--color-green-rgb); 798 | --background-modifier-success: var(--color-green); 799 | --background-modifier-message: rgba(0, 0, 0, 0.9); 800 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 801 | --background-modifier-cover: var(--static-alpha-balck-700); 802 | 803 | /* Input */ 804 | --background-modifier-form-field: var(--color-ash-400); 805 | --interactive-normal: var(--color-ash-400); 806 | --interactive-hover: var(--color-ash-500); 807 | 808 | --text-highlight-bg: var(--color-ash-500); 809 | --text-highlight-bg-active: var(--color-yellow-alpha-100); 810 | --text-selection: hsla(var(--interactive-accent-hsl), 0.25); 811 | 812 | --input-shadow: transparent; 813 | --input-shadow-hover: transparent; 814 | --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 815 | 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07); 816 | --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 817 | 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); 818 | } 819 | 820 | .theme-dark { 821 | color-scheme: dark; 822 | --highlight-mix-blend-mode: lighten; 823 | --mono-rgb-0: 0, 0, 0; 824 | --mono-rgb-100: 255, 255, 255; 825 | --color-red-rgb: 250, 82, 82; 826 | --color-red: #fa5252; 827 | --color-orange-rgb: 255, 154, 103; 828 | --color-orange: #ff9a67; 829 | --color-yellow-rgb: 255, 228, 82; 830 | --color-yellow: #ffe452; 831 | --color-green-rgb: 105, 219, 124; 832 | --color-green: #69db7c; 833 | --color-cyan-rgb: 83, 223, 221; 834 | --color-cyan: #59e8d4; 835 | --color-blue-rgb: 2, 122, 255; 836 | --color-blue: #6a94fc; 837 | --color-purple-rgb: 168, 130, 255; 838 | --color-purple: #d0bfff; 839 | --color-pink-rgb: 250, 153, 205; 840 | --color-pink: #ffc9c9; 841 | 842 | --color-base-00: #0e0e0f; 843 | --color-base-05: #15171a; 844 | --color-base-10: #212529; 845 | --color-base-20: #343a40; 846 | --color-base-25: #495057; 847 | --color-base-30: #646b73; 848 | --color-base-35: #979fa7; 849 | --color-base-40: #adb5bd; 850 | --color-base-50: #dee2e6; 851 | --color-base-60: #f1f3f5; 852 | --color-base-70: #f8f9fa; 853 | --color-base-100: #fefefe; 854 | --color-purple-100: #2d1d5c; 855 | --color-purple-200: #482e94; 856 | --color-purple-300: #5f3dc4; 857 | --color-purple-400: #6741d9; 858 | --color-purple-500: #7950f2; 859 | --color-purple-600: #9775fa; 860 | --color-purple-700: #d0bfff; 861 | --color-purple-800: #e5dbff; 862 | --color-purple-900: #f3f0ff; 863 | --color-blue-100: #002c67; 864 | --color-blue-200: #1e409b; 865 | --color-blue-300: #2c54cd; 866 | --color-blue-400: #3160e1; 867 | --color-blue-500: #3d73ff; 868 | --color-blue-600: #6a94fc; 869 | --color-blue-700: #b0cdff; 870 | --color-blue-800: #d1e9ff; 871 | --color-blue-900: #e7f7ff; 872 | --color-green-100: #0e2e15; 873 | --color-green-200: #1c5928; 874 | --color-green-300: #28803a; 875 | --color-green-400: #2f9e44; 876 | --color-green-500: #40c057; 877 | --color-green-600: #69db7c; 878 | --color-green-700: #b2f2bb; 879 | --color-green-800: #d3f9d8; 880 | --color-green-900: #ebfbee; 881 | --color-orange-100: #4f1905; 882 | --color-orange-200: #8f300a; 883 | --color-orange-300: #d9480f; 884 | --color-orange-400: #e8590c; 885 | --color-orange-500: #fd7e14; 886 | --color-orange-600: #ffa94d; 887 | --color-orange-700: #ffd8a8; 888 | --color-orange-800: #ffe8cc; 889 | --color-orange-900: #fff4e6; 890 | --color-red-100: #700707; 891 | --color-red-200: #9b0404; 892 | --color-red-300: #c92a2a; 893 | --color-red-400: #e03131; 894 | --color-red-500: #fa5252; 895 | --color-red-600: #ff8787; 896 | --color-red-700: #ffc9c9; 897 | --color-red-800: #ffe3e3; 898 | --color-red-900: #fff5f5; 899 | --color-ash-100: #131311; 900 | --color-ash-200: #262521; 901 | --color-ash-300: #393832; 902 | --color-ash-400: #4c4a43; 903 | --color-ash-500: #5f5d54; 904 | --color-ash-600: #727064; 905 | --color-ash-700: #858275; 906 | --color-ash-800: #989586; 907 | --color-ash-900: #aba796; 908 | --color-ash-1000: #bebaa7; 909 | --color-gray-alpha-25: rgba(255, 255, 255, 0.03); 910 | --color-gray-alpha-50: rgba(255, 255, 255, 0.05); 911 | --color-gray-alpha-75: rgba(255, 255, 255, 0.08); 912 | --color-gray-alpha-100: rgba(255, 255, 255, 0.1); 913 | --color-purple-alpha-100: rgba(149, 114, 255, 0.2); 914 | --color-purple-alpha-200: rgba(149, 114, 255, 0.3); 915 | --color-cyan-alpha-100: rgba(83, 223, 221, 0.1); 916 | --color-green-alpha-100: rgba(64, 192, 87, 0.1); 917 | --color-green-alpha-200: rgba(64, 192, 87, 0.2); 918 | --color-red-alpha-100: rgba(250, 82, 82, 0.1); 919 | --color-red-alpha-200: rgba(250, 82, 82, 0.2); 920 | --color-yellow-alpha-50: rgba(255, 227, 78, 0.1); 921 | --color-yellow-alpha-100: rgba(255, 227, 78, 0.18); 922 | --color-yellow-alpha-200: rgba(255, 227, 78, 0.3); 923 | --color-blue-alpha-100: rgba(0, 102, 255, 0.2); 924 | --color-blue-alpha-200: rgba(0, 102, 255, 0.3); 925 | --alpha-100: 0.1; 926 | --alpha-200: 0.2; 927 | --alpha-500: 0.5; 928 | 929 | --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 930 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 931 | --color-accent-1: hsl( 932 | var(--accent-h), 933 | var(--accent-s), 934 | calc(var(--accent-l) - 3.8%) 935 | ); 936 | --color-accent-2: hsl( 937 | var(--accent-h), 938 | var(--accent-s), 939 | calc(var(--accent-l) + 3.8%) 940 | ); 941 | 942 | /* Backgrounds */ 943 | --background-primary: var(--color-base-10); 944 | --background-primary-low: var(--color-base-05); 945 | --background-primary-alt: var(--color-base-30); 946 | --background-secondary: var(--color-base-20); 947 | --background-secondary-alt: var(--color-gray-alpha-75); 948 | 949 | --background-modifier-hover: var(--color-gray-alpha-100); 950 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 951 | --background-modifier-border: var(--color-gray-alpha-50); 952 | --background-modifier-border-row: var(--color-base-10); 953 | --background-modifier-border-hover: var(--color-base-35); 954 | --background-modifier-border-focus: var(--color-base-25); 955 | --background-modifier-error-rgb: var(--color-red-rgb); 956 | --background-modifier-error: var(--color-red); 957 | --background-modifier-error-hover: var(--color-red); 958 | --background-modifier-success-rgb: var(--color-green-rgb); 959 | --background-modifier-success: var(--color-green); 960 | --background-modifier-message: rgba(0, 0, 0, 0.9); 961 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 962 | --background-modifier-cover: var(--static-alpha-balck-700); 963 | 964 | /* Input */ 965 | --background-modifier-form-field: var(--color-base-20); 966 | --interactive-normal: var(--color-base-20); 967 | --interactive-hover: var(--color-base-25); 968 | 969 | --text-highlight-bg: var(--color-gray-alpha-100); 970 | --text-highlight-bg-active: var(--color-yellow-alpha-50); 971 | --text-selection: hsla(var(--interactive-accent-hsl), 0.25); 972 | 973 | --input-shadow: transparent; 974 | --input-shadow-hover: transparent; 975 | --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 976 | 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 0px 15px 30px rgba(0, 0, 0, 0.3); 977 | --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 978 | 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); 979 | } 980 | 981 | /* ----------------------------------------------------- 982 | 983 | ✼ Note UI Detail Style ✼ 984 | 985 | ----------------------------------------------------- */ 986 | 987 | /*----Startup Progress Bar Screen----*/ 988 | /*Startup Progress Bar Window*/ 989 | .progress-bar { 990 | background-color: var(--background-primary); 991 | } 992 | 993 | /*Startup Text*/ 994 | .progress-bar .progress-bar-message { 995 | color: var(--text-normal); 996 | } 997 | 998 | /*Startup Progress Bar Background*/ 999 | .progress-bar-indicator .progress-bar-line { 1000 | background-color: var(--background-secondary); 1001 | border-radius: var(--radius-full); 1002 | } 1003 | 1004 | /*Startup Progress Bar Moving Line*/ 1005 | .progress-bar-indicator .progress-bar-subline { 1006 | background-color: var(--background-secondary-alt); 1007 | border-radius: var(--radius-full); 1008 | } 1009 | 1010 | /*----Workspace----*/ 1011 | /* ribbons, the thin vertical bars to the far left/right */ 1012 | .workspace-ribbon { 1013 | border-right: var(--scale-dimension-size-0) solid var(--divider-color); 1014 | } 1015 | 1016 | .workspace-tabs .workspace-leaf { 1017 | background-color: var(--background-primary); 1018 | } 1019 | 1020 | .workspace-tab-header-inner { 1021 | cursor: var(--cursor-action); 1022 | gap: var(--size-2-1); 1023 | border-radius: var(--radius-m); 1024 | padding: 8px; 1025 | } 1026 | 1027 | .mod-left-split .workspace-tab-header.is-active, 1028 | .mod-right-split .workspace-tab-header.is-active { 1029 | border-radius: var(--radius-m); 1030 | } 1031 | 1032 | /*----Workspace - Note Title Bar Text----*/ 1033 | .workspace-leaf.mod-active .view-header-title { 1034 | border-radius: var(--radius-m); 1035 | font-weight: var(--bold-weight); 1036 | } 1037 | 1038 | .view-header-title-parent .view-header-breadcrumb { 1039 | cursor: var(--cursor-action); 1040 | color: var(--text-faint); 1041 | padding: var(--scale-dimension-size-25) var(--scale-dimension-size-75); 1042 | margin-right: var(--scale-dimension-size-25); 1043 | border-radius: var(--radius-m); 1044 | } 1045 | 1046 | /*Side Panels items*/ 1047 | .side-dock-actions { 1048 | gap: var(--size-4-2); 1049 | } 1050 | 1051 | .workspace-tab-header.is-active .tree-item-self .search-result-file-matches { 1052 | border-radius: var(--radius-m); 1053 | } 1054 | 1055 | /*Icon Buttons*/ 1056 | .clickable-icon, 1057 | .status-bar-item.mod-clickable { 1058 | cursor: var(--cursor-action); 1059 | padding: var(--size-2-3); 1060 | border-radius: var(--radius-m); 1061 | } 1062 | 1063 | /*Folder*/ 1064 | 1065 | .nav-files-container { 1066 | padding: 0 var(--size-4-6) var(--size-4-6) var(--size-4-2); 1067 | } 1068 | 1069 | .nav-folder { 1070 | border-radius: var(--radius-m); 1071 | } 1072 | 1073 | .nav-folder-title { 1074 | margin-bottom: var(--size-2-2); 1075 | border-radius: var(--radius-m); 1076 | font-weight: var(--bold-weight); 1077 | } 1078 | 1079 | .nav-folder.mod-root .nav-folder > .nav-folder-children { 1080 | border-left: var(--nav-indentation-guide-width) dotted 1081 | var(--nav-indentation-guide-color); 1082 | } 1083 | 1084 | .workspace-leaf.mod-active .nav-file.has-focus > .nav-file-title { 1085 | border-radius: var(--radius-m); 1086 | font-weight: var(--bold-weight); 1087 | } 1088 | 1089 | /*--File Explorer--*/ 1090 | 1091 | /*Nav Top: Create Note, Sort, Create Folder*/ 1092 | .nav-header { 1093 | padding-top: var(--size-4-2); 1094 | padding-right: var(--size-4-2); 1095 | padding-bottom: var(--size-4-4); 1096 | padding-left: var(--size-4-2); 1097 | } 1098 | 1099 | .nav-buttons-container { 1100 | justify-content: flex-start; 1101 | } 1102 | 1103 | /*Files*/ 1104 | .nav-file { 1105 | border-radius: var(--radius-m); 1106 | } 1107 | .nav-file-title { 1108 | margin-bottom: var(--size-2-1); 1109 | border-radius: var(--radius-m); 1110 | } 1111 | 1112 | /* (also applies to many plugins displaying file lists in the side bar) */ 1113 | 1114 | /*Status Bar*/ 1115 | .status-bar { 1116 | bottom: var(--size-4-3); 1117 | right: var(--size-4-3); 1118 | padding: var(--size-4-2) var(--size-4-2) var(--size-4-2); 1119 | gap: var(--size-2-3); 1120 | } 1121 | 1122 | /*----Settings----*/ 1123 | /*All Popup Windows: Settings*/ 1124 | 1125 | .vertical-tab-header { 1126 | padding-left: var(--size-4-4); 1127 | padding-right: var(--size-4-4); 1128 | background-color: var(--background-primary); 1129 | } 1130 | 1131 | .vertical-tab-nav-item { 1132 | padding: var(--size-2-3) var(--size-4-2); 1133 | border-radius: var(--radius-m); 1134 | } 1135 | 1136 | /*Command Palette & Quick Switcher*/ 1137 | .prompt { 1138 | top: 100px; 1139 | width: var(--prompt-width); 1140 | max-width: var(--prompt-max-width); 1141 | max-height: var(--prompt-max-height); 1142 | overflow: hidden; 1143 | } 1144 | 1145 | .suggestion-item { 1146 | border-radius: var(--radius-m); 1147 | } 1148 | 1149 | .suggestion-aux { 1150 | gap: var(--size-2-2); 1151 | } 1152 | 1153 | .prompt-instructions { 1154 | border-top: 1px solid var(--background-primary-alt); 1155 | user-select: none; 1156 | font-size: var(--font-ui-smaller); 1157 | color: var(--text-muted); 1158 | padding: var(--size-4-2); 1159 | text-align: center; 1160 | display: flex; 1161 | flex-wrap: wrap; 1162 | justify-content: center; 1163 | gap: var(--size-4-3); 1164 | } 1165 | 1166 | .suggestion-container.mod-search-suggestion { 1167 | background-color: var(--background-primary-low); 1168 | border-radius: var(--radius-l); 1169 | border: 0px; 1170 | } 1171 | 1172 | .modal-close-button { 1173 | border-radius: var(--radius-m); 1174 | } 1175 | 1176 | /*----Notes----*/ 1177 | .cm-s-obsidian:not(.is-live-preview) { 1178 | } /*Source Mode*/ 1179 | 1180 | .markdown-source-view { 1181 | } /*Source Mode*/ 1182 | 1183 | .cm-s-obsidian.is-live-preview { 1184 | } /*Live Preview Mode*/ 1185 | 1186 | .markdown-preview-view { 1187 | } /*Reading Mode*/ 1188 | 1189 | /*--Emphasis--*/ 1190 | 1191 | /*Italic/Emphasis*/ 1192 | em { 1193 | letter-spacing: 0.5px; 1194 | } /*Reading View*/ 1195 | .cm-em { 1196 | letter-spacing: 0.5px; 1197 | } /*Editing View*/ 1198 | 1199 | /*Strikethrough*/ 1200 | .cm-strikethrough { 1201 | color: var(--text-faint); 1202 | } /*Editing View*/ 1203 | del { 1204 | color: var(--text-faint); 1205 | } /*Reading View*/ 1206 | 1207 | /*--Code--*/ 1208 | /*Inline Code*/ 1209 | .cm-s-obsidian span.cm-inline-code { 1210 | padding: var(--size-2-1) var(--size-2-2) var(--size-2-1) var(--size-2-2); 1211 | border-radius: var(--radius-m); 1212 | } /*Source Mode*/ 1213 | 1214 | .markdown-rendered code { 1215 | padding: var(--size-2-1) var(--size-2-2) var(--size-2-1) var(--size-2-2); 1216 | border-radius: var(--radius-m); 1217 | } /*Reading Mode*/ 1218 | 1219 | /*Codeblock (no language specified) */ 1220 | .markdown-preview-view pre { 1221 | border-radius: var(--radius-m); 1222 | padding: var(--size-4-4); 1223 | } /*Reading Mode*/ 1224 | 1225 | .markdown-preview-view img, 1226 | .markdown-rendered img { 1227 | border-radius: var(--scale-radius-2); 1228 | } 1229 | 1230 | .markdown-rendered table { 1231 | border-radius: var(--radius-m); 1232 | overflow-wrap: initial; 1233 | } 1234 | 1235 | .markdown-rendered tbody > tr > td { 1236 | font-size: 14px; 1237 | } 1238 | 1239 | /*--Lists--*/ 1240 | 1241 | /*Bullet List Text*/ 1242 | li { 1243 | margin-block-end: 0.12rem; 1244 | } /*Reading Mode*/ 1245 | 1246 | .markdown-rendered ul.has-list-bullet li p:first-of-type { 1247 | margin-block-end: 0.25rem; 1248 | } 1249 | 1250 | /*Checkbox List*/ 1251 | input[type="checkbox" i] { 1252 | cursor: var(--cursor-action); 1253 | } /*Reading Mode*/ 1254 | 1255 | /*--Blockquotes & Callout --*/ 1256 | 1257 | blockquote { 1258 | margin-block-start: 0rem; 1259 | margin-block-end: 0rem; 1260 | } 1261 | 1262 | .callout-title { 1263 | gap: 0px; 1264 | padding: var(--size-4-3) 0 var(--size-4-3) 0; 1265 | } 1266 | 1267 | .callout[data-callout="bug"] .callout-title { 1268 | margin-top: var(--size-4-3); 1269 | margin-bottom: var(--size-4-3); 1270 | gap: var(--size-4-2); 1271 | padding: var(--callout-title-padding); 1272 | } 1273 | 1274 | .callout[data-callout="bug"] .callout-title .callout-icon { 1275 | align-self: center; 1276 | padding-top: 0px; 1277 | } 1278 | 1279 | .callout[data-callout="default"] .callout-title { 1280 | margin-top: var(--size-4-3); 1281 | margin-bottom: var(--size-4-3); 1282 | gap: var(--size-4-2); 1283 | padding: var(--callout-title-padding); 1284 | } 1285 | 1286 | .callout[data-callout="default"] .callout-title .callout-icon { 1287 | align-self: center; 1288 | padding-top: 0px; 1289 | } 1290 | 1291 | .callout[data-callout="error"] .callout-title .callout-icon { 1292 | align-self: center; 1293 | padding-top: 0px; 1294 | } 1295 | 1296 | .callout[data-callout="error"] .callout-title { 1297 | margin-top: var(--size-4-3); 1298 | margin-bottom: var(--size-4-3); 1299 | gap: var(--size-4-2); 1300 | padding: var(--callout-title-padding); 1301 | } 1302 | 1303 | .callout[data-callout="example"] .callout-title { 1304 | margin-top: var(--size-4-3); 1305 | margin-bottom: var(--size-4-3); 1306 | gap: var(--size-4-2); 1307 | padding: var(--callout-title-padding); 1308 | } 1309 | 1310 | .callout[data-callout="example"] .callout-title .callout-icon { 1311 | align-self: center; 1312 | padding-top: 0px; 1313 | } 1314 | 1315 | .callout[data-callout="fail"] .callout-title { 1316 | margin-top: var(--size-4-3); 1317 | margin-bottom: var(--size-4-3); 1318 | gap: var(--size-4-2); 1319 | padding: var(--callout-title-padding); 1320 | } 1321 | 1322 | .callout[data-callout="fail"] .callout-title .callout-icon { 1323 | align-self: center; 1324 | padding-top: 0px; 1325 | } 1326 | 1327 | .callout[data-callout="important"] .callout-title { 1328 | margin-top: var(--size-4-3); 1329 | margin-bottom: var(--size-4-3); 1330 | gap: var(--size-4-2); 1331 | padding: var(--callout-title-padding); 1332 | } 1333 | 1334 | .callout[data-callout="important"] .callout-title .callout-icon { 1335 | align-self: center; 1336 | padding-top: 0px; 1337 | } 1338 | 1339 | .callout[data-callout="info"] .callout-title { 1340 | margin-top: var(--size-4-3); 1341 | margin-bottom: var(--size-4-3); 1342 | gap: var(--size-4-2); 1343 | padding: var(--callout-title-padding); 1344 | } 1345 | 1346 | .callout[data-callout="info"] .callout-title .callout-icon { 1347 | align-self: center; 1348 | padding-top: 0px; 1349 | } 1350 | 1351 | .callout[data-callout="question"] .callout-title { 1352 | margin-top: var(--size-4-3); 1353 | margin-bottom: var(--size-4-3); 1354 | gap: var(--size-4-2); 1355 | padding: var(--callout-title-padding); 1356 | } 1357 | 1358 | .callout[data-callout="question"] .callout-title .callout-icon { 1359 | align-self: center; 1360 | padding-top: 0px; 1361 | } 1362 | 1363 | .callout[data-callout="success"] .callout-title { 1364 | margin-top: var(--size-4-3); 1365 | margin-bottom: var(--size-4-3); 1366 | gap: var(--size-4-2); 1367 | padding: var(--callout-title-padding); 1368 | } 1369 | 1370 | .callout[data-callout="success"] .callout-title .callout-icon { 1371 | align-self: center; 1372 | padding-top: 0px; 1373 | } 1374 | 1375 | .callout[data-callout="summary"] .callout-title { 1376 | margin-top: var(--size-4-3); 1377 | margin-bottom: var(--size-4-3); 1378 | gap: var(--size-4-2); 1379 | padding: var(--callout-title-padding); 1380 | } 1381 | 1382 | .callout[data-callout="summary"] .callout-title .callout-icon { 1383 | align-self: center; 1384 | padding-top: 0px; 1385 | } 1386 | 1387 | .callout[data-callout="tip"] .callout-title { 1388 | margin-top: var(--size-4-3); 1389 | margin-bottom: var(--size-4-3); 1390 | gap: var(--size-4-2); 1391 | padding: var(--callout-title-padding); 1392 | } 1393 | 1394 | .callout[data-callout="tip"] .callout-title .callout-icon { 1395 | align-self: center; 1396 | padding-top: 0px; 1397 | } 1398 | 1399 | .callout[data-callout="todo"] .callout-title { 1400 | margin-top: var(--size-4-3); 1401 | margin-bottom: var(--size-4-3); 1402 | gap: var(--size-4-2); 1403 | padding: var(--callout-title-padding); 1404 | } 1405 | 1406 | .callout[data-callout="todo"] .callout-title .callout-icon { 1407 | align-self: center; 1408 | padding-top: 0px; 1409 | } 1410 | 1411 | .callout[data-callout="warning"] .callout-title { 1412 | margin-top: var(--size-4-3); 1413 | margin-bottom: var(--size-4-3); 1414 | gap: var(--size-4-2); 1415 | padding: var(--callout-title-padding); 1416 | } 1417 | 1418 | .callout[data-callout="warning"] .callout-title .callout-icon { 1419 | align-self: center; 1420 | padding-top: 0px; 1421 | } 1422 | 1423 | .callout[data-callout="quote"] .callout-title { 1424 | margin-top: var(--size-4-3); 1425 | margin-bottom: var(--size-4-3); 1426 | gap: var(--size-4-2); 1427 | padding: var(--callout-title-padding); 1428 | } 1429 | 1430 | .callout[data-callout="quote"] .callout-title .callout-icon { 1431 | align-self: center; 1432 | padding-top: 0px; 1433 | } 1434 | 1435 | .callout-title-inner { 1436 | font-weight: var(--font-normal); 1437 | border-left: none; 1438 | } 1439 | 1440 | .markdown-rendered blockquote { 1441 | padding: 0 0 0 var(--size-4-3); 1442 | color: var(--color-base-50); 1443 | } 1444 | 1445 | .callout-title-inner > blockquote { 1446 | font-weight: var(--font-normal); 1447 | border-left: 0px; 1448 | } 1449 | 1450 | .callout-icon { 1451 | align-self: baseline; 1452 | margin-top : var(--scale-dimension-size-0); 1453 | } 1454 | 1455 | .callout-content > p { 1456 | margin-block-start: 0.3rem; 1457 | } 1458 | 1459 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { 1460 | background-color: var(--blockquote-background-color); 1461 | padding: var(--size-4-2); 1462 | } 1463 | 1464 | /*--Tables--*/ 1465 | 1466 | .block-language-dataview, 1467 | .markdown-source-view.mod-cm6 .cm-content > [contenteditable="false"] { 1468 | border-radius: var(--radius-s); 1469 | } 1470 | 1471 | .markdown-rendered table { 1472 | width: 100%; 1473 | overflow-wrap: anywhere; 1474 | border-radius: var(--radius-m); 1475 | margin-bottom: var(--scale-dimension-size-25); 1476 | border-radius: var(--radius-m); 1477 | background-color: var(--color-gray-alpha-25); 1478 | } /*Reading Mode*/ 1479 | 1480 | /*Table Headers & Body*/ 1481 | .markdown-rendered td, 1482 | .markdown-rendered th { 1483 | padding-top: var(--size-4-3); 1484 | padding-bottom: var(--size-4-3); 1485 | } /*Reading Mode*/ 1486 | 1487 | .markdown-rendered tbody tr:nth-child(2n) { 1488 | background-color: var(--background-secondary); 1489 | } 1490 | 1491 | /* Data View */ 1492 | .table-view-table > thead > tr > th { 1493 | font-size: var(--font-ui-small); 1494 | border-bottom: solid 1px; 1495 | border-color: var(--table-border-color); 1496 | padding: var(--size-4-4); 1497 | } 1498 | 1499 | .table-view-table > tbody > tr > td { 1500 | padding: var(--size-4-4); 1501 | } 1502 | 1503 | .tree-item-self { 1504 | border-radius: var(--radius-m); 1505 | } 1506 | 1507 | /*--Search Tags--*/ 1508 | 1509 | .search-result-file-matches, 1510 | .search-result-file-match-destination-file { 1511 | border-radius: var(--radius-m); 1512 | } 1513 | 1514 | .search-result-file-matched-text { 1515 | font-weight: var(--bold-weight); 1516 | color: var(--text-accent); 1517 | background-color: var(--tag-background); 1518 | } 1519 | 1520 | /*--Frontmatter/Metadata/Yaml--*/ 1521 | .frontmatter-container { 1522 | border-radius: var(--radius-m); 1523 | background-color: var(--color-gray-alpha-25); 1524 | padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-3); 1525 | margin-bottom: var(--size-4-1); 1526 | } /*Reading Mode*/ 1527 | 1528 | .frontmatter-container .frontmatter-container-header { 1529 | color: var(--text-normal); 1530 | font-size: var(--font-smaller); 1531 | font-weight: var(--bold-weight); 1532 | letter-spacing: 0.8px; 1533 | } 1534 | 1535 | .frontmatter-container.is-collapsed .frontmatter-container-header { 1536 | color: var(--text-normal); 1537 | font-size: var(--font-smaller); 1538 | font-weight: var(--bold-weight); 1539 | letter-spacing: 0.8px; 1540 | border-bottom: 0px solid var(--background-modifier-border); 1541 | padding-bottom: 0px; 1542 | margin-bottom: 0px; 1543 | } 1544 | 1545 | .frontmatter-section { 1546 | overflow: auto; 1547 | border-bottom: 1px solid var(--background-modifier-border); 1548 | padding-top: var(--size-4-1); 1549 | padding-bottom: var(--size-4-3); 1550 | } 1551 | 1552 | .frontmatter-section-label { 1553 | color: var(--text-accent); 1554 | } 1555 | 1556 | /*Frontmatter Tag*/ 1557 | .frontmatter-container .frontmatter-alias { 1558 | background-color: var(--color-gray-alpha-100); 1559 | color: var(--text-normal); 1560 | border-radius: var(--radius-s); 1561 | padding: var(--size-2-3) var(--size-4-2) var(--size-2-3) var(--size-4-2); 1562 | } /*Reading Mode*/ 1563 | 1564 | /*--Embeds--*/ 1565 | 1566 | iframe, 1567 | .workspace-leaf-content img:not([width]), 1568 | .workspace-leaf-content audio, 1569 | .workspace-leaf-content video { 1570 | border-radius: var(--radius-m); 1571 | width: 100%; 1572 | } 1573 | 1574 | .markdown-source-view.mod-cm6 .cm-embed-block { 1575 | overflow-wrap: anywhere; 1576 | } /*Live Preview Mode*/ 1577 | .markdown-source-view .markdown-embed:not(.mod-empty) { 1578 | } /*Live Preview Mode*/ 1579 | 1580 | 1581 | .markdown-embed-link { 1582 | border-radius: var(--radius-m); 1583 | } 1584 | 1585 | /*--Footnotes--*/ 1586 | 1587 | /*Reference Number in text*/ 1588 | .cm-s-obsidian span.cm-footref { 1589 | margin-left: var(--size-2-1); 1590 | color: var(--color-accent); 1591 | } /*Editing View*/ 1592 | 1593 | /*Footnote link in note*/ 1594 | .markdown-preview-view a.footnote-link { 1595 | margin-left: var(--size-2-1); 1596 | color: var(--color-accent); 1597 | } /*Reading View*/ 1598 | 1599 | /*Footnotes section at the bottom of the note*/ 1600 | 1601 | .cm-s-obsidian .cm-line.HyperMD-footnote { 1602 | background-color: var(--color-gray-alpha-75); 1603 | border-radius: var(--radius-m); 1604 | padding: var(--size-4-3); 1605 | margin-bottom: var(--size-2-3) !important; 1606 | } /*Editing View*/ 1607 | 1608 | .is-flashing { 1609 | transition: all 0.25s ease; 1610 | background-color: var(--text-highlight-bg); 1611 | color: var(--text-normal); 1612 | mix-blend-mode: var(--highlight-mix-blend-mode); 1613 | border-radius: var(--radius-s); 1614 | } /*Reading View*/ 1615 | 1616 | /*--Graph--*/ 1617 | 1618 | .graph-view.color-fill { 1619 | color: var(--text-muted); /*color of nodes*/ 1620 | } 1621 | .graph-view.color-fill-focused { 1622 | /*color of focused node/note*/ 1623 | color: var(--text-accent); 1624 | } 1625 | .theme-dark .graph-view.color-fill-tag, 1626 | .theme-light .graph-view.color-fill-tag { 1627 | /*dark mode tag color*/ 1628 | color: var(--color-yellow); 1629 | } 1630 | 1631 | .theme-dark .graph-view.color-fill-attachment, 1632 | .theme-light .graph-view.color-fill-attachment { 1633 | /*dark mode attachment color*/ 1634 | color: var(--color-blue-700); 1635 | } 1636 | 1637 | .graph-view.color-fill-unresolved { 1638 | /*unresolved(not created yet) notes*/ 1639 | color: var(--text-muted); 1640 | opacity: 0.8; 1641 | } 1642 | .graph-view.color-arrow { 1643 | /*arrow color*/ 1644 | color: var(--text-normal); 1645 | opacity: 0.8; 1646 | } 1647 | .graph-view.color-circle { 1648 | /*focused node border color*/ 1649 | color: var(--text-normal); 1650 | } 1651 | .graph-view.color-line { 1652 | /*link color*/ 1653 | color: var(--background-modifier-border); 1654 | } 1655 | .graph-view.color-text { 1656 | /*text color*/ 1657 | color: var(--text-normal); 1658 | } 1659 | .graph-view.color-fill-highlight { 1660 | /*focused node color*/ 1661 | color: var(--interactive-accent); 1662 | } 1663 | .graph-view.color-line-highlight { 1664 | /*focused node connections*/ 1665 | color: var(--interactive-accent); 1666 | } 1667 | 1668 | /* Etc Style ------------------------ */ 1669 | /* Mermaid */ 1670 | div.mermaid { 1671 | margin-left: 0 !important; 1672 | text-align: center; 1673 | resize: both; 1674 | overflow: auto; 1675 | margin-bottom: 2px; 1676 | position: relative; 1677 | max-height: 600px; 1678 | max-width: 100%; 1679 | background-color: var(--static-alpha-balck-100); 1680 | padding: var(--size-4-4); 1681 | border-radius: var(--radius-m); 1682 | } 1683 | 1684 | div.mermaid::after { 1685 | content: ""; 1686 | display: block; 1687 | width: 10px; 1688 | height: 10px; 1689 | position: absolute; 1690 | right: 0; 1691 | bottom: 0; 1692 | } 1693 | 1694 | .mermaid svg { 1695 | max-width: 100%; 1696 | height: auto; 1697 | } 1698 | 1699 | .menu { 1700 | border: 1px solid var(--background-modifier-border-focus); 1701 | } 1702 | --------------------------------------------------------------------------------