theme.css
1 /***** TABLE OF CONTENTS *****/ 2 /* TODO: Reformat entire CSS file as below. 3 /* 1. Font 4 /* 2. Colours 5 /* 2.1. Dark theme color variables 6 /* 2.2. Light theme color variables 7 /* 2.3. Dark theme implementation 8 /* 2.4. Light theme implementation 9 /* 3. General UI 10 /* 3.1. Title Bar 11 /* 4. Markdown (editor / preview) 12 /* 4.1. Headings 13 /* 4.1.1. Fix font weights 14 /* 4.2. Links 15 /* 4.2.1. Nifty arrow before internal links (also applies to embeds) 16 /* 4.3. Embeds 17 /* 4.4. Tables 18 /* 4.5. Popovers 19 /* 4.6. Task Lists 20 /* 4.7. Blockquotes 21 /* 4.8. Code 22 /* 4.9. Bulleted lists 23 /* 4.10. Misc Fixes 24 /* 5. Graph view colours 25 /* 6. Notion Colour Blocks 26 /* 7. In-document header (scrolls with the document) [remove for compatibility with Andy's mode] 27 /* 7.1. Adjustments for non-in-document headers (graphs, etc)\ 28 /* 7.2. Active pane border 29 /* 7.3. Misc fixes 30 /* 8. Tags 31 /* 8.1. Tag custom colours 32 /***** *****/ 33 34 /* 1. Font */ 35 body { 36 /* font stacks taken directly from Notion */ 37 --font-monospace: "Hack Nerd Font", "Source Code Pro", monospace; 38 -webkit-font-smoothing: auto; 39 --h1-color: var(--text-title-h1); 40 --h2-color: var(--text-title-h2); 41 --h3-color: var(--text-title-h3); 42 --h4-color: var(--text-title-h4); 43 --h5-color: var(--text-title-h5); 44 --h6-color: var(--text-title-h6); 45 } 46 47 /* 2. Colours */ 48 :root 49 { 50 /* 2.1 Dark theme color variables */ 51 --bg0-dark: #22282c; 52 --bg1-dark: #272f34; 53 --bg-dark: #2f383e; 54 --bg2-dark: #374247; 55 --bg3-dark: #404c51; 56 --bg4-dark: #4a555b; 57 --bg5-dark: #525c62; 58 --bg_visual: #503946; 59 --bg_red: #4e3e43; 60 --bg_green: #404d44; 61 --bg_blue: #394f5a; 62 --bg_yellow: #4a4940; 63 --shadow: #00000070; 64 65 --fg-dark: #d3c6aa; 66 --grey0-dark: #7f897d; 67 --grey1-dark: #859289; 68 --grey2-dark: #9aa79d; 69 70 --faded-red: #e67e80; 71 --faded-orange: #e69875; 72 --faded-yellow: #dbbc7f; 73 --faded-green: #a7c080; 74 --faded-aqua: #83c092; 75 --faded-blue: #7fbbb3; 76 --faded-purple: #d699b6; 77 78 --dim-red: #da6362; 79 --dim-orange: #d77f48; 80 --dim-yellow: #bf983d; 81 --dim-green: #899c40; 82 --dim-aqua: #569d79; 83 --dim-blue: #5a93a2; 84 --dim-purple: #b87b9d; 85 86 87 /* 2.2 Light theme color variables */ 88 --bg0-light: #f0edd8; 89 --bg1-light: #f6f1dd; 90 --bg-light: #fdf6e3; 91 --bg2-light: #f3efda; 92 --bg3-light: #edead5; 93 --bg4-light: #e4e1cd; 94 --bg5-light: #dfdbc8; 95 --grey0-light: #a4ad9e; 96 --grey1-light: #939f91; 97 --grey2-light: #879686; 98 --shadow-light: #3c474d20; 99 100 101 --bg_visual_light: #eaedc8; 102 --bg_red_light: #fbe3da; 103 --bg_green_light: #f0f1d2; 104 --bg_blue_light: #e9f0e9; 105 --bg_yellow_light: #faedcd; 106 107 --fg-light: #5c6a72; 108 109 --light-red: #f85552; 110 --light-orange: #f57d26; 111 --light-yellow: #bf983d; 112 --light-green: #899c40; 113 --light-aqua: #569d79; 114 --light-blue: #5a93a2; 115 --light-purple: #b87b9d; 116 117 --light-dim-red: #f1706f; 118 --light-dim-orange: #f39459; 119 --light-dim-yellow: #e4b649; 120 --light-dim-green: #a4bb4a; 121 --light-dim-aqua: #6ec398; 122 --light-dim-blue: #6cb3c6; 123 --light-dim-purple: #e092be; 124 125 126 } 127 128 /* 2.3 Dark theme implementation */ 129 .theme-dark 130 { 131 --background-primary: var(--bg-dark); 132 --background-primary-alt: var(--bg-dark); 133 --background-secondary: var(--bg-dark); 134 --background-secondary-alt: var(--bg-dark); 135 --text-normal: var(--fg-dark); 136 --text-faint: var(--grey1-dark); 137 --text-title-h1: var(--dim-red); 138 --text-title-h2: var(--dim-orange); 139 --text-title-h3: var(--dim-yellow); 140 --text-title-h4: var(--dim-green); 141 --text-title-h5: var(--dim-aqua); 142 --text-title-h6: var(--dim-purple); 143 --text-link: var(--faded-blue); 144 --text-a: var(--dim-aqua); 145 --text-a-hover: var(--faded-aqua); 146 --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */ 147 --pre-code: var(--bg1-dark); 148 --text-highlight-bg: var(--bg_green); 149 --interactive-accent: var(--dim-aqua); 150 --interactive-before: var(--bg5-dark); 151 --background-modifier-border: var(--bg5-dark); 152 --text-accent: var(--dim-blue); 153 --interactive-accent-rgb: var(--dim-blue); 154 --inline-code: var(--dim-blue); 155 --code-block: var(--fg-dark); 156 --vim-cursor: var(--faded-blue); 157 --text-selection: var(--bg5-dark); 158 } 159 160 /* 2.4 Light theme implementation */ 161 .theme-light 162 { 163 --background-primary: var(--bg-light); 164 --background-primary-alt: var(--bg-light); 165 --background-secondary: var(--bg-light); 166 --background-secondary-alt: var(--bg-light); 167 --text-normal: var(--fg-light); 168 --text-faint: var(--grey1-light); 169 --text-title-h1: var(--light-red); 170 --text-title-h2: var(--light-orange); 171 --text-title-h3: var(--light-yellow); 172 --text-title-h4: var(--light-green); 173 --text-title-h5: var(--light-aqua); 174 --text-title-h6: var(--light-purple); 175 --text-link: var(--light-blue); 176 --text-a: var(--light-dim-blue); 177 --text-a-hover: var(--light-blue); 178 --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */ 179 --pre-code: var(--bg1-light); 180 --text-highlight-bg: var(--light-dim-green); 181 --interactive-accent: var(--bg5-light); 182 --interactive-before: var(--bg5-light); 183 --background-modifier-border: var(--bg5-light); 184 --text-accent: var(--light-dim-green); 185 --interactive-accent-rgb: var(--light-dim-green); 186 --inline-code: var(--light-blue); 187 --code-block: var(--fg-light); 188 --vim-cursor: var(--light-blue); 189 --text-selection: rgba(189, 174, 147, 0.5); /* light3 */ 190 } 191 192 .theme-dark code[class*="language-"], 193 .theme-dark pre[class*="language-"], 194 .theme-light code[class*="language-"], 195 .theme-light pre[class*="language-"] 196 { 197 text-shadow: none ; 198 background-color: var(--pre-code) ; 199 } 200 201 /* 3. General UI */ 202 .view-header-title { 203 font-weight: 700; 204 } 205 206 /* 3.1. Title bar */ 207 .titlebar { 208 background-color: var(--background-secondary-alt); 209 } 210 211 .titlebar-inner { 212 color: var(--text-normal); 213 } 214 215 .graph-view.color-circle, 216 .graph-view.color-fill-highlight, 217 .graph-view.color-line-highlight 218 { 219 color: var(--interactive-accent-rgb) ; 220 } 221 .graph-view.color-text 222 { 223 color: var(--text-a-hover) ; 224 } 225 /* 226 .graph-view.color-fill 227 { 228 color: var(--background-secondary); 229 } 230 .graph-view.color-line 231 { 232 color: var(--background-modifier-border); 233 } 234 */ 235 236 html, 237 body 238 { 239 font-size: 16px ; 240 } 241 242 strong 243 { 244 font-weight: 600 ; 245 } 246 247 a, 248 .cm-hmd-internal-link 249 { 250 color: var(--text-a) ; 251 text-decoration: none ; 252 } 253 254 a:hover, 255 .cm-hmd-internal-link:hover, 256 .cm-url 257 { 258 color: var(--text-a-hover) ; 259 text-decoration: none ; 260 } 261 262 263 /*---------------------------------------------------------------- 264 TAGS 265 ----------------------------------------------------------------*/ 266 267 .token.tag { 268 padding: 0px 0px; 269 background-color: transparent; 270 border: none; 271 } 272 273 .token.tag:hover { 274 background: transparent; 275 color: var(--text-a-hover) !important; 276 } 277 278 /*---------------------------------------------------------------- 279 TAG PILLS 280 ----------------------------------------------------------------*/ 281 .markdown-preview-section h1 a.tag, 282 .markdown-preview-section h2 a.tag, 283 .markdown-preview-section h3 a.tag, 284 .markdown-preview-section h4 a.tag, 285 .markdown-preview-section h5 a.tag, 286 .markdown-preview-section h4 a.tag { 287 font-weight: inherit; 288 } 289 290 .tag { 291 background-color: var(--tag-base); 292 border: 1px solid var(--interactive-accent); 293 color: var(--text-a); 294 font-weight: 500; 295 padding: 1.5px 6px; 296 padding-left: 6px; 297 padding-right: 6px; 298 text-align: center; 299 text-decoration: none !important; 300 display: inline-block; 301 cursor: pointer; 302 border-radius: 8px; 303 transition: 0.2s ease-in-out; 304 } 305 306 .tag:hover { 307 color: var(--interactive-accent); 308 } 309 310 /*---------------------------------------------------------------- 311 TAG REF STYLING 312 ----------------------------------------------------------------*/ 313 314 .tag[href^="#❗️"], 315 .tag[href^="#important❗️"] { 316 background-color: var(--tag-base); 317 border: 1px solid var(--boldred); 318 } 319 320 .tag[href^="#📓"], 321 .tag[href^="#journal📓"] { 322 background-color: var(--tag-base); 323 border: 1px solid var(--purple); 324 } 325 326 .tag[href^="#🌱"], 327 .tag[href^="#seedling🌱"], 328 .tag[href^="#🌿"], 329 .tag[href^="#budding🌿"], 330 .tag[href^="#🌳"], 331 .tag[href^="#evergreen🌳"] { 332 background-color: var(--tag-base); 333 border: 1px solid var(--boldgreen); 334 } 335 336 mark 337 { 338 background-color: var(--text-mark) ; 339 } 340 341 .view-actions a 342 { 343 color: var(--text-normal) ; 344 } 345 346 .view-actions a:hover 347 { 348 color: var(--text-a) ; 349 } 350 351 .HyperMD-codeblock-bg 352 { 353 background-color: var(--pre-code) ; 354 } 355 356 .HyperMD-codeblock 357 { 358 line-height: 1.4em ; 359 color: var(--code-block) ; 360 } 361 362 .HyperMD-codeblock-begin 363 { 364 border-top-left-radius: 4px ; 365 border-top-right-radius: 4px ; 366 } 367 368 .HyperMD-codeblock-end 369 { 370 border-bottom-left-radius: 4px ; 371 border-bottom-right-radius: 4px ; 372 } 373 374 th 375 { 376 font-weight: 600 ; 377 } 378 379 thead 380 { 381 border-bottom: 2px solid var(--background-modifier-border) ; 382 } 383 384 .HyperMD-table-row 385 { 386 line-height: normal ; 387 padding-left: 4px ; 388 padding-right: 4px ; 389 /* background-color: var(--pre-code) ; */ 390 } 391 392 .HyperMD-table-row-0 393 { 394 padding-top: 4px ; 395 } 396 397 .CodeMirror-foldgutter-folded, 398 .is-collapsed .nav-folder-collapse-indicator 399 { 400 color: var(--text-a) ; 401 } 402 403 .nav-file-tag 404 { 405 color: var(--text-a) ; 406 } 407 408 .is-active .nav-file-title 409 { 410 color: var(--text-a) ; 411 background-color: var(--background-primary-alt) ; 412 } 413 414 .nav-file-title 415 { 416 border-bottom-left-radius: 0 ; 417 border-bottom-right-radius: 0 ; 418 border-top-left-radius: 0 ; 419 border-top-right-radius: 0 ; 420 } 421 422 img 423 { 424 display: block ; 425 margin-left: auto ; 426 margin-right: auto ; 427 } 428 429 .HyperMD-list-line 430 { 431 padding-top: 0 ; 432 } 433 434 .CodeMirror-code, 435 .CodeMirror-linenumber, 436 .cm-formatting 437 { 438 font-family: var(--font-monospace) ; 439 font-size: 0.9em; 440 } 441 442 .markdown-preview-section pre code, 443 .markdown-preview-section code 444 { 445 font-size: 0.9em ; 446 background-color: var(--pre-code) ; 447 } 448 449 .markdown-preview-section pre code 450 { 451 padding: 4px ; 452 line-height: 1.4em ; 453 display: block ; 454 color: var(--code-block) ; 455 } 456 457 .markdown-preview-section code 458 { 459 color: var(--inline-code) ; 460 } 461 462 .cm-s-obsidian, 463 .cm-inline-code 464 { 465 -webkit-font-smoothing: auto ; 466 } 467 468 .cm-inline-code 469 { 470 color: var(--inline-code) ; 471 background-color: var(--pre-code) ; 472 padding: 1px ; 473 } 474 475 .workspace-leaf-header-title 476 { 477 font-weight: 600 ; 478 } 479 480 .side-dock-title 481 { 482 padding-top: 15px ; 483 font-size: 20px ; 484 } 485 486 .side-dock-ribbon-tab:hover, 487 .side-dock-ribbon-action:hover, 488 .side-dock-ribbon-action.is-active:hover, 489 .nav-action-button:hover, 490 .side-dock-collapse-btn:hover 491 { 492 color: var(--text-a); 493 } 494 495 .side-dock 496 { 497 border-right: 0 ; 498 } 499 500 .cm-s-obsidian, 501 .markdown-preview-view 502 { 503 /* padding-left: 10px ; */ 504 padding-right: 10px ; 505 } 506 507 /* vertical resize-handle */ 508 .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, 509 .workspace-split.mod-left-split > .workspace-leaf-resize-handle, 510 .workspace-split.mod-right-split > .workspace-leaf-resize-handle 511 { 512 width: 1px ; 513 background-color: var(--dim-aqua); 514 } 515 516 /* horizontal resize-handle */ 517 .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle 518 { 519 height: 1px ; 520 background-color: var(--dim-aqua); 521 } 522 523 /* Remove vertical split padding */ 524 .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content, 525 .workspace-split.mod-vertical > .workspace-split, 526 .workspace-split.mod-vertical > .workspace-leaf, 527 .workspace-tabs 528 { 529 padding-right: 0px; 530 } 531 532 .markdown-embed-title 533 { 534 font-weight: 600 ; 535 } 536 537 .markdown-embed 538 { 539 padding-left: 10px ; 540 padding-right: 10px ; 541 margin-left: 10px ; 542 margin-right: 10px ; 543 } 544 545 .cm-header-1, 546 .markdown-preview-section h1 547 { 548 font-weight: 500 ; 549 font-size: 34px ; 550 color: var(--text-title-h1) ; 551 } 552 553 .cm-header-2, 554 .markdown-preview-section h2 555 { 556 font-weight: 500 ; 557 font-size: 26px ; 558 color: var(--text-title-h2) ; 559 } 560 561 .cm-header-3, 562 .markdown-preview-section h3 563 { 564 font-weight: 500 ; 565 font-size: 22px ; 566 color: var(--text-title-h3) ; 567 } 568 569 .cm-header-4, 570 .markdown-preview-section h4 571 { 572 font-weight: 500 ; 573 font-size: 20px ; 574 color: var(--text-title-h4) ; 575 } 576 577 .cm-header-5, 578 .markdown-preview-section h5 579 { 580 font-weight: 500 ; 581 font-size: 18px ; 582 color: var(--text-title-h5) ; 583 } 584 585 .cm-header-6, 586 .markdown-preview-section h6 587 { 588 font-weight: 500 ; 589 font-size: 18px ; 590 color: var(--text-title-h6) ; 591 } 592 593 .suggestion-item.is-selected 594 { 595 background-color: var(--text-selection); 596 } 597 598 .empty-state-container:hover 599 { 600 background-color: var(--background-secondary-alt); 601 border: 5px solid var(--interactive-accent) ; 602 } 603 604 .checkbox-container 605 { 606 background-color: var(--interactive-before); 607 } 608 609 .checkbox-container:after 610 { 611 background-color: var(--interactive-accent); 612 } 613 614 .checkbox-container.is-enabled:after 615 { 616 background-color: var(--bg5-dark); 617 } 618 619 .mod-cta 620 { 621 color: var(--background-secondary-alt) ; 622 font-weight: 600 ; 623 } 624 625 .mod-cta a 626 { 627 color: var(--background-secondary-alt) ; 628 font-weight: 600 ; 629 } 630 631 .mod-cta:hover 632 { 633 background-color: var(--interactive-before) ; 634 font-weight: 600 ; 635 } 636 637 .CodeMirror-cursor 638 { 639 background-color: var(--vim-cursor) ; 640 opacity: 60% ; 641 } 642 643 input.task-list-item-checkbox { 644 border: 1px solid var(--faded-blue); 645 appearance: none; 646 -webkit-appearance: none; 647 } 648 649 input.task-list-item-checkbox:checked 650 { 651 background-color: var(--faded-blue); 652 box-shadow: inset 0 0 0 2px var(--background-primary); 653 } 654 655 ::selection 656 { 657 background-color: var(--text-selection) ; 658 } 659 660 .mermaid .note 661 { 662 fill: var(--dark3) ; 663 } 664 665 .frontmatter-container { 666 display: none; 667 } 668 669 /* Bullet point relationship lines */ 670 .markdown-source-view.mod-cm6 .cm-indent::before, 671 .markdown-rendered.show-indentation-guide li > ul::before, 672 .markdown-rendered.show-indentation-guide li > ol::before { 673 position: absolute; 674 border-right: 1px solid var(--dim-blue); 675 }