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