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