├── .gitignore ├── ayu1.png ├── README.md └── obsidian.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /ayu1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bcdavasconcelos/Obsidian-Ayu_Mirage/master/ayu1.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian Ayu Mirage 2 | 3 | This is a mixture of some themes available for Obsidian, especially `pisium` and `traffic lights`, with several modifications (too many to mention). 4 | 5 | ![](ayu1.png) 6 | -------------------------------------------------------------------------------- /obsidian.css: -------------------------------------------------------------------------------- 1 | /* Ayu Mirage */ 2 | /* bcdav 2020-07-06-10-39-49 */ 3 | 4 | /* global */ 5 | 6 | :root 7 | { 8 | --font-size-normal: 24px; 9 | --font-size-code: 22px; 10 | --font-size-side-dock: 16px; 11 | --font-size-side-dock-title: 18px; 12 | --font-size-blockquote: 22px; 13 | --font-size-status-bar: 16px; 14 | --font-small: 18px; 15 | --font-medium: 21px; 16 | --line-height-preview: 1.7em; 17 | --line-height-header-preview: 1em; 18 | --font-family-mdpreview: Skolar PE, Gentium Plus, Alegreya, Source Sans Pro, Avenir Next, Times New Roman; 19 | --font-family-editor: Skolar PE, iA Writer Quattro S, Menlo, Avenir Next, Times New Roman; 20 | --font-family-preview: Gentium Plus, Alegreya, Source Sans Pro, Palatino, Avenir Next, Times New Roman; 21 | --font-family-code: Ubuntu Mono derivative Powerline, Menlo, Monaco; 22 | } 23 | 24 | .theme-light, 25 | .theme-dark 26 | { 27 | --background-primary: #171a23; 28 | --background-primary-alt: rgba(0,0,0,0.08); 29 | --background-secondary: #13151e; 30 | --background-secondary-alt: var(--background-secondary); 31 | --background-accent: rgba(0,0,0,0.08); 32 | --background-modifier-border: var(--text-faint); 33 | --background-modifier-form-field: var(--background-primary); 34 | --background-modifier-form-field-highlighted: var(--background-primary); 35 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 36 | --background-modifier-success: rgba(160,232,92,0.08); 37 | --background-modifier-error: #3d0000; 38 | --background-modifier-error-rgb: 61, 0, 0; 39 | --background-modifier-error-hover: #470000; 40 | --background-modifier-cover: rgba(0, 0, 0, 0.6); 41 | 42 | --text-accent: #fec154; 43 | --text-accent-hover: var(--text-faint); 44 | --text-normal: #d1cec6; 45 | --text-muted: #686e80; 46 | --text-faint: #686e80; 47 | --text-error: #800000; 48 | --text-error-hover: #990000; 49 | --text-highlight-bg: var(--text-selection); 50 | --text-selection: rgba(49, 54, 70, 0.50); 51 | --text-on-accent: var(--text-normal); 52 | --interactive-normal: var(--background-primary); 53 | --interactive-hover: rgba(0,0,0,0.05); 54 | --interactive-accent: var(--tag-bg); 55 | --interactive-accent-rgb: 72, 54, 153; 56 | --interactive-accent-hover: var(--text-selection); 57 | --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.1); 58 | --scrollbar-bg: rgba(0, 0, 0, 0.0); 59 | --scrollbar-thumb-bg: rgba(0, 0, 0, 0.08); 60 | 61 | 62 | --graph-note-name: var(--text-normal); 63 | --graph-node-color: var(--tag-bg); 64 | --graph-line-color: var(--border-color); 65 | --graph-line-on-hover: var(--tag-bg); 66 | --hashtag-color: #6875aa; 67 | --border-color: #282c3c; 68 | 69 | --blockquote-border: var(--text-accent); 70 | --pre-code-bg: #13141b; 71 | --code-block: var(--text-muted); 72 | --file-name-color: var(--text-accent); 73 | --inline-code: var(--text-muted); 74 | --interfa-color-icon: var(--interface-color-border); 75 | --interface-color-action: var(--text-normal); 76 | --interface-color-background-alt: var(--background-primary); 77 | --interface-color-border: rgba(250,250,250,0.045); 78 | --interface-color-foreground-alt: var(--text-accent); 79 | --interface-color-pin: var(--text-normal); 80 | --quick-switcher: var(--text-selection); 81 | 82 | 83 | --text-title-h1: #8e98aa; 84 | --text-title-h2: var(--text-title-h1); 85 | --text-title-h3: var(--text-title-h1); 86 | --text-title-h4: var(--text-title-h1); 87 | --text-title-h5: var(--text-title-h1); 88 | --text-title-h6: var(--text-title-h1); 89 | --ul-line-color: #777; 90 | 91 | --link-text: var(--text-accent); 92 | --link-bg: ; 93 | --link-text-hover: var(--text-accent); 94 | --link-bg-hover: ; 95 | 96 | --hashtag-color: #6875aa; 97 | --tag-text-color: #eaebeb; 98 | --tag-bg: rgba(63, 69, 91, 1); 99 | --tag-text-hover: #eaebeb; 100 | --tag-bg-hover: #2b3147; 101 | 102 | --interface-color-cross: #fc3b44; 103 | --interface-color-pencil: #fec03e; 104 | --interface-color-three-dots: #a0e85b; 105 | 106 | 107 | --interface-color-background: #415358; 108 | --interface-color-foreground: #3e3e3e; 109 | 110 | 111 | --font-size-footnote: 22px; 112 | --font-size-h1: 1.9em; 113 | --font-size-h2: 1.6em; 114 | --font-size-h3: 1.3em; 115 | --font-size-h4: 1.2em; 116 | --font-size-h5: 1.1em; 117 | --font-size-h6: 1em; 118 | --header-before-size-h1: 0.5em; 119 | --header-before-size-h2: 0.5em; 120 | --header-before-size-h3: 0.5em; 121 | --header-before-size-h4: 0.5em; 122 | --header-before-size-h5: 0.5em; 123 | --header-before-size-h6: 0.5em; 124 | --text-title-font-weight: 600; 125 | --line-height-footnote: 1.2em; 126 | --ul-line-specs: 0.9px solid; 127 | --vim-cursor: #474949; 128 | --header-before-color: rgba(93, 99, 121, 1); 129 | --blockquote-bg: var(--background-primary); 130 | --bracket-color: var(--header-before-color); 131 | --checkbox-color: var(--tag-bg); 132 | --checkbox-enabled: var(--file-name-color); 133 | --active-title-border: var(--interactive-accent); 134 | --hr-color: hsl(0, 0%, 39%); 135 | } 136 | 137 | 138 | 139 | /*-------------------------------------*/ 140 | /* Search the following lines */ 141 | /* to jump to specific section */ 142 | /*-------------------------------------*/ 143 | /* resize-handle and borders */ 144 | /* tags */ 145 | /* link */ 146 | /* Cursor */ 147 | /* basic format in EDITOR and PREVIEW */ 148 | /* Headings - EDITOR and PREVIEW */ 149 | /* Code block in Preview */ 150 | /* Code block in Editor */ 151 | /* Brackets */ 152 | /* Blockquote */ 153 | /* table */ 154 | /* Checkbox */ 155 | /* html in editor */ 156 | /* popover */ 157 | /* Side panel */ 158 | /* internal embedded link in preview */ 159 | /* graph view */ 160 | /* settings */ 161 | /* Hide side bar */ 162 | /* width of content */ 163 | /* note header bar for non-andy mode */ 164 | /* andy mode activated in light mode */ 165 | /* at a rule line before ul list * 166 | /* Hide Scrollbar (recommend for mac) */ 167 | /* hashtags before headers */ 168 | /*-------------------------------------*/ 169 | 170 | 171 | /*********************************/ 172 | /* link */ 173 | /*********************************/ 174 | 175 | a, 176 | .internal-link, 177 | .cm-hmd-internal-link, 178 | .cm-link, 179 | .cm-url { 180 | text-decoration: none !important; 181 | background-color: var(--link-bg)!important; 182 | color: var(--link-text)!important; 183 | } 184 | 185 | a:hover, 186 | .internal-link:hover, 187 | .cm-hmd-internal-link:hover, 188 | .cm-link:hover, 189 | .cm-url:hover { 190 | background-color: var(--link-bg-hover)!important; 191 | color: var(--link-text-hover)!important; 192 | } 193 | 194 | 195 | 196 | 197 | 198 | /* the url string in editor */ 199 | .cm-s-obsidian span.cm-string{ 200 | color: var(--text-muted)!important; 201 | } 202 | 203 | 204 | /* make external links italics to differentiate */ 205 | a:not(.internal-link) { 206 | /* font-style: italic; */ 207 | } 208 | 209 | 210 | /*************************************/ 211 | /* tags */ 212 | /*************************************/ 213 | 214 | .cm-s-obsidian span.cm-hashtag-begin, 215 | .cm-s-obsidian span.cm-hashtag-end, 216 | a.tag { 217 | color: var(--tag-text-color) !important; 218 | background-color: var(--tag-bg) !important; 219 | font-family: var(--font-family) !important; 220 | font-size: 1em; 221 | text-decoration: none !important; 222 | font-style: normal !important; 223 | padding-bottom: 2px; 224 | padding-top: 0.5px; 225 | } 226 | 227 | /* ---------------- */ 228 | /* -- BEAR TAGS --- */ 229 | /* ---------------- */ 230 | 231 | a.tag { 232 | padding-left: 8px; 233 | padding-right: 8px; 234 | border-top-left-radius: 8px; 235 | border-top-right-radius: 8px; 236 | border-bottom-left-radius: 8px; 237 | border-bottom-right-radius: 8px; 238 | } 239 | 240 | .cm-s-obsidian span.cm-hashtag-begin { 241 | padding-left: 8px; 242 | border-top-left-radius: 8px; 243 | border-bottom-left-radius: 8px; 244 | } 245 | 246 | .cm-s-obsidian span.cm-hashtag-end { 247 | padding-right: 8px; 248 | border-top-right-radius: 8px; 249 | border-bottom-right-radius: 8px; 250 | } 251 | 252 | .cm-s-obsidian span.cm-hashtag { 253 | color: var(--tag-text-color)!important; 254 | background: var(--tag-bg)!important; 255 | } 256 | 257 | span.cm-formatting.cm-formatting-hashtag.cm-hashtag-begin.cm-hashtag.cm-meta { 258 | color: var(--hashtag-color)!important; 259 | } 260 | 261 | 262 | a.tag:hover { 263 | background-color: var(--tag-bg-hover) !important; 264 | color: var(--tag-text-hover)!important; 265 | } 266 | 267 | 268 | /*footnote*/ 269 | .cm-s-obsidian pre.HyperMD-footnote 270 | { 271 | font-size: var(--font-size-footnote); 272 | line-height: var(--line-height-footnote); 273 | } 274 | 275 | .footnotes 276 | { 277 | font-size: var(--font-size-footnote); 278 | line-height: var(--line-height-footnote); 279 | } 280 | 281 | /* 282 | .cm-s-obsidian pre.HyperMD-footnote span.cm-hmd-footnote, 283 | .cm-s-obsidian span.cm-footref { 284 | 285 | } 286 | */ 287 | 288 | 289 | /***************************************/ 290 | /* resize-handle and borders */ 291 | /***************************************/ 292 | 293 | 294 | /*vertical resize-handle*/ 295 | .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, 296 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle, 297 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle{ 298 | width: 1px !important; 299 | background-color: var(--border-color); 300 | } 301 | 302 | 303 | /*horizontal resize-handle*/ 304 | .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle{ 305 | height: 1px !important; 306 | background-color: var(--border-color); 307 | } 308 | 309 | 310 | /*workspace ribbon when collapsed*/ 311 | .workspace-ribbon.is-collapsed { 312 | background-color: var(--background-primary-alt); 313 | } 314 | 315 | 316 | /*the vertical split*/ 317 | .workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content, 318 | .workspace-split.mod-vertical > .workspace-split, 319 | .workspace-split.mod-vertical > .workspace-leaf, 320 | .workspace-tabs{ 321 | padding-right: 0px; 322 | } 323 | 324 | 325 | /*status-bar*/ 326 | .status-bar { 327 | font-size: var(--font-size-status-bar)!important; 328 | background-color: var(--background-secondary-alt); 329 | border-top: 0px; 330 | } 331 | 332 | .document-search-container{ 333 | border-top: 0px; 334 | border-right: 0px; 335 | z-index: inherit; 336 | } 337 | 338 | 339 | .workspace-ribbon.mod-left.is-collapsed{ 340 | border-right: 1px solid var(--border-color); 341 | } 342 | 343 | 344 | .workspace-ribbon.mod-right.is-collapsed{ 345 | border-left: 1px solid var(--border-color); 346 | } 347 | 348 | 349 | 350 | 351 | /***************************************/ 352 | /* Cursor */ 353 | /***************************************/ 354 | 355 | 356 | /* Cursor color and opacity */ 357 | 358 | 359 | .cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor 360 | { 361 | width: 0.5em; 362 | background: var(--vim-cursor); 363 | opacity: 60% !important; 364 | } 365 | 366 | 367 | /**************************************/ 368 | /* basic format in EDITOR and PREVIEW */ 369 | /**************************************/ 370 | 371 | 372 | /* font for everything outside of editor/preview panes */ 373 | .app-container { 374 | font-family: var(--font-family-preview); 375 | } 376 | 377 | 378 | /* set the text selection color for preview mode */ 379 | ::selection { 380 | background-color: var(--text-selection)!important; 381 | } 382 | 383 | 384 | /* normal text outside of headings and code of editor */ 385 | .cm-s-obsidian, .mod-single-child .cm-s-obsidian { 386 | font-family: var(--font-family-editor); 387 | /* 388 | text-align: justify; 389 | text-justify: inter-word; 390 | text-align-last: left; 391 | */ 392 | font-weight: 500; 393 | font-size: var(--font-size-normal); 394 | padding-top: 5px; 395 | padding-left: 1% !important; 396 | padding-right: 1% !important; 397 | } 398 | 399 | 400 | /* normal text outside of headings and code of preview */ 401 | .markdown-preview-view, .mod-single-child .markdown-preview-view { 402 | font-family: var(--font-family-mdpreview); 403 | font-size: var(--font-size-normal); 404 | /* text-align: justify; */ 405 | /* text-justify: inter-word; */ 406 | text-align-last: left; 407 | hyphens:auto; 408 | line-height: var(--line-height-preview); 409 | padding-top: 0px; 410 | padding-left: 2% !important; 411 | padding-right: 1% !important; 412 | } 413 | 414 | /* bold in preview and editor */ 415 | strong, .cm-strong { 416 | font-weight: 600; 417 | } 418 | 419 | 420 | /* emphasis in preview and editor */ 421 | em, .cm-em { 422 | /* color: var(--text-muted); */ 423 | font-style: italic; 424 | } 425 | 426 | 427 | /* strikethrough in preview and editor */ 428 | s, .cm-strikethrough { 429 | color: var(--text-muted); 430 | } 431 | 432 | 433 | /* list in editor */ 434 | .cm-s-obsidian span.cm-formatting-list { 435 | color: var(--text-normal) !important; 436 | } 437 | 438 | 439 | /* horizontal line in preview */ 440 | .markdown-preview-view hr { 441 | background-color: var(--text-faint) !important; 442 | } 443 | 444 | 445 | /* embedded images */ 446 | img { 447 | display: block; 448 | margin-left: auto; 449 | margin-right: auto; 450 | } 451 | /* img hover zoom out img*/ 452 | img:hover { 453 | transform: scale(1.04); 454 | transition: transform 0.25s ease-in-out 0s; 455 | } 456 | 457 | 458 | /*disable image resize in setting pane*/ 459 | .community-theme img:hover{ 460 | transform: none; 461 | } 462 | 463 | 464 | /* Changing size/color of the header hashtags ## */ 465 | /* .cm-formatting-header { 466 | font-size: 0.6em !important; 467 | } */ 468 | 469 | 470 | /*text between :: show same color as normal text*/ 471 | .cm-formatting-emoji{ 472 | color: var(--text-normal) !important; 473 | } 474 | 475 | 476 | /*********************************/ 477 | /* Headings - EDITOR and PREVIEW */ 478 | /*********************************/ 479 | 480 | 481 | 482 | /* headings for editor and preview */ 483 | .cm-s-obsidian pre.HyperMD-header.HyperMD-header-1, 484 | .cm-s-obsidian pre.HyperMD-header.HyperMD-header-2, 485 | .cm-s-obsidian pre.HyperMD-header.HyperMD-header-3 { 486 | font-size: inherit; 487 | } 488 | 489 | .cm-header-1 490 | { 491 | font-family: var(--font-family-editor); 492 | font-weight: 500; 493 | font-size: var(--font-size-h1) !important; 494 | color: var(--text-title-h1); 495 | } 496 | 497 | .cm-header-2 498 | { 499 | font-family: var(--font-family-editor); 500 | font-weight: 500; 501 | font-size: var(--font-size-h2) !important; 502 | color: var(--text-title-h2); 503 | } 504 | 505 | .cm-header-3 506 | { 507 | font-family: var(--font-family-editor); 508 | font-weight: 500; 509 | font-size: var(--font-size-h3) !important; 510 | color: var(--text-title-h3); 511 | } 512 | 513 | .cm-header-4 514 | { 515 | font-family: var(--font-family-editor); 516 | font-weight: 500; 517 | font-size: var(--font-size-h4) !important; 518 | color: var(--text-title-h4); 519 | } 520 | 521 | .cm-header-5 522 | { 523 | font-family: var(--font-family-editor); 524 | font-weight: 500; 525 | font-size: var(--font-size-h5) !important; 526 | color: var(--text-title-h5); 527 | } 528 | 529 | .cm-header-6 530 | { 531 | font-family: var(--font-family-editor); 532 | font-weight: 500; 533 | font-size: var(--font-size-h6) !important; 534 | color: var(--text-title-h6); 535 | } 536 | 537 | 538 | .markdown-preview-view h1 539 | { 540 | font-family: var(--font-family-mdpreview); 541 | font-weight: var(--text-title-font-weight); 542 | font-size: var(--font-size-h1) !important; 543 | color: var(--text-title-h1); 544 | line-height: var(--line-height-header-preview); 545 | text-align: left; 546 | } 547 | 548 | .markdown-preview-view h2 549 | { 550 | font-family: var(--font-family-mdpreview); 551 | font-weight: var(--text-title-font-weight); 552 | font-size: var(--font-size-h2) !important; 553 | color: var(--text-title-h2); 554 | line-height: var(--line-height-header-preview); 555 | text-align: left; 556 | } 557 | 558 | .markdown-preview-view h3 559 | { 560 | font-family: var(--font-family-mdpreview); 561 | font-weight: var(--text-title-font-weight); 562 | font-size: var(--font-size-h3) !important; 563 | color: var(--text-title-h3); 564 | line-height: var(--line-height-header-preview); 565 | text-align: left; 566 | } 567 | 568 | .markdown-preview-view h4 569 | { 570 | font-family: var(--font-family-mdpreview); 571 | font-weight: var(--text-title-font-weight); 572 | font-size: var(--font-size-h4) !important; 573 | color: var(--text-title-h4); 574 | line-height: var(--line-height-header-preview); 575 | text-align: left; 576 | } 577 | 578 | .markdown-preview-view h5 579 | { 580 | font-family: var(--font-family-mdpreview); 581 | font-weight: var(--text-title-font-weight); 582 | font-size: var(--font-size-h5) !important; 583 | color: var(--text-title-h5); 584 | line-height: var(--line-height-header-preview); 585 | text-align: left; 586 | } 587 | 588 | 589 | .markdown-preview-view h6 590 | { 591 | font-family: var(--font-family-mdpreview); 592 | font-weight: var(--text-title-font-weight); 593 | font-size: var(--font-size-h6) !important; 594 | color: var(--text-title-h6); 595 | line-height: var(--line-height-header-preview); 596 | text-align: left; 597 | } 598 | 599 | 600 | /***************************************/ 601 | /* Code block in Preview */ 602 | /***************************************/ 603 | 604 | 605 | /* code blocks in preview */ 606 | pre code { 607 | font-family: var(--font-family-code) !important; 608 | font-size: var(--font-size-code) !important; 609 | background-color: var(--pre-code-bg)!important; 610 | padding: 1em !important; 611 | line-height: normal; 612 | display: block; 613 | color: var(--code-block) !important; 614 | } 615 | 616 | 617 | /* padding of code blocks in preview */ 618 | .markdown-preview-view pre { 619 | padding: 0px !important; 620 | } 621 | 622 | 623 | /* font-size of in-line block for preview */ 624 | .markdown-preview-view code 625 | { 626 | font-size: 90%; 627 | line-height: 1.7; 628 | } 629 | 630 | 631 | /* in-line block for preview */ 632 | code{ 633 | color: var(--inline-code) !important; 634 | bottom: 0px !important; 635 | } 636 | 637 | 638 | /* remove the shadow that typically affect light mode */ 639 | .theme-dark code[class*="language-"], 640 | .theme-dark pre[class*="language-"], 641 | .theme-light code[class*="language-"], 642 | .theme-light pre[class*="language-"] 643 | { 644 | text-shadow: none !important; 645 | color: var(--text-faint) !important; 646 | } 647 | 648 | 649 | .theme-light code[class*="language-"], 650 | .theme-light pre[class*="language-"] 651 | { 652 | background-color: var(--background-primary-alt); 653 | } 654 | .theme-light .token.operator, 655 | .theme-light .token.entity, 656 | .theme-light .token.url, 657 | .theme-light .language-css .token.string, 658 | .theme-light .style .token.string { 659 | background-color: transparent; 660 | } 661 | 662 | 663 | .theme-dark .token.function, 664 | .theme-dark .token.class-name, 665 | .theme-light .token.function, 666 | .theme-light .token.class-name { 667 | color: #DD4A68; 668 | } 669 | 670 | 671 | .theme-light .token.comment, 672 | .theme-light .token.prolog, 673 | .theme-light .token.doctype, 674 | .theme-light .token.cdata { 675 | color: slategray; 676 | } 677 | .theme-light .token.punctuation { 678 | color: #f8f8f2; 679 | } 680 | .theme-light .token.namespace { 681 | opacity: 0.7; 682 | } 683 | .theme-light .token.property, 684 | .theme-light .token.tag, 685 | .theme-light .token.constant, 686 | .theme-light .token.symbol, 687 | .theme-light .token.deleted { 688 | color: #f92672; 689 | } 690 | .theme-light .token.boolean, 691 | .theme-light .token.number { 692 | color: #ae81ff; 693 | } 694 | .theme-light .token.selector, 695 | .theme-light .token.attr-name, 696 | .theme-light .token.string, 697 | .theme-light .token.char, 698 | .theme-light .token.builtin, 699 | .theme-light .token.inserted { 700 | color: #a6e22e; 701 | } 702 | .theme-light .token.operator, 703 | .theme-light .token.entity, 704 | .theme-light .token.url, 705 | .theme-light .language-css .token.string, 706 | .theme-light .style .token.string, 707 | .theme-light .token.variable { 708 | color: #f8f8f2; 709 | } 710 | .theme-light .token.atrule, 711 | .theme-light .token.attr-value{ 712 | color: #e6db74; 713 | } 714 | .theme-light .token.keyword { 715 | color: #66d9ef; 716 | } 717 | .theme-light .token.regex, 718 | .theme-light .token.important { 719 | color: #fd971f; 720 | } 721 | .theme-light .token.important, 722 | .theme-light .token.bold { 723 | font-weight: bold; 724 | } 725 | .theme-light .token.italic { 726 | font-style: italic; 727 | } 728 | .theme-light .token.entity { 729 | cursor: help; 730 | } 731 | 732 | 733 | /***************************************/ 734 | /* Code block in Editor */ 735 | /***************************************/ 736 | 737 | 738 | /* in-line block for editor */ 739 | .cm-s-obsidian span.cm-inline-code, 740 | .cm-s-obsidian span.cm-inline-code.cm-hmd-indented-code, 741 | .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code) 742 | { 743 | background-color: var(--pre-code-bg) !important; 744 | color: var(--inline-code) !important; 745 | bottom: 0px !important; 746 | } 747 | 748 | 749 | /* Editor CodeBlock TEXT Appearance */ 750 | .cm-s-obsidian pre.HyperMD-codeblock { 751 | font-family: var(--font-family-code) !important; 752 | font-size: var(--font-size-code) !important; 753 | padding: 1px !important; 754 | display: block; 755 | color: var(--code-block) !important; 756 | font-weight: 500; 757 | } 758 | 759 | 760 | /*remove the border of codeblock in editor */ 761 | /* 762 | .HyperMD-codeblock-bg{ 763 | border: 0px !important; 764 | } 765 | */ 766 | 767 | 768 | /*an active line highlight in vim normal mode 769 | .cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{ 770 | background-color: var(--text-selection) !important; 771 | } */ 772 | 773 | 774 | /*if you want the highlight to present in both normal and insert mode of vim*/ 775 | /* 776 | .CodeMirror-activeline .CodeMirror-linebackground{ 777 | background-color: var(--text-selection) !important; 778 | } 779 | */ 780 | 781 | 782 | /***************************************/ 783 | /* Brackets */ 784 | /***************************************/ 785 | 786 | .cm-s-obsidian span.cm-formatting-em, 787 | .cm-s-obsidian span.cm-formatting-strong, 788 | .cm-s-obsidian span.cm-formatting-link { 789 | color: var(--bracket-color)!important; 790 | } 791 | 792 | 793 | /***************************************/ 794 | /* Blockquote */ 795 | /***************************************/ 796 | 797 | 798 | /* for editor */ 799 | 800 | .cm-quote { 801 | color: var(--text-normal) !important; 802 | font-size: var(--font-size-blockquote); 803 | } 804 | 805 | /* for preview */ 806 | .markdown-preview-view blockquote { 807 | font-size: var(--font-size-blockquote); 808 | background-color: var(--background-secondary)!important; 809 | border-left: 5px solid var(--bracket-color)!important; 810 | border-top: 0px; 811 | border-bottom: 0px; 812 | border-right: 0px; 813 | margin: 1.5em 10px; 814 | padding: 0.5em 10px; 815 | position: relative; 816 | max-width: 80%; 817 | left:5%; 818 | font-style: normal; 819 | quotes: "\201C""\201D""\2018""\2019"; 820 | } 821 | 822 | .markdown-preview-view blockquote:before { 823 | color: var(--text-title-h1); 824 | content: open-quote; 825 | font-size: 4em; 826 | line-height: 0.1em; 827 | /* margin-right: 0.25em; */ 828 | vertical-align: -0.4em; 829 | } 830 | 831 | .markdown-preview-view blockquote p { 832 | /* color: #23384d; */ 833 | margin-top: 0.5em; 834 | margin-bottom: 0.5em; 835 | display: inline; 836 | font-style: normal; 837 | } 838 | 839 | .markdown-preview-view blockquote::before { 840 | content: "\201C" 841 | } 842 | 843 | 844 | /***************************************/ 845 | /* table */ 846 | /***************************************/ 847 | 848 | 849 | th { 850 | font-weight: 800 !important; 851 | } 852 | 853 | 854 | .markdown-preview-view th { 855 | font-weight: 800; 856 | background-color: var(--background-secondary) !important; 857 | } 858 | 859 | 860 | thead { 861 | border-bottom: 3px solid var(--background-modifier-border); 862 | } 863 | 864 | 865 | .table { 866 | padding: 4px; 867 | line-height: normal; 868 | display: block; 869 | border-top-left-radius: 4px; 870 | border-top-right-radius: 4px; 871 | border-bottom-right-radius: 4px; 872 | border-bottom-left-radius: 4px; 873 | } 874 | 875 | 876 | /***************************************/ 877 | /* Checkbox */ 878 | /***************************************/ 879 | 880 | .checkbox-container { 881 | background-color: var(--border-color); 882 | } 883 | 884 | .checkbox-container.is-enabled { 885 | background-color: var(--checkbox-enabled); 886 | } 887 | 888 | /* Round checkbxes in preview and editor */ 889 | input[type=checkbox], .markdown-preview-view .cm-formatting-task { 890 | -webkit-appearance: none; 891 | appearance: none; 892 | border-radius: 50%; 893 | border: 1px solid var(--text-faint); 894 | padding: 0; 895 | /* vertical-align: middle; */ 896 | } 897 | 898 | .markdown-preview-view .cm-s-obsidian span.cm-formatting-task { 899 | color: transparent; 900 | width: 1em !important; 901 | height: 1em; 902 | display: inline-block; 903 | } 904 | 905 | input[type=checkbox]:focus{ 906 | outline:0; 907 | } 908 | input[type=checkbox]:checked, .cm-formatting-task.cm-property { 909 | background-color: var(--text-accent-hover); 910 | border: 1px solid var(--text-accent-hover); 911 | background-position: center; 912 | background-size: 70%; 913 | background-repeat: no-repeat; 914 | background-image: url('data:image/svg+xml; utf8, '); 915 | } 916 | 917 | input[type='range'] { 918 | width: 100px; 919 | -webkit-appearance: none; 920 | background: var(--interactive-accent); 921 | border-radius: 3px; 922 | } 923 | 924 | input[type='range']::-webkit-slider-thumb { 925 | -webkit-appearance: none; 926 | border-radius: 6px; 927 | width: 12px; 928 | height: 12px; 929 | cursor: ew-resize; 930 | background: var(--background-modifier-border); 931 | position: relative; 932 | top: -3px; 933 | } 934 | 935 | .graph-controls { 936 | position: absolute; 937 | left: 8px; 938 | top: 8px; 939 | padding: 8px 16px 8px 8px; 940 | background-color: var(--background-primary); 941 | min-width: 140px; 942 | max-width: 240px; 943 | border: 1px solid var(--background-modifier-border); 944 | border-radius: 6px; 945 | max-height: calc(100% - 16px); 946 | overflow: auto; 947 | } 948 | 949 | /* 950 | 951 | 952 | .markdown-preview-view .task-list-item-checkbox:checked::before { 953 | content: '✓'; 954 | position: absolute; 955 | color: var(--text-accent); 956 | font-size:1em; 957 | line-height: 1.25em; 958 | width:1.2em; 959 | text-align:center; 960 | text-shadow: 0 0 0.1em var(--text-accent); 961 | } 962 | 963 | 964 | .markdown-preview-view .task-list-item-checkbox { 965 | -webkit-appearance: none; 966 | top: 0.2em !important; 967 | right: 4px; 968 | box-sizing: border-box; 969 | border: 1px solid var(--text-muted); 970 | position: relative; 971 | width: 1.25em; 972 | height: 1.25em; 973 | margin: 0; 974 | box-shadow: 0 0 0.1em var(--text-muted); 975 | } 976 | 977 | 978 | .checkbox-container { 979 | background-color: var(--checkbox-color); 980 | } 981 | 982 | .checkbox-container { 983 | cursor: pointer; 984 | border-radius: 14px; 985 | display: inline-block; 986 | height: 22px; 987 | position: relative; 988 | top: 4px; 989 | user-select: none; 990 | width: 42px; 991 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15); 992 | transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border 0.15s ease-in-out, opacity 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out; 993 | } 994 | 995 | 996 | .checkbox-container.is-enabled { 997 | background-color: var(--checkbox-enabled); 998 | } 999 | .checkbox-container.is-enabled:after { 1000 | transform: translate3d(19px, 0, 0); 1001 | } 1002 | .checkbox-container.is-enabled:active:after { 1003 | left: -4px; 1004 | } 1005 | .checkbox-container:before { 1006 | content: ''; 1007 | display: block; 1008 | position: absolute; 1009 | top: 0; 1010 | left: 0; 1011 | bottom: 0; 1012 | right: 0; 1013 | opacity: 0; 1014 | } 1015 | .checkbox-container:after { 1016 | pointer-events: none; 1017 | content: ''; 1018 | display: block; 1019 | position: absolute; 1020 | background-color: #fff; 1021 | width: 15px; 1022 | height: 15px; 1023 | margin: 3px; 1024 | border-radius: 9px; 1025 | transition: transform 0.15s ease-in-out, width 0.1s ease-in-out, left 0.1s ease-in-out, -webkit-transform 0.15s ease-in-out; 1026 | left: 0; 1027 | transform: translate3d(3px, 0, 0); 1028 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.15); 1029 | } 1030 | .checkbox-container:active:after { 1031 | width: 20px; 1032 | } 1033 | */ 1034 | 1035 | 1036 | 1037 | /***************************************/ 1038 | /* html in editor */ 1039 | /***************************************/ 1040 | 1041 | 1042 | /* html tags in editor */ 1043 | .cm-s-obsidian span.cm-tag { 1044 | color: var(--inline-code) !important; 1045 | } 1046 | 1047 | 1048 | /* html attribute and string in editor */ 1049 | .cm-s-obsidian span.cm-attribute { 1050 | color: var(--text-normal) !important; 1051 | } 1052 | 1053 | 1054 | /* html comments in editor */ 1055 | .cm-s-obsidian span.cm-comment { 1056 | color: var(--text-faint) !important; 1057 | } 1058 | 1059 | 1060 | /***************************************/ 1061 | /* popover */ 1062 | /***************************************/ 1063 | 1064 | 1065 | .popover{ 1066 | border: 1px solid var(--border-color); 1067 | background-color: var(--background-secondary); 1068 | } 1069 | 1070 | 1071 | 1072 | /***************************************/ 1073 | /* Side panel */ 1074 | /***************************************/ 1075 | 1076 | 1077 | /* search result in backlink or file search */ 1078 | .search-result-file-title { 1079 | font-size: var(--font-size-side-dock-title) ; 1080 | } 1081 | 1082 | 1083 | .search-result-file-matches, .search-empty-state { 1084 | font-size: var(--font-size-side-dock); 1085 | } 1086 | 1087 | 1088 | /*decrease the spacing between result items*/ 1089 | .search-result-file-title, 1090 | .search-result-file-match { 1091 | padding: 0px 5px; 1092 | font-size: var(--font-small); 1093 | } 1094 | 1095 | .search-result-file-title { 1096 | font-size: var(--font-medium)!important; 1097 | } 1098 | 1099 | .nav-file-title, .nav-folder-title { 1100 | border-bottom-left-radius: 0 !important; 1101 | border-bottom-right-radius: 0 !important; 1102 | border-top-left-radius: 0 !important; 1103 | border-top-right-radius: 0 !important; 1104 | } 1105 | 1106 | 1107 | 1108 | /*backlink pane*/ 1109 | .workspace-leaf-content[data-type="backlink"] .view-content{ 1110 | background-color: var(--background-secondary); 1111 | } 1112 | 1113 | .tag-pane-tag-count { 1114 | position: absolute; 1115 | top: 2px; 1116 | right: 10px; 1117 | } 1118 | 1119 | .workspace-leaf-content[data-type="tag"] .tag-pane-tag-count, 1120 | .workspace-leaf-content[data-type="tag"] .tag-pane-tag-text { 1121 | font-size: var(--font-medium)!important; 1122 | line-height: 1em; 1123 | padding-bottom: 2px; 1124 | padding-top: 2px; 1125 | 1126 | padding-left: 8px; 1127 | padding-right: 8px; 1128 | border-top-left-radius: 8px; 1129 | border-top-right-radius: 8px; 1130 | border-bottom-left-radius: 8px; 1131 | border-bottom-right-radius: 8px; 1132 | 1133 | padding-left: 8px; 1134 | border-top-left-radius: 8px; 1135 | border-bottom-left-radius: 8px; 1136 | 1137 | padding-right: 8px; 1138 | border-top-right-radius: 8px; 1139 | border-bottom-right-radius: 8px; 1140 | 1141 | color: var(--tag-text-color)!important; 1142 | background: var(--tag-bg)!important; 1143 | } 1144 | 1145 | .pane-clickable-item:hover { 1146 | background: inherit!important; 1147 | } 1148 | 1149 | .workspace-leaf-content[data-type="backlink"] .search-result-file-matches { 1150 | font-size: var(--font-size-side-dock); 1151 | } 1152 | 1153 | 1154 | /***************************************/ 1155 | /* graph view */ 1156 | /***************************************/ 1157 | .graph-view.color-circle, 1158 | .graph-view.color-fill-highlight, 1159 | .graph-view.color-line-highlight 1160 | { 1161 | color: var(--graph-line-on-hover)!important; /* line color on hover */ 1162 | } 1163 | 1164 | 1165 | .graph-view.color-text 1166 | { 1167 | color: var(--graph-note-name)!important; /* note name (with/without hover) */ 1168 | font-size: 2em !important; 1169 | font-weight: 600 !important; 1170 | } 1171 | 1172 | 1173 | .graph-view.color-line { 1174 | color: var(--graph-line-color) !important; /* line color */ 1175 | } 1176 | 1177 | 1178 | .graph-view.color-fill{ 1179 | color: var(--graph-node-color)!important; /* node color */ 1180 | } 1181 | 1182 | 1183 | .workspace-leaf-content[data-type = "graph"] .view-content{ 1184 | background-color: var(--background-primary); /* background */ 1185 | } 1186 | 1187 | 1188 | /***************************************/ 1189 | /* settings */ 1190 | /***************************************/ 1191 | 1192 | 1193 | .modal.mod-settings button:not(.mod-cta):hover { 1194 | background-color: var(--interactive-accent-hover); 1195 | } 1196 | 1197 | 1198 | /***************************************/ 1199 | /* Hide side bar */ 1200 | /***************************************/ 1201 | .workspace-ribbon { 1202 | z-index: 100; 1203 | } 1204 | 1205 | .workspace-ribbon:not(:hover) .workspace-ribbon-collapse-btn, 1206 | .workspace-ribbon:not(:hover) .side-dock-actions, 1207 | .workspace-ribbon:not(:hover) .side-dock-settings { 1208 | display:none; 1209 | transition: all 300ms ease-in-out;} 1210 | .workspace-ribbon:not(:hover) { 1211 | width: 0px; 1212 | transition: all 300ms ease-in-out;} 1213 | 1214 | .workspace-split.mod-left-split {margin-left: 0px;} 1215 | .workspace-split.mod-right-split {margin-right: 0px;} 1216 | 1217 | 1218 | 1219 | /***************************************/ 1220 | /* width of content */ 1221 | /***************************************/ 1222 | 1223 | 1224 | .markdown-source-view.is-readable-line-width .CodeMirror, 1225 | .markdown-preview-view.is-readable-line-width .markdown-preview-section { 1226 | max-width: 70vmax; /* 1vmax = 1% of the larger dimension*/ 1227 | margin-left: auto; 1228 | margin-right: auto; 1229 | } 1230 | 1231 | 1232 | /**************************************/ 1233 | /* note header bar for non-andy mode */ 1234 | /* activated in dark mode */ 1235 | /**************************************/ 1236 | 1237 | 1238 | /* header */ 1239 | 1240 | .theme-dark .view-header { 1241 | background-color: var(--background-primary) !important; 1242 | border-top: 0px solid var(--border-color) !important; 1243 | border-bottom: 1px solid var(--border-color) !important; 1244 | } 1245 | 1246 | 1247 | .theme-dark .view-header-title-container:after { 1248 | background: linear-gradient(to bottom, transparent, var(--background-primary)) !important; 1249 | } 1250 | 1251 | 1252 | .theme-dark .workspace-leaf.mod-active .view-header { 1253 | background-color: var(--background-secondary-alt) !important; 1254 | border-top: 0px solid var(--active-title-border)!important; 1255 | border-bottom: 1px solid var(--border-color) !important; 1256 | } 1257 | 1258 | .workspace-leaf .view-header-title-container:after, 1259 | .workspace-leaf.mod-active .view-header-title-container:after { 1260 | width: 0px; 1261 | background: linear-gradient(to bottom, transparent, var(--background-secondary-alt)) !important; 1262 | } 1263 | 1264 | 1265 | .workspace-leaf.mod-active .view-header-title, 1266 | .workspace-leaf.mod-active .view-header-icon 1267 | { 1268 | color: var(--file-name-color) !important; 1269 | } 1270 | 1271 | 1272 | .view-header-title, .view-header-icon, .view-action{ 1273 | color: var(--background-modifier-border) !important; 1274 | } 1275 | 1276 | 1277 | /**************************************/ 1278 | /* andy mode activated in light mode */ 1279 | /**************************************/ 1280 | 1281 | 1282 | /* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */ 1283 | 1284 | 1285 | /* everything under .mod-root now. Don't want Andy messing with sidebars */ 1286 | /* also, Andy only makes sense for vertical splits, at the root level, right? */ 1287 | .theme-light .mod-root.workspace-split.mod-vertical { 1288 | overflow-x:auto; 1289 | --sticky-left: 25px; /* <- 36px is the header height in the default theme */ 1290 | } 1291 | .theme-light .mod-root.workspace-split.mod-vertical > div { 1292 | min-width: calc(700px + var(--sticky-left)); /* <-- 700px is the default theme's "readable" max-width */ 1293 | box-shadow: 0px 0px 5px 5px rgba(0,0,0,0.2); 1294 | position:sticky; 1295 | left:0; 1296 | } 1297 | 1298 | 1299 | 1300 | /* shift sticky position, so titles will stack up to the left */ 1301 | /* This will currently stack to a maximum of 10 before resetting */ 1302 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--sticky-left) * 0); } 1303 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--sticky-left) * 1); } 1304 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--sticky-left) * 2); } 1305 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--sticky-left) * 3); } 1306 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--sticky-left) * 4); } 1307 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--sticky-left) * 5); } 1308 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--sticky-left) * 6); } 1309 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--sticky-left) * 7); } 1310 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--sticky-left) * 8); } 1311 | .theme-light .mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--sticky-left) * 9); } 1312 | 1313 | 1314 | /* now it's time for the fancy vertical titles */ 1315 | 1316 | 1317 | /* first we'll add a bit of gap for the title to sit inside of */ 1318 | .theme-light .workspace-leaf-content { 1319 | padding-left: var(--sticky-left); 1320 | position: relative; 1321 | } 1322 | 1323 | 1324 | /* this is where the magic happens */ 1325 | .theme-light .view-header { 1326 | writing-mode: vertical-lr; 1327 | border-right: 1px solid var(--border-color); 1328 | border-left: 0px !important; 1329 | border-top: none; 1330 | border-bottom: none; 1331 | height: auto; 1332 | width: 36px; 1333 | position: absolute; 1334 | left:0; 1335 | top:0; 1336 | bottom:0; 1337 | background-color: var(--background-primary) !important; 1338 | } 1339 | 1340 | 1341 | /* fix the long-title-obscuring shadows */ 1342 | .theme-light .view-header-title-container:after { 1343 | width: 100%; 1344 | height: 30px; 1345 | top:unset; 1346 | bottom: 0; 1347 | background: linear-gradient(to bottom, transparent, var(--background-primary))!important; 1348 | } 1349 | 1350 | 1351 | /* unset the title container height and swap padding */ 1352 | .theme-light .view-header-title-container { 1353 | height: unset; 1354 | padding-left: unset; 1355 | padding-top: 5px; 1356 | } 1357 | 1358 | 1359 | /* active titles have different border colours */ 1360 | .theme-light .workspace-leaf.mod-active .view-header { 1361 | background-color: var(--background-secondary-alt) !important; 1362 | border-right: 3px solid var(--active-title-border) !important; 1363 | border-left: 0px; 1364 | border-bottom: none; 1365 | } 1366 | 1367 | 1368 | /* swap the padding/margin around for the header and actions icons */ 1369 | .theme-light .view-header-icon, .theme-light .view-actions { 1370 | padding: 10px 5px; 1371 | } 1372 | .theme-light .view-action { 1373 | margin: 8px 0; 1374 | } 1375 | 1376 | 1377 | /* get rid of the gap left by the now-missing horizontal title */ 1378 | .theme-light .view-content { 1379 | height: 100%; 1380 | } 1381 | 1382 | 1383 | /* make the fake drop target overlay have a background so you can see it. */ 1384 | /* TODO: figure out how the fake target overlay works so we can put the title back, too */ 1385 | .theme-light .workspace-fake-target-overlay { 1386 | background-color: var(--background-primary); 1387 | } 1388 | 1389 | 1390 | /*preview padding too small*/ 1391 | .theme-light .markdown-preview-view, .theme-light .mod-single-child .markdown-preview-view { 1392 | font-family: var(--font-family-editor); 1393 | font-size: var(--font-size-normal); 1394 | padding-top: 5px; 1395 | padding-left: 4% !important; 1396 | padding-right: 2% !important; 1397 | } 1398 | 1399 | 1400 | /***************************************/ 1401 | /* at a rule line before ul list */ 1402 | /***************************************/ 1403 | 1404 | 1405 | ul ul { position: relative; } 1406 | ul ul::before { 1407 | content:''; 1408 | border-left: var(--ul-line-specs) var(--ul-line-color); 1409 | position: absolute; 1410 | } 1411 | ul ul::before { left: -0.8em; top: 0; bottom: 0; } 1412 | 1413 | 1414 | /* rule line when there are checkboxes*/ 1415 | ul .task-list-item ul::before {left: 0.15em !important} 1416 | 1417 | /* ul line in source mode */ 1418 | .cm-hmd-list-indent .cm-tab::before{ 1419 | content: ' '; 1420 | border-left: var(--ul-line-specs) var(--ul-line-color); 1421 | position: absolute; 1422 | height: 100%; 1423 | } 1424 | 1425 | /* 1426 | .cm-hmd-list-indent::before { 1427 | content: ''; 1428 | border-left: var(--ul-line-specs) var(--ul-line-color); 1429 | left: 0.4em; 1430 | position: absolute; 1431 | height: 100%; 1432 | } 1433 | */ 1434 | 1435 | /* 1436 | .cm-hmd-list-indent-2::before { 1437 | content: ''; 1438 | border-left: 0.8px solid #777; 1439 | left: 2.5em; 1440 | position: absolute; 1441 | height: 100%; 1442 | } 1443 | */ 1444 | 1445 | 1446 | 1447 | /***************************************/ 1448 | /* Hide Scrollbar (recommend for mac) */ 1449 | /***************************************/ 1450 | 1451 | 1452 | /* Hide scrollbar in preview, search, file, tag, back links */ 1453 | /* .markdown-preview-view::-webkit-scrollbar, */ 1454 | .workspace-leaf-content::-webkit-scrollbar, 1455 | .workspace-leaf-content[data-type = "backlink"] .view-content::-webkit-scrollbar { 1456 | display: none; 1457 | } 1458 | Hide scrollbar for editor.CodeMirror-vscrollbar { 1459 | display: none !important; 1460 | } 1461 | 1462 | disable the scrollbar for search pane 1463 | .search-result-container::-webkit-scrollbar, 1464 | .nav-files-container::-webkit-scrollbar, 1465 | .tag-pane-tags::-webkit-scrollbar { 1466 | display: none; 1467 | } 1468 | 1469 | 1470 | disable the scrollbar for main-container 1471 | .theme-light .horizontal-main-container ::-webkit-scrollbar{ 1472 | display: none !important; 1473 | } 1474 | 1475 | .CodeMirror-cursor { 1476 | border-left-width: 0.2em; 1477 | opacity: 0.75; 1478 | } 1479 | 1480 | /* botões*/ 1481 | .view-actions { 1482 | padding: 0; 1483 | } 1484 | .view-action { 1485 | color: var(--text-normal) !important; 1486 | top: 1px; 1487 | margin: 0px 8px 0px 0px; 1488 | order: 3; 1489 | } 1490 | .view-action[aria-label='Pin'] { 1491 | padding-top: 3px; 1492 | order: 2; 1493 | } 1494 | .view-action[aria-label='Close'] { 1495 | order: 4; 1496 | } 1497 | .view-action[aria-label='Unlink pane'] { 1498 | padding-top: 3px; 1499 | order: 1; 1500 | } 1501 | .view-action > svg.cross, 1502 | .view-action > svg.vertical-three-dots, 1503 | .view-action > svg.pencil, 1504 | .view-action > svg.lines-of-text { 1505 | width: 12px; 1506 | height: 12px; 1507 | padding: 5.5px; 1508 | border-radius: 100px; 1509 | } 1510 | .view-action > svg.cross { 1511 | background-color: var(--interface-color-cross); 1512 | } 1513 | .view-action > svg.vertical-three-dots { 1514 | background-color: var(--interface-color-three-dots); 1515 | } 1516 | .view-action > svg.pencil { 1517 | background-color: var(--interface-color-pencil); 1518 | } 1519 | .view-action > svg.lines-of-text { 1520 | background-color: var(--interface-color-pencil); 1521 | } 1522 | .view-action > svg.filled-pin { 1523 | padding: 1px; 1524 | color: var(--interface-color-pin) !important; 1525 | opacity: 0.8; 1526 | } 1527 | .view-action > svg.link { 1528 | padding: 0px; 1529 | color: var(--interface-color-pin) !important; 1530 | opacity: 0.8; 1531 | } 1532 | .view-action > svg.broken-link { 1533 | padding: 0px; 1534 | color: var(--interface-color-pin) !important; 1535 | opacity: 0.8; 1536 | } 1537 | .view-action:hover > svg.cross, 1538 | .view-action:hover > svg.vertical-three-dots, 1539 | .view-action:hover > svg.pencil, 1540 | .view-action:hover > svg.lines-of-text { 1541 | width: 30px; 1542 | height: 30px; 1543 | padding: 4.5px; 1544 | border-radius: 100px; 1545 | color: var(--interfa-color-icon); 1546 | transition: width, height 0.2s; 1547 | } 1548 | .view-action[aria-label='Pin']:hover > svg.filled-pin { 1549 | width: 23px; 1550 | height: 23px; 1551 | transition: width, height 0.2s; 1552 | } 1553 | .view-action[aria-label='Unlink pane']:hover > svg.broken-link { 1554 | width: 23px; 1555 | height: 23px; 1556 | transition: width, height 0.2s; 1557 | } 1558 | 1559 | /* right side header icon */ 1560 | .view-action > svg, 1561 | .view-header-icon > svg { 1562 | width: 13px; 1563 | height: 17px; 1564 | } 1565 | .view-header-icon { 1566 | padding: 5px 5px 5px 5px; 1567 | } 1568 | .view-action, 1569 | .view-header-icon { 1570 | top: 0px; 1571 | } 1572 | 1573 | 1574 | /* _hide_sidebar_on_collapse */ 1575 | /*-------------------------------------*/ 1576 | .workspace-ribbon.is-collapsed:not(:hover) > .workspace-ribbon-collapse-btn, 1577 | .workspace-ribbon.is-collapsed:not(:hover) > .side-dock-actions, 1578 | .workspace-ribbon.is-collapsed:not(:hover) > .side-dock-settings { 1579 | opacity: 0; 1580 | transition: all 500ms ease-in-out; 1581 | } 1582 | .workspace-ribbon.is-collapsed:not(:hover) { 1583 | width: 0px; 1584 | transition: all 300ms ease-in-out; 1585 | } 1586 | .workspace-ribbon.is-collapsed:hover { 1587 | width: 30px; 1588 | transition: all 300ms ease-in-out; 1589 | } 1590 | .workspace-ribbon.is-collapsed:hover > .workspace-ribbon-collapse-btn, 1591 | .workspace-ribbon.is-collapsed:hover > .side-dock-actions, 1592 | .workspace-ribbon.is-collapsed:hover > .side-dock-settings { 1593 | opacity: 1; 1594 | transition: all 500ms ease-in-out; 1595 | } 1596 | .workspace-ribbon.mod-left.is-collapsed ~ .workspace-split.mod-left-split { 1597 | margin-left: 0px; 1598 | } 1599 | .workspace-ribbon.mod-right.is-collapsed ~ .workspace-split.mod-right-split { 1600 | margin-right: 0px; 1601 | } 1602 | .workspace-ribbon.mod-right.is-collapsed:hover ~ .workspace-split.mod-right-split { 1603 | transition: all 300ms ease-in-out; 1604 | margin-right: 30px; 1605 | } 1606 | .workspace-ribbon.mod-left.is-collapsed:hover ~ .workspace-split.mod-left-split { 1607 | transition: all 300ms ease-in-out; 1608 | margin-right: 30px; 1609 | } 1610 | 1611 | 1612 | 1613 | /* status bar*/ 1614 | .status-bar { 1615 | background-color: var(--background-secondary-alt); 1616 | border-color: var(--background-secondary-alt); 1617 | } 1618 | .status-bar { 1619 | padding: 0 30px; 1620 | } 1621 | .status-bar-item { 1622 | background-color: var(--background-primary); 1623 | border-radius: 4px; 1624 | font-size: var(--font-small); 1625 | border: 2px solid var(--background-secondary-alt); 1626 | display: inline-block; 1627 | vertical-align: middle; 1628 | line-height: var(--font-line-height-side); 1629 | } 1630 | 1631 | /***************************************/ 1632 | /* _search_results_and_backlinks */ 1633 | /***************************************/ 1634 | .side-dock-collapsible-section-header, 1635 | .search-empty-state, 1636 | .search-result-file-title, 1637 | .search-result-file-matches, 1638 | .side-dock-collapsible-section-header { 1639 | font-family: var(--font-family); 1640 | font-size: var(--font-size-side); 1641 | } 1642 | .search-result { 1643 | /* 1644 | background-color: var(--interface-color-background-alt); 1645 | */ 1646 | border-radius: 0px; 1647 | border-bottom: 0.1em solid var(--border-color); 1648 | padding: 10px; 1649 | margin: 0px 0px 0px 0px; 1650 | } 1651 | 1652 | /* 1653 | .search-result:hover, 1654 | .search-result-file-match:hover, 1655 | .search-result-file-title:hover { 1656 | background-color: var(--tag-bg); 1657 | } 1658 | */ 1659 | 1660 | .search-result-container { 1661 | line-height: var(--font-line-height-side); 1662 | padding: 0px; 1663 | } 1664 | .search-result-container.mod-global-search { 1665 | padding: 0px 3px 0px 11px; 1666 | } 1667 | .search-result-file-title { 1668 | padding: 0px 10px; 1669 | font-weight: bold; 1670 | font-family: var(--font-family-editor); 1671 | } 1672 | .search-result-file-matches { 1673 | padding: 0px; 1674 | } 1675 | .side-dock-collapsible-section-header { 1676 | padding: 0px 0px 0px 10px; 1677 | } 1678 | .side-dock-collapsible-section-header-indicator { 1679 | left: -2px; 1680 | top: -2px; 1681 | } 1682 | 1683 | .search-result-container { 1684 | padding: 0px; 1685 | } 1686 | .workspace-split.mod-right-split .view-content { 1687 | padding: 10px 10px !important; 1688 | } 1689 | 1690 | /***************************************/ 1691 | /* _pane_header */ 1692 | /***************************************/ 1693 | .view-header { 1694 | border-color: var(--background-secondary); 1695 | border-top: 0px solid var(--background-secondary); 1696 | border-bottom: 0px solid var(--interface-color-border); 1697 | background-color: var(--interface-color-border); 1698 | } 1699 | 1700 | .workspace-leaf.mod-active .view-header { 1701 | background-color: var(--background-secondary); 1702 | border-bottom: 2px solid var(--active-title-border); 1703 | } 1704 | 1705 | 1706 | .workspace-leaf.mod-active .view-header-title { 1707 | color: var(--interface-color-foreground-alt); 1708 | } 1709 | 1710 | .workspace-leaf.mod-active .view-action > svg, 1711 | .workspace-leaf.mod-active .view-header-icon > svg { 1712 | color: var(--interface-color-foreground-alt); 1713 | } 1714 | 1715 | .workspace-leaf.mod-active .view-header { 1716 | background-color: var(--interface-color-background); 1717 | border-bottom: 0px; 1718 | } 1719 | 1720 | .workspace-leaf.mod-active > .workspace-leaf-content { 1721 | border-color: var(--interface-color-background); 1722 | } 1723 | 1724 | .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header { 1725 | border-bottom: 2px var(--interface-color-border); 1726 | background-color: var(--interface-color-border); 1727 | } 1728 | 1729 | .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .workspace-leaf-content { 1730 | border-color: var(--interface-color-border); 1731 | } 1732 | 1733 | /* _scale */ 1734 | /*-------------------------------------*/ 1735 | .view-header, 1736 | .view-header-title-container { 1737 | height: 28px; 1738 | } 1739 | 1740 | .view-header-title { 1741 | font-size: var(--font-size-header-titles); 1742 | line-height: 28px; 1743 | } 1744 | 1745 | /* Wrap long nav text and some paddings */ 1746 | .nav-file-title, 1747 | .nav-folder-title { 1748 | white-space: normal; 1749 | } 1750 | 1751 | /* Indent wrapped nav text */ 1752 | .nav-file-title-content { 1753 | margin-left: 0px; 1754 | text-indent: -20px; 1755 | } 1756 | 1757 | /* hashtags before headers */ 1758 | 1759 | 1760 | h1:before { 1761 | content: "H1 "; 1762 | font-size: var(--header-before-size-h1); 1763 | color: var(--header-before-color); 1764 | } 1765 | h2:before { 1766 | content: "H2 "; 1767 | padding-left: 0.3em; 1768 | font-size: var(--header-before-size-h2); 1769 | color: var(--header-before-color); 1770 | } 1771 | h3:before { 1772 | content: "H3 "; 1773 | padding-left: 0.72em; 1774 | font-size: var(--header-before-size-h3); 1775 | color: var(--header-before-color); 1776 | } 1777 | h4:before { 1778 | content: "H4 "; 1779 | padding-left: 0.92em; 1780 | font-size: var(--header-before-size-h4); 1781 | color: var(--header-before-color); 1782 | } 1783 | h5:before { 1784 | content: "H5 "; 1785 | padding-left: 1.15em; 1786 | font-size: var(--header-before-size-h5); 1787 | color: var(--header-before-color); 1788 | } 1789 | h6:before { 1790 | content: "H6 "; 1791 | padding-left: 1.42em; 1792 | font-size: var(--header-before-size-h6); 1793 | color: var(--header-before-color); 1794 | } 1795 | 1796 | 1797 | /* Make subtler folding gutter arrows */ 1798 | .CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after { 1799 | opacity: 0.3; 1800 | font-size: 140%; 1801 | position: relative; 1802 | top: 10px; 1803 | } 1804 | 1805 | .CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after { 1806 | opacity: 1; 1807 | } 1808 | 1809 | .CodeMirror-foldgutter-folded:after { 1810 | content: "\25BA"; 1811 | } 1812 | 1813 | .CodeMirror-foldgutter-open:after { 1814 | content: "\25BC"; 1815 | } 1816 | 1817 | 1818 | /* search box color */ 1819 | /* 1820 | input[type="text"], 1821 | input[type="email"], 1822 | input[type="password"], 1823 | input[type="number"] { 1824 | background: white!important; 1825 | } 1826 | */ 1827 | 1828 | 1829 | /* quick switcher */ 1830 | .suggestion-item.is-selected { 1831 | background-color: var(--quick-switcher); 1832 | } 1833 | 1834 | 1835 | /* side ribbon */ 1836 | .side-dock-ribbon-tab:hover, 1837 | .side-dock-ribbon-action:hover { 1838 | color: var(--text-accent); 1839 | } 1840 | 1841 | .workspace-tab-header:hover { 1842 | color: var(--text-accent); 1843 | } 1844 | 1845 | .workspace-tab-header.is-active:hover { 1846 | color: var(--text-accent); 1847 | } 1848 | 1849 | 1850 | /* file names in navbar */ 1851 | .nav-file-title, 1852 | .nav-folder-title { 1853 | color: var(--text-muted); 1854 | font-size: var(--font-small); 1855 | line-height: 20px; 1856 | padding: 1px 20px 0 26px; 1857 | cursor: pointer; 1858 | position: relative; 1859 | white-space: nowrap; 1860 | } 1861 | 1862 | 1863 | .markdown-preview-view { 1864 | background-color: var(--background-primary)!important; 1865 | } 1866 | 1867 | 1868 | 1869 | /***************************************/ 1870 | /* internal embedded link in preview a.k.a. transclusion */ 1871 | /***************************************/ 1872 | 1873 | /* 1874 | .internal-embed, 1875 | .internal-embed > .markdown-embed, 1876 | .internal-embed > .markdown-embed > .markdown-embed-content, 1877 | .markdown-embed-content > * { 1878 | display: inline; 1879 | padding:10px; 1880 | } 1881 | */ 1882 | /* 1883 | .markdown-embed-link { 1884 | position: static; 1885 | display: inline; 1886 | } 1887 | */ 1888 | 1889 | 1890 | /* Naked Embeds */ 1891 | .markdown-embed-title { display: none; } /* Remove file name */ 1892 | 1893 | .markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;} 1894 | .markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;} 1895 | 1896 | /*remove the following two line, you will get border and scroll*/ 1897 | /* 1898 | .markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; } 1899 | */ 1900 | .markdown-preview-view .markdown-embed-content { 1901 | max-height: unset; 1902 | background-color: var(--background-primary); /*define different bg color*/ 1903 | padding-right: 0px; 1904 | /* border-top: 1px dashed var(--text-faint); */ 1905 | border-bottom: 2px dashed var(--text-faint); 1906 | } 1907 | 1908 | /* the link on the top right corner*/ 1909 | .markdown-embed-link::before, 1910 | .markdown-embed-link::after { 1911 | content: ' '; 1912 | padding: 7px;  1913 | } 1914 | .markdown-embed-link::before { 1915 | content: ' Edit original '; 1916 | padding-right: 0px; 1917 | font-family: var(--font-family-code); 1918 | font-size: var(--font-small); 1919 | vertical-align: 3px; 1920 | } 1921 | 1922 | .markdown-embed-link, .file-embed-link { 1923 | color: var(--text-normal) !important; 1924 | font-size: var(--font-small)!important; 1925 | top: -20px; 1926 | right: 10px; 1927 | background-color: var(--background-accent)!important; 1928 | padding: 2px; 1929 | border-top-left-radius: 8px; 1930 | border-top-right-radius: 8px; 1931 | border-bottom-left-radius: 8px; 1932 | border-bottom-right-radius: 8px; 1933 | } 1934 | 1935 | .markdown-embed-link:hover { 1936 | color: var(--text-accent)!important; 1937 | /* background: var(--tag-bg)!important; */ 1938 | } 1939 | 1940 | .markdown-preview-view .markdown-embed, 1941 | .markdown-preview-view .file-embed { 1942 | background-color: var(--background-primary); 1943 | border-radius: 6px; 1944 | border: 0px solid var(--background-modifier-border); 1945 | padding: 0px; margin: 0px; 1946 | } 1947 | /* 1948 | border-bottom: 0px dashed; 1949 | border-bottom-color: var(--header-before-color); 1950 | */ 1951 | 1952 | /* Ignora o primeiro header e os dois primeiros parágrafos */ 1953 | /* .markdown-preview-view .markdown-embed-content>:first-child + p + p { display:none;} */ 1954 | /* .markdown-preview-view .markdown-embed-content>:first-child + p { display:none;} */ 1955 | .markdown-preview-view .markdown-embed-content> h1:first-child { display:none;} 1956 | 1957 | 1958 | /* Remove embed yaml first separator */ 1959 | /* .markdown-embed-content > hr:first-child { display: none; } */ 1960 | /* Remove embed yaml content */ 1961 | /* .markdown-embed-content > hr:first-child + p { display: none; } */ 1962 | /* Remove embed yaml second separator (if empty) */ 1963 | /* .markdown-embed-content > hr:first-child + hr { display: none; } */ 1964 | /* Remove embed yaml second separator */ 1965 | /* .markdown-embed-content > hr:first-child + p + hr { display: none; } */ 1966 | 1967 | span.obsidian-search-match-highlight{ 1968 | color: var(--text-normal) !important; 1969 | background-color: var(--text-search-highlight-bg)!important; 1970 | } 1971 | 1972 | .search-result-collapse-indicator { 1973 | position: absolute; 1974 | left: -10px; 1975 | top: -10px; 1976 | } 1977 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) { 1978 | font-size: 0; 1979 | } 1980 | 1981 | 1982 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after { 1983 | content: '🔗'; 1984 | font-size: 1rem; 1985 | } 1986 | .nav-file-icon { 1987 | left: -1rem; 1988 | } 1989 | 1990 | 1991 | /* 1992 | .footnotes { 1993 | border-top: 1px solid hsl(0, 0%, 39%); 1994 | } 1995 | */ 1996 | 1997 | hr.footnotes-sep { 1998 | width: 50%!important; 1999 | border: 0.2px solid var(--hr-color)!important; 2000 | background-color: var(--background-primary)!important; 2001 | } 2002 | 2003 | ol.footnotes-list { 2004 | text-align: left; 2005 | line-height: 1.5; 2006 | font-size: 85%; 2007 | } 2008 | 2009 | 2010 | .footnotes ol li p{ 2011 | margin-top: 1em; 2012 | margin-right: 0.5em; 2013 | margin-left: 0.5em; 2014 | margin-bottom: 1.0em; 2015 | } 2016 | 2017 | 2018 | .markdown-preview-view hr { 2019 | height: 0px !important; 2020 | border: 0.1px solid var(--hr-color); 2021 | border-radius: 5px; 2022 | width: 50%; 2023 | margin: 2em auto; 2024 | } 2025 | 2026 | /* Remove a hr e o parágrafo abaixo */ 2027 | /* 2028 | .markdown-embed-content > hr + p { display: none; } 2029 | .markdown-embed-content > hr { display: none; } 2030 | .markdown-embed-content > hr.footnotes-sep { display: block;!important; } 2031 | */ 2032 | 2033 | sub, 2034 | sup { 2035 | font-size: 0.7em; 2036 | /* color: #666; */ 2037 | position: middle; 2038 | line-height: 0; 2039 | vertical-align: super; 2040 | } 2041 | 2042 | sup > a { 2043 | font-family: var(--font-family-code)!important; 2044 | } 2045 | 2046 | .footnote-link::before { 2047 | } 2048 | --------------------------------------------------------------------------------