theme.css
1 body { 2 font-size: 16px; 3 font-family: "Roboto", sans-serif; 4 --font-monospace: "Fira Code", "Source Code Pro", monospace; 5 } 6 7 .CodeMirror pre.CodeMirror-line { 8 font-size: 14px; 9 /* font-family: "Fira Code", "Source Code Pro", monospace; */ 10 } 11 12 /* === DARK MODE === */ 13 14 .theme-dark { 15 --background-primary: #343434; 16 /* --background-primary-alt: #171717; */ 17 --background-primary-alt: #2c2c2c; 18 --background-secondary: #2c2c2c; 19 --background-secondary-alt: #2c2c2c; 20 --background-modifier-border: #303030; 21 --background-modifier-box-shadow: rgba(0, 0, 0, 0.85); 22 --background-modifier-form-field: var(--background-primary); 23 --text-accent: #df4a16; 24 --text-accent-hover: #df7a16; 25 --text-normal: #dcddde; 26 --text-muted: #999; 27 --text-faint: #666; 28 --text-error: #ff3333; 29 --text-error-hover: #990000; 30 --text-matched: #dcddde; 31 --text-on-accent: #dcddde; 32 --text-selection: rgba(223, 74, 22, 0.8); 33 --text-highlight-bg: #df4a16; 34 /* --interactive-normal: #2a2a2a; */ 35 --interactive-normal: var(--background-primary); 36 --interactive-hover: #303030; 37 --interactive-accent: #df4a16; 38 --interactive-accent-rgb: #df7a16; 39 --interactive-accent-hover: #df7a16; 40 --workspace-leaf-resize: #494949; 41 --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2); 42 --scrollbar-bg: rgba(255, 255, 255, 0); 43 --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1); 44 --accent-strong: #ec0d0d; 45 --accent-mild: #e6b64f; 46 --bw: #ffffff; 47 --lines-identation: #535353; 48 --tooltip-bg: rgba(223, 74, 22, 0.9); 49 } 50 51 /* === LIGHT MODE === */ 52 53 .theme-light { 54 --background-primary: #fff; 55 --background-primary-alt: #dedede; 56 --background-secondary: #dedede; 57 --background-secondary-alt: #dedede; 58 --background-modifier-border: #f7f7f7; 59 --background-modifier-box-shadow: rgba(0, 0, 0, 0.85); 60 --text-accent: #df4a16; 61 --text-accent-hover: #df7a16; 62 --text-normal: #03050b; 63 --text-muted: #555; 64 --text-error: #ff3333; 65 --text-error-hover: #990000; 66 --text-matched: #dcddde; 67 --text-on-accent: #dcddde; 68 --text-selection: rgba(223, 74, 22, 0.8); 69 --text-highlight-bg: #df4a16; 70 --interactive-accent: #df4a16; 71 --interactive-accent-rgb: #df7a16; 72 --interactive-accent-hover: #df7a16; 73 --workspace-leaf-resize: #c1c1c1; 74 --accent-strong: #ec0d0d; 75 --accent-mild: #e6b64f; 76 --bw: #03050b; 77 --lines-identation: #dad8d8; 78 --tooltip-bg: rgba(223, 74, 22, 0.9); 79 } 80 81 /*=== Titlebar for v0.8.13+ ===*/ 82 .titlebar { 83 background-color: var(--background-secondary); 84 border-bottom: 1px solid var(--background-primary); 85 } 86 .titlebar-inner { 87 color: var(--text-normal); 88 } 89 .titlebar-text { 90 color: var(--text-normal); 91 } 92 93 /*for future editing maximize btn*/ 94 .titlebar-button.mod-maximize[aria-label="Maximize"] { 95 } 96 .titlebar-button.mod-maximize[aria-label="Restore down"] { 97 } 98 99 .titlebar-button.mod-close:hover { 100 background-color: transparent; 101 color: var(--text-accent); 102 } 103 104 105 /* change heading size in edit mode */ 106 /* for better looking after enable Clutter free edit mode */ 107 .cm-header-1 { 108 font-size: 30px; 109 color: var(--text-accent); 110 } 111 .cm-header-2 { 112 font-size: 26px; 113 } 114 .cm-header-3 { 115 font-size: 22px; 116 } 117 .cm-header-4 { 118 font-size: 20px; 119 } 120 .cm-header-5 { 121 font-size: 18px; 122 } 123 .cm-header-6 { 124 font-size: 18px; 125 color: var(--text-muted); 126 } 127 128 /* === Clutter free edit mode === */ 129 /* inline formatting, link targets and [[ ]] disappears if not active line*/ 130 div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting { 131 display: none; 132 } 133 /* except list markers, links, images, urls and code blocks */ 134 span.cm-image, 135 span.cm-link, 136 span.cm-url, 137 span.cm-formatting-list, 138 span.cm-formatting-code-block.cm-hmd-codeblock { 139 /* header hashes - span.cm-formatting-header */ 140 display: inline !important; 141 } 142 143 /* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT */ 144 /* div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; } */ 145 146 /* and task checkboxes */ 147 span.cm-formatting-task { 148 display: inline !important; 149 font-family: monospace; 150 } 151 152 /* remove borders in iframe */ 153 iframe { 154 border-width: 0; 155 } 156 157 /* Enlarge image on hover */ 158 .markdown-preview-view img { 159 display: block; 160 margin-top: 20pt; 161 margin-bottom: 20pt; 162 margin-left: auto; 163 margin-right: auto; 164 width: 50%; /*experiment with values*/ 165 transition: transform 0.25s ease; 166 } 167 168 .markdown-preview-view img:hover { 169 -webkit-transform: scale(2); /* experiment with values */ 170 transform: scale(2); 171 } 172 173 /* fix background of folder-collapse-indicator */ 174 body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator { 175 background: none; 176 } 177 178 /* change highlight h1 in text from outline panel or search */ 179 /* because color the same */ 180 181 .markdown-preview-view .mod-highlighted h1 { 182 color: white; 183 } 184 185 /* === Tooltip === */ 186 .tooltip { 187 background-color: var(--tooltip-bg); 188 color: #fff; 189 font-weight: bold; 190 } 191 .tooltip .tooltip-arrow { 192 border-bottom: 5px solid var(--tooltip-bg); 193 } 194 195 /* Make selected items in settings more visible */ 196 .horizontal-tab-nav-item.is-active, 197 .vertical-tab-nav-item.is-active { 198 background-color: var(--background-primary); 199 } 200 .horizontal-tab-nav-item:hover, 201 .vertical-tab-nav-item:hover { 202 background-color: var(--background-primary); 203 transition: all 0.3s ease; 204 } 205 206 /* Add border in settings page */ 207 .modal.mod-settings .vertical-tab-header { 208 border-right: 1px solid var(--background-primary); 209 } 210 211 /* fix local graph input range background */ 212 input[type="range"] { 213 background-color: var(--background-secondary); 214 } 215 216 /* add border radius in popup for suggestion in tags etc */ 217 .suggestion { 218 border-radius: 4px; 219 } 220 221 /* change color of workspace when drag */ 222 .workspace-drop-overlay.mod-drag { 223 background-color: var(--text-accent); 224 } 225 226 /* markdown edit mode width */ 227 .markdown-source-view.is-readable-line-width .CodeMirror { 228 max-width: 800px; 229 } 230 231 /* === Custom Checkbox === */ 232 input[type="checkbox"] { 233 -webkit-appearance: none; 234 appearance: none; 235 border-radius: 50%; 236 border: 1px solid var(--text-faint); 237 padding: 0; 238 } 239 input[type="checkbox"]:focus { 240 outline: 0; 241 } 242 input[type="checkbox"]:checked { 243 background-color: var(--text-accent); 244 border: 1px solid var(--text-accent); 245 background-position: center; 246 background-size: 70%; 247 background-repeat: no-repeat; 248 background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>'); 249 } 250 251 .markdown-preview-view .task-list-item-checkbox { 252 margin-left: -25px; 253 top: 5px; 254 cursor: pointer; 255 filter: none; /*remove default filter*/ 256 } 257 .markdown-preview-view .task-list-item { 258 padding-inline-start: 25px; 259 } 260 261 /* code block: dark background */ 262 .theme-dark code[class*="language-"], 263 .theme-dark pre[class*="language-"], 264 .theme-light code[class*="language-"], 265 .theme-light pre[class*="language-"] { 266 background: var(--background-secondary); 267 } 268 269 .markdown-preview-view code, 270 .markdown-preview-view pre { 271 background: var(--background-secondary); 272 color: #b82b4e; 273 } 274 275 /* change color of selection text in code block, pre and links */ 276 .theme-light .markdown-preview-view code::selection, 277 .theme-light .markdown-preview-view code > *::selection, 278 .theme-light .markdown-preview-view pre::selection, 279 .theme-light .markdown-preview-view pre > *::selection, 280 .theme-dark .markdown-preview-view code::selection, 281 .theme-dark .markdown-preview-view code > *::selection, 282 .theme-dark .markdown-preview-view pre::selection, 283 .theme-dark .markdown-preview-view pre > *::selection, 284 *::selection { 285 color: #fff; 286 background-color: var(--text-selection); 287 } 288 289 /* change text selection background in edit mode, no way to change text color */ 290 .CodeMirror-focused .CodeMirror-selected, 291 .CodeMirror-selected { 292 background-color: var(--text-selection); 293 } 294 295 /* FIXME : dropdown colors in settings page */ 296 297 /* code block:remove white bg on operators */ 298 .theme-light .token.operator { 299 background: hsla(0, 0%, 100%, 0); 300 } 301 302 /* === VIM Mode === */ 303 .cm-fat-cursor .CodeMirror-cursor { 304 background: var(--text-accent); 305 } 306 .cm-animate-fat-cursor { 307 background: var(--text-accent); 308 } 309 310 /* active line selection*/ 311 .CodeMirror-activeline .CodeMirror-linebackground { 312 background-color: rgba(0, 0, 0, 0.1) !important; 313 } 314 /* .theme-dark .CodeMirror-activeline .CodeMirror-linebackground { 315 background-color: rgba(0, 0, 0, 0.15) !important; 316 } */ 317 318 /* === Tag Pills === */ 319 320 .tag { 321 background-color: var(--text-accent); 322 border: none; 323 color: white !important; 324 font-size: 11px; 325 font-weight: bold; 326 line-height: 1.6em; 327 padding: 0px 7px 1px 7px; 328 text-align: center; 329 text-decoration: none !important; 330 display: inline-block; 331 margin: 0px 2px; 332 cursor: pointer; 333 border-radius: 10px; 334 } 335 336 .tag[href^="#important"] { 337 background-color: red; 338 } 339 340 .tag[href^="#complete"] { 341 background-color: green; 342 } 343 344 .tag[href^="#inprogress"] { 345 background-color: orange; 346 } 347 348 .tag:hover { 349 color: white; 350 background-color: var(--text-accent-hover); 351 } 352 353 /* Tag pills in tag panel*/ 354 /* Thanks Klaas for idea and some realization */ 355 356 .tag-pane-tag-text { 357 background-color: var(--background-primary); 358 color: var(--text-normal); 359 border: none; 360 font-size: 13px; 361 padding: 1px 8px; 362 text-align: center; 363 text-decoration: none; 364 display: inline-block; 365 cursor: pointer; 366 border-radius: 14px; 367 transition: all 0.2s ease; 368 } 369 370 .tag-pane-tag-count { 371 background-color: var(--background-primary); 372 color: var(--text-normal); 373 border: none; 374 font-size: 13px; 375 padding: 2px 8px; 376 text-align: center; 377 text-decoration: none; 378 display: inline-block; 379 margin: 0px 0px; 380 cursor: pointer; 381 border-radius: 14px; 382 transition: all 0.2s ease; 383 } 384 385 .tag-pane-tag:hover > .tag-pane-tag-count, 386 .tag-pane-tag:hover > .tag-pane-tag-text { 387 background-color: var(--text-accent); 388 color: white; 389 font-weight: bold; 390 } 391 392 /*=== trace indentation lines === */ 393 394 .cm-hmd-list-indent .cm-tab, 395 ul ul { 396 position: relative; 397 } 398 399 .cm-hmd-list-indent .cm-tab::before, 400 ul ul::before { 401 content: ""; 402 border-left: 1px solid var(--lines-identation); 403 404 position: absolute; 405 } 406 407 .cm-hmd-list-indent .cm-tab::before { 408 left: 0; 409 top: -5px; 410 bottom: -4px; 411 } 412 413 ul ul::before { 414 left: -15px; 415 top: 0; 416 bottom: 0; 417 } 418 419 /* === Settings Page: change buttons color === */ 420 .modal.mod-settings button:not(.mod-cta) { 421 background-color: var(--text-accent); 422 color: #fff; 423 font-weight: bold; 424 } 425 .modal.mod-settings button:not(.mod-cta):hover { 426 background-color: var(--text-accent-hover); 427 } 428 429 /* === Community Themes page: make responsive === */ 430 .community-theme-list { 431 display: flex; 432 flex-wrap: wrap; 433 align-items: center; 434 justify-content: center; 435 } 436 .community-theme { 437 max-width: 600px; 438 } 439 440 /* ===TRANSCLUSION TWEAKS=== */ 441 442 .markdown-embed-title { 443 font-family: sans-serif; 444 font-size: 10px; 445 color: var(--text-accent); 446 line-height: 10px; 447 width: 100%; 448 text-align: left; 449 font-weight: 100; 450 margin: -4px 0px; 451 } 452 453 .markdown-preview-view .markdown-embed { 454 background-color: var(--background-primary); 455 border-radius: 0px; 456 border: 0; 457 border-left: 1px solid var(--text-selection); 458 margin: 0px -10px; 459 } 460 461 .markdown-embed { 462 display: block; 463 top: 0px; 464 } 465 466 .markdown-embed > .markdown-embed-content { 467 display: inline; 468 max-height: 100%; 469 max-width: 100%; 470 margin: -25px 0px -15px 0px; 471 padding: 0px 0px 5px 0px; 472 } 473 474 .markdown-embed-content > * { 475 display: block; 476 max-height: 100%; 477 max-width: 100%; 478 margin: 10px 0px 5px 0px; 479 } 480 481 .markdown-embed-link { 482 top: -3px; 483 left: -20px; 484 color: var(--accent-strong); 485 cursor: pointer; 486 position: absolute; 487 } 488 489 svg.link { 490 width: 12px; 491 height: 12px; 492 } 493 494 .file-embed-link { 495 top: 10px; 496 left: -10px; 497 color: var(--accent-strong); 498 cursor: pointer; 499 position: relative; 500 } 501 502 .internal-embed, 503 .internal-embed > .markdown-embed > .markdown-embed-content { 504 display: block; 505 max-height: 100%; 506 max-width: 100%; 507 left: 0px; 508 } 509 510 .markdown-preview-view .file-embed { 511 background-color: var(--background-primary); 512 border-radius: 4px; 513 border: 2px solid var(--text-selection); 514 padding: 5px 20px 5px 20px; 515 margin: 10px 0px 10px 0px; 516 } 517 518 .file-embed-title { 519 font-size: 12px; 520 height: 40px; 521 text-overflow: ellipsis; 522 overflow: hidden; 523 white-space: nowrap; 524 } 525 526 /* ==========headings=======*/ 527 h1 { 528 font-size: 34px; 529 line-height: 40px; 530 padding-bottom: 10px; 531 border-bottom: 2px solid var(--text-accent); 532 color: var(--text-accent); 533 } 534 h2 { 535 font-size: 26px; 536 line-height: 36px; 537 padding-top: 14px; 538 padding-bottom: 6px; 539 border-bottom: 2px solid var(--text-normal); 540 } 541 h3 { 542 padding-bottom: 5px; 543 border-bottom: 1px solid var(--text-muted); 544 } 545 h4 { 546 padding-bottom: 4px; 547 border-bottom: 1px dashed var(--text-muted); 548 } 549 h5 { 550 padding-bottom: 3px; 551 border-bottom: 1px dotted var(--text-muted); 552 } 553 554 /* h1::before { 555 content: 'h1 '; 556 font-size: 12px; 557 color: var(--text-faint); 558 } 559 h2::before { 560 content: 'h2 '; 561 font-size: 12px; 562 color: var(--text-faint); 563 } 564 h3::before { 565 content: 'h3 '; 566 font-size: 12px; 567 color: var(--text-faint); 568 } 569 h4::before { 570 content: 'h4 '; 571 font-size: 12px; 572 color: var(--text-faint); 573 } 574 h5::before { 575 content: 'H5 '; 576 font-size: 12px; 577 color: var(--text-faint); 578 } 579 h6::before { 580 content: 'H6 '; 581 font-size: 12px; 582 color: var(--text-faint); 583 } */ 584 585 /* ==========hr======*/ 586 .markdown-preview-view hr { 587 height: 1px; 588 border: none; 589 background-color: var(--text-accent); 590 } 591 592 /* ===========================*/ 593 /* ====== GUI tweaks =========*/ 594 /* ===========================*/ 595 596 .workspace-tab-header:hover { 597 color: var(--text-accent); 598 cursor: pointer; 599 } 600 /* ===== snappier animations ==== */ 601 602 .workspace-tab-header, 603 .workspace-tab-header-inner, 604 .workspace-tab-container-before, 605 .workspace-tab-container-after { 606 transition: background-color 100ms linear; 607 } 608 609 /* ===== ribbon vertical =========*/ 610 611 .workspace-ribbon-collapse-btn { 612 margin-top: 0px; 613 padding: 10px 6px 4px 6px; 614 cursor: pointer; 615 color: var(--text-faint); 616 transform: none; 617 transition: transform 100ms ease-in-out; 618 } 619 620 .workspace-ribbon.is-collapsed { 621 background-color: var(--background-secondary-alt); 622 } 623 624 .workspace-ribbon.mod-left { 625 border-right: 1px solid var(--background-primary); 626 } 627 628 .workspace-ribbon.mod-left.is-collapsed { 629 border-right-color: transparent; 630 } 631 632 .workspace-ribbon.mod-right.is-collapsed { 633 border-left-color: var(--background-secondary-alt); 634 } 635 636 /* ===== thinner & snappier horiz resize handle =========*/ 637 638 .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { 639 bottom: 0; 640 left: 0; 641 height: 3px; 642 width: 100%; 643 cursor: row-resize; 644 } 645 646 .workspace-leaf-resize-handle { 647 transition: background-color 80ms linear; 648 } 649 650 /* ==== align top tab header with header title ==== */ 651 652 .workspace-tab-header-container { 653 display: flex; 654 background-color: var(--background-secondary-alt); 655 height: 36px; 656 padding-top: 1px; 657 border-bottom: 1px solid var(--background-primary); 658 } 659 660 /* ===== left sidebar =========*/ 661 /* 662 .workspace-tab-header-container { 663 display: flex; 664 background-color: var(--background-secondary-alt); 665 padding-top: 1px; 666 } 667 668 .nav-header { 669 padding: 10px 10px 4px 8px; 670 } 671 672 .nav-buttons-container { 673 display: flex; 674 justify-content: left; 675 padding-bottom: 2px; 676 border-bottom: 1px solid var(--background-modifier-border); 677 margin-bottom: 2px; 678 } 679 680 .nav-action-button > svg { 681 width: 14px; 682 height: 14px; 683 } 684 685 .nav-action-button { 686 color: var(--text-muted); 687 padding: 0 20px 0 10px; 688 cursor: pointer; 689 } 690 691 .nav-files-container { 692 flex-grow: 1; 693 overflow-y: auto; 694 padding-bottom: 10px; 695 margin-bottom: 10px; 696 } 697 */ 698 699 /* == File Explorer === */ 700 /*.nav-file-title, 701 .nav-folder-title { 702 padding: 0px 14px 0px 20px; 703 } 704 705 .nav-folder-title { 706 font-weight: bold; 707 } 708 709 .nav-folder.mod-root > .nav-folder-title { 710 padding-left: 6px; 711 font-size: 14px; 712 font-weight: bolder; 713 top: -6px; 714 cursor: default; 715 } 716 717 .nav-file.is-active > .nav-file-title, 718 .nav-file.is-active > .nav-file-title:hover { 719 background-color: var(--background-primary); 720 border-radius: 2px; 721 font-weight: bold; 722 border-left: 2px solid var(--text-accent); 723 transition: all 0.5s ease; 724 } 725 .nav-file.is-active > .nav-file-title { 726 padding-left: 5px; 727 } 728 body:not(.is-grabbing) .nav-file-title:hover, 729 body:not(.is-grabbing) .nav-folder-title:hover { 730 background-color: var(--background-primary); 731 border-radius: 2px; 732 transition: all 0.2s ease; 733 } 734 735 .nav-file-tag { 736 background-color: var(--background-secondary-alt); 737 top: -1px; 738 } 739 */ 740 741 /*-------search pane---------*/ 742 input[type="text"], 743 input[type="email"], 744 input[type="password"], 745 input[type="number"] { 746 padding: 5px 8px; 747 font-size: 14px; 748 border-radius: 4px; 749 } 750 .search-input { 751 display: block; 752 margin: 0 auto 10px auto; 753 width: calc(100% - 20px); 754 } 755 756 /*---- nav arrows adjust location ----*/ 757 /* 758 .nav-folder-collapse-indicator { 759 position: absolute; 760 left: 12px; 761 top: 4px; 762 width: 9px; 763 height: 9px; 764 transition: transform 50ms linear 0s; 765 } 766 767 .nav-folder.is-collapsed .nav-folder-collapse-indicator { 768 transform: translateX(-4px) translateY(1px) rotate(-90deg); 769 } 770 */ 771 /* ===== smaller view-actions icons ===== */ 772 /* 773 .view-action > svg { 774 width: 14px; 775 height: 14px; 776 } 777 778 .view-header-icon > svg { 779 width: 14px; 780 height: 14px; 781 } 782 783 .workspace-tab-header-inner-icon > svg { 784 width: 14px; 785 height: 14px; 786 } 787 */ 788 /* ===== fix the selection highlight ==== */ 789 790 .suggestion-item.is-selected { 791 background-color: var(--text-accent); 792 } 793 .theme-light .suggestion-item.is-selected { 794 color: #fff; 795 } 796 797 /* ====== scrollbars =======*/ 798 799 ::-webkit-scrollbar-thumb { 800 -webkit-border-radius: 4px; 801 } 802 803 ::-webkit-scrollbar-thumb:active { 804 -webkit-border-radius: 4px; 805 } 806 807 /*==== tabs =====*/ 808 809 .workspace-tab-header-inner { 810 padding: 9px 20px; 811 height: 100%; 812 display: flex; 813 } 814 815 .workspace-tab-container-before, 816 .workspace-tab-container-after { 817 width: 0px; 818 height: 100%; 819 } 820 821 /* ====== font size headers =========*/ 822 823 .view-header-title { 824 font-size: 14px; 825 font-weight: 600; 826 } 827 828 /* ===== view header color ==========*/ 829 830 .workspace-leaf.mod-active .view-header-icon { 831 padding: 5px 10px; 832 color: var(--interactive-accent); 833 cursor: grab; 834 position: relative; 835 top: 2px; 836 } 837 838 .workspace-leaf.mod-active .view-header { 839 background-color: var(--background-primary); 840 border-bottom: 2px solid var(--interactive-accent); 841 } 842 843 .view-header { 844 height: 36px; 845 display: flex; 846 border-top: 1px solid var(--background-secondary-alt); 847 border-bottom: 2px solid var(--background-secondary-alt); 848 background-color: var(--background-secondary-alt); 849 z-index: 1; 850 } 851 852 /* remove the gradient between title and icons */ 853 854 .workspace-leaf.mod-active .view-header-title-container:after { 855 background: var(--background-primary); 856 } 857 858 .view-header-title-container:after { 859 content: ""; 860 position: absolute; 861 top: 0; 862 right: 0; 863 width: 30px; 864 height: 32px; 865 background: var(--background-secondary-alt); 866 /*border-right: 1px solid var(--background-modifier-border);*/ 867 } 868 869 /*==== separators =====*/ 870 871 .workspace-leaf-resize-handle { 872 background-color: var(--background-secondary-alt); 873 } 874 875 .workspace-leaf-resize-handle:hover { 876 background-color: var(--workspace-leaf-resize); 877 } 878 879 /* a bit more padding on the left side */ 880 881 .markdown-preview-view { 882 padding: 20px 30px 30px 45px; 883 } 884 885 /* fix color text in white theme and add some padding in mark text for readable */ 886 .theme-light .markdown-preview-view mark { 887 color: #fff; 888 } 889 .markdown-preview-view mark { 890 padding: 0 1px; 891 } 892 893 /*===== backlink pane smaller fonts=======*/ 894 895 .side-dock-collapsible-section-header { 896 font-size: 12px; 897 padding: 4px 14px 0 22px; 898 user-select: none; 899 cursor: pointer; 900 position: relative; 901 } 902 .side-dock-collapsible-section-header.is-collapsed 903 .side-dock-collapsible-section-header-indicator { 904 transform: translateX(-9px) translateY(7px) rotate(-90deg); 905 } 906 .search-result-container { 907 padding: 0px 4px 4px 4px; 908 } 909 910 .search-result-file-title { 911 font-size: 14px; 912 color: var(--text-accent); 913 border-radius: 0px; 914 border-top: 1px solid var(--background-modifier-border); 915 padding: 2px 12px 0px 18px; 916 } 917 918 .search-result-file-matches { 919 color: var(--text-muted); 920 font-size: 12px; 921 line-height: 16px; 922 padding: 2px 0px; 923 margin-bottom: -6px; 924 border-bottom: 0px; 925 } 926 .search-result-file-match { 927 color: var(--text-muted); 928 font-size: 12px; 929 line-height: 16px; 930 padding: 2px 0px; 931 margin-bottom: 4px; 932 border-bottom: 0px; 933 } 934 935 .search-result-file-match:not(:first-child) { 936 margin-top: 0px; 937 } 938 939 .search-result-file-matched-text { 940 color: var(--text-matched); 941 background-color: var(--text-highlight-bg); 942 } 943 944 .search-info-more-matches { 945 color: var(--text-faint); 946 text-decoration: overline; 947 font-size: 10px; 948 line-height: 16px; 949 } 950 951 .search-empty-state { 952 color: var(--text-error); 953 font-size: 12px; 954 margin: 0 20px 15px 20px; 955 } 956 /* the small text ... and XX matches */ 957 958 /*========= remove rounded corners =======*/ 959 960 .workspace-tab-header.is-active { 961 border-radius: 0px; 962 } 963 964 .nav-folder-title { 965 border-radius: 0px; 966 } 967 968 .workspace-tab-container-before.is-before-active .workspace-tab-header-inner, 969 .workspace-tab-header.is-before-active .workspace-tab-header-inner { 970 border-radius: 0px; 971 } 972 973 .workspace-tab-container-after.is-after-active .workspace-tab-header-inner, 974 .workspace-tab-header.is-after-active .workspace-tab-header-inner { 975 border-bottom-left-radius: 0px; 976 } 977 978 .workspace-split.mod-left-split .workspace-tabs .workspace-leaf { 979 border-top-left-radius: 0px; 980 } 981 982 .workspace-split.mod-right-split .workspace-tabs .workspace-leaf { 983 border-top-right-radius: 0px; 984 } 985 986 /*======= flat status bar ====*/ 987 988 .status-bar { 989 background-color: var(--background-secondary-alt); 990 border-top: 0px solid var(--background-modifier-border); 991 } 992 993 /* ======= graph view ==============*/ 994 995 .graph-view.color-fill { 996 color: var(--accent-strong); 997 /*var(--text-muted)if you want neutral color*/ 998 } 999 1000 .graph-view.color-circle { 1001 color: var(--text-normal); 1002 } 1003 1004 .graph-view.color-line { 1005 color: var(--text-faint); 1006 } 1007 1008 .graph-view.color-text { 1009 color: var(--text-normal); 1010 } 1011 1012 .graph-view.color-fill-highlight { 1013 color: var(--interactive-accent); 1014 } 1015 1016 .graph-view.color-line-highlight { 1017 color: rgb(var(--interactive-accent-rgb)); 1018 } 1019 1020 /* code mirror change text color */ 1021 .CodeMirror-lines { 1022 color: var(--text-normal); 1023 } 1024 .CodeMirror-lines > *::selection { 1025 color: white; 1026 } 1027 1028 .theme-light .graph-view.color-fill-tag, 1029 .theme-dark .graph-view.color-fill-tag { 1030 color: var(--text-accent); 1031 } 1032 1033 .theme-light .graph-view.color-fill-attachment, 1034 .theme-dark .graph-view.color-fill-attachment { 1035 color: var(--text-muted); 1036 } 1037 1038 /*==== codemirror line numbers gutter edit mode ====*/ 1039 1040 .cm-s-obsidian .CodeMirror-linenumber { 1041 color: var(--text-accent); 1042 opacity: 0.5; 1043 font-size: 14px; 1044 font-family: Consolas, monospace; 1045 } 1046 1047 .CodeMirror-gutter-elt { 1048 position: absolute; 1049 cursor: default; 1050 z-index: 4; 1051 } 1052 1053 .CodeMirror-linenumber { 1054 padding: 0 3px 0 0px; 1055 min-width: 20px; 1056 text-align: right; 1057 white-space: nowrap; 1058 } 1059 1060 /* === show margins in editor mode === */ 1061 .CodeMirror-lines { 1062 border-right: 1px solid var(--background-secondary); 1063 border-left: 1px solid var(--background-secondary); 1064 } 1065 1066 /*============bigger link popup preview ================*/ 1067 1068 .popover.hover-popover { 1069 position: absolute; 1070 z-index: var(--layer-popover); 1071 transform: scale(0.85); 1072 max-height: 600px; /* was 300 */ 1073 min-height: 100px; 1074 width: 500px; 1075 overflow: hidden; 1076 padding: 0; 1077 border-bottom: none; 1078 transition: all 0.5s ease; 1079 opacity: 0.95; 1080 } 1081 /* .popover.hover-popover.is-loaded { 1082 transition: all 2s ease; 1083 opacity: 1; 1084 } */ 1085 1086 .popover { 1087 background-color: var(--background-primary); 1088 border: 1px solid var(--background-primary-alt); 1089 box-shadow: 3px 3px 7px var(--background-modifier-box-shadow); 1090 border-radius: 6px; 1091 padding: 15px 20px 10px 20px; 1092 position: relative; 1093 font-weight: 500; 1094 -webkit-text-stroke: 0.2px; 1095 -webkit-font-smoothing: none; 1096 color: var(--bw); 1097 } 1098 /* --- the bottom gradient ---*/ 1099 .popover.hover-popover:after { 1100 content: ""; 1101 position: absolute; 1102 width: 100%; 1103 height: 0px; /* 50px */ 1104 bottom: 0; 1105 left: 0; 1106 right: 0; 1107 background: linear-gradient( 1108 to bottom, 1109 transparent, 1110 var(--background-primary) 80%, 1111 var(--background-primary) 1112 ); 1113 } 1114 1115 /* === footnotes === */ 1116 1117 .footnotes { 1118 text-align: justify; 1119 hyphens: auto; 1120 font-size: 12px; 1121 } 1122 1123 sup { 1124 vertical-align: top; 1125 font-size: 11px; 1126 display: inline-block; 1127 position: relative; 1128 margin: -4px 0 0 3px; 1129 } 1130 sub { 1131 vertical-align: bottom; 1132 font-size: 11px; 1133 display: inline-block; 1134 position: relative; 1135 margin: 0px 0 -4px 3px; 1136 } 1137 /* === Quote Block === */ 1138 .markdown-preview-view blockquote { 1139 border-radius: 4px; 1140 border: 0px solid var(--background-modifier-border); 1141 background-color: var(--background-secondary); 1142 border-left: 5px solid var(--text-accent); 1143 padding: 14px 10px 10px 10px; 1144 display: block; 1145 margin-block-start: 0.5em; 1146 margin-block-end: 1em; 1147 margin-inline-start: 20px; 1148 text-align: justify; 1149 hyphens: auto; 1150 /* margin-inline-start: 0; */ 1151 } 1152 /* .markdown-preview-view blockquote p { 1153 display: inline; 1154 margin: 0; 1155 } */ 1156 /* Add quotation character before and after quote */ 1157 /* .markdown-preview-view blockquote:before { 1158 font: 14px/20px serif; 1159 color: var(--text-accent); 1160 content: "\201C"; 1161 font-size: 3em; 1162 line-height: 0.1em; 1163 vertical-align: -0.3em; 1164 } 1165 .markdown-preview-view blockquote:after { 1166 font: 14px/20px serif; 1167 color: var(--text-accent); 1168 content: "\201D"; 1169 font-size: 3em; 1170 line-height: 0.1em; 1171 vertical-align: -0.3em; 1172 } */ 1173 1174 /*=============== lists bullets ================*/ 1175 ul { 1176 list-style-type: disc; 1177 } 1178 ul ul { 1179 list-style-type: disc; 1180 } 1181 ul ul ul { 1182 list-style-type: circle; 1183 } 1184 1185 /* ==== Table Styles ==== */ 1186 .markdown-preview-view table, 1187 .markdown-preview-view th, 1188 .markdown-preview-view td { 1189 border: 1px solid var(--text-faint); 1190 } 1191 1192 .markdown-preview-view th { 1193 background-color: var(--background-secondary-alt); 1194 } 1195 .theme-dark .markdown-preview-view tr:nth-child(even) { 1196 background-color: rgba(255, 255, 255, 0.03); 1197 } 1198 .theme-light .markdown-preview-view tr:nth-child(even) { 1199 background-color: rgba(0, 0, 0, 0.05); 1200 } 1201 1202 /*=============== tables align ================*/ 1203 tbody { 1204 display: table-row-group; 1205 vertical-align: top; 1206 border-color: inherit; 1207 } 1208 /*=============== add mods below ================*/ 1209 /*=============== add mods below ================*/ 1210 /*=============== add mods below ================*/ 1211 1212 /*----file explorer column view : slightly buggy ----*/ 1213 .nav-folder-children { 1214 column-width: 200px; 1215 column-rule: 1px solid var(--background-modifier-border); 1216 } 1217 1218 /* Wrap long nav text and some paddings */ 1219 .nav-file-title, 1220 .nav-folder-title { 1221 white-space: normal; 1222 width: auto; 1223 line-height: 1.1; 1224 } 1225 1226 /* Indent wrapped nav text */ 1227 /* .nav-file-title-content { 1228 margin-left: 10px; 1229 text-indent: -10px; 1230 } */ 1231 1232 /* Justify preview text */ 1233 .markdown-preview-view p { 1234 text-align: justify; 1235 hyphens: auto; 1236 } 1237 1238 /* reduce size of embedded files */ 1239 /* .markdown-preview-view img, */ 1240 .markdown-preview-view audio, 1241 .markdown-preview-view video { 1242 max-width: max(500px, 60%); 1243 outline: none; 1244 } 1245 1246 /*=============== add mods below ================*/ 1247 1248 /*=============== add mods below ================*/ 1249 1250 /*=============== add mods below ================*/ 1251 1252 /*===============================================*/ 1253 /* .__ .___*/ 1254 /* _____ ___________ _____ _____ |__| __| _/*/ 1255 /* / \_/ __ \_ __ \/ \\__ \ | |/ __ | */ 1256 /*| Y Y \ ___/| | \/ Y Y \/ __ \| / /_/ | */ 1257 /*|__|_| /\___ >__| |__|_| (____ /__\____ | */ 1258 /* \/ \/ \/ \/ \/ */ 1259 /*======== optionnal mermaid style below ========*/ 1260 1261 .label { 1262 font-family: Segoe UI, "trebuchet ms", verdana, arial, Fira Code, consolas, 1263 monospace !important; 1264 color: var(--text-normal) !important; 1265 } 1266 1267 .label text { 1268 fill: var(--background-primary-alt) !important; 1269 } 1270 1271 .node rect, 1272 .node circle, 1273 .node ellipse, 1274 .node polygon, 1275 .node path { 1276 fill: var(--background-modifier-border) !important; 1277 stroke: var(--text-normal) !important; 1278 stroke-width: 0.5px !important; 1279 } 1280 1281 .node .label { 1282 text-align: center !important; 1283 } 1284 1285 .node.clickable { 1286 cursor: pointer !important; 1287 } 1288 1289 .arrowheadPath { 1290 fill: var(--text-faint) !important; 1291 } 1292 1293 .edgePath .path { 1294 stroke: var(--text-faint) !important; 1295 stroke-width: 1.5px !important; 1296 } 1297 1298 .flowchart-link { 1299 stroke: var(--text-faint) !important; 1300 fill: none !important; 1301 } 1302 1303 .edgeLabel { 1304 background-color: var(--background-primary) !important; 1305 text-align: center !important; 1306 } 1307 1308 .edgeLabel rect { 1309 opacity: 0 !important; 1310 } 1311 1312 .cluster rect { 1313 fill: var(--background-primary-alt) !important; 1314 stroke: var(--text-faint) !important; 1315 stroke-width: 1px !important; 1316 } 1317 1318 .cluster text { 1319 fill: var(--background-primary) !important; 1320 } 1321 1322 div.mermaidTooltip { 1323 /* position: absolute !important; fixed appear scrollbar*/ 1324 text-align: center !important; 1325 max-width: 200px !important; 1326 padding: 2px !important; 1327 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1328 font-size: 10px !important; 1329 background: var(--background-secondary) !important; 1330 border: 1px solid var(--text-faint) !important; 1331 border-radius: 2px !important; 1332 pointer-events: none !important; 1333 z-index: 100 !important; 1334 } 1335 1336 /* Sequence Diagram variables */ 1337 1338 .actor { 1339 stroke: var(--text-accent) !important; 1340 fill: var(--background-secondary-alt) !important; 1341 } 1342 1343 text.actor > tspan { 1344 fill: var(--text-muted) !important; 1345 stroke: none !important; 1346 } 1347 1348 .actor-line { 1349 stroke: var(--text-muted) !important; 1350 } 1351 1352 .messageLine0 { 1353 stroke-width: 1.5 !important; 1354 stroke-dasharray: none !important; 1355 stroke: var(--text-muted) !important; 1356 } 1357 1358 .messageLine1 { 1359 stroke-width: 1.5 !important; 1360 stroke-dasharray: 2, 2 !important; 1361 stroke: var(--text-muted) !important; 1362 } 1363 1364 #arrowhead path { 1365 fill: var(--text-muted) !important; 1366 stroke: var(--text-muted) !important; 1367 } 1368 1369 .sequenceNumber { 1370 fill: var(--background-primary) !important; 1371 } 1372 1373 #sequencenumber { 1374 fill: var(--text-muted) !important; 1375 } 1376 1377 #crosshead path { 1378 fill: var(--text-muted) !important; 1379 stroke: var(--text-muted) !important; 1380 } 1381 1382 .messageText { 1383 fill: var(--text-muted) !important; 1384 stroke: var(--text-muted) !important; 1385 } 1386 1387 .labelBox { 1388 stroke: var(--text-accent) !important; 1389 fill: var(--background-secondary-alt) !important; 1390 } 1391 1392 .labelText, 1393 .labelText > tspan { 1394 fill: var(--text-muted) !important; 1395 stroke: none !important; 1396 } 1397 1398 .loopText, 1399 .loopText > tspan { 1400 fill: var(--text-muted) !important; 1401 stroke: none !important; 1402 } 1403 1404 .loopLine { 1405 stroke-width: 2px !important; 1406 stroke-dasharray: 2, 2 !important; 1407 stroke: var(--text-accent) !important; 1408 fill: var(--text-accent) !important; 1409 } 1410 1411 .note { 1412 stroke: var(--text-normal) !important; 1413 fill: var(--text-accent) !important; 1414 } 1415 1416 .noteText, 1417 .noteText > tspan { 1418 fill: var(--background-secondary-alt) !important; 1419 stroke: none !important; 1420 } 1421 1422 /* Gantt chart variables */ 1423 1424 .activation0 { 1425 fill: var(--background-secondary) !important; 1426 stroke: var(--text-accent) !important; 1427 } 1428 1429 .activation1 { 1430 fill: var(--background-secondary) !important; 1431 stroke: var(--text-accent) !important; 1432 } 1433 1434 .activation2 { 1435 fill: var(--background-secondary) !important; 1436 stroke: var(--text-accent) !important; 1437 } 1438 1439 /** Section styling */ 1440 1441 .mermaid-main-font { 1442 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1443 } 1444 1445 .section { 1446 stroke: none !important; 1447 opacity: 0.2 !important; 1448 } 1449 1450 .section0 { 1451 fill: var(--text-faint) !important; 1452 } 1453 1454 .section2 { 1455 fill: var(--text-accent) !important; 1456 } 1457 1458 .section1, 1459 .section3 { 1460 fill: var(--text-normal) !important; 1461 opacity: 0.2 !important; 1462 } 1463 1464 .sectionTitle0 { 1465 fill: var(--text-normal) !important; 1466 } 1467 1468 .sectionTitle1 { 1469 fill: var(--text-normal) !important; 1470 } 1471 1472 .sectionTitle2 { 1473 fill: var(--text-normal) !important; 1474 } 1475 1476 .sectionTitle3 { 1477 fill: var(--text-normal) !important; 1478 } 1479 1480 .sectionTitle { 1481 text-anchor: start !important; 1482 font-size: 9px !important; 1483 line-height: 14px !important; 1484 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1485 } 1486 1487 /* Grid and axis */ 1488 1489 .grid .tick { 1490 stroke: var(--text-muted) !important; 1491 opacity: 0.2 !important; 1492 shape-rendering: crispEdges !important; 1493 } 1494 1495 .grid .tick text { 1496 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1497 } 1498 1499 .grid path { 1500 stroke-width: 0 !important; 1501 } 1502 1503 /* Today line */ 1504 1505 .today { 1506 fill: none !important; 1507 stroke: var(--background-modifier-error) !important; 1508 stroke-width: 2px !important; 1509 } 1510 1511 /* Task styling */ 1512 1513 /* Default task */ 1514 1515 .task { 1516 stroke-width: 0.5px !important; 1517 } 1518 1519 .taskText { 1520 text-anchor: middle !important; 1521 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1522 } 1523 1524 .taskText:not([font-size]) { 1525 font-size: 9px !important; 1526 } 1527 1528 .taskTextOutsideRight { 1529 fill: var(--text-normal) !important; 1530 text-anchor: start !important; 1531 font-size: 9px !important; 1532 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1533 } 1534 1535 .taskTextOutsideLeft { 1536 fill: var(--text-normal) !important; 1537 text-anchor: end !important; 1538 font-size: 9px !important; 1539 } 1540 1541 /* Special case clickable */ 1542 1543 .task.clickable { 1544 cursor: pointer !important; 1545 } 1546 1547 .taskText.clickable { 1548 cursor: pointer !important; 1549 fill: var(--interactive-accent_hover) !important; 1550 font-weight: bold !important; 1551 } 1552 1553 .taskTextOutsideLeft.clickable { 1554 cursor: pointer !important; 1555 fill: var(--interactive-accent_hover) !important; 1556 font-weight: bold !important; 1557 } 1558 1559 .taskTextOutsideRight.clickable { 1560 cursor: pointer !important; 1561 fill: var(--interactive-accent_hover) !important; 1562 font-weight: bold !important; 1563 } 1564 1565 /* Specific task settings for the sections*/ 1566 1567 .taskText0, 1568 .taskText1, 1569 .taskText2, 1570 .taskText3 { 1571 fill: var(--text-normal) !important; 1572 } 1573 1574 .task0, 1575 .task1, 1576 .task2, 1577 .task3 { 1578 fill: var(--background-secondary-alt) !important; 1579 stroke: var(--text-muted) !important; 1580 } 1581 1582 .taskTextOutside0, 1583 .taskTextOutside2 { 1584 fill: var(--text-muted) !important; 1585 } 1586 1587 .taskTextOutside1, 1588 .taskTextOutside3 { 1589 fill: var(--text-muted) !important; 1590 } 1591 1592 /* Active task */ 1593 1594 .active0, 1595 .active1, 1596 .active2, 1597 .active3 { 1598 fill: var(--text-accent) !important; 1599 stroke: var(--text-muted) !important; 1600 } 1601 1602 .activeText0, 1603 .activeText1, 1604 .activeText2, 1605 .activeText3 { 1606 fill: var(--text-normal) !important; 1607 } 1608 1609 /* Completed task */ 1610 1611 .done0, 1612 .done1, 1613 .done2, 1614 .done3 { 1615 stroke: var(--text-muted) !important; 1616 fill: var(--text-faint) !important; 1617 stroke-width: 1 !important; 1618 } 1619 1620 .doneText0, 1621 .doneText1, 1622 .doneText2, 1623 .doneText3 { 1624 fill: var(--text-normal) !important; 1625 } 1626 1627 /* Tasks on the critical line */ 1628 1629 .crit0, 1630 .crit1, 1631 .crit2, 1632 .crit3 { 1633 stroke: var(--accent-strong) !important; 1634 fill: var(--accent-strong) !important; 1635 stroke-width: 1 !important; 1636 } 1637 1638 .activeCrit0, 1639 .activeCrit1, 1640 .activeCrit2, 1641 .activeCrit3 { 1642 stroke: var(--accent-strong) !important; 1643 fill: var(--text-accent) !important; 1644 stroke-width: 1 !important; 1645 } 1646 1647 .doneCrit0, 1648 .doneCrit1, 1649 .doneCrit2, 1650 .doneCrit3 { 1651 stroke: var(--accent-strong) !important; 1652 fill: var(--text-muted) !important; 1653 stroke-width: 0.5 !important; 1654 cursor: pointer !important; 1655 shape-rendering: crispEdges !important; 1656 } 1657 1658 .milestone { 1659 transform: rotate(45deg) scale(0.8, 0.8) !important; 1660 } 1661 1662 .milestoneText { 1663 font-style: italic !important; 1664 } 1665 1666 .doneCritText0, 1667 .doneCritText1, 1668 .doneCritText2, 1669 .doneCritText3 { 1670 fill: var(--text-normal) !important; 1671 } 1672 1673 .activeCritText0, 1674 .activeCritText1, 1675 .activeCritText2, 1676 .activeCritText3 { 1677 fill: var(--text-normal) !important; 1678 } 1679 1680 .titleText { 1681 text-anchor: middle !important; 1682 font-size: 16px !important; 1683 fill: var(--text-normal) !important; 1684 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1685 } 1686 1687 g.classGroup text { 1688 fill: var(--text-accent) !important; 1689 stroke: none !important; 1690 font-family: consolas, monospace, Segoe UI, "trebuchet ms", verdana, arial !important; 1691 font-size: 8px !important; 1692 } 1693 1694 g.classGroup text .title { 1695 font-weight: bolder !important; 1696 } 1697 1698 g.clickable { 1699 cursor: pointer !important; 1700 } 1701 1702 g.classGroup rect { 1703 fill: var(--background-secondary-alt) !important; 1704 stroke: var(--text-accent) !important; 1705 } 1706 1707 g.classGroup line { 1708 stroke: var(--text-accent) !important; 1709 stroke-width: 1 !important; 1710 } 1711 1712 .classLabel .box { 1713 stroke: none !important; 1714 stroke-width: 0 !important; 1715 fill: var(--background-secondary-alt) !important; 1716 opacity: 0.2 !important; 1717 } 1718 1719 .classLabel .label { 1720 fill: var(--text-accent) !important; 1721 font-size: 10px !important; 1722 } 1723 1724 .relation { 1725 stroke: var(--text-accent) !important; 1726 stroke-width: 1 !important; 1727 fill: none !important; 1728 } 1729 1730 .dashed-line { 1731 stroke-dasharray: 3 !important; 1732 } 1733 1734 #compositionStart { 1735 fill: var(--text-accent) !important; 1736 stroke: var(--text-accent) !important; 1737 stroke-width: 1 !important; 1738 } 1739 1740 #compositionEnd { 1741 fill: var(--text-accent) !important; 1742 stroke: var(--text-accent) !important; 1743 stroke-width: 1 !important; 1744 } 1745 1746 #aggregationStart { 1747 fill: var(--background-secondary-alt) !important; 1748 stroke: var(--text-accent) !important; 1749 stroke-width: 1 !important; 1750 } 1751 1752 #aggregationEnd { 1753 fill: var(--background-secondary-alt) !important; 1754 stroke: var(--text-accent) !important; 1755 stroke-width: 1 !important; 1756 } 1757 1758 #dependencyStart { 1759 fill: var(--text-accent) !important; 1760 stroke: var(--text-accent) !important; 1761 stroke-width: 1 !important; 1762 } 1763 1764 #dependencyEnd { 1765 fill: var(--text-accent) !important; 1766 stroke: var(--text-accent) !important; 1767 stroke-width: 1 !important; 1768 } 1769 1770 #extensionStart { 1771 fill: var(--text-accent) !important; 1772 stroke: var(--text-accent) !important; 1773 stroke-width: 1 !important; 1774 } 1775 1776 #extensionEnd { 1777 fill: var(--text-accent) !important; 1778 stroke: var(--text-accent) !important; 1779 stroke-width: 1 !important; 1780 } 1781 1782 .commit-id, 1783 .commit-msg, 1784 .branch-label { 1785 fill: var(--text-muted) !important; 1786 color: var(--text-muted) !important; 1787 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1788 } 1789 1790 .pieTitleText { 1791 text-anchor: middle !important; 1792 font-size: 18px !important; 1793 fill: var(--text-normal) !important; 1794 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1795 } 1796 1797 .slice { 1798 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1799 } 1800 1801 g.stateGroup text { 1802 fill: var(--text-accent) !important; 1803 stroke: none !important; 1804 font-size: 10px !important; 1805 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1806 } 1807 1808 g.stateGroup text { 1809 fill: var(--text-accent) !important; 1810 stroke: none !important; 1811 font-size: 10px !important; 1812 } 1813 1814 g.stateGroup .state-title { 1815 font-weight: bolder !important; 1816 fill: var(--background-secondary-alt) !important; 1817 } 1818 1819 g.stateGroup rect { 1820 fill: var(--background-secondary-alt) !important; 1821 stroke: var(--text-accent) !important; 1822 } 1823 1824 g.stateGroup line { 1825 stroke: var(--text-accent) !important; 1826 stroke-width: 1 !important; 1827 } 1828 1829 .transition { 1830 stroke: var(--text-accent) !important; 1831 stroke-width: 1 !important; 1832 fill: none !important; 1833 } 1834 1835 .stateGroup .composit { 1836 fill: var(--text-normal) !important; 1837 border-bottom: 1px !important; 1838 } 1839 1840 .stateGroup .alt-composit { 1841 fill: #e0e0e0 !important; 1842 border-bottom: 1px !important; 1843 } 1844 1845 .state-note { 1846 stroke: var(--text-faint) !important; 1847 fill: var(--text-accent) !important; 1848 } 1849 1850 .state-note text { 1851 fill: black !important; 1852 stroke: none !important; 1853 font-size: 10px !important; 1854 } 1855 1856 .stateLabel .box { 1857 stroke: none !important; 1858 stroke-width: 0 !important; 1859 fill: var(--background-secondary-alt) !important; 1860 opacity: 0.5 !important; 1861 } 1862 1863 .stateLabel text { 1864 fill: black !important; 1865 font-size: 10px !important; 1866 font-weight: bold !important; 1867 font-family: Segoe UI, "trebuchet ms", verdana, arial !important; 1868 } 1869 1870 .node circle.state-start { 1871 fill: black !important; 1872 stroke: black !important; 1873 } 1874 1875 .node circle.state-end { 1876 fill: black !important; 1877 stroke: var(--text-normal) !important; 1878 stroke-width: 1.5 !important; 1879 } 1880 1881 #statediagram-barbEnd { 1882 fill: var(--text-accent) !important; 1883 } 1884 1885 .statediagram-cluster rect { 1886 fill: var(--background-secondary-alt) !important; 1887 stroke: var(--text-accent) !important; 1888 stroke-width: 1px !important; 1889 } 1890 1891 .statediagram-cluster rect.outer { 1892 rx: 5px !important; 1893 ry: 5px !important; 1894 } 1895 1896 .statediagram-state .divider { 1897 stroke: var(--text-accent) !important; 1898 } 1899 1900 .statediagram-state .title-state { 1901 rx: 5px !important; 1902 ry: 5px !important; 1903 } 1904 1905 .statediagram-cluster.statediagram-cluster .inner { 1906 fill: var(--text-normal) !important; 1907 } 1908 1909 .statediagram-cluster.statediagram-cluster-alt .inner { 1910 fill: #e0e0e0 !important; 1911 } 1912 1913 .statediagram-cluster .inner { 1914 rx: 0 !important; 1915 ry: 0 !important; 1916 } 1917 1918 .statediagram-state rect.basic { 1919 rx: 5px !important; 1920 ry: 5px !important; 1921 } 1922 1923 .statediagram-state rect.divider { 1924 stroke-dasharray: 10, 10 !important; 1925 fill: #efefef !important; 1926 } 1927 1928 .note-edge { 1929 stroke-dasharray: 5 !important; 1930 } 1931 1932 .statediagram-note rect { 1933 fill: var(--text-accent) !important; 1934 stroke: var(--text-muted) !important; 1935 stroke-width: 1px !important; 1936 rx: 0 !important; 1937 ry: 0 !important; 1938 } 1939 1940 :root { 1941 --mermaid-font-family: '"trebuchet ms", verdana, arial' !important; 1942 --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive !important; 1943 } 1944 1945 /* Classes common for multiple diagrams */ 1946 1947 .error-icon { 1948 fill: var(--text-error) !important; 1949 } 1950 1951 .error-text { 1952 fill: var(--text-muted) !important; 1953 stroke: var(--text-muted) !important; 1954 } 1955 1956 .edge-thickness-normal { 1957 stroke-width: 1px !important; 1958 } 1959 1960 .edge-thickness-thick { 1961 stroke-width: 3px !important; 1962 } 1963 1964 .edge-pattern-solid { 1965 stroke-dasharray: 0 !important; 1966 } 1967 1968 .edge-pattern-dashed { 1969 stroke-dasharray: 3 !important; 1970 } 1971 1972 .edge-pattern-dotted { 1973 stroke-dasharray: 2 !important; 1974 } 1975 1976 .marker { 1977 fill: var(--text-muted) !important; 1978 } 1979 1980 .marker.cross { 1981 stroke: var(--text-muted) !important; 1982 }