theme.css
1 /* 2 * Pipe Likes Nord 3 */ 4 5 /* @settings 6 name: PLN by PipeItToDevNull 7 id: pln 8 settings: 9 - 10 id: pln-head-colours 11 title: Colours 12 type: heading 13 level: 2 14 collapsed: true 15 - 16 id: color-red 17 title: Red 18 type: variable-color 19 opacity: false 20 format: hex 21 alt-format: 22 - 23 id: color-red-rgb 24 format: rgb 25 default: '#bf616a' 26 - 27 id: color-orange 28 title: Orange 29 type: variable-color 30 opacity: false 31 format: hex 32 alt-format: 33 - 34 id: color-orange-rgb 35 format: rgb 36 default: '#d08770' 37 - 38 id: color-yellow-light 39 title: Yellow-Light 40 description: Used on the dark theme 41 type: variable-color 42 opacity: false 43 format: hex 44 alt-format: 45 - 46 id: color-yellow-light-rgb 47 format: rgb 48 default: '#ebcb8b' 49 - 50 id: color-yellow-dark 51 title: Yellow-Dark 52 description: Used on the light theme 53 type: variable-color 54 opacity: false 55 format: hex 56 alt-format: 57 - 58 id: color-yellow-dark-rgb 59 format: rgb 60 default: '#e4b860' 61 - 62 id: color-green 63 title: Green 64 type: variable-color 65 opacity: false 66 format: hex 67 alt-format: 68 - 69 id: color-green-rgb 70 format: rgb 71 default: '#a3be8c' 72 - 73 id: color-purple 74 title: Purple 75 type: variable-color 76 opacity: false 77 format: hex 78 alt-format: 79 - 80 id: color-purple-rgb 81 format: rgb 82 default: '#b48ead' 83 - 84 id: color-sea-green 85 title: Sea-Green 86 type: variable-color 87 opacity: false 88 format: hex 89 alt-format: 90 - 91 id: color-sea-green-rgb 92 format: rgb 93 default: '#8fbcbb' 94 - 95 id: color-cyan 96 title: Cyan 97 type: variable-color 98 opacity: false 99 format: hex 100 alt-format: 101 - 102 id: color-cyan-rgb 103 format: rgb 104 default: '#88c0d0' 105 - 106 id: color-frost 107 title: Frost 108 type: variable-color 109 opacity: false 110 format: hex 111 alt-format: 112 - 113 id: color-frost-rgb 114 format: rgb 115 default: '#81a1c1' 116 - 117 id: color-blue 118 title: Blue 119 type: variable-color 120 opacity: false 121 format: hex 122 alt-format: 123 - 124 id: color-blue-rgb 125 format: rgb 126 default: '#5e81ac' 127 - 128 id: color-salmon 129 title: Salmon 130 type: variable-color 131 opacity: false 132 format: hex 133 alt-format: 134 - 135 id: color-salmon-rgb 136 format: rgb 137 default: '#FC6E68' 138 - 139 id: accent-light-hsl 140 title: Accent Light 141 type: variable-color 142 opacity: false 143 format: hsl-split 144 default: '#5E81AC' 145 - 146 id: accent-dark-hsl 147 title: Accent Dark 148 type: variable-color 149 opacity: false 150 format: hsl-split 151 default: '#81a1c1' 152 - 153 id: b0 154 title: B0 155 type: variable-color 156 opacity: false 157 format: hex 158 alt-format: 159 - 160 id: b0-rgb 161 format: rgb 162 default: '#2E3440' 163 - 164 id: b1 165 title: B1 166 type: variable-color 167 opacity: false 168 format: hex 169 alt-format: 170 - 171 id: b1-rgb 172 format: rgb 173 default: '#3B4252' 174 - 175 id: b2 176 title: B2 177 type: variable-color 178 opacity: false 179 format: hex 180 alt-format: 181 - 182 id: b2-rgb 183 format: rgb 184 default: '#434C5E' 185 - 186 id: b3 187 title: B3 188 type: variable-color 189 opacity: false 190 format: hex 191 alt-format: 192 - 193 id: b3-rgb 194 format: rgb 195 default: '#4C566A' 196 - 197 id: w0 198 title: W0 199 type: variable-color 200 opacity: false 201 format: hex 202 alt-format: 203 - 204 id: w0-rgb 205 format: rgb 206 default: '#D8DEE9' 207 - 208 id: w1 209 title: W1 210 type: variable-color 211 opacity: false 212 format: hex 213 alt-format: 214 - 215 id: w1-rgb 216 format: rgb 217 default: '#E5E9F0' 218 - 219 id: w2 220 title: W2 221 type: variable-color 222 opacity: false 223 format: hex 224 alt-format: 225 - 226 id: w2-rgb 227 format: rgb 228 default: '#ECEFF4' 229 - 230 id: w3 231 title: W3 232 type: variable-color 233 opacity: false 234 format: hex 235 alt-format: 236 - 237 id: w3-rgb 238 format: rgb 239 default: '#f5f7f9' 240 - 241 id: text-highlight-bg 242 title: Text Highlight Background 243 type: variable-color 244 opacity: true 245 format: rgb 246 default: '180, 142, 173, 0.4' 247 - 248 id: text-highlight-bg-active 249 title: Text Highlight Background - Active 250 type: variable-color 251 opacity: true 252 format: rgb 253 default: '180, 142, 173, 0.4' 254 - 255 id: pln-head-fonts 256 title: Font sizes 257 type: heading 258 level: 2 259 collapsed: true 260 - 261 id: font-ui-smaller 262 title: Font-UI-Smaller 263 description: Used for settings panel category headers and other things 264 type: variable-number-slider 265 default: 10 266 min: 10 267 max: 30 268 step: 1 269 format: px 270 - 271 id: font-ui-small 272 title: Font-UI-Small 273 description: Used for folder names and other things 274 type: variable-number-slider 275 default: 10 276 min: 10 277 max: 30 278 step: 1 279 format: px 280 - 281 id: font-ui-medium 282 title: Font-UI-Medium 283 description: Used for settings panel body, calendar 284 type: variable-number-slider 285 default: 12 286 min: 10 287 max: 30 288 step: 1 289 format: px 290 - 291 id: font-ui-large 292 title: Font-UI-Large 293 description: Used for things 294 type: variable-number-slider 295 default: 14 296 min: 10 297 max: 30 298 step: 1 299 format: px 300 - 301 id: pln-head-gen 302 title: General modifications 303 type: heading 304 level: 2 305 collapsed: true 306 - 307 id: pln-link-mods 308 title: Link modifications 309 description: Underline only external links and remove the distinction from unresolved links 310 type: class-toggle 311 default: true 312 - 313 id: pln-hilite-mods 314 title: Highlight (mark) modifications 315 description: Change ==highlight== (mark) styling from the default. This may interfere with some plugins, disable this if you see issues. 316 type: class-toggle 317 default: true 318 - 319 id: pln-hi-line 320 title: Highlight active line 321 description: Highlight the active line 322 type: class-toggle 323 default: false 324 - 325 id: pln-hi-line-hover 326 title: Highlight cursor line 327 description: Highlight the line your mouse cursor is on 328 type: class-toggle 329 default: false 330 - 331 id: pln-hide-files 332 title: Enable hidden directories and files 333 description: Hide any file/folder starting with _ (underscore) 334 type: class-toggle 335 default: false 336 - 337 id: pln-folder-icons 338 title: Use folder icons in the file tree 339 description: Replace the chevrons in the file tree with open/closed folder icons 340 type: class-toggle 341 default: false 342 - 343 id: pln-dv-mods 344 title: Dataview modifications 345 description: Globally toggle my various DV modifications 346 type: class-toggle 347 default: true 348 - 349 id: pln-dv-count 350 title: Dataview list count 351 description: Toggle the list count on a DV result 352 type: class-toggle 353 default: true 354 - 355 id: pln-view-invert 356 title: Invert view icons 357 description: Invert the Reading and Edit view icons in the top right of notes 358 type: class-toggle 359 default: false 360 - 361 id: pln-pin-protect 362 title: Protect the Pin icon 363 description: Blocks the click event on the Pin icon so it cannot be removed accidently 364 type: class-toggle 365 default: true 366 - 367 id: pln-pretty-pinned 368 title: Prettier pinned tabs 369 description: Shrink down pinned tabs to only the note icon. I recommend making prettier note icons as well if you do this. 370 type: class-toggle 371 default: false 372 - 373 id: pln-stacked-100 374 title: Stacked tabs 100% width 375 description: Make stacked tabs take up 100% of the window width instead of an annoying amount of unknown space 376 type: class-toggle 377 default: false 378 - 379 id: pln-boxed-tags 380 title: Box tags 381 description: Make tags more boxy with a solid border 382 type: class-toggle 383 default: true 384 - 385 id: pln-head-attachments 386 title: Attachment options 387 type: heading 388 level: 2 389 collapsed: true 390 - 391 id: pln-attachments 392 title: Hide attachments 393 description: Hide all attachments in the file explorer 394 type: class-toggle 395 default: false 396 - 397 id: pln-attachments-canvas 398 title: Unhide canvas files 399 type: class-toggle 400 default: false 401 - 402 id: pln-attachments-pdf 403 title: Unhide pdf files 404 type: class-toggle 405 default: false 406 - 407 id: pln-attachments-docx 408 title: Unhide docx files 409 type: class-toggle 410 default: false 411 - 412 id: pln-attachments-xlsx 413 title: Unhide xlsx files 414 type: class-toggle 415 default: false 416 - 417 id: pln-attachments-images 418 title: Unhide image files 419 type: class-toggle 420 default: false 421 - 422 id: pln-head-heads 423 title: Header colors 424 type: heading 425 level: 2 426 collapsed: true 427 - 428 id: pln-hdcl 429 title: Header color toggle 430 description: You must open each color and "save" it to render properly 431 type: class-toggle 432 default: false 433 - 434 id: pln-hdcl-1 435 title: H1 color 436 type: variable-color 437 opacity: false 438 format: hex 439 default: '#BF616A' 440 - 441 id: pln-hdcl-2 442 title: H2 color 443 type: variable-color 444 opacity: false 445 format: hex 446 default: '#D08770' 447 - 448 id: pln-hdcl-3 449 title: H3 color 450 type: variable-color 451 opacity: false 452 format: hex 453 default: '#EBCB8B' 454 - 455 id: pln-hdcl-4 456 title: H4 color 457 type: variable-color 458 opacity: false 459 format: hex 460 default: '#A3BE8C' 461 - 462 id: pln-hdcl-5 463 title: H5 color 464 type: variable-color 465 opacity: false 466 format: hex 467 default: '#8FBCBB' 468 - 469 id: pln-hdcl-6 470 title: H5 color 471 type: variable-color 472 opacity: false 473 format: hex 474 default: '#88C0D0' 475 - 476 id: pln-head-props 477 title: Properties modifications 478 type: heading 479 level: 2 480 collapsed: true 481 - 482 id: hide-properties 483 title: Hide properties in reading mode 484 description: Hide the metadata properties box when in reading mode. Add 'hide-properties' as a class to any file to selectively apply this. 485 type: class-toggle 486 default: true 487 - 488 id: pln-props-heading 489 title: Hide properties heading 490 description: We know it is a properties box, you don't need to label it. 491 type: class-toggle 492 default: true 493 - 494 id: pln-props-list 495 title: List 'list' properties 496 description: Put every property on its own line instead of a long single line list. 497 type: class-toggle 498 default: true 499 - 500 id: pln-head-embd 501 title: Embed modifications 502 type: heading 503 level: 2 504 collapsed: true 505 - 506 id: pln-embd-mods 507 title: Embed modifications 508 description: Globally toggle my various embed modifications 509 type: class-toggle 510 default: true 511 - 512 id: pln-embd-link 513 title: Embeded note link icon 514 description: Hide the link icon for an embedded note 515 type: class-toggle 516 default: true 517 - 518 id: pln-embd-title 519 title: Embeded note titles 520 description: Hide the title of an embeded note 521 type: class-toggle 522 default: true 523 - 524 id: pln-embd-first 525 title: Hide the first header in embeds 526 description: Do not display the first header in an embed 527 type: class-toggle 528 default: true 529 - 530 id: pln-embd-h1 531 title: Hide H1 in embeds 532 description: Do not display h1 in embeds 533 type: class-toggle 534 default: false 535 - 536 id: pln-embd-h2 537 title: Hide H2 in embeds 538 description: Do not display h2 in embeds 539 type: class-toggle 540 default: false 541 - 542 id: pln-embd-h3 543 title: Hide H3 in embeds 544 description: Do not display h3 in embeds 545 type: class-toggle 546 default: false 547 - 548 id: pln-embd-h4 549 title: Hide H4 in embeds 550 description: Do not display h4 in embeds 551 type: class-toggle 552 default: false 553 - 554 id: pln-embd-h5 555 title: Hide H5 in embeds 556 description: Do not display h5 in embeds 557 type: class-toggle 558 default: false 559 - 560 id: pln-embd-h6 561 title: Hide H6 in embeds 562 description: Do not display h6 in embeds 563 type: class-toggle 564 default: false 565 - 566 id: pln-head-rm 567 title: Removals 568 type: heading 569 level: 2 570 collapsed: true 571 - 572 id: pln-rm-folder-nav 573 title: Remove folder nav 574 description: Remove the folder navigation icons 575 type: class-toggle 576 default: false 577 - 578 id: pln-rm-settings 579 title: Remove settings pane 580 description: Remove the settings pane at the bottom of the left sidebar added in 1.6 581 type: class-toggle 582 default: false 583 - 584 id: pln-rm-rside 585 title: Remove sidebar indicators 586 description: Remove the sidebar indicators. They can still be opened with hotkeys 587 type: class-toggle 588 default: true 589 - 590 id: pln-rm-win-lside-tl 591 title: Remove mod top left 592 description: Remove the top tab container in the left sidebar in Windows in hidden frameless 593 type: class-toggle 594 default: false 595 - 596 id: pln-rm-status 597 title: Remove statusbar 598 description: Removes the bottom statusbar 599 type: class-toggle 600 default: true 601 - 602 id: pln-rm-tablist 603 title: Remove tablist icon 604 description: Removes the header tab list icon 605 type: class-toggle 606 default: true 607 - 608 id: pln-rm-nt 609 title: Remove new tab icon 610 description: Removes the new tab header icon 611 type: class-toggle 612 default: true 613 - 614 id: pln-rm-clstab 615 title: Remove close icon 616 description: Remove the close X from tabs 617 type: class-toggle 618 default: true 619 - 620 id: pln-rm-nav 621 title: Remove nav icons 622 description: Remove the back and forward icons 623 type: class-toggle 624 default: true 625 - 626 id: pln-rm-act 627 title: Remove view actions 628 description: Remove the view action icons from the top of notes 629 type: class-toggle 630 default: true 631 - 632 id: pln-rm-noteic 633 title: Remove note icon 634 description: Remove the note icon from stacked tabs (we all know is a note...) 635 type: class-toggle 636 default: true 637 - 638 id: pln-rm-scroll 639 title: Remove scroll bars 640 description: Hide scroll bars, hover to view them 641 type: class-toggle 642 default: true 643 - 644 id: pln-rm-mac-tside 645 title: Hide top bar in MacOS 646 description: Hide the top bar on MacOS when in stacked tabs. (Works best in Frameless/hidden title bars) 647 type: class-toggle 648 default: true 649 - 650 id: pln-rm-srchSug 651 title: Hide search help 652 description: Hide the pop up that appears when clicking the search field 653 type: class-toggle 654 default: true 655 - 656 id: pln-head-co 657 title: Callout modifications 658 type: heading 659 level: 2 660 collapsed: true 661 - 662 id: pln-rm-co-meta 663 title: Hide Meta callout in reading mode 664 description: Remove the custom "meta" callout in reading mode 665 type: class-toggle 666 default: false 667 - 668 id: pln-pdf-rm-co-meta 669 title: Hide Meta callout in PDF exports 670 description: Remove the custom "meta" callout in PDF exports only 671 type: class-toggle 672 default: true 673 - 674 id: pln-rm-co-links 675 title: Hide Links callout in reading mode 676 description: Remove the custom "links" callout in reading mode 677 type: class-toggle 678 default: false 679 - 680 id: pln-pdf-rm-co-links 681 title: Hide Links callout in PDF exports 682 description: Remove the custom "links" callout in PDF exports only 683 type: class-toggle 684 default: true 685 - 686 id: pln-head-cards 687 title: Kepano Cards modificationss 688 type: heading 689 level: 2 690 collapsed: true 691 - 692 id: pln-cards-sort 693 title: Hide Remove sort icon 694 description: Remove the sort icon from above a collection of cards 695 type: class-toggle 696 default: true 697 - 698 id: pln-cards-borders 699 title: Card border edits 700 description: Change the border of cards to match callouts. You are required to have Kepano's snippet, this just changes it's style 701 type: class-toggle 702 default: true 703 - 704 id: pln-cards-color-rgb 705 title: Card border color 706 type: variable-themed-color 707 format: rgb-values 708 opacity: false 709 default-light: 'rgb(216, 222, 233)' 710 default-dark: 'rgb(76, 86, 106)' 711 - 712 id: cards 713 title: Add cards class to all files, and allow export. 714 description: This will add the cards class to all files, a primary function for this will be cards rendering when you PDF export a file 715 type: class-toggle 716 default: false 717 - 718 id: pln-head-vi 719 title: High contrast modifications 720 type: heading 721 level: 2 722 collapsed: true 723 - 724 id: pln-vision 725 title: High contrast toggle 726 descriptioon: Change main text to a vision impaired yellow. You should change your accent colour to something that compliments #cccc00. Don't use this with light mode... 727 type: class-toggle 728 default: false 729 - 730 id: pln-vision-high 731 title: Primary color 732 description: This is the primary color to be used in vision impaired mode 733 type: variable-color 734 opacity: false 735 format: hex 736 default: '#cccc00' 737 - 738 id: pln-vision-low 739 title: Secondary color 740 description: This is used for code blocks and buttons mostly 741 type: variable-color 742 opacity: false 743 format: hex 744 default: '#4C4E52' 745 - 746 */ 747 748 .theme-light, 749 .theme-dark { 750 --color-red: #bf616a; 751 --color-orange: #d08770; 752 --color-yellow-light: #ebcb8b; 753 --color-yellow-dark: #e4b860; 754 --color-green: #a3be8c; 755 --color-purple: #b48ead; 756 --color-sea-green: #8fbcbb; 757 --color-cyan: #88c0d0; 758 --color-frost: #81a1c1; 759 --color-blue: #5e81ac; 760 --color-salmon: #FC6E68; 761 762 --accent-light-hsl-h: 213; 763 --accent-light-hsl-s: 32%; 764 --accent-light-hsl-l: 53%; 765 766 --accent-dark-hsl-h: 210; 767 --accent-dark-hsl-s: 34%; 768 --accent-dark-hsl-l: 63%; 769 770 --color-red-rgb: 191, 97, 106; 771 --color-orange-rgb: 208, 135, 112; 772 --color-yellow-light-rgb: 235, 203, 139; 773 --color-yellow-dark-rgb: 228, 184, 96; 774 --color-green-rgb: 163, 190, 140; 775 --color-purple-rgb: 180, 142, 173; 776 --color-sea-green-rgb: 143, 188, 187; 777 --color-cyan-rgb: 136, 192, 208; 778 --color-frost-rgb: 129, 161, 193; 779 --color-blue-rgb: 94, 129, 172; 780 --color-salmon-rgb: 252, 110, 104; 781 782 --b0: #2E3440; 783 --b1: #3B4252; 784 --b2: #434C5E; 785 --b3: #4C566A; 786 787 --w0: #D8DEE9; 788 --w1: #E5E9F0; 789 --w2: #ECEFF4; 790 --w3: #f5f7f9; 791 792 --w0-rgb: 216, 222, 233; 793 --b3-rgb: 76, 86, 106; 794 795 --text-error: var(--color-salmon); 796 --text-accent: var(--color-accent); 797 --text-highlight-bg: rgba(180, 142, 173, 0.4); 798 --text-highlight-bg-active: rgba(180, 142, 173, 0.4); 799 800 --bold-weight: var(--font-bold); 801 } 802 803 .theme-light { 804 --color-yellow: var(--color-yellow-dark); 805 --color-yellow-rgb: var(--color-yellow-dark-rgb); 806 807 --accent-h: var(--accent-light-hsl-h); 808 --accent-s: var(--accent-light-hsl-s); 809 --accent-l: var(--accent-light-hsl-l); 810 811 /* the note background */ 812 --background-primary: var(--w3) ; 813 /* used for code blocks */ 814 --background-primary-alt: var(--w2) ; 815 /* outside ui background */ 816 /* background titlebar unfocused */ 817 --background-secondary: var(--w2); 818 /* titlebar focused */ 819 --background-secondary-alt: var(--w1); 820 /* lines between objects */ 821 /* slider background */ 822 --background-modifier-border: var(--w0); 823 824 /* main font */ 825 --color-base-100: var(--b0); 826 --color-base-70: var(--b0); 827 --color-base-60: var(--b0); 828 /* bullets */ 829 --color-base-50: var(--b1); 830 /* window outline (like settings) */ 831 --color-base-40: var(--w2); 832 /* toggle background */ 833 /* small line in tabs */ 834 --color-base-35: var(--w0); 835 /* the lines in the ui */ 836 --color-base-30: var(--w0); 837 --color-base-25: var(--b3); 838 --color-base-20: var(--w0); 839 --color-base-10: var(--w1); 840 --color-base-05: var(--w2); 841 --color-base-00: var(--w2); 842 } 843 844 .theme-dark { 845 --color-yellow: var(--color-yellow-light); 846 --color-yellow-rgb: var(--color-yellow-light-rgb); 847 848 --accent-h: var(--accent-dark-hsl-h); 849 --accent-s: var(--accent-dark-hsl-s); 850 --accent-l: var(--accent-dark-hsl-l); 851 852 /* the note background */ 853 --background-primary: var(--b1) ; 854 /* used for code blocks */ 855 --background-primary-alt: var(--b0) ; 856 /* outside ui background */ 857 /* background titlebar unfocused */ 858 --background-secondary: var(--b0); 859 /* titlebar focused */ 860 --background-secondary-alt: var(--b0); 861 /* lines between objects */ 862 /* slider background */ 863 --background-modifier-border: var(--b3); 864 865 --color-base-00: var(--b0); 866 --color-base-10: var(--b0); 867 --color-base-20: var(--b0); 868 --color-base-25: var(--b0); 869 /* lines in the ui */ 870 --color-base-30: var(--b1); 871 /* toggle backgroundse */ 872 /* small line in tabs */ 873 --color-base-35: var(--b3); 874 /* window outlines */ 875 --color-base-40: var(--b0); 876 /* bullets */ 877 --color-base-50: var(--w0); 878 --color-base-60: var(--w1); 879 --color-base-70: var(--w2); 880 /* main font */ 881 --color-base-100: var(--w3); 882 } 883 884 /* any vision accomodations would be here */ 885 .pln-vision { 886 --pln-vision-high: #cccc00; 887 --pln-vision-low: #4C4E52; 888 889 --text-normal: var(--pln-vision-high); 890 --text-faint: var(--pln-vision-high); 891 --text-muted: var(--pln-vision-high); 892 --background-primary: black; 893 --background-primary-alt: var(--pln-vision-low); 894 --background-secondary: black; 895 --background-secondary-alt: black; 896 --background-modifier-border: var(--pln-vision-high); 897 --text-on-accent: black; 898 899 --color-base-30: var(--pln-vision-low); 900 --color-base-35: var(--pln-vision-high); 901 902 --color-red: var(--pln-vision-high); 903 --color-orange: var(--pln-vision-high); 904 --color-yellow-light: var(--pln-vision-high); 905 --color-yellow-dark: var(--pln-vision-high); 906 --color-green: var(--pln-vision-high); 907 --color-purple: var(--pln-vision-high); 908 --color-sea-green: var(--pln-vision-high); 909 --color-cyan: var(--pln-vision-high); 910 --color-frost: var(--pln-vision-high); 911 --color-blue: var(--pln-vision-high); 912 --color-salmon: var(--pln-vision-high); 913 } 914 915 /* pdf fixes */ 916 @media print { 917 .theme-dark { 918 --highlight-mix-blend-mode: darken; 919 --list-marker-color: var(--b0); 920 --code-background: var(--w2); 921 --code-normal: var(--b0); 922 --table-header-color: var(--b0); 923 --text-muted: var(--b0); 924 } 925 .pln-pdf-rm-co-links .callout[data-callout="links"], 926 .pln-pdf-rm-co-meta .callout[data-callout="meta"] { 927 display: none; 928 } 929 /* hacky method to make cards exportable */ 930 .cards.pln-cards-borders.theme-dark, 931 .pln-cards-borders.theme-dark { 932 --pln-cards-color-rgb: var(--w0-rgb) !important; 933 } 934 .pln-embd-mods.pln-embd-first .markdown-embed :is(h1,h2,h3,h4,h5,h6):first-child { 935 display: none; 936 } 937 } 938 939 /* 940 * Main 941 */ 942 body { 943 --font-ui-smaller: 10px; 944 --font-ui-small: 10px; 945 --font-ui-medium: 12px; 946 --font-ui-large: 14px; 947 --header-height: 30px; 948 --file-folding-offset: 10px; 949 /* 1.1 fixes */ 950 --checkbox-size: 1.1em; 951 --list-bullet-size: .5em; 952 /* Fix font sizes in 1.3.7 */ 953 --h1-size: 2em; 954 --h2-size: 1.6em; 955 --h3-size: 1.37em; 956 --h4-size: 1.25em; 957 --h5-size: 1.12em; 958 --h6-size: 1.12em; 959 /*this is spacing before a header, it is stupid*/ 960 --heading-spacing: 0; 961 --p-spacing: .5rem; 962 } 963 /* this brings back header spacing in reading mode */ 964 /* default is 2.5 p-spacing and p-spacing default is 1rem */ 965 .markdown-rendered { 966 --heading-spacing: calc(var(--p-spacing)*2); 967 } 968 969 /* changed in 1.4*/ 970 hr { 971 margin: 1.5em; 972 } 973 974 /* change margins, default is 32 */ 975 body { 976 --file-margins: 20px; 977 } 978 .mod-stacked { 979 --file-margins: 10px; 980 } 981 .mod-stacked:has(.cm-gutter) { 982 --file-margins: 2px 983 } 984 985 /* header colors */ 986 body.pln-hdcl { 987 --pln-hdcl-1: #BF616A; 988 --pln-hdcl-2: #D08770; 989 --pln-hdcl-3: #EBCB8B; 990 --pln-hdcl-4: #A3BE8C; 991 --pln-hdcl-5: #8FBCBB; 992 --pln-hdcl-6: #88C0D0; 993 --h1-color: var(--pln-hdcl-1); 994 --h2-color: var(--pln-hdcl-2); 995 --h3-color: var(--pln-hdcl-3); 996 --h4-color: var(--pln-hdcl-4); 997 --h5-color: var(--pln-hdcl-5); 998 --h6-color: var(--pln-hdcl-6); 999 } 1000 1001 /* folding indicator */ 1002 .markdown-source-view.mod-cm6 .cm-fold-indicator .collapse-indicator { 1003 padding-right: 0px; 1004 } 1005 1006 /* properties container*/ 1007 body { 1008 --metadata-border-color: rgb(var(--pln-cards-color-rgb)); 1009 --metadata-border-radius: 5px; 1010 --metadata-background: rgba(var(--pln-cards-color-rgb),0.4); 1011 --metadata-property-radius: 5px; 1012 } 1013 .metadata-container { 1014 border-top: 4px solid rgb(var(--pln-cards-color-rgb)); 1015 border-left: 2px solid rgb(var(--pln-cards-color-rgb)); 1016 /* 1.3.7 adding --p-spacing but I remove it, this fixes the header being to oclose to the box*/ 1017 margin-bottom: 10px; 1018 } 1019 .metadata-property-key { 1020 border-right: 2px solid rgb(var(--pln-cards-color-rgb)); 1021 } 1022 .hide-properties { 1023 --metadata-display-reading: none; 1024 } 1025 .pln-props-heading .metadata-properties-heading { 1026 display: none; 1027 } 1028 1029 .pln-props-list .metadata-property:not([data-property-key="tags"]) .metadata-property-value .multi-select-container { 1030 display: block; 1031 } 1032 /* improve meta data container in sidebar */ 1033 .workspace > .workspace-split:not(.mod-root) .metadata-container { 1034 margin-left: 5px; 1035 padding-left: 2px; 1036 } 1037 1038 .markdown-source-view.mod-cm6 .cm-table-widget { 1039 padding-top: 0; 1040 } 1041 1042 /* macos fixes for hidden title */ 1043 .mod-macos { 1044 --frame-left-space: 65px; 1045 } 1046 1047 /* shrinking headers */ 1048 .mod-left-split .workspace-tab-header-container-inner, 1049 .mod-right-split .workspace-tab-header-container-inner { 1050 margin: 0 0 0 0; 1051 padding: 0 0 0 10px; 1052 } 1053 1054 /* logo */ 1055 .titlebar-button.mod-logo { 1056 color: var(--color-purple); 1057 } 1058 1059 /* red pin icon */ 1060 .mod-root .mod-pinned { 1061 color: var(--color-salmon); 1062 } 1063 /* stop the pin from being clickable */ 1064 .pln-pin-protect .mod-pinned { 1065 pointer-events: none; 1066 } 1067 1068 /* pretty pinned tabs */ 1069 .pln-pretty-pinned:not(:has(.mod-stacked)) .workspace-tab-header:has(.mod-pinned) { 1070 max-width: 30px !important; 1071 /* also hide the title of pinned tabs */ 1072 & .workspace-tab-header-inner-title { 1073 display: none; 1074 } 1075 & .workspace-tab-header-inner-icon { 1076 display: flex !important; 1077 } 1078 & .mod-pinned { 1079 display: none; 1080 } 1081 } 1082 1083 /* flip and thin stacked titles */ 1084 body { 1085 --tab-stacked-text-transform: rotate(180deg); 1086 --tab-stacked-text-align: right; 1087 --tab-stacked-header-width: 20px; 1088 } 1089 .mod-stacked .workspace-tab-header-inner-title { 1090 letter-spacing: 1px; 1091 } 1092 .pln-stacked-100 { 1093 --tab-stacked-pane-width: 100% 1094 } 1095 1096 /* hide the top bar when stacked on macos */ 1097 .mod-macos.pln-rm-mac-tside.is-hidden-frameless .mod-vertical .mod-stacked .workspace-tab-header-container { 1098 display: none; 1099 } 1100 1101 /* invert reading icons to make more sense visually */ 1102 .pln-view-invert .workspace-leaf-content:has(.is-live-preview) .clickable-icon.view-action[aria-label^="Current view: editing"] { 1103 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'%3E%3C/path%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z'%3E%3C/path%3E%3C/svg%3E"); 1104 background-color: var(--icon-color); 1105 -webkit-mask-repeat: no-repeat; 1106 -webkit-mask-position: center; 1107 } 1108 .pln-view-invert .clickable-icon.view-action[aria-label^="Current view: reading"] { 1109 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'%3E%3C/path%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'%3E%3C/path%3E%3C/svg%3E"); 1110 background-color: var(--icon-color); 1111 -webkit-mask-repeat: no-repeat; 1112 -webkit-mask-position: center; 1113 } 1114 /* add an icon specifc for source view */ 1115 .pln-view-invert .workspace-leaf-content:not(:has(.is-live-preview)) .clickable-icon.view-action[aria-label^="Current view: editing"] { 1116 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pencil-line'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3Cpath d='m15 5 3 3'/%3E%3C/svg%3E"); 1117 background-color: var(--icon-color); 1118 -webkit-mask-repeat: no-repeat; 1119 -webkit-mask-position: center; 1120 } 1121 1122 /* table stuff */ 1123 /* fix table font size */ 1124 body { 1125 --table-text-size: var(--font-text-size); 1126 } 1127 /* space out tables from text a bitin reading mode */ 1128 .markdown-rendered table { 1129 margin-top: var(--heading-spacing); 1130 } 1131 1132 /* highlight active line */ 1133 .pln-hi-line:not(.pln-vision) .cm-active.cm-line, 1134 .pln-hi-line-hover:not(.pln-vision) .cm-line:hover { 1135 background-color: var(--background-modifier-border); 1136 } 1137 .pln-hi-line:not(.pln-vision) .cm-gutterElement.cm-active { 1138 color: var(--color-yellow); 1139 font-weight: bold; 1140 background-color: var(--background-modifier-border); 1141 } 1142 .cm-lineNumbers { 1143 border-right: 2px solid var(--background-modifier-border); 1144 color: var(--text-faint); 1145 } 1146 1147 /* REMOVE THINGS */ 1148 /* hide attachments */ 1149 .pln-attachments .nav-file:has(.nav-file-tag), 1150 /* folder navigation buttons */ 1151 .pln-rm-folder-nav .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 1152 /* settings pane */ 1153 body:not(.is-mobile).pln-rm-settings .workspace-split.mod-left-split .workspace-sidedock-vault-profile, 1154 /* sidebars */ 1155 .pln-rm-rside .sidebar-toggle-button.mod-right, 1156 .pln-rm-rside .sidebar-toggle-button, 1157 /* statusbar */ 1158 .pln-rm-status .status-bar, 1159 /* tab chevron */ 1160 .pln-rm-tablist .workspace-tab-header-tab-list .clickable-icon, 1161 /* new tab */ 1162 .pln-rm-nt .mod-root .workspace-tab-header-new-tab, 1163 /* tab close button */ 1164 .pln-rm-clstab .workspace-tab-header-inner-close-button, 1165 /* nav buttons */ 1166 .pln-rm-nav .view-header-nav-buttons, 1167 /* action bottons, top right of note */ 1168 .pln-rm-act .view-actions, 1169 /* suggestion pop up box */ 1170 .pln-rm-srchSug .suggestion-container.mod-search-suggestion, 1171 /* note icon for stacked tabs */ 1172 .pln-rm-noteic .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon, 1173 /* remove top left sidebar container in hidden*/ 1174 .mod-windows.pln-rm-win-lside-tl.is-hidden-frameless .mod-left-split .mod-top-left-space .workspace-tab-header-container, 1175 /* hide the placeholder values in metadata*/ 1176 .metadata-input-longtext:empty:before, 1177 .multi-select-input:before { 1178 display: none; 1179 } 1180 1181 /* selectively show certain attachments */ 1182 .pln-attachments.pln-attachments-canvas .nav-file:has([data-path$=".canvas"]), 1183 .pln-attachments.pln-attachments-pdf .nav-file:has([data-path$=".pdf"]), 1184 .pln-attachments.pln-attachments-docx .nav-file:has([data-path$=".docx"]), 1185 .pln-attachments.pln-attachments-xlsx .nav-file:has([data-path$=".xlsx"]), 1186 .pln-attachments.pln-attachments-images .nav-file:has([data-path$=".jpg"]), 1187 .pln-attachments.pln-attachments-images .nav-file:has([data-path$=".jpeg"]), 1188 .pln-attachments.pln-attachments-images .nav-file:has([data-path$=".png"]) { 1189 display: contents !important; 1190 } 1191 1192 /* Hide files and dirs starting with _ */ 1193 .pln-hide-files div[data-path^="_"], 1194 .pln-hide-files div[data-path*="/_"] { 1195 display: none; 1196 } 1197 1198 /* bullet fix */ 1199 /* thanks sails */ 1200 .cm-formatting-list-ul > .list-bullet { 1201 padding-right: 5px; 1202 } 1203 .cm-formatting-list-ul:not(:has(> .list-bullet)) { 1204 margin-right: 5px; 1205 } 1206 1207 /* reading bullet fixes */ 1208 ul > li.task-list-item .task-list-item-checkbox { 1209 margin-inline-start: -17px; 1210 } 1211 .markdown-source-view.mod-cm6 .task-list-label { 1212 margin-inline-start: -6px; 1213 } 1214 1215 /* suggestion box */ 1216 .suggestion-item { 1217 font-size: var(--font-ui-small); 1218 } 1219 .suggestion-container { 1220 opacity: 90%; 1221 } 1222 1223 /* fix list spacing in reading mode */ 1224 body { 1225 --list-spacing: 1px; 1226 } 1227 /* fix spacing in edit mode for the top of lists*/ 1228 .cm-s-obsidian .cm-line.HyperMD-header + .cm-line:not(.HyperMD-header):not(:has(>br:only-child)) { 1229 padding-top: var(--p-spacing); 1230 } 1231 1232 /* scrollbars */ 1233 .pln-rm-scroll ::-webkit-scrollbar { 1234 visibility: hidden; 1235 background-color: transparent; 1236 width: 10px; 1237 } 1238 .pln-rm-scroll ::-webkit-scrollbar-thumb { 1239 visibility: hidden; 1240 } 1241 .pln-rm-scroll ::-webkit-scrollbar:hover { 1242 visibility: initial; 1243 } 1244 .pln-rm-scroll ::-webkit-scrollbar-thumb:hover { 1245 visibility: initial; 1246 } 1247 1248 /* more italic */ 1249 em, .cm-em { 1250 display: inline-block; 1251 transform: skew(-10deg); 1252 } 1253 1254 /* this unifies spacing in LP and reading (DV in LP is viewed as if it was reading) */ 1255 .markdown-rendered h1, 1256 .markdown-rendered h2, 1257 .markdown-rendered h3, 1258 .markdown-rendered h4, 1259 .markdown-rendered h5, 1260 .markdown-rendered h6 { 1261 margin: 0 0 0 0; 1262 } 1263 1264 /* 1265 * Card edits 1266 */ 1267 .cards.pln-cards-sort table.dataview thead, 1268 .pln-cards-sort .cards table.dataview thead { 1269 display: none !important; 1270 } 1271 .cards.pln-cards-borders.theme-light, 1272 .pln-cards-borders.theme-light { 1273 --pln-cards-color-rgb: var(--w0-rgb); 1274 } 1275 .cards.pln-cards-borders.theme-dark, 1276 .pln-cards-borders.theme-dark { 1277 --pln-cards-color-rgb: var(--b3-rgb); 1278 } 1279 .cards.pln-cards-borders table.dataview > tbody > tr, 1280 .pln-cards-borders .cards table.dataview > tbody > tr { 1281 background-color: rgba(var(--pln-cards-color-rgb), 0.4) !important; 1282 border-top: 4px solid rgb(var(--pln-cards-color-rgb)) !important; 1283 border-left: 2px solid rgb(var(--pln-cards-color-rgb)) !important; 1284 border-right: none !important; 1285 border-bottom: none !important; 1286 } 1287 1288 /* add bullets */ 1289 .dataview-result-list-li::marker { 1290 content: '•'; 1291 } 1292 .cards table.dataview { 1293 font-size: unset; 1294 } 1295 /* 1.6 fix for bullets being moved away from left side */ 1296 .cards { 1297 --list-indent: 0; 1298 } 1299 1300 /* 1301 * Embeds 1302 */ 1303 body.pln-embd-mods { 1304 --embed-background: inherit; 1305 --embed-border-left: none; 1306 --embed-border-right: none; 1307 --embed-border-top: none; 1308 --embed-border-bottom: none; 1309 --embed-padding: 0 0 0 0; 1310 --embed-font-style: inherit; 1311 } 1312 1313 /* hide headers */ 1314 .pln-embd-mods.pln-embd-h1 .markdown-embed h1, 1315 .pln-embd-mods.pln-embd-h2 .markdown-embed h2, 1316 .pln-embd-mods.pln-embd-h3 .markdown-embed h3, 1317 .pln-embd-mods.pln-embd-h4 .markdown-embed h4, 1318 .pln-embd-mods.pln-embd-h5 .markdown-embed h5, 1319 .pln-embd-mods.pln-embd-h6 .markdown-embed h6 { 1320 display: none; 1321 } 1322 /* a better way to hide the first header only */ 1323 .pln-embd-mods.pln-embd-first .markdown-embed .mod-header + div > :is(h1,h2,h3,h4,h5,h6) { 1324 display: none; 1325 } 1326 1327 /* hide titles in emebds */ 1328 .pln-embd-mods.pln-embd-title .embed-title { 1329 display: none; 1330 } 1331 1332 /* hide the link icon for embeds */ 1333 .pln-embd-mods.pln-embd-link .markdown-embed-link { 1334 display: none; 1335 } 1336 1337 /* hide the new 1.6 left border */ 1338 /* also moves them over from 0.85em */ 1339 .pln-embd-mods .markdown-embed { 1340 border-inline-start: none; 1341 --checkbox-margin-inline-start: 0.4em; 1342 } 1343 1344 /* this is to move embededlists over in 1.1 */ 1345 .pln-embd-mods .cm-embed-block .contains-task-list, 1346 .pln-embd-mods .inline-embed .contains-task-list { 1347 padding: 0 0 0 0px; 1348 } 1349 1350 /* 1.6 fix to move lists back over in embeds 1351 2024-08-08 - this is seen breacking a basic embeded list in DFS migration which used: 1352 class="internal-embed markdown-embed inline-embed is-loaded" 1353 .pln-embd-mods .is-live-preview .markdown-embed { 1354 --list-indent: 0; 1355 } 1356 */ 1357 /* this includes an OR to make basic list items also move over */ 1358 .pln-embd-mods .is-live-preview .task-list-item .task-list-item, .task-list-basic-item { 1359 --list-indent: 2.25em; 1360 } 1361 1362 /* 1363 * Checkbox fixes in callouts for 1.6 1364 */ 1365 .is-live-preview .callout .task-list-item { 1366 margin-inline-start: 0; 1367 } 1368 1369 /* blank callout over-ride for 1.6 */ 1370 .markdown-reading-view [data-callout="blank"] .callout-content :is(li), 1371 .markdown-reading-view [data-callout="blank-titled"] .callout-content :is(li) { 1372 margin-inline-start: var(--list-indent); 1373 } 1374 1375 /* 1376 * Links 1377 */ 1378 body.pln-link-mods { 1379 --link-decoration: none; 1380 --link-decoration-hover: none; 1381 --link-external-decoration: underline; 1382 --link-external-decoration-hover: underline !important; 1383 --link-unresolved-opacity: 100; 1384 } 1385 1386 /* remove the icon from external links */ 1387 body.pln-link-mods .external-link { 1388 background-image: none; 1389 padding-right: 0px; 1390 } 1391 1392 /* 1393 * Dataview 1394 */ 1395 .pln-dv-mods .markdown-source-view.mod-cm6 .edit-block-button { 1396 display: none; 1397 } 1398 /* move dataview results over 2px to align with embeds in reading mode */ 1399 .pln-dv-mods .markdown-reading-view .dataview.result-group { 1400 padding-left: 2px; 1401 } 1402 /* do not move dataview results over in live preview mode */ 1403 .pln-dv-mods .is-live-preview .dataview.result-group { 1404 padding-left: 0px; 1405 } 1406 /* if you offset embeds, this can be 0 otherwise 2px */ 1407 .pln-dv-mods .cm-preview-code-block.cm-embed-block.markdown-rendered { 1408 padding-left: 0; 1409 } 1410 /* move the checkbox container over pixels in reading mode */ 1411 /* this was an issue on my daily notes when embedding all PTIs */ 1412 .pln-dv-mods .markdown-reading-view .dataview-container .contains-task-list { 1413 padding-left: 20px; 1414 } 1415 /* hides the item count on a list */ 1416 .pln-dv-count .dataview.small-text { 1417 display: none; 1418 } 1419 /* 1.6 fix to move lists back over in embeds */ 1420 .pln-dv-mods .dataview-container { 1421 --list-indent: 0; 1422 } 1423 /* 1.6 fix to move list items over in DV queries in LP unless it is in an embed */ 1424 /* This is not exact but it is a better fix than margin-left: -6px */ 1425 .pln-dv-mods .is-live-preview:not(:has(.markdown-embed-content)) .dataview.task-list-item { 1426 margin-inline-start: var(--list-indent); 1427 } 1428 1429 /* commented out to fix daily not in 1.6.1 1430 /* 1.6 for child items in LP 1431 .pln-dv-mods .is-live-preview .dataview-container .contains-task-list .contains-task-list .task-list-item-checkbox { 1432 --checkbox-margin-inline-start: 3em; 1433 } 1434 /* 1.6 for bullet items in LP 1435 .pln-dv-mods .is-live-preview .dataview-container .contains-task-list .contains-task-list .task-list-basic-item { 1436 margin-inline-start: 3em; 1437 } 1438 */ 1439 /* 1.6 fix non-checkbox list under a dataview task in LP */ 1440 .pln-dv-mods .is-live-preview .dataview.result-group .contains-task-list .task-list-item ul:not(:has(.task-list-item-checkbox)) { 1441 padding-inline-start: 2em; 1442 } 1443 /* 1.6 fix non-checkbox list under a dataview task in Reading */ 1444 .pln-dv-mods .markdown-reading-view .dataview.result-group .task-list-item ul { 1445 padding-inline-start: 2em; 1446 } 1447 1448 /* 1449 * Checkboxes 1450 */ 1451 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"], 1452 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"], 1453 ul > li.task-list-item[data-task="x"], 1454 ul > li.task-list-item[data-task="X"] { 1455 text-decoration: none; 1456 } 1457 1458 /* > */ 1459 input[type=checkbox][data-task=">"], 1460 input[type=checkbox][data-task=">"]:hover, 1461 ul > li.task-list-item[data-task=">"] > .task-list-item-checkbox { 1462 background-color: var(--color-orange); 1463 border-color: var(--color-orange); 1464 } 1465 input[type=checkbox][data-task=">"]:checked:after, 1466 ul > li.task-list-item[data-task=">"] > .task-list-item-checkbox:checked:after { 1467 -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjI1cHgiIGhlaWdodD0iMjVweCIgdmlld0JveD0iLTUgMCAyNSAyNSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4NCiAgICANCiAgICA8dGl0bGU+cmlnaHQ8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxnIGlkPSJpY29ucyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxnIGlkPSJ1aS1nYW1ibGluZy13ZWJzaXRlLWxpbmVkLWljbm9zLWNhc2lub3NodW50ZXIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xNzgzLjAwMDAwMCwgLTE1OC4wMDAwMDApIiBmaWxsPSIjMUMxQzFGIiBmaWxsLXJ1bGU9Im5vbnplcm8iPg0KICAgICAgICAgICAgPGcgaWQ9IjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzNTAuMDAwMDAwLCAxMjAuMDAwMDAwKSI+DQogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQzNi40NTM1MTcsMzguNTY5MjQ5IEw0NDcuMzAyNDU5LDQ4Ljk5MzgxNTggTDQ0Ny4zOTI2MSw0OS4wNzQ4ODAyIEM0NDcuNzU1MzQsNDkuNDIzNDU0IDQ0Ny45NjgxNTksNDkuODg3MDQ2MSA0NDgsNTAuNDM4MjIyNyBMNDQ3Ljk5ODEzNSw1MC42MjI4MjI5IEM0NDcuOTY4MTU5LDUxLjExMjk1MzkgNDQ3Ljc1NTM0LDUxLjU3NjU0NiA0NDcuMzMzNjc1LDUxLjk3NzQ0NjkgTDQ0Ny4zMzkwOTUsNTEuOTY4OTgzMiBMNDM2LjQ1MzUxNyw2Mi40MzA3NTEgQzQzNS42NjM2OTQsNjMuMTg5NzQ5NyA0MzQuMzk5MDAxLDYzLjE4OTc0OTcgNDMzLjYwOTE3OCw2Mi40MzA3NTEgQzQzMi43OTY5NDEsNjEuNjUwMjEzIDQzMi43OTY5NDEsNjAuMzY3NTkyNCA0MzMuNjA5NDMyLDU5LjU4NjgxMDYgTDQ0My4wMTIzMjQsNTAuNTU3MjQ3MSBMNDMzLjYwOTE3OCw0MS40MTI5NDU2IEM0MzIuNzk2OTQxLDQwLjYzMjQwNzYgNDMyLjc5Njk0MSwzOS4zNDk3ODcgNDMzLjYwOTE3OCwzOC41NjkyNDkgQzQzNC4zOTkwMDEsMzcuODEwMjUwMyA0MzUuNjYzNjk0LDM3LjgxMDI1MDMgNDM2LjQ1MzUxNywzOC41NjkyNDkgWiIgaWQ9InJpZ2h0Ij48L3BhdGg+DQogICAgICAgICAgICA8L2c+DQogICAgICAgIDwvZz4NCiAgICA8L2c+DQo8L3N2Zz4="); 1468 } 1469 1470 /* ? */ 1471 input[type=checkbox][data-task="?"], 1472 input[type=checkbox][data-task="?"]:hover, 1473 ul > li.task-list-item[data-task="?"] > .task-list-item-checkbox { 1474 background-color: var(--color-yellow); 1475 border-color: var(--color-yellow); 1476 } 1477 input[type=checkbox][data-task="?"]:checked:after, 1478 ul > li.task-list-item[data-task="?"] > .task-list-item-checkbox:checked:after { 1479 -webkit-mask-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9Ijk3My4xcHgiIGhlaWdodD0iOTczLjFweCIgdmlld0JveD0iMCAwIDk3My4xIDk3My4xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA5NzMuMSA5NzMuMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQoJPg0KPGc+DQoJPHBhdGggZD0iTTUwMi4yOSw3ODguMTk5aC00N2MtMzMuMSwwLTYwLDI2LjktNjAsNjB2NjQuOWMwLDMzLjEsMjYuOSw2MCw2MCw2MGg0N2MzMy4xMDEsMCw2MC0yNi45LDYwLTYwdi02NC45DQoJCUM1NjIuMjksODE1LDUzNS4zOTEsNzg4LjE5OSw1MDIuMjksNzg4LjE5OXoiLz4NCgk8cGF0aCBkPSJNMTcwLjg5LDI4NS44bDg2LjcsMTAuOGMyNy41LDMuNCw1My42LTEyLjQsNjMuNS0zOC4zYzEyLjUtMzIuNywyOS45LTU4LjUsNTIuMi03Ny4zYzMxLjYwMS0yNi42LDcwLjktNDAsMTE3LjktNDANCgkJYzQ4LjcsMCw4Ny41LDEyLjgsMTE2LjMsMzguM2MyOC44LDI1LjYsNDMuMSw1Ni4yLDQzLjEsOTIuMWMwLDI1LjgtOC4xLDQ5LjQtMjQuMyw3MC44Yy0xMC41LDEzLjYtNDIuOCw0Mi4yLTk2LjcsODUuOQ0KCQljLTU0LDQzLjctODkuODk5LDgzLjA5OS0xMDcuODk5LDExOC4wOTljLTE4LjQsMzUuODAxLTI0LjgsNzUuNS0yNi40LDExNS4zMDFjLTEuMzk5LDM0LjEsMjUuOCw2Mi41LDYwLDYyLjVoNDkNCgkJYzMxLjIsMCw1Ny0yMy45LDU5LjgtNTQuOWMyLTIyLjI5OSw1LjctMzkuMTk5LDExLjMwMS01MC42OTljOS4zOTktMTkuNzAxLDMzLjY5OS00NS43MDEsNzIuNjk5LTc4LjENCgkJQzcyMy41OSw0NzcuOCw3NzIuNzksNDI4LjQsNzk1Ljg5MSwzOTJjMjMtMzYuMywzNC42LTc0LjgsMzQuNi0xMTUuNWMwLTczLjUtMzEuMy0xMzgtOTQtMTkzLjRjLTYyLjYtNTUuNC0xNDctODMuMS0yNTMtODMuMQ0KCQljLTEwMC44LDAtMTgyLjEsMjcuMy0yNDQuMSw4MmMtNTIuOCw0Ni42LTg0LjksMTAxLjgtOTYuMiwxNjUuNUMxMzkuNjksMjY2LjEsMTUyLjM5LDI4My41LDE3MC44OSwyODUuOHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K"); 1480 } 1481 1482 /* - */ 1483 input[type=checkbox][data-task="-"], 1484 input[type=checkbox][data-task="-"]:hover, 1485 ul > li.task-list-item[data-task="-"] > .task-list-item-checkbox { 1486 background-color: var(--color-purple); 1487 border-color: var(--color-purple); 1488 } 1489 input[type=checkbox][data-task="-"]:checked:after, 1490 ul > li.task-list-item[data-task="-"] > .task-list-item-checkbox:checked:after { 1491 -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTIgOGExIDEgMCAwMTEtMWgxMGExIDEgMCAxMTAgMkgzYTEgMSAwIDAxLTEtMXoiIGZpbGw9IiMwMDAiLz4KPC9zdmc+Cg=="); 1492 } 1493 /* mark out the canceled item */ 1494 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"], 1495 ul > li.task-list-item[data-task="-"] { 1496 text-decoration: var(--checklist-done-decoration); 1497 } 1498 1499 /* ! */ 1500 input[type=checkbox][data-task="!"], 1501 input[type=checkbox][data-task="!"]:hover, 1502 ul > li.task-list-item[data-task="!"] > .task-list-item-checkbox { 1503 background-color: var(--color-red); 1504 border-color: var(--color-red); 1505 } 1506 input[type=checkbox][data-task="!"]:checked:after, 1507 ul > li.task-list-item[data-task="!"] > .task-list-item-checkbox:checked:after { 1508 -webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1meGVtb2ppIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij48cGF0aCBmaWxsPSIjMkIzQjQ3IiBkPSJNMzA1LjQ4NiA0MDUuMjExYzAgMjcuMTkxLTIxLjc1MiA0OS40ODYtNDkuNDg2IDQ5LjQ4NmMtMjcuNzM0IDAtNDkuNDg2LTIyLjI5NS00OS40ODYtNDkuNDg2YzAtMjcuMTkgMjEuNzUyLTQ5LjQ4NSA0OS40ODYtNDkuNDg1YzI3LjczNCAwIDQ5LjQ4NiAyMi4yOTYgNDkuNDg2IDQ5LjQ4NXptLTI2LjgwOC05OC45NzFoLTQ1Ljg3M2MtNi44IDAtMTIuMzk4LTUuMzQ3LTEyLjcwOC0xMi4xNGwtOS43MTEtMjEyLjE5N2MtLjMzMi03LjI0NyA1LjQ1NC0xMy4zMDMgMTIuNzA4LTEzLjMwM2g2NS43ODFjNy4yNjYgMCAxMy4wNTYgNi4wNzUgMTIuNzA3IDEzLjMzMmwtMTAuMTk3IDIxMi4xOTdjLS4zMjUgNi43ODEtNS45MTggMTIuMTExLTEyLjcwNyAxMi4xMTF6Ij48L3BhdGg+PC9zdmc+"); 1509 } 1510 1511 /* i */ 1512 input[type=checkbox][data-task="i"], 1513 input[type=checkbox][data-task="i"]:hover, 1514 ul > li.task-list-item[data-task="i"] > .task-list-item-checkbox { 1515 background-color: var(--color-green); 1516 border-color: var(--color-green); 1517 } 1518 input[type=checkbox][data-task="i"]:checked:after, 1519 ul > li.task-list-item[data-task="i"] > .task-list-item-checkbox:checked:after { 1520 -webkit-mask-image:url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='iso-8859-1'%3f%3e %3c!-- Generator: Adobe Illustrator 19.0.0%2c SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3e %3csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 488.9 488.9' style='enable-background:new 0 0 488.9 488.9%3b' xml:space='preserve'%3e%3cg%3e%3cg%3e%3cpath d='M239.15%2c0c31.9%2c0%2c57.7%2c25.8%2c57.7%2c57.7s-25.8%2c57.7-57.7%2c57.7s-57.7-25.8-57.7-57.7S207.25%2c0%2c239.15%2c0z M291.65%2c151.6h-1.5 h-92.8h-3.4c-19%2c0-34.3%2c15.4-34.3%2c34.3l0%2c0c0%2c19%2c15.4%2c34.3%2c34.3%2c34.3h3.4v200h-37.7v68.7h169.6v-68.7h-37.5V151.6H291.65z'/%3e%3c/g%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3cg%3e%3c/g%3e%3c/svg%3e"); 1521 } 1522 1523 /* / */ 1524 input[type=checkbox][data-task="/"], 1525 input[type=checkbox][data-task="/"]:hover, 1526 ul > li.task-list-item[data-task="/"] > .task-list-item-checkbox { 1527 background-color: var(--color-sea-green); 1528 border-color: var(--color-sea-green); 1529 } 1530 input[type=checkbox][data-task="/"]:checked:after, 1531 ul > li.task-list-item[data-task="/"] > .task-list-item-checkbox:checked:after { 1532 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' data-darkreader-inline-stroke='' style='--darkreader-inline-stroke:currentColor;'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3C/svg%3E"); 1533 } 1534 1535 /* 1536 * Code 1537 */ 1538 .cm-s-obsidian span.cm-inline-code, 1539 .markdown-preview-view code { 1540 color: inherit; 1541 padding: 3px 5px; 1542 border-radius: 5px; 1543 font-family: monospace; 1544 } 1545 1546 /* 1547 * Tags 1548 */ 1549 .pln-boxed-tags { 1550 --tag-radius: 5px; 1551 --tag-border-width: 2px; 1552 } 1553 .pln-boxed-tags .cm-hashtag-begin { 1554 display: none; 1555 } 1556 .pln-boxed-tags a.tag, 1557 .pln-boxed-tags .cm-hashtag.cm-hashtag-end { 1558 border-right: var(--tag-border-width) solid var(--tag-border-color); 1559 border-left: var(--tag-border-width) solid var(--tag-border-color); 1560 border-radius: var(--tag-radius); 1561 padding-left: var(--tag-padding-x); 1562 padding-right: var(--tag-padding-x); 1563 } 1564 1565 /* 1566 * Callouts 1567 */ 1568 body { 1569 --callout-padding: 0; 1570 --callout-title-padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-3); 1571 --callout-content-padding: 0 var(--size-4-2) var(--size-4-2) var(--size-4-3); 1572 --callout-radius: 5px; 1573 } 1574 1575 /* remove leading and trailing padding of callout content paragraphs */ 1576 .callout-content > p:first-child { 1577 margin-top: 0px; 1578 } 1579 .callout-content > p:last-child { 1580 margin-bottom: 0px; 1581 } 1582 1583 .callout { 1584 border-top: 4px solid rgba(var(--callout-color), 1.0); 1585 border-left: 2px solid rgba(var(--callout-color), 1.0); 1586 } 1587 1588 /* make quotes look like callouts too */ 1589 body { 1590 --blockquote-border-thickness: 2px; 1591 } 1592 /* correct quote padding */ 1593 .markdown-rendered blockquote { 1594 padding: 0 0 0 var(--size-4-3); 1595 } 1596 1597 /* make unique callouts */ 1598 .callout[data-callout="danger"] { 1599 --callout-icon: lucide-alert-octagon; 1600 --callout-color: var(--color-salmon-rgb); 1601 } 1602 .callout[data-callout="idea"] { 1603 --callout-icon: lucide-lightbulb; 1604 } 1605 .callout[data-callout="links"] { 1606 --callout-icon: lucide-link; 1607 } 1608 .callout[data-callout="meta"] { 1609 --callout-icon: lucide-database; 1610 } 1611 1612 /* remove meta callouts in reading mode and when embeded*/ 1613 .pln-rm-co-links .markdown-reading-view .callout[data-callout="links"], 1614 .pln-rm-co-meta .markdown-reading-view .callout[data-callout="meta"], 1615 .markdown-embed .callout[data-callout="links"], 1616 .markdown-embed .callout[data-callout="meta"] { 1617 display: none; 1618 } 1619 1620 /* colours */ 1621 .callout[data-callout="note"] { 1622 --callout-color: var(--color-blue-rgb); 1623 } 1624 1625 .callout[data-callout="abstract"], 1626 .callout[data-callout="summary"], 1627 .callout[data-callout="quote"], 1628 .callout[data-callout="tldr"] { 1629 --callout-color: var(--color-frost-rgb); 1630 } 1631 1632 .callout[data-callout="info"], 1633 .callout[data-callout="todo"], 1634 .callout[data-callout="tip"], 1635 .callout[data-callout="hint"], 1636 .callout[data-callout="important"] { 1637 --callout-color: var(--color-cyan-rgb); 1638 } 1639 1640 .callout[data-callout="success"], 1641 .callout[data-callout="check"], 1642 .callout[data-callout="done"], 1643 .callout[data-callout="question"], 1644 .callout[data-callout="help"], 1645 .callout[data-callout="faq"] { 1646 --callout-color: var(--color-green-rgb); 1647 } 1648 1649 .theme-light .callout[data-callout="idea"], 1650 .theme-light .callout[data-callout="attention"], 1651 .theme-light .callout[data-callout="caution"], 1652 .theme-light .callout[data-callout="warning"] { 1653 --callout-color: var(--color-yellow-dark-rgb); 1654 } 1655 1656 .theme-dark .callout[data-callout="idea"], 1657 .theme-dark .callout[data-callout="attention"], 1658 .theme-dark .callout[data-callout="caution"], 1659 .theme-dark .callout[data-callout="warning"] { 1660 --callout-color: var(--color-yellow-light-rgb); 1661 } 1662 1663 .callout[data-callout="failure"], 1664 .callout[data-callout="fail"], 1665 .callout[data-callout="missing"] { 1666 --callout-color: var(--color-orange-rgb); 1667 } 1668 1669 .callout[data-callout="error"], 1670 .callout[data-callout="bug"] { 1671 --callout-color: var(--color-red-rgb); 1672 } 1673 1674 .callout[data-callout="example"] { 1675 --callout-color: var(--color-purple-rgb); 1676 } 1677 1678 .theme-dark .callout[data-callout="cite"], 1679 .theme-dark .callout[data-callout="links"], 1680 .theme-dark .callout[data-callout="meta"] { 1681 --callout-color: var(--w0-rgb); 1682 } 1683 .theme-light .callout[data-callout="cite"], 1684 .theme-light .callout[data-callout="links"], 1685 .theme-light .callout[data-callout="meta"] { 1686 --callout-color: var(--b3-rgb); 1687 } 1688 1689 1690 /* 1691 * Highlighters 1692 * Original by soggymuse, modified by Pipe 1693 */ 1694 /* removes the default css */ 1695 .pln-hilite-mods mark, 1696 .pln-hilite-mods .markdown-rendered mark, 1697 .pln-hilite-mods .cm-s-obsidian span.cm-highlight { 1698 color: inherit; 1699 background: rgba(var(--color-yellow-rgb),0.2); 1700 border-radius: 5px; 1701 border: 2px solid; 1702 border-color: var(--color-yellow); 1703 } 1704 1705 /*Add highlighter's label before highlighted text*/ 1706 .pln-hilite-mods mark::before, 1707 .pln-hilite-mods .cm-s-obsidian span.cm-highlight::before { 1708 padding: 0 5px; 1709 text-transform: lowercase; 1710 font-style: italic; 1711 font-family: Palatino; 1712 } 1713 1714 /*Red highlighter (edit)*/ 1715 .pln-hilite-mods mark.edit { 1716 border-color: var(--color-red); 1717 background: rgba(var(--color-red-rgb),0.2); 1718 } 1719 .pln-hilite-mods mark.edit::before { 1720 color: var(--color-red); 1721 content: "Edit:"; 1722 } 1723 1724 /*Orange highlighter (unfinished)*/ 1725 .pln-hilite-mods mark.unfinished { 1726 border-color: var(--color-orange); 1727 background: rgba(var(--color-orange-rgb),0.2); 1728 } 1729 .pln-hilite-mods mark.unfinished::before { 1730 color: var(--color-orange); 1731 content: "Unfinished:"; 1732 } 1733 1734 /*Pink highlighter (verify)*/ 1735 .pln-hilite-mods mark.verify { 1736 border-color: var(--color-purple); 1737 background: rgba(var(--color-purple-rgb),0.2); 1738 } 1739 .pln-hilite-mods mark.verify::before { 1740 color: var(--color-purple); 1741 content: "Verify:"; 1742 } 1743 1744 /* Green highlighter (important)*/ 1745 .pln-hilite-mods mark.important { 1746 border-color: var(--color-green); 1747 background: rgba(var(--color-green-rgb),0.2); 1748 } 1749 .pln-hilite-mods mark.important::before { 1750 color: var(--color-green); 1751 content: "Important:"; 1752 } 1753 1754 /* 1755 * Text colours using mark 1756 */ 1757 .pln-hilite-mods mark.red { 1758 color: var(--color-red); 1759 background: none; 1760 border: 0px; 1761 } 1762 .pln-hilite-mods mark.orange { 1763 color: var(--color-orange); 1764 background: none; 1765 border: 0px; 1766 } 1767 .pln-hilite-mods mark.yellow { 1768 color: var(--color-yellow); 1769 background: none; 1770 border: 0px; 1771 } 1772 .pln-hilite-mods mark.green { 1773 color: var(--color-green); 1774 background: none; 1775 border: 0px; 1776 } 1777 .pln-hilite-mods mark.purple { 1778 color: var(--color-purple); 1779 background: none; 1780 border: 0px; 1781 } 1782 .pln-hilite-mods mark.sea-green { 1783 color: var(--color-sea-green); 1784 background: none; 1785 border: 0px; 1786 } 1787 .pln-hilite-mods mark.cyan { 1788 color: var(--color-cyan); 1789 background: none; 1790 border: 0px; 1791 } 1792 .pln-hilite-mods mark.frost { 1793 color: var(--color-frost); 1794 background: none; 1795 border: 0px; 1796 } 1797 .pln-hilite-mods mark.blue { 1798 color: var(--color-blue); 1799 background: none; 1800 border: 0px; 1801 } 1802 .pln-hilite-mods mark.salmon { 1803 color: var(--color-salmon); 1804 background: none; 1805 border: 0px; 1806 } 1807 /*underlined text*/ 1808 .pln-hilite-mods mark.underline { 1809 text-decoration: underline; 1810 background: none; 1811 border: 0px; 1812 } 1813 /* paths */ 1814 .pln-hilite-mods mark.path { 1815 font-family: var(--font-monospace); 1816 color: var(--text-faint); 1817 background: none; 1818 border: 0px; 1819 } 1820 /* borders */ 1821 .pln-hilite-mods mark.borders { 1822 border: 1px solid; 1823 border-radius: 0px; 1824 padding-left: 2px; 1825 padding-right: 2px; 1826 background: none; 1827 } 1828 /* spoiler */ 1829 .pln-hilite-mods mark.spoiler { 1830 border: 0px; 1831 background-color: var(--text-normal); 1832 } 1833 .pln-hilite-mods mark.spoiler:hover { 1834 background-color: inherit; 1835 } 1836 1837 /* 1838 * Calendar plugin 1839 * 1840 * obsidian-calendar-plugin 1841 * https://github.com/liamcain/obsidian-calendar-plugin 1842 /* 1843 1844 /* colors */ 1845 #calendar-container { 1846 --color-dot: var(--color-accent); 1847 --color-arrow: var(--color-salmon); 1848 --color-background-weekend: var(--background-primary); 1849 --color-text-weeknum: var(--color-yellow); 1850 } 1851 #calendar-container .year { 1852 color: var(--color-cyan); 1853 } 1854 #calendar-container .active { 1855 --color-dot: var(--text-on-accent); 1856 } 1857 1858 /* padding fixes for calendar */ 1859 .workspace-leaf-content .view-content { 1860 padding: var(--size-2-2); 1861 } 1862 #calendar-container, 1863 #calendar-container .day, 1864 #calendar-container .week-num { 1865 padding: 0; 1866 } 1867 #calendar-container .nav { 1868 margin: .2em 0 .6em; 1869 } 1870 1871 /* 1872 * Folders 1873 /* 1874 /* https://forum.obsidian.md/t/iterative-rainbow-folder-colors-css/21066 */ 1875 /* thanks to Evelf */ 1876 /* updated for v1.6.0 */ 1877 1878 .tree-item-children { 1879 --nav-indentation-guide-width: 3px; 1880 border-bottom-left-radius: 5px; 1881 } 1882 /* changes the top level folders to darker text so they can be read on the coloured folder background*/ 1883 .nav-files-container > div > .nav-folder > .nav-folder-title, 1884 .nav-files-container > div > .nav-folder > .nav-folder-title:hover, 1885 .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon svg.svg-icon { 1886 --nav-item-color: var(--b0); 1887 --nav-item-color-hover: var(--b0); 1888 --nav-collapse-icon-color: var(--b0); 1889 } 1890 1891 /* optionally make the collapse icons folders instead */ 1892 .pln-folder-icons .nav-files-container .collapse-icon.is-collapsed svg.svg-icon { 1893 transform: none; 1894 } 1895 1896 /* Make all folder chevrons into icons, and make them all white */ 1897 .pln-folder-icons .nav-files-container > div > .nav-folder .collapse-icon svg { 1898 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder-open'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); 1899 color: var(--icon-color); 1900 background-color: var(--icon-color); 1901 } 1902 /* Change top level to grey */ 1903 .pln-folder-icons .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon svg { 1904 color: var(--b0); 1905 background-color: var(--b0); 1906 } 1907 1908 /* Make all folder chevrons into icons, and make them all white */ 1909 .pln-folder-icons .nav-files-container > div > .nav-folder .collapse-icon.is-collapsed svg { 1910 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); 1911 color: var(--icon-color); 1912 background-color: var(--icon-color); 1913 } 1914 /* Change top level to grey */ 1915 .pln-folder-icons .nav-files-container > div > .nav-folder > .nav-folder-title > .collapse-icon.is-collapsed svg { 1916 color: var(--b0); 1917 background-color: var(--b0); 1918 } 1919 1920 /* Coloursssssss */ 1921 .nav-files-container > div > .nav-folder:nth-child(9n+2) > .tree-item-self { 1922 background-color: var(--color-red); 1923 } 1924 .nav-files-container > div > .nav-folder:nth-child(9n+2) .tree-item-children { 1925 --nav-indentation-guide-color: var(--color-red); 1926 } 1927 1928 .nav-files-container > div > .nav-folder:nth-child(9n+3) > .tree-item-self { 1929 background-color: var(--color-orange); 1930 } 1931 .nav-files-container > div > .nav-folder:nth-child(9n+3) .tree-item-children { 1932 --nav-indentation-guide-color: var(--color-orange); 1933 } 1934 1935 .nav-files-container > div > .nav-folder:nth-child(9n+4) > .tree-item-self { 1936 background-color: var(--color-yellow-light); 1937 } 1938 .nav-files-container > div > .nav-folder:nth-child(9n+4) .tree-item-children { 1939 --nav-indentation-guide-color: var(--color-yellow-light); 1940 } 1941 1942 .nav-files-container > div > .nav-folder:nth-child(9n+5) > .tree-item-self { 1943 background-color: var(--color-green); 1944 } 1945 .nav-files-container > div > .nav-folder:nth-child(9n+5) .tree-item-children { 1946 --nav-indentation-guide-color: var(--color-green); 1947 } 1948 1949 .nav-files-container > div > .nav-folder:nth-child(9n+6) > .tree-item-self { 1950 background-color: var(--color-sea-green); 1951 } 1952 .nav-files-container > div > .nav-folder:nth-child(9n+6) .tree-item-children { 1953 --nav-indentation-guide-color: var(--color-sea-green); 1954 } 1955 1956 .nav-files-container > div > .nav-folder:nth-child(9n+7) > .tree-item-self { 1957 background-color: var(--color-cyan); 1958 } 1959 .nav-files-container > div > .nav-folder:nth-child(9n+7) .tree-item-children { 1960 --nav-indentation-guide-color: var(--color-cyan); 1961 } 1962 1963 .nav-files-container > div > .nav-folder:nth-child(9n+8) > .tree-item-self { 1964 background-color: var(--color-frost); 1965 } 1966 .nav-files-container > div > .nav-folder:nth-child(9n+8) .tree-item-children { 1967 border-left: 3px solid var(--color-frost); 1968 } 1969 1970 .nav-files-container > div > .nav-folder:nth-child(9n+9) > .tree-item-self { 1971 background-color: var(--color-blue); 1972 } 1973 .nav-files-container > div > .nav-folder:nth-child(9n+9) .tree-item-children { 1974 --nav-indentation-guide-color: var(--color-blue); 1975 } 1976 1977 .nav-files-container > div > .nav-folder:nth-child(9n+10) > .tree-item-self { 1978 background-color: var(--color-purple); 1979 } 1980 .nav-files-container > div > .nav-folder:nth-child(9n+10) .tree-item-children { 1981 --nav-indentation-guide-color: var(--color-purple); 1982 } 1983 1984 /* lock functionality */ 1985 .lock * { 1986 -webkit-user-modify: read-only !important; 1987 } 1988 .lock .metadata-content { 1989 pointer-events: none; 1990 } 1991 .workspace-leaf:has(.lock) .clickable-icon.view-action[aria-label^="Current view:"] { 1992 -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-lock'%3E%3Crect width='18' height='11' x='3' y='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); 1993 background-color: var(--icon-color); 1994 -webkit-mask-repeat: no-repeat; 1995 -webkit-mask-position: center; 1996 pointer-events:none 1997 } 1998 1999 /* 2000 * Supplementals 2001 */ 2002 2003 /* MIT License | Copyright (c) Stephan Ango (@kepano) 2004 2005 Cards snippet for Obsidian 2006 2007 author: @kepano 2008 version: 3.0.0 2009 2010 Support my work: 2011 https://github.com/sponsors/kepano 2012 2013 */ 2014 body { 2015 --cards-min-width: 180px; 2016 --cards-max-width: 1fr; 2017 --cards-mobile-width: 120px; 2018 --cards-image-height: 400px; 2019 --cards-padding: 1.2em; 2020 --cards-image-fit: contain; 2021 --cards-background: transparent; 2022 --cards-border-width: 1px; 2023 --cards-aspect-ratio: auto; 2024 --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width))); } 2025 2026 @media (max-width: 400pt) { 2027 body { 2028 --cards-min-width:var(--cards-mobile-width); } } 2029 .cards.table-100 table.dataview tbody, 2030 .table-100 .cards table.dataview tbody { 2031 padding: 0.25rem 0.75rem; } 2032 2033 .cards table.dataview { 2034 --table-width: 100%; 2035 --table-edge-cell-padding-first: calc(var(--cards-padding)/2); 2036 --table-edge-cell-padding-last: calc(var(--cards-padding)/2); 2037 --table-cell-padding: calc(var(--cards-padding)/3) calc(var(--cards-padding)/2); 2038 line-height: 1.3; } 2039 .cards table.dataview tbody { 2040 clear: both; 2041 padding: 0.5rem 0; 2042 display: grid; 2043 grid-template-columns: var(--cards-columns); 2044 grid-column-gap: 0.75rem; 2045 grid-row-gap: 0.75rem; } 2046 .cards table.dataview > tbody > tr { 2047 background-color: var(--cards-background); 2048 border: var(--cards-border-width) solid var(--background-modifier-border); 2049 display: flex; 2050 flex-direction: column; 2051 margin: 0; 2052 padding: 0 0 calc(var(--cards-padding)/3) 0; 2053 border-radius: 6px; 2054 overflow: hidden; 2055 transition: box-shadow 0.15s linear; 2056 max-width: var(--cards-max-width); 2057 height: auto; } 2058 .cards table.dataview > tbody > tr:hover { 2059 border: var(--cards-border-width) solid var(--background-modifier-border-hover); 2060 box-shadow: 0 4px 6px 0px rgba(0, 0, 0, 0.05), 0 1px 3px 1px rgba(0, 0, 0, 0.025); 2061 transition: box-shadow 0.15s linear; } 2062 .cards table.dataview tbody > tr > td { 2063 /* Paragraphs */ 2064 /* Links */ 2065 /* Buttons */ 2066 /* Lists */ 2067 /* Images */ } 2068 .cards table.dataview tbody > tr > td:first-child { 2069 font-weight: var(--bold-weight); 2070 border: none; } 2071 .cards table.dataview tbody > tr > td:first-child a { 2072 display: block; } 2073 .cards table.dataview tbody > tr > td:last-child { 2074 border: none; } 2075 .cards table.dataview tbody > tr > td:not(:first-child) { 2076 font-size: calc(var(--table-text-size) * .9); 2077 color: var(--text-muted); } 2078 .cards table.dataview tbody > tr > td > * { 2079 padding: calc(var(--cards-padding)/3) 0; } 2080 .cards table.dataview tbody > tr > td:not(:last-child):not(:first-child) { 2081 padding: 4px 0; 2082 border-bottom: 1px solid var(--background-modifier-border); 2083 width: calc(100% - var(--cards-padding)); 2084 margin: 0 calc(var(--cards-padding)/2); } 2085 .cards table.dataview tbody > tr > td a { 2086 text-decoration: none; } 2087 .cards table.dataview tbody > tr > td > button { 2088 width: 100%; 2089 margin: calc(var(--cards-padding)/2) 0; } 2090 .cards table.dataview tbody > tr > td:last-child > button { 2091 margin-bottom: calc(var(--cards-padding)/6); } 2092 .cards table.dataview tbody > tr > td > ul { 2093 width: 100%; 2094 padding: 0.25em 0 !important; 2095 margin: 0 auto !important; } 2096 .cards table.dataview tbody > tr > td:has(img) { 2097 padding: 0 !important; 2098 background-color: var(--background-secondary); 2099 display: block; 2100 margin: 0; 2101 width: 100%; } 2102 .cards table.dataview tbody > tr > td img { 2103 aspect-ratio: var(--cards-aspect-ratio); 2104 width: 100%; 2105 object-fit: var(--cards-image-fit); 2106 max-height: var(--cards-image-height); 2107 background-color: var(--background-secondary); 2108 vertical-align: bottom; } 2109 2110 .markdown-source-view.mod-cm6.cards .dataview.table-view-table > tbody > tr > td, 2111 .trim-cols .cards table.dataview tbody > tr > td { 2112 white-space: normal; } 2113 2114 /* 2115 .cards, 2116 .markdown-source-view.mod-cm6.cards { 2117 .dataview.table-view-table > tbody > tr > td, 2118 table.dataview tbody > tr > td { 2119 border-bottom: none; 2120 padding: 0!important; 2121 line-height: 1.2; 2122 width: calc(100% - var(--cards-padding)); 2123 margin: 0 auto; 2124 overflow: visible !important; 2125 max-width: 100%; 2126 display: flex; 2127 } 2128 }*/ 2129 .links-int-on .cards table { 2130 --link-decoration: none; } 2131 2132 /* Block button */ 2133 .markdown-source-view.mod-cm6.cards .edit-block-button { 2134 top: 0px; } 2135 2136 /* ------------------- */ 2137 /* Sorting menu */ 2138 .cards.table-100 table.dataview thead > tr, 2139 .table-100 .cards table.dataview thead > tr { 2140 right: 0.75rem; } 2141 2142 .table-100 .cards table.dataview thead:before, 2143 .cards.table-100 table.dataview thead:before { 2144 margin-right: 0.75rem; } 2145 2146 .theme-light .cards table.dataview thead:before { 2147 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><path fill="black" d="M49.792 33.125l-5.892 5.892L33.333 28.45V83.333H25V28.45L14.438 39.017L8.542 33.125L29.167 12.5l20.625 20.625zm41.667 33.75L70.833 87.5l-20.625 -20.625l5.892 -5.892l10.571 10.567L66.667 16.667h8.333v54.883l10.567 -10.567l5.892 5.892z"></path></svg>'); } 2148 2149 .cards table.dataview thead { 2150 user-select: none; 2151 width: 180px; 2152 display: block; 2153 float: right; 2154 position: relative; 2155 text-align: right; 2156 height: 24px; 2157 padding-bottom: 0px; } 2158 .cards table.dataview thead:hover:before { 2159 opacity: 0.5; 2160 background-color: var(--background-modifier-hover); } 2161 .cards table.dataview thead:before { 2162 content: ''; 2163 position: absolute; 2164 right: 0; 2165 top: 0; 2166 width: 10px; 2167 height: 16px; 2168 background-repeat: no-repeat; 2169 cursor: var(--cursor); 2170 text-align: right; 2171 padding: var(--size-4-1) var(--size-4-2); 2172 margin-bottom: 2px; 2173 border-radius: var(--radius-s); 2174 font-weight: 500; 2175 font-size: var(--font-adaptive-small); 2176 opacity: 0.25; 2177 background-position: center center; 2178 background-size: 16px; 2179 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><path fill="white" d="M49.792 33.125l-5.892 5.892L33.333 28.45V83.333H25V28.45L14.438 39.017L8.542 33.125L29.167 12.5l20.625 20.625zm41.667 33.75L70.833 87.5l-20.625 -20.625l5.892 -5.892l10.571 10.567L66.667 16.667h8.333v54.883l10.567 -10.567l5.892 5.892z"></path></svg>'); } 2180 .cards table.dataview thead > tr { 2181 top: -1px; 2182 position: absolute; 2183 display: none; 2184 z-index: 9; 2185 border: 1px solid var(--background-modifier-border-hover); 2186 background-color: var(--background-secondary); 2187 box-shadow: var(--shadow-s); 2188 padding: 6px; 2189 border-radius: var(--radius-m); 2190 flex-direction: column; 2191 margin: 24px 0 0 0; 2192 width: 100%; } 2193 .cards table.dataview thead:hover > tr { 2194 display: flex; } 2195 .cards table.dataview thead > tr > th { 2196 display: block; 2197 padding: 3px 30px 3px 6px !important; 2198 border-radius: var(--radius-s); 2199 width: 100%; 2200 font-weight: 400; 2201 color: var(--text-normal); 2202 cursor: var(--cursor); 2203 border: none; 2204 font-size: var(--font-ui-small); } 2205 .cards table.dataview thead > tr > th[sortable-style="sortable-asc"], 2206 .cards table.dataview thead > tr > th[sortable-style="sortable-desc"] { 2207 color: var(--text-normal); } 2208 .cards table.dataview thead > tr > th:hover { 2209 color: var(--text-normal); 2210 background-color: var(--background-modifier-hover); } 2211 2212 /* ------------------- */ 2213 /* Card lists */ 2214 .list-cards.markdown-preview-view .list-bullet, 2215 .list-cards.markdown-preview-view .list-collapse-indicator, .list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li > ul::before { 2216 display: none; } 2217 .list-cards.markdown-preview-view div > ul { 2218 display: grid; 2219 gap: 0.75rem; 2220 grid-template-columns: var(--cards-columns); 2221 padding: 0; 2222 line-height: var(--line-height-tight); } 2223 .list-cards.markdown-preview-view div > ul > li { 2224 background-color: var(--cards-background); 2225 padding: calc(var(--cards-padding)/2); 2226 border-radius: var(--radius-s); 2227 border: var(--cards-border-width) solid var(--background-modifier-border); 2228 overflow: hidden; } 2229 .list-cards.markdown-preview-view div > ul .image-embed { 2230 padding: 0; 2231 display: block; 2232 background-color: var(--background-secondary); 2233 border-radius: var(--image-radius); } 2234 .list-cards.markdown-preview-view div > ul .image-embed img { 2235 aspect-ratio: var(--cards-aspect-ratio); 2236 object-fit: var(--cards-image-fit); 2237 max-height: var(--cards-image-height); 2238 background-color: var(--background-secondary); 2239 vertical-align: bottom; } 2240 .list-cards.markdown-preview-view div > ul > li > a { 2241 --link-decoration: none; 2242 --link-external-decoration: none; 2243 font-weight: var(--bold-weight); } 2244 .list-cards.markdown-preview-view div ul > li:hover { 2245 border-color: var(--background-modifier-border-hover); } 2246 .list-cards.markdown-preview-view div ul ul { 2247 display: block; 2248 width: 100%; 2249 color: var(--text-muted); 2250 font-size: var(--font-smallest); 2251 margin: calc(var(--cards-padding)/-4) 0; 2252 padding: calc(var(--cards-padding)/2) 0; } 2253 .list-cards.markdown-preview-view div ul ul ul { 2254 padding-bottom: calc(var(--cards-padding)/4); } 2255 .list-cards.markdown-preview-view div ul ul > li { 2256 display: block; } 2257 2258 /* ------------------- */ 2259 /* Helper classes */ 2260 .cards.cards-16-9, 2261 .list-cards.cards-16-9 { 2262 --cards-aspect-ratio: 16/9; } 2263 .cards.cards-1-1, 2264 .list-cards.cards-1-1 { 2265 --cards-aspect-ratio: 1/1; } 2266 .cards.cards-2-1, 2267 .list-cards.cards-2-1 { 2268 --cards-aspect-ratio: 2/1; } 2269 .cards.cards-2-3, 2270 .list-cards.cards-2-3 { 2271 --cards-aspect-ratio: 2/3; } 2272 .cards.cards-cols-1, 2273 .list-cards.cards-cols-1 { 2274 --cards-columns: repeat(1, minmax(0, 1fr)); } 2275 .cards.cards-cols-2, 2276 .list-cards.cards-cols-2 { 2277 --cards-columns: repeat(2, minmax(0, 1fr)); } 2278 .cards.cards-cover, 2279 .list-cards.cards-cover { 2280 --cards-image-fit: cover; } 2281 .cards.cards-align-bottom table.dataview tbody > tr > td:last-child, 2282 .list-cards.cards-align-bottom table.dataview tbody > tr > td:last-child { 2283 margin-top: auto; } 2284 2285 @media (max-width: 400pt) { 2286 .cards table.dataview tbody > tr > td:not(:first-child) { 2287 font-size: 80%; } } 2288 @media (min-width: 400pt) { 2289 .cards-cols-3 { 2290 --cards-columns: repeat(3, minmax(0, 1fr)); } 2291 2292 .cards-cols-4 { 2293 --cards-columns: repeat(4, minmax(0, 1fr)); } 2294 2295 .cards-cols-5 { 2296 --cards-columns: repeat(5, minmax(0, 1fr)); } 2297 2298 .cards-cols-6 { 2299 --cards-columns: repeat(6, minmax(0, 1fr)); } 2300 2301 .cards-cols-7 { 2302 --cards-columns: repeat(7, minmax(0, 1fr)); } 2303 2304 .cards-cols-8 { 2305 --cards-columns: repeat(8, minmax(0, 1fr)); } }