├── README.md ├── core.css ├── cosmonaut.css ├── images ├── README.md ├── cosmonaut.png ├── yggdrasil.png └── zenith.png ├── yggdrasil.css └── zenith.css /README.md: -------------------------------------------------------------------------------- 1 | # Azlen's Roam Themes 2 | 3 | - Side-by-side page view (shift-click to open on side) 4 | - Minimal aesthetic 5 | - Overlay pages on graph view 6 | - Snazzy search bar 7 | - Custom styles for most components 8 | 9 | UPDATE: Separated duplicate code into `core.css` 10 | 11 | To use, just copy the theme you'd like into [[roam/css]], there is a CSS import to collect `core.css` from this repository which will automatically update to reflect future fixes and updates to the core theme 12 | 13 | Or use a single line to import the theme you'd like: 14 | ```@import url('https://azlen.github.io/roam-themes/zenith.css');``` 15 | 16 | 👀 [Video on how to apply themes to Roam with [[roam/css]]](https://www.youtube.com/watch?v=UY-sAC2eGyI) 17 | 18 | ❤ [Donation link](https://www.paypal.me/azlenelza) if you enjoy these themes and want to support future projects :) 19 | 20 | ## Zenith 21 | 22 | ```@import url('https://azlen.github.io/roam-themes/zenith.css');``` 23 | 24 | ![Zenith](/images/zenith.png) 25 | 26 | ## Cosmonaut 27 | 28 | ```@import url('https://azlen.github.io/roam-themes/cosmonaut.css');``` 29 | 30 | ![Cosmonaut](/images/cosmonaut.png) 31 | 32 | ## Yggdrasil 33 | 34 | ```@import url('https://azlen.github.io/roam-themes/yggdrasil.css');``` 35 | 36 | ![Yggdrasil](/images/yggdrasil.png) 37 | -------------------------------------------------------------------------------- /core.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --page-width: 616px; 3 | --page-order: row-reverse; 4 | } 5 | 6 | html, body, .roam-app { 7 | background-color: var(--bg-color) !important; 8 | overflow: hidden !important; 9 | } 10 | 11 | /* hide scrollbars */ 12 | ::-webkit-scrollbar { 13 | width: 0px; 14 | background: transparent; /* Chrome/Safari/Webkit */ 15 | } 16 | 17 | /* hide scrollbars */ 18 | * { 19 | scrollbar-width: none; /* Firefox */ 20 | -ms-overflow-style: none; /* IE 10+ */ 21 | } 22 | 23 | h1, h2, h3, h4, h5, h6, h1 > a, h2 > a, h3 > a, h4 > a, .rm-title-textarea { 24 | font-family: var(--header-font) !important; 25 | color: var(--text-color) !important; 26 | } 27 | 28 | h1.level2, h1.level2 > a, h2.level2 > a { 29 | font-size: 26px !important; 30 | font-weight: bold !important; 31 | height: auto !important; 32 | line-height: 1.5 !important; 33 | } 34 | h1.rm-title-display, .rm-title-textarea { 35 | margin-left: 20px; 36 | } 37 | 38 | .bp3-button.bp3-minimal:hover { 39 | background: rgba(var(--color-primary), 0.4) !important; 40 | color: var(--text-color) !important; 41 | } 42 | .bp3-button.bp3-minimal::before, .bp3-button.bp3-minimal *, .bp3-button.bp3-minimal *::before { 43 | color: var(--icon-color) !important; 44 | } 45 | .bp3-button.bp3-minimal:hover::before, .bp3-button.bp3-minimal:hover *, .bp3-button.bp3-minimal:hover *::before { 46 | color: var(--text-color) !important; 47 | } 48 | 49 | 50 | div, 51 | textarea, a { 52 | font-family: var(--body-font) !important; 53 | color: var(--text-color) !important; 54 | } 55 | .bp3-popover { 56 | color: var(--color-secondary-contrast) !important; 57 | } 58 | 59 | *[class*="bp3-icon"], *[class*="bp3-icon"]::before { 60 | color: var(--icon-color) !important; 61 | } 62 | 63 | .roam-highlight { 64 | background-color: rgba(var(--color-primary), 0.5); 65 | } 66 | 67 | .rm-block-ref { 68 | border-bottom: 2px solid rgba(var(--color-primary), 0.2) 69 | } 70 | .rm-block-ref:hover { 71 | background-color: rgba(var(--color-primary), 0.2); 72 | } 73 | 74 | .rm-alias-external, .rm-alias-external:hover { 75 | color: rgb(var(--color-secondary)) !important; 76 | font-weight: bold; 77 | } 78 | 79 | .rm-alias-block, .rm-alias-block:hover { 80 | color: rgb(var(--color-primary)) !important; 81 | font-weight: bold; 82 | } 83 | 84 | .rm-page-ref, .rm-alias-page, .rm-alias-page:hover { 85 | color: rgb(var(--color-primary)) !important; 86 | font-weight: bold; 87 | } 88 | 89 | .rm-page-ref-tag { 90 | color: var(--color-primary-contrast) !important; 91 | background-color: rgb(var(--color-primary)); 92 | padding: 1px 6px; 93 | border-radius: 4px; 94 | } 95 | 96 | .block-highlight-blue { 97 | background-color: rgba(var(--color-primary), 0.2) 98 | } 99 | 100 | .starred-pages a { 101 | color: rgb(var(--color-primary)) !important; 102 | } 103 | 104 | .version-bullet { 105 | background-color: rgb(var(--color-primary)) !important; 106 | color: var(--color-primary-contrast) !important; 107 | } 108 | 109 | .roam-bullet-closed { 110 | background-color: var(--bullet-color) !important; 111 | } 112 | .simple-bullet-inner { 113 | background-color: var(--bullet-color) !important; 114 | } 115 | 116 | .rm-saving-icon .rm-synced { 117 | background-color: rgb(var(--color-primary)); 118 | } 119 | .rm-saving-icon .rm-saving-remote { 120 | background-color: rgb(var(--color-secondary)); 121 | } 122 | 123 | /* set width and other attributes of pages */ 124 | .roam-article { 125 | padding: 0 !important; 126 | width: var(--page-width) !important; 127 | } 128 | .roam-article, #all-pages-search, .sidebar-content > * { 129 | margin: 50px 0px 100px 0px !important; 130 | box-sizing: border-box; 131 | height: auto !important; 132 | max-width: var(--page-width); 133 | } 134 | 135 | /* make blocks respect --page-width */ 136 | .roam-block-container { 137 | max-width: var(--page-width); 138 | } 139 | 140 | *[style*="background-color: white"] { 141 | background-color: var(--page-color) !important; 142 | } 143 | *[style*="background-color: rgb(213, 218, 223)"] { 144 | background-color: rgba(var(--color-primary), 0.3) !important; 145 | } 146 | 147 | /* -------------------------- */ 148 | /* PAGE CARDS */ 149 | /* -------------------------- */ 150 | 151 | .roam-article > div { 152 | padding: 20px 50px 30px 40px; 153 | } 154 | 155 | .roam-article > div { 156 | background: var(--page-color); 157 | /* position: relative; */ 158 | border-radius: 10px; 159 | } 160 | 161 | .roam-article > div:first-child, .sidebar-content > * > * { 162 | box-shadow: var(--page-shadow); 163 | } 164 | 165 | /* set min-width for collapsed sidebar*/ 166 | .sidebar-content > * { 167 | min-width: 58.5px; 168 | } 169 | 170 | .roam-body-main { 171 | top: 0 !important; 172 | height: 100% !important; 173 | width: auto !important; 174 | position: relative !important; 175 | padding-left: 50px; 176 | } 177 | 178 | .roam-main { 179 | width: unset !important; 180 | max-width: 100% !important; 181 | height: 100%; 182 | 183 | overflow-x: scroll; 184 | overflow-y: hidden; 185 | margin: auto; 186 | transition: padding-left 0.15s ease-out; 187 | } 188 | 189 | /* -------------------------- */ 190 | /* RIGHT SIDEBAR */ 191 | /* -------------------------- */ 192 | 193 | #right-sidebar { 194 | display: inline-flex !important; 195 | vertical-align: top; 196 | background-color: transparent !important; 197 | border: none !important; 198 | flex-direction: row !important; 199 | padding-right: 100px; 200 | /*min-height: 100vh;*/ 201 | } 202 | /* hide icon to close sidebar */ 203 | #right-sidebar > .flex-h-box { 204 | display: none; 205 | } 206 | 207 | /* spacing and scrolling */ 208 | .sidebar-content > * { 209 | margin: 0px 0px 0 20px !important; 210 | overflow-x: visible; 211 | /*overflow-y: auto !important;*/ 212 | max-height: 100vh; 213 | padding: 50px 0px 100px 0px; 214 | 215 | /* pesky bottom border/outline in chrome won't go away! */ 216 | /* this does not fix it */ 217 | border: none !important; 218 | outline: none !important; 219 | } 220 | 221 | .sidebar-content { 222 | visibility: visible; 223 | display: flex !important; 224 | flex-direction: var(--page-order) !important; 225 | align-items: flex-start; /* allow pages to have their own height */ 226 | justify-content: flex-end; 227 | } 228 | 229 | .roam-center > div:not(.rm-dnd-separator):first-child { 230 | padding: 0 !important; 231 | } 232 | .roam-body-main > * { 233 | display: inline-block; 234 | } 235 | 236 | .sidebar-content > *:not(.rm-dnd-separator) { 237 | display: block !important; 238 | max-width: var(--page-width); 239 | position: relative !important; 240 | margin-bottom: 200px; 241 | flex-shrink: 0; 242 | 243 | overflow-y: auto !important; 244 | } 245 | 246 | .sidebar-content > *:not(.rm-dnd-separator) > div:not(.rm-dnd-separator) > div:first-child:not(:last-child) { 247 | min-width: var(--page-width); 248 | } 249 | 250 | .sidebar-content > * > div[style*="margin-left:"][style*="margin-right:"] { 251 | margin-left: 0 !important; 252 | margin-right: 0 !important; 253 | padding: 0 !important; 254 | margin-bottom: 100px; 255 | } 256 | 257 | .sidebar-content > *:not(.rm-dnd-separator) > .flex-h-box { 258 | display: block !important; 259 | 260 | padding: 15px 10px !important; 261 | } 262 | .sidebar-content > *:not(.rm-dnd-separator) > div:not(.rm-dnd-separator) { 263 | background: var(--page-color); 264 | } 265 | .sidebar-content > *:not(.rm-dnd-separator) > div:not(.rm-dnd-separator):first-child { 266 | border-radius: 10px 10px 0px 0px; 267 | } 268 | .sidebar-content > *:not(.rm-dnd-separator) > div:not(.rm-dnd-separator):first-child:last-child { 269 | border-radius: 10px; 270 | } 271 | .sidebar-content > *:not(.rm-dnd-separator) > div:not(.rm-dnd-separator) > div:last-child:not(:first-child) { 272 | border-radius: 0px 0px 10px 10px; 273 | padding-bottom: 50px !important; 274 | width: var(--page-width); 275 | } 276 | .sidebar-content > div:not(.rm-dnd-separator) > div:not(.rm-dnd-separator):not(.flex-h-box) { 277 | padding: 0px 50px 0px 40px; 278 | } 279 | .sidebar-content > div:not(.rm-dnd-separator) > .flex-h-box > .bp3-button, #roam-right-sidebar-content .flex-h-box > .bp3-popover-wrapper { 280 | margin: auto !important; 281 | width: 20px !important; 282 | text-align: center; 283 | 284 | } 285 | 286 | .sidebar-content > div > div > div[style*="padding-bottom: 8px"] { 287 | padding: 8px 40px !important; 288 | } 289 | 290 | .sidebar-content .window-headers { 291 | flex-direction: column; 292 | } 293 | 294 | .sidebar-content > div .bp3-icon-plus ~ * { 295 | display: block; 296 | } 297 | /* when collapsed, hide all icons but `expand` and `close` */ 298 | .sidebar-content > div .bp3-icon-plus ~ .bp3-button:not(.bp3-icon-cross), .sidebar-content > div .bp3-icon-plus ~ .bp3-popover-wrapper { 299 | display: none !important; 300 | } 301 | .sidebar-content > div .bp3-icon-plus ~ .bp3-button.bp3-icon-cross { 302 | display: block; 303 | margin-left: auto !important; 304 | margin-right: auto !important; 305 | margin: 20px auto 0px auto !important; 306 | } 307 | .sidebar-content > div .bp3-icon-plus ~ .bp3-button.bp3-icon-cross::before { 308 | margin-top: 5px; 309 | } 310 | 311 | /* position minus button */ 312 | .sidebar-content > div .bp3-icon-minus, .sidebar-content > div .bp3-icon-plus { 313 | position: absolute; 314 | top: 20px; 315 | left: 20px; 316 | } 317 | /* position filter button */ 318 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-popover-wrapper { 319 | position: absolute; 320 | top: 20px; 321 | left: 50px; 322 | } 323 | /* position references button */ 324 | #roam-right-sidebar-content > div .bp3-icon-minus ~ button.bp3-button { 325 | position: absolute; 326 | top: 20px; 327 | left: 80px; 328 | color: var(--icon-color); 329 | } 330 | /* position close button */ 331 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-cross { 332 | position: absolute; 333 | top: 20px; 334 | right: 20px; 335 | } 336 | 337 | /* position close button */ 338 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-pin, 339 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-unpin { 340 | position: absolute; 341 | top: 20px; 342 | right: 50px; 343 | } 344 | 345 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-unpin { 346 | background: rgba(var(--color-primary), 0.4) 347 | } 348 | 349 | #roam-right-sidebar-content > div .bp3-icon-minus + * { 350 | margin: 20px 20px 5px 50px !important; 351 | } 352 | 353 | #roam-right-sidebar-content > div .bp3-icon-plus ~ h1 { 354 | margin-top: 15px !important; 355 | padding-left:10px; 356 | } 357 | #roam-right-sidebar-content > div .bp3-icon-plus ~ div:not([class]):not([style]) { 358 | margin-top: 15px !important; 359 | padding-left:20px; 360 | padding-right:0px; 361 | } 362 | #roam-right-sidebar-content > div .bp3-icon-plus ~ .bp3-button:last-child { margin-top: 20px !important; } 363 | #roam-right-sidebar-content > div .bp3-icon-plus, #roam-right-sidebar-content > div .bp3-icon-plus ~ * { 364 | display: block; 365 | flex: none !important; 366 | } 367 | #roam-right-sidebar-content > div .bp3-icon-plus + * { 368 | white-space: nowrap; 369 | writing-mode: vertical-rl; 370 | min-width: 0; 371 | } 372 | #roam-right-sidebar-content > div .bp3-icon-plus + div { 373 | padding: 0px 12.5px; 374 | } 375 | 376 | 377 | .roam-topbar .bp3-icon-star::before { 378 | color: rgb(var(--color-primary)) !important; 379 | color: rgb(var(--color-secondary)) !important; 380 | } 381 | /* fix positioning problems with menu icon */ 382 | .roam-topbar *[class*="icon-menu"]::before { 383 | position: absolute !important; 384 | top: 4px !important; 385 | left: 4px !important; 386 | } 387 | .roam-topbar .bp3-icon-menu-open::before { 388 | content: ""; /* prevent menu icon from changing on hover */ 389 | } 390 | 391 | 392 | 393 | 394 | .window-headers { 395 | align-items: baseline; 396 | } 397 | .window-headers:hover { 398 | background-color: rgba(var(--color-primary), 0.1); 399 | } 400 | 401 | .sidebar-content > .rm-dnd-separator .rm-dnd-drop-area { 402 | z-index: 999999999999; 403 | position: fixed; 404 | top: 0; 405 | /*margin-left: calc(var(--page-width) * -1); 406 | width: 100% !important;*/ 407 | width: 50px !important; 408 | height: 100vh !important; 409 | /*background-color: rgba(255, 0, 0, 0.1) !important;*/ 410 | 411 | } 412 | .sidebar-content > div > .rm-dnd-separator { 413 | position: absolute; 414 | top: 0; 415 | left: 0; 416 | max-width: 100px !important; 417 | } 418 | .sidebar-content > div > .rm-dnd-separator .rm-dnd-drop-area { 419 | position: absolute !important; 420 | top: 0; 421 | z-index: 10000; 422 | height: 100vh !important; 423 | /*border-left: 20px solid #FF0099 !important;*/ 424 | box-shadow: none; 425 | /*transform: translateX(-30px);*/ 426 | } 427 | .rm-dnd-drop-area { 428 | position: absolute; 429 | background-color: rgba(var(--color-primary), 0.1) !important; 430 | margin-left: -60px !important; 431 | width: 100px; 432 | max-width: 100px; 433 | } 434 | .rm-dnd-drop-bar { 435 | margin-left:-15px; 436 | width: 10px !important; 437 | height: 100vh !important; 438 | background-color: rgba(var(--color-primary), 1) !important; 439 | box-shadow: 0px 0px 50px rgba(var(--color-primary), 1); 440 | 441 | } 442 | .sidebar-content > .rm-dnd-separator { 443 | margin-left: -20px; 444 | } 445 | .sidebar-content > .rm-dnd-separator > .rm-dnd-drop-area { 446 | position: absolute; 447 | } 448 | 449 | 450 | /*.rm-dnd-drop-area::before { 451 | content: ""; 452 | position: absolute; 453 | top: 0; 454 | right: 40px; 455 | height: 100vh; 456 | border-right: 10px solid var(--color-primary); 457 | box-shadow: 0px 0px 100px #FF0000; 458 | } 459 | 460 | .rm-dnd-drop-area:-moz-drag-over:before { 461 | content: ""; 462 | position: absolute; 463 | top: 0; 464 | right: 40px; 465 | height: 100vh; 466 | border-right: 10px solid #FF0000; 467 | box-shadow: 0px 0px 100px #FF0000; 468 | }*/ 469 | 470 | /*.rm-dnd-drop-area:-moz-drag-over { 471 | background-color: rgba(255, 0, 0, 0.5) !important; 472 | }*/ 473 | 474 | .ghost { 475 | opacity: 1; 476 | background: none; 477 | } 478 | 479 | /* -------------------------- */ 480 | /* LEFT SIDEBAR */ 481 | /* -------------------------- */ 482 | 483 | /* HIDE LOGO*/ 484 | #roam-sidebar-logo { 485 | display: none; 486 | } 487 | 488 | .roam-sidebar-content * { 489 | color: var(--icon-color) !important; 490 | } 491 | 492 | .starred-pages > a > .page:hover { 493 | background-color: transparent !important; 494 | color: rgb(var(--primary-color)) !important; 495 | } 496 | .log-button * { 497 | /* this did not do what I expected */ 498 | /* but it accomplished what I wanted */ 499 | color: rgb(var(--primary-color)) !important; 500 | } 501 | .log-button { 502 | background: none !important; 503 | } 504 | .log-button:hover, .log-button:hover * { 505 | color: var(--text-color) !important; 506 | } 507 | .roam-sidebar-content { 508 | color: var(--text-color) !important; 509 | } 510 | 511 | 512 | .roam-topbar { 513 | opacity: 1 !important; 514 | background-color: transparent !important; 515 | 516 | margin-top: 70px; 517 | width: 20px; 518 | display: inline-block; 519 | padding-left: 0 !important; 520 | position: relative !important; 521 | 522 | position: sticky !important; 523 | left: 0px; 524 | transition: none !important; 525 | z-index: 999; 526 | 527 | border: none !important; 528 | } 529 | .roam-sidebar-container > .roam-sidebar-content::before { 530 | content: ""; 531 | position: absolute; 532 | top: -70px; right: -68px; 533 | width: 400px; 534 | height: 100vh; 535 | background: var(--bg-color) !important; 536 | opacity: 0.7; 537 | z-index: -1; 538 | } 539 | 540 | .roam-sidebar-container { 541 | border: none !important; 542 | top: 0px !important; 543 | padding: 70px 68px 50px 0px; 544 | 545 | visibility: hidden; /* hide background */ 546 | transition: all .25s ease-out; 547 | width: 300px !important; 548 | backdrop-filter: blur(5px); 549 | background: #000000 !important; 550 | 551 | /* fix scrolling */ 552 | overflow-y: auto; 553 | } 554 | 555 | .roam-sidebar-container > .roam-sidebar-content { 556 | display: block !important; 557 | height: auto !important; 558 | visibility: visible; /* show contents */ 559 | } 560 | .roam-sidebar-container > .roam-sidebar-content > * { 561 | opacity: 0 !important; 562 | transition: opacity .6s ease-out !important 563 | } 564 | .roam-sidebar-container:not([style*="top: 0px"]) { 565 | left: -245px !important; 566 | } 567 | .roam-sidebar-container[style*="top: 0px"] > .roam-sidebar-content > * { 568 | opacity: 1 !important; 569 | } 570 | .roam-sidebar-container[style*="top: 0px"] + .roam-main { 571 | padding-left: 250px; 572 | } 573 | 574 | /* separator between "ALL PAGES" and "SHORTCUTS" */ 575 | .starred-pages-wrapper > div[style*="background"] { 576 | background: var(--icon-color) !important; 577 | opacity: 0.5; 578 | } 579 | 580 | 581 | /* fix height with absolute positioning of email address */ 582 | .roam-sidebar-content > .flex-h-box { 583 | height: 40px; 584 | } 585 | .roam-sidebar-content > .flex-h-box > * { 586 | pointer-events: auto; 587 | } 588 | .roam-sidebar-content > .flex-h-box ~ * { 589 | pointer-events: all; 590 | } 591 | .roam-sidebar-content > .flex-h-box > .flex-h-box { 592 | position: absolute; 593 | left: 45px; 594 | top: 5px; 595 | } 596 | 597 | .roam-topbar > .flex-h-box { 598 | width: 50px; 599 | flex-direction: column; 600 | height: 1px !important; 601 | align-items: start !important; 602 | text-align: center; 603 | 604 | position: -webkit-sticky !important; 605 | position: sticky !important; 606 | left: 0px; 607 | } 608 | .roam-topbar > .flex-h-box > * { 609 | flex: 0 0 20px !important; 610 | margin: auto !important; 611 | max-width: 20px !important; 612 | max-height: 20px !important; 613 | } 614 | .roam-topbar > div >.bp3-button:first-child { 615 | align-self: start !important; 616 | position: fixed !important; 617 | left: 16px; 618 | top: 78px; 619 | z-index: 9999999 !important; 620 | } 621 | .roam-topbar > div > *:nth-child(2) { 622 | margin-top:20px !important; 623 | } 624 | 625 | 626 | 627 | 628 | 629 | .rm-reference-item { 630 | background-color: transparent !important; 631 | border: none !important; 632 | padding: 0 !important; 633 | font-size: 13px !important; 634 | } 635 | 636 | .rm-ref-page-view-title a { 637 | color: #000000; 638 | font-weight: bold; 639 | } 640 | 641 | /* SOME BLACKMAGIC TO GET SEARCH ICON TO FUNCTION LIKE OTHER BUTTONS */ 642 | 643 | .roam-topbar .bp3-icon-search { 644 | padding: 4px; 645 | border-radius: 3px; 646 | margin: 0 !important; 647 | cursor: pointer; 648 | } 649 | 650 | /* style contains `200px` if search bar is NOT selected */ 651 | /* hovering search bar in this mode == hovering icon itself */ 652 | /* we must however have the search bar in front of the icon (but invisible) so that it can focus on click */ 653 | /* very hacky :P */ 654 | .rm-find-or-create-wrapper[style*="200px"]:hover .bp3-icon-search, .roam-topbar .bp3-icon-search:hover { 655 | background-color: rgba(var(--color-primary), 0.4); 656 | color: var(--text-color) !important; 657 | } 658 | .roam-topbar .bp3-icon-search svg { padding: 1px; } 659 | /* fix centering on calendar icon */ 660 | .roam-topbar .bp3-icon-calendar { margin: 0 !important } 661 | 662 | .rm-find-or-create-wrapper { 663 | width: 20px !important; 664 | } 665 | .rm-find-or-create-wrapper .bp3-overlay { 666 | position: fixed; 667 | top: 50px; 668 | left: calc(50% - 325px); 669 | width: 650px; 670 | } 671 | 672 | .roam-body-main { 673 | display: block; 674 | } 675 | 676 | 677 | 678 | 679 | /* -------------------------- */ 680 | /* POPOVER STYLES */ 681 | /* -------------------------- */ 682 | 683 | .bp3-menu-divider { 684 | border-color: rgba(255, 255, 255, 0.25) !important; 685 | } 686 | .bp3-text-small { 687 | color: var(--text-color) !important; 688 | opacity: 0.6; 689 | } 690 | 691 | 692 | .bp3-transition-container { 693 | /* not very good at these z-indexes huh? */ 694 | z-index: 9999999999 !important; 695 | } 696 | .bp3-popover { 697 | min-width: 230px; /* fix width */ 698 | pointer-events: none; /* prevent from getting in the way of hover*/ 699 | } 700 | .bp3-popover .bp3-menu, .bp3-popover .bp3-popover-content { 701 | pointer-events: auto; 702 | background-color: var(--page-color) !important; 703 | } 704 | 705 | .bp3-popover .bp3-button { 706 | background-color: var(--bg-color) 707 | } 708 | 709 | .bp3-popover .bp3-popover-arrow svg * { 710 | fill: var(--page-color); 711 | } 712 | 713 | #app .bp3-popover .bp3-popover-arrow svg * { 714 | fill: rgb(var(--color-secondary)); 715 | fill: var(--page-color); 716 | } 717 | 718 | /* what a mess! */ 719 | 720 | /*.roam-body-main .bp3-popover .bp3-popover-content, .roam-body-main .bp3-menu, 721 | .roam-sidebar-container .bp3-popover .bp3-popover-content, .roam-sidebar-container .bp3-menu { 722 | background-color: rgb(var(--color-secondary)) !important; 723 | } 724 | .roam-body-main .bp3-popover .bp3-popover-content, .roam-body-main .bp3-popover .bp3-popover-content *, 725 | .roam-sidebar-container .bp3-popover .bp3-popover-content, .roam-sidebar-container .bp3-popover .bp3-popover-content * { 726 | color: var(--color-secondary-contrast) !important; 727 | }*/ 728 | 729 | 730 | body > .bp3-portal .bp3-menu { 731 | background-color: var(--page-color) !important; 732 | } 733 | body > .bp3-portal .bp3-popover-content, body > .bp3-portal .bp3-popover-content * { 734 | color: var(--text-color) !important; 735 | } 736 | 737 | .bp3-popover .bp3-button, .bp3-popover .bp3-button * { 738 | color: var(--text-color) !important; 739 | } 740 | 741 | 742 | body > .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] { 743 | background-color: rgb(var(--color-primary)) !important; 744 | color: var(--color-secondary-contrast) !important; 745 | } 746 | body > .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] > span::before, body > .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] * { 747 | color: var(--color-secondary-contrast) !important; 748 | } 749 | body > .bp3-portal .bp3-menu-divider { 750 | border-color: rgba(0, 0, 0, 0.2) !important; 751 | } 752 | body > .bp3-portal .bp3-text-small { 753 | color: rgba(0, 0, 0, 0.5) !important; 754 | } 755 | 756 | .emoji-mart { 757 | border: none !important; 758 | } 759 | 760 | 761 | /* -------------------------- */ 762 | /* EMBEDDING BLOCKS */ 763 | /* -------------------------- */ 764 | .rm-embed-container{ 765 | background-color:var(--page-color) !important; 766 | } 767 | 768 | /* -------------------------- */ 769 | /* SEARCH BAR */ 770 | /* -------------------------- */ 771 | 772 | #find-or-create-input { 773 | opacity: 0; 774 | z-index: 10000; /* bring in front of icon to keep clickable */ 775 | cursor: pointer; 776 | } 777 | 778 | /*#find-or-create-input:active, */#find-or-create-input:focus { 779 | opacity: 1; 780 | position: fixed; 781 | width: 600px; 782 | top: 100px; 783 | left: calc(50% - 600px / 2); 784 | cursor: text; 785 | } 786 | 787 | 788 | #find-or-create-input { 789 | border-radius: 10px 10px 0px 0px; 790 | font-size: 18px; 791 | padding: 20px 20px; 792 | } 793 | /* if input is empty (no menu) then use all-around border-radius*/ 794 | #find-or-create-input[value=""] { 795 | border-radius: 10px; 796 | } 797 | 798 | /* highlight around search box */ 799 | #find-or-create-input:focus { 800 | box-shadow: 0 0 0 1px rgb(var(--color-primary)), 0 0 0 3px rgba(var(--color-primary), 0.3), inset 0 1px 1px rgba(16,22,26, 0.2); 801 | } 802 | 803 | /* styling dropdown menu*/ 804 | .rm-find-or-create-wrapper .bp3-popover { 805 | border-radius: 0px 0px 10px 10px; 806 | overflow: hidden; 807 | background: var(--page-color); 808 | backdrop-filter: blur(5px); 809 | } 810 | 811 | /* prevent coloured menu */ 812 | .rm-find-or-create-wrapper .bp3-popover-content, .rm-find-or-create-wrapper .bp3-menu { 813 | background-color: transparent !important; 814 | } 815 | 816 | /* properly position search menu overlay */ 817 | .rm-find-or-create-wrapper .bp3-overlay { 818 | top: 142px; 819 | width: 600px; 820 | left: calc(50% - 300px); 821 | z-index: 999999; 822 | } 823 | 824 | /* new page text */ 825 | .rm-find-or-create-wrapper .rm-new-page { 826 | color: rgb(var(--color-primary)) !important; 827 | } 828 | 829 | /* selected search result */ 830 | .rm-find-or-create-wrapper .rm-menu-item[style*="background"] { 831 | background-color: rgba(0, 0, 0, 0.1) !important; 832 | } 833 | 834 | /* search results highlighted words */ 835 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item span[style*="yellow"], 836 | .rm-pages-title-col span[style*="yellow"]{ 837 | background-color: rgba(var(--color-primary), 0.4) !important; 838 | color: var(--text-color); 839 | } 840 | 841 | .bp3-input { 842 | background-color: var(--page-color) !important; 843 | color: var(--text-color) !important; 844 | } 845 | .bp3-input::placeholder { 846 | background-color: var(--page-color) !important; 847 | color: var(--text-color) !important; 848 | opacity: 0.3; 849 | } 850 | 851 | .rm-search-list-item { 852 | color: var(--text-color) !important; 853 | opacity: 0.6; 854 | } 855 | 856 | /* -------------------------- */ 857 | /* DIAGRAM */ 858 | /* -------------------------- */ 859 | 860 | 861 | 862 | .rm-block-text svg :not(.katex) { 863 | background-color: var(--bg-color) !important; 864 | border: none !important; 865 | } 866 | .bp3-button, .roam-block div[style*="100vh"] > button { 867 | background-image: none !important; 868 | padding: 0px 10px !important; 869 | border: none !important; 870 | border-radius: 5px !important; 871 | } 872 | .roam-block div[style*="100vh"] > button { 873 | background-color: var(--bg-color) !important; 874 | } 875 | 876 | .bp3-button:hover, .roam-block div[style*="100vh"] > button:hover { 877 | background-color: rgba(var(--color-primary), 0.5) !important; 878 | } 879 | .roam-block div[style*="100vh"] div[style*="background-color: white"] { 880 | background-color: var(--page-color) !important; 881 | border-color: var(--bg-color) !important; 882 | } 883 | 884 | .roam-center svg > g > rect:first-child, #roam-right-sidebar-content > div svg > g > rect:first-child { 885 | display: none; 886 | } 887 | 888 | .roam-center svg > g > foreignObject, #roam-right-sidebar-content > div svg > g > foreignObject { 889 | background-color: var(--page-color); 890 | border-radius: 8px; 891 | filter: drop-shadow( 0px 4px 6px rgba(0, 0, 0, .05)); 892 | border: 1px solid transparent; 893 | } 894 | 895 | /* SELECTION */ 896 | 897 | .roam-center svg > g > rect[stroke="red"] + foreignObject, 898 | #roam-right-sidebar-content > div svg > g > rect[stroke="red"] + foreignObject { 899 | border-color: rgb(var(--color-secondary)); 900 | } 901 | 902 | .roam-center svg > g > rect[style*="stroke: red"] + foreignObject, 903 | #roam-right-sidebar-content > div svg > g > rect[style*="stroke: red"] + foreignObject{ 904 | border-color: rgb(var(--color-secondary)); 905 | 906 | } 907 | 908 | .roam-center svg > g > rect[style*="rgba"] + foreignObject, 909 | #roam-right-sidebar-content > div svg > g > rect[style*="rgba"] + foreignObject{ 910 | background-color: rgba(255, 255, 255, 0.4) 911 | } 912 | 913 | .roam-center svg > g > foreignObject > input:first-child, 914 | #roam-right-sidebar-content > div svg > g > foreignObject > input:first-child{ 915 | background-color: rgb(var(--color-primary)) !important; 916 | color: var(--color-primary-contrast); 917 | height: 30px; 918 | } 919 | 920 | .roam-center svg > line[style*="stroke: red"], 921 | #roam-right-sidebar-content > div svg > line[style*="stroke: red"]{ 922 | stroke: rgb(var(--color-secondary)) !important; 923 | } 924 | 925 | .roam-center svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"], 926 | #roam-right-sidebar-content > div svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"]{ 927 | fill: rgba(var(--color-secondary), 0.5) !important; 928 | stroke: rgb(var(--color-secondary)) !important; 929 | } 930 | 931 | /* -------------------------- */ 932 | /* DATE PICKER */ 933 | /* -------------------------- */ 934 | 935 | .bp3-datepicker{ 936 | background-color:var(--page-color); 937 | } 938 | 939 | .DayPicker-Day:hover{ 940 | background: rgb(var(--color-primary)) !important; 941 | } 942 | 943 | 944 | /* -------------------------- */ 945 | /* SEARCH PAGE */ 946 | /* -------------------------- */ 947 | 948 | #all-pages-search { 949 | max-height: calc(100% - 50px); 950 | overflow-y: auto; 951 | padding-bottom: 100px !important; 952 | } 953 | #all-pages-search > div { 954 | padding: 0 !important; 955 | } 956 | .rm-pages-row-header { 957 | background-color: rgba(var(--color-primary), 0.4) !important; 958 | color: var(--color-secondary-contrast) !important; 959 | border: none !important; 960 | } 961 | .rm-pages-row[style] .bp3-icon::before { 962 | margin-left: 5px; 963 | color: var(--color-secondary-contrast) !important; 964 | } 965 | .rm-pages-row-highlight { 966 | background-color: var(--page-color); 967 | } 968 | .rm-pages-row[style] .rm-pages-action-col { 969 | color: transparent !important; 970 | } 971 | /* use wrench icon for actions header rather than "AC..." */ 972 | .rm-pages-row[style] .rm-pages-action-col::before { 973 | font-family: "Icons16"; 974 | content: ""; 975 | color: var(--color-secondary-contrast); 976 | position: absolute; 977 | margin-left: 10px; 978 | } 979 | 980 | /* style new page button */ 981 | .bp3-intent-success { 982 | color: rgb(var(--color-primary)) !important; 983 | } 984 | .bp3-intent-success:hover { 985 | background-color: rgba(73, 197, 91, 0.2) !important; 986 | } 987 | .bp3-intent-success:active { 988 | background-color: rgba(73, 197, 91, 0.4) !important; 989 | } 990 | 991 | /* new search page */ 992 | 993 | .bp3-control-indicator { 994 | background-color: var(--page-color) !important; 995 | background-image: none !important; 996 | border: 1px solid rgba(var(--color-primary), 0.6) !important; 997 | } 998 | 999 | .bp3-control input:checked ~ .bp3-control-indicator { 1000 | background-color: rgb(var(--color-primary)) !important; 1001 | box-shadow: none !important; /* sliders */ 1002 | } 1003 | .bp3-checkbox > input:checked ~ .bp3-control-indicator::before { 1004 | width: 0.9em !important; 1005 | height: 0.9em !important; 1006 | } 1007 | 1008 | .rm-clickable-pill { 1009 | background-color: rgba(var(--color-primary), 0.4) !important; 1010 | } 1011 | .rm-clickable-pill.empty-pill { 1012 | background-color: var(--page-color) !important; 1013 | } 1014 | 1015 | .rm-pages-col-word-count > div > span:first-child, 1016 | .rm-pages-col-word-count + div > div > span:first-child{ 1017 | display: none 1018 | } 1019 | /*.rm-pages-col-word-count > div > .sorting-button-group::before { 1020 | content: "WORDS"; 1021 | font-size: 0.8em; 1022 | } 1023 | .rm-pages-col-word-count + div > div > .sorting-button-group::before { 1024 | content: "REFS"; 1025 | font-size: 0.8em; 1026 | }*/ 1027 | .sorted-header-text { 1028 | color: var(--text-color) !important; 1029 | } 1030 | 1031 | .rm-pages-row .rm-pages-col { 1032 | flex: 0 0 60px !important; 1033 | } 1034 | .rm-pages-row .rm-pages-col:nth-last-child(1), 1035 | .rm-pages-row .rm-pages-col:nth-last-child(2){ 1036 | flex: 0 0 140px !important; 1037 | } 1038 | .rm-all-pages .table > div { 1039 | max-width: var(--page-width) !important; 1040 | min-width: var(--page-width) !important; 1041 | } 1042 | 1043 | .sort-button::before { 1044 | color: var(--text-color) !important; 1045 | } 1046 | .sort-button.focused::before { 1047 | color: rgb(var(--color-primary)) !important; 1048 | } 1049 | 1050 | .rm-pages-row { 1051 | border-bottom: none !important; 1052 | } 1053 | .rm-pages-row:nth-child(2n+1) { 1054 | background-color: rgba(var(--color-primary), 0.15); 1055 | border-radius:3px; 1056 | } 1057 | 1058 | /* fix width change on border */ 1059 | .rm-all-pages .bp3-input { 1060 | border: 1px solid transparent; 1061 | } 1062 | 1063 | .rm-all-pages .bp3-input.focused { 1064 | border: 1px solid rgb(var(--color-primary)) !important; 1065 | } 1066 | 1067 | /* -------------------------- */ 1068 | /* MISC */ 1069 | /* -------------------------- */ 1070 | 1071 | /* for when filter is active on page */ 1072 | .bp3-icon-filter[style*="color"] { 1073 | color: rgb(var(--color-secondary)) !important; 1074 | } 1075 | 1076 | /* better caret positioning in linked references */ 1077 | .bp3-icon-caret-down::before { 1078 | color: var(--bullet-color) !important; 1079 | } 1080 | .bp3-icon-caret-down { 1081 | display: inline-block !important; 1082 | /*margin-bottom: 8px;*/ 1083 | /* fix positioning when rotated 90 deg */ 1084 | /*transform-origin: 9px 13px;*/ 1085 | 1086 | } 1087 | 1088 | /* */ 1089 | .roam-center > div[style*="width: 100%; height: 100%;"] { 1090 | width: var(--page-width) !important; 1091 | } 1092 | .roam-center > div[style*="width: 100%; height: 100%;"] > div { 1093 | position: fixed !important; 1094 | top: 0; left: 0; 1095 | width: 100vw !important; 1096 | height: 100vw !important; 1097 | } 1098 | 1099 | /* GRAPH VIEW */ 1100 | 1101 | /* you can't actually style the graph view because it uses canvas elements, but we *can* apply CSS filters to it to slightly change the appearance */ 1102 | canvas[data-id="layer2-node"] { 1103 | /*filter: invert(1) drop-shadow(0px 3px 4px rgba(0,0,0,0.1));*/ 1104 | filter: invert(1) hue-rotate(110deg) saturate(2.5); 1105 | opacity: 0.3; 1106 | transition: opacity .2s ease-out; 1107 | } 1108 | 1109 | *[id*="cyto-wrapper"]:hover canvas[data-id="layer2-node"] { 1110 | opacity: 1; 1111 | } 1112 | 1113 | 1114 | /* SLIDER */ 1115 | 1116 | .bp3-intent-primary { 1117 | background-color: rgb(var(--color-primary)) !important; 1118 | } 1119 | .bp3-slider-handle { 1120 | border-radius: 10px; 1121 | } 1122 | 1123 | 1124 | /* QUERY */ 1125 | 1126 | .rm-query { 1127 | border: 0.5px solid #38332e; 1128 | border-top-left-radius: 7px; 1129 | border-top-right-radius: 7px; 1130 | border-radius: 10px; 1131 | } 1132 | 1133 | .rm-query .rm-query-title { 1134 | background-color: #38332e; 1135 | font-size: .8em; 1136 | } 1137 | 1138 | /* CHECKBOX */ 1139 | 1140 | .check-container { 1141 | padding-right: 2px; 1142 | vertical-align: text-bottom; 1143 | top: -5px; 1144 | } 1145 | 1146 | .check-container .checkmark { 1147 | width: 14px; 1148 | height: 14px; 1149 | } 1150 | .check-container .checkmark::after { 1151 | left: 4.5px; 1152 | top: 1px; 1153 | } 1154 | .check-container input[checked] + .checkmark { 1155 | background-color: rgb(var(--color-primary)) !important; 1156 | } 1157 | 1158 | /* versioning tab underline */ 1159 | span[style*="border-bottom: 2px solid rgb(138, 155, 168)"] { 1160 | border-bottom: 3px solid rgb(var(--color-primary)) !important; 1161 | } 1162 | 1163 | blockquote { 1164 | font-size: 14px; 1165 | border-color: var(--bullet-color); 1166 | opacity: 0.5; 1167 | } 1168 | 1169 | code { 1170 | background: var(--bg-color); 1171 | border: none; 1172 | color: var(--text-color); 1173 | padding: 4px 7px; 1174 | line-height: 0.5; 1175 | border-radius: 0; 1176 | } 1177 | 1178 | .block-border-left { 1179 | border-color: var(--bullet-color); 1180 | } 1181 | 1182 | 1183 | /* help button / popup */ 1184 | #buffer { 1185 | background: transparent !important; 1186 | right: 7px !important; 1187 | bottom: 10px !important; 1188 | } 1189 | #buffer .bp3-popover-target >.bp3-button { 1190 | background: rgba(0, 0, 0, 0.1); 1191 | height: 30px; 1192 | width: 30px; 1193 | } 1194 | #buffer > div { 1195 | z-index: 99999 !important; 1196 | background: rgb(var(--color-secondary), 0.7) !important; 1197 | backdrop-filter: blur(5px); 1198 | border-radius: 10px; 1199 | padding: 2px 8px 8px 8px; 1200 | box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.1) 1201 | } 1202 | #buffer > div .bp3-button::before { 1203 | color: #FFFFFF !important; 1204 | 1205 | } 1206 | #buffer .help-title { 1207 | color: var(--color-secondary-contrast) !important; 1208 | } 1209 | #buffer .help-sub-title { 1210 | color: var(--color-secondary-contrast) !important; 1211 | opacity: 0.5; 1212 | } 1213 | #buffer span { 1214 | color: rgba(255, 255, 255, 0.8) !important; 1215 | } 1216 | #buffer a { 1217 | text-decoration: underline; 1218 | color: var(--color-secondary-contrast) !important; 1219 | } 1220 | #buffer a:hover { 1221 | opacity: 0.5; 1222 | } 1223 | 1224 | 1225 | /* ------------- Red Pomodoro ------------- */ 1226 | /* credit: https://github.com/theianjones/roam-research-themes/blob/master/pomodoros.css */ 1227 | .rm-pomodoro { 1228 | background: transparent !important; 1229 | color: #ff4747 !important; 1230 | padding: 4px 14px; 1231 | line-height: 2em; 1232 | font-weight: 600; 1233 | border-radius: 2em; 1234 | border: 1px solid #ff474770; 1235 | } 1236 | 1237 | .rm-pomodoro::first-letter { 1238 | margin-right: 8px; 1239 | } 1240 | 1241 | 1242 | /* BUTTON */ 1243 | .block-bullet-view .bp3-button:not([class*="bp3-icon"]) { 1244 | background: transparent !important; 1245 | color: rgb(var(--color-primary)) !important; 1246 | padding: 4px 14px; 1247 | line-height: 2em; 1248 | font-weight: 600; 1249 | border-radius: 2em !important; 1250 | border: 1px solid rgba(var(--color-primary), 0.5) !important; 1251 | box-shadow: none !important; 1252 | } 1253 | .block-bullet-view .bp3-button:hover { 1254 | background: rgba(var(--color-primary), 0.2) !important; 1255 | 1256 | } 1257 | 1258 | /* KANBAN */ 1259 | .kanban-board { 1260 | background-color: transparent; 1261 | padding: 0; 1262 | max-width: 500px; 1263 | } 1264 | .kanban-title { 1265 | background: rgb(var(--color-primary)); 1266 | color: var(--color-primary-contrast) !important; 1267 | font-weight: bold; 1268 | padding: 0px !important; 1269 | max-height: 30px; 1270 | border: none; 1271 | display: flex; 1272 | align-items: center; 1273 | } 1274 | .kanban-title > span { 1275 | display: block; 1276 | margin: auto; 1277 | } 1278 | .kanban-column { 1279 | border-radius: 10px; 1280 | box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05); 1281 | padding: 0; 1282 | overflow: hidden; 1283 | } 1284 | .kanban-card { 1285 | border-radius: 10px; 1286 | box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05); 1287 | } 1288 | .kanban-card { 1289 | background-color: var(--page-color); 1290 | margin: 8px; 1291 | box-shadow: 0px 1px 2px #9EB3C0; 1292 | padding: 10px; 1293 | border-radius: 4px; 1294 | line-height: 1.3em; 1295 | } 1296 | .kanban-column { 1297 | background-color: ; 1298 | margin: 0px 4px 0px 4px; 1299 | min-width: 200px; 1300 | border-radius: 6px; 1301 | } 1302 | 1303 | /* ASTROLABE */ 1304 | 1305 | /* Breathing Loader */ 1306 | /* https://codepen.io/Mathi_C/pen/mMWaaW */ 1307 | .loading-astrolabe { 1308 | height: 100px; 1309 | width: 100px; 1310 | border-radius: 200px; 1311 | margin: auto; 1312 | 1313 | } 1314 | 1315 | .loading-astrolabe { 1316 | animation-name: orb_1; 1317 | animation-duration: 3s; 1318 | animation-delay: 0s; 1319 | animation-iteration-count: infinite; 1320 | animation-timing-function: ease-in-out; 1321 | animation-direction: alternate; 1322 | } 1323 | 1324 | @keyframes orb_1 { 1325 | from { 1326 | transform: scale(0.2); 1327 | background: rgb(var(--color-secondary)); 1328 | } 1329 | to { 1330 | transform: scale(2); 1331 | background: rgb(var(--color-primary)); 1332 | } 1333 | } 1334 | 1335 | /* Hide original loader */ 1336 | .loading-astrolabe img { 1337 | display: none; 1338 | } 1339 | 1340 | .bp3-spinner { 1341 | visibility: hidden; 1342 | } 1343 | .bp3-spinner > * { 1344 | visibility: visible; 1345 | } 1346 | 1347 | .bp3-spinner-head { 1348 | stroke: rgb(var(--color-primary)) !important; 1349 | } 1350 | 1351 | 1352 | 1353 | 1354 | 1355 | 1356 | 1357 | 1358 | .roam-center > div > div > div svg :not(.katex) { 1359 | background-color: var(--bg-color) !important; 1360 | } 1361 | 1362 | /* fix specific popover sizes and positions... */ 1363 | 1364 | .roam-topbar .bp3-popover-wrapper:nth-child(6) .bp3-popover, 1365 | .roam-topbar .bp3-popover-wrapper:nth-child(7) .bp3-popover{ 1366 | width: 600px; 1367 | max-width: calc(100vw - 20px); 1368 | } 1369 | #roam-right-sidebar-content > div .flex-h-box > .bp3-popover-wrapper .bp3-transition-container { 1370 | transform: translate3d(-15px, 41px, 0px) !important; 1371 | } 1372 | #roam-right-sidebar-content > div .flex-h-box > .bp3-popover-wrapper .bp3-transition-container .bp3-popover-arrow { 1373 | left: 10px !important; 1374 | } 1375 | /* -------------------------- */ 1376 | /* MOBILE */ 1377 | /* -------------------------- */ 1378 | 1379 | 1380 | 1381 | @media only screen and (max-width: 600px) { 1382 | .roam-topbar { 1383 | margin: 0px !important; 1384 | padding: 10px 0px 0px 0px !important; 1385 | width: 100%; 1386 | justify-content: center; 1387 | position: fixed !important; 1388 | top: 0px; 1389 | left: 0px; 1390 | backdrop-filter: blur(5px); 1391 | } 1392 | .roam-topbar::before { 1393 | content: ""; 1394 | position: absolute; 1395 | top: 0; left: 0; 1396 | width: 100%; height: 100%; 1397 | background-color: var(--bg-color) !important; 1398 | opacity: 0.7; 1399 | 1400 | } 1401 | .roam-topbar > .flex-h-box { 1402 | flex-direction: row; 1403 | height: 1px !important; 1404 | align-items: start !important; 1405 | text-align: center; 1406 | 1407 | /*position: -webkit-sticky !important; 1408 | position: fixed !important; 1409 | left: 0px; 1410 | top: 0;*/ 1411 | position: relative !important; 1412 | width: 300px !important; 1413 | margin: auto; 1414 | justify-content: space-evenly; 1415 | } 1416 | .roam-topbar > div >.bp3-button:first-child { 1417 | position: static !important; 1418 | } 1419 | 1420 | .roam-sidebar-container { 1421 | padding-right: 0; 1422 | width: 232px !important; 1423 | } 1424 | .roam-sidebar-container > .roam-sidebar-content::before { 1425 | right: 0px !important; 1426 | } 1427 | 1428 | .roam-body-main { 1429 | padding-left: 0 !important; 1430 | } 1431 | 1432 | #find-or-create-input { 1433 | max-width: calc(100% - 20px); 1434 | left: 10px !important; 1435 | } 1436 | 1437 | .roam-article, 1438 | .rm-all-pages > .table, 1439 | .rm-all-pages > .table > div { 1440 | max-width: calc(100vw - 20px) !important; 1441 | min-width: calc(100vw - 20px) !important; 1442 | width: calc(100vw - 20px) !important; 1443 | } 1444 | .rm-all-pages > .table { 1445 | margin-left: 10px; 1446 | margin-right: 10px; 1447 | } 1448 | .roam-article { 1449 | margin: 50px 10px !important; 1450 | margin-bottom: 100px !important; 1451 | } 1452 | .roam-article > div { 1453 | padding: 30px 30px 30px 20px; 1454 | } 1455 | 1456 | 1457 | #roam-right-sidebar-content > div > *{ 1458 | max-width: calc(100vw - 20px) !important; 1459 | } 1460 | /* position minus button */ 1461 | #roam-right-sidebar-content > div .bp3-icon-minus, #roam-right-sidebar-content > div .bp3-icon-plus { 1462 | top: 60px; 1463 | } 1464 | /* position filter button */ 1465 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-popover-wrapper { 1466 | top: 60px; 1467 | } 1468 | /* position references button */ 1469 | #roam-right-sidebar-content > div .bp3-icon-minus ~ button.bp3-button { 1470 | top: 60px; 1471 | } 1472 | /* position close button */ 1473 | #roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-cross { 1474 | top: 60px; 1475 | } 1476 | 1477 | .rm-title-display, .rm-title-textarea { 1478 | margin-left: 0 !important; 1479 | } 1480 | #roam-right-sidebar-content > div .bp3-icon-minus + * { 1481 | margin: 30px 10px 5px 30px !important; 1482 | } 1483 | 1484 | .roam-topbar > div > *:nth-child(2) { 1485 | margin-top: 0 !important; 1486 | } 1487 | 1488 | #right-sidebar { 1489 | padding-right: 10px !important; 1490 | } 1491 | 1492 | .rm-find-or-create-wrapper .bp3-transition-container { 1493 | position: fixed !important; 1494 | max-width: calc(100vw - 20px); 1495 | top: 142px !important; 1496 | left: 10px !important; 1497 | } 1498 | } 1499 | 1500 | #mobile-capture { 1501 | height: 100vh !important; 1502 | background-color: var(--bg-color) !important; 1503 | } 1504 | 1505 | #mobile-capture textarea, #mobile-capture input { 1506 | background-color: var(--page-color) !important; 1507 | } 1508 | #mobile-capture textarea::placeholder, #mobile-capture input::placeholder { 1509 | color: var(--text-color) !important; 1510 | opacity: 0.3 1511 | } 1512 | #mobile-capture textarea { 1513 | margin-top: 10px; 1514 | } 1515 | 1516 | #rm-mobile-bar { 1517 | max-width: 100vw; 1518 | background-color: rgb(var(--color-secondary)) !important; 1519 | position: fixed !important; 1520 | z-index: 999999; 1521 | } 1522 | #rm-mobile-bar .bp3-button { 1523 | vertical-align: top; 1524 | margin: 5px 0px !important; 1525 | 1526 | } 1527 | #rm-mobile-bar .bp3-button::before, #rm-mobile-bar .bp3-button i::before { 1528 | color: var(--color-secondary-contrast) !important; 1529 | } 1530 | 1531 | 1532 | .rm-find-or-create-wrapper .bp3-transition-container { 1533 | transform: none !important; 1534 | } 1535 | 1536 | 1537 | 1538 | 1539 | 1540 | 1541 | /* CREDIT TO VIKTOR TABORI & ROBERT KIRK FOR FIXES */ 1542 | 1543 | 1544 | /* FIXING resizable interface */ 1545 | 1546 | /* fix: collapsed sidebar windows by @_robertkirk */ 1547 | .window-headers:only-child { 1548 | text-orientation: mixed; 1549 | writing-mode: vertical-lr; 1550 | } 1551 | 1552 | /* left sidebar fix */ 1553 | .roam-sidebar-container { 1554 | padding-left: 45px; 1555 | } 1556 | 1557 | @media only screen and (max-width: 600px) { 1558 | .roam-sidebar-container { 1559 | padding-left: 0; 1560 | } 1561 | } 1562 | 1563 | 1564 | /* fix resizing */ 1565 | .roam-body .roam-app .roam-main { 1566 | overflow-x:hidden; 1567 | flex-direction: row !important; 1568 | max-width: var(--page-width) !important; 1569 | } 1570 | 1571 | @media only screen and (max-width: 600px) { 1572 | .roam-body .roam-app .roam-main { 1573 | flex: 0 0 auto!important; 1574 | } 1575 | 1576 | .roam-body .roam-app .roam-body-main { 1577 | flex: 0 0 auto!important; 1578 | } 1579 | } 1580 | 1581 | /* main panel size fix */ 1582 | .roam-body .roam-app .roam-body-main { 1583 | flex: 0 0 100%!important; 1584 | padding-left: 55px; 1585 | } 1586 | 1587 | .roam-body .roam-app .roam-body-main > [style*="padding-right"] { 1588 | max-width: 100%!important; 1589 | padding-left:unset!important; 1590 | padding-right:unset!important; 1591 | } 1592 | 1593 | .rm-block-text { 1594 | max-width: 100%!important; 1595 | } 1596 | 1597 | /* make the main panel scroll */ 1598 | .roam-app > .flex-h-box { 1599 | overflow-x: scroll; 1600 | } 1601 | 1602 | .roam-article { 1603 | max-width: 100%;!important; 1604 | overflow-x: hidden; 1605 | } 1606 | 1607 | /* right sidebar fix */ 1608 | #right-sidebar { 1609 | flex: 0 0 auto!important; 1610 | } 1611 | 1612 | #right-sidebar .rm-resize-handle { 1613 | left:-4px!important; /* in the original code this has set to -4 which is invalid */ 1614 | } 1615 | 1616 | #roam-right-sidebar-content { 1617 | flex: 0 0 auto!important; 1618 | overflow: scroll; 1619 | } 1620 | 1621 | #roam-right-sidebar-content .sidebar-content > * { 1622 | max-width: 100%; 1623 | overflow-x: hidden; 1624 | padding-top: 45px; 1625 | } 1626 | 1627 | /* right sidebar header fixes */ 1628 | #roam-right-sidebar-content .window-headers { 1629 | margin-left: 5px!important; 1630 | flex-direction: row !important; 1631 | align-items: center!important; 1632 | position: relative!important; 1633 | } 1634 | 1635 | #roam-right-sidebar-content .window-headers .bp3-icon-cross { 1636 | order: 1!important; 1637 | margin-right: 10px; 1638 | } 1639 | 1640 | #roam-right-sidebar-content .window-headers > :nth-child(1) { 1641 | order: 2; 1642 | } 1643 | 1644 | #roam-right-sidebar-content .window-headers > :nth-child(2) { 1645 | order: 3; 1646 | } 1647 | 1648 | #roam-right-sidebar-content .window-headers button.bp3-small { 1649 | color: var(--text-color); 1650 | order: 4; 1651 | } 1652 | 1653 | #roam-right-sidebar-content .window-headers > [style*="0px"] { 1654 | order: 5; 1655 | } 1656 | 1657 | #roam-right-sidebar-content .sidebar-content > * > * { 1658 | padding-right: 10px!important; 1659 | } 1660 | 1661 | /* sidebar title editing */ 1662 | .rm-sidebar-outline .rm-title-editing-display { 1663 | display: inline-block; 1664 | } 1665 | .rm-sidebar-outline .rm-title-editing-display textarea { 1666 | margin-left: 0!important; 1667 | } 1668 | 1669 | /* visualize the right sidebar resize-handle */ 1670 | .rm-resize-handle:hover, .rm-resize-handle:focus { 1671 | background-color: #66666640; 1672 | } -------------------------------------------------------------------------------- /cosmonaut.css: -------------------------------------------------------------------------------- 1 | /* IMPORT CORE THEME */ 2 | @import url('https://azlen.github.io/roam-themes/core.css'); 3 | 4 | /* GOOGLE FONTS */ 5 | @import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@600&display=swap'); 6 | @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 7 | 8 | /* VARIABLES */ 9 | :root { 10 | --page-width: 616px; 11 | 12 | --header-font: "Oxanium", "Inter", sans-serif; 13 | --body-font: "Ubuntu", "Inter", sans-serif; 14 | 15 | --bg-color: #000000; 16 | --page-color: rgba(44, 44, 44, 0.95); 17 | 18 | --text-color: #FFFFFF; 19 | --icon-color: rgb(102, 102, 102); 20 | --bullet-color: rgba(255, 255, 255, 0.3); 21 | 22 | --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.25); 23 | 24 | --color-primary: 47, 155, 249; 25 | --color-primary-contrast: #FFFFFF; 26 | --color-secondary: 228, 78, 244; 27 | 28 | --color-secondary-contrast: #FFFFFF; 29 | } 30 | 31 | /* CHANGE COLOURS IN CANVAS */ 32 | canvas[data-id="layer2-node"] { 33 | filter: invert(1) contrast(1.1) hue-rotate(180deg) saturate(2); 34 | } 35 | 36 | /* CODE BLOCK STYLING */ 37 | /* modified from https://codemirror.net/demo/theme.html#night */ 38 | .CodeMirror { background: var(--bg-color) !important; color: #f8f8f8 !important; } 39 | div.CodeMirror-selected { background: #447 !important; } 40 | .CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(68, 68, 119, .99); } 41 | .CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(68, 68, 119, .99); } 42 | .CodeMirror-gutters { background: var(--bg-color); border-right: 1px solid #252525; } 43 | .CodeMirror-guttermarker { color: white !important; } 44 | .CodeMirror-guttermarker-subtle { color: #bbb !important; } 45 | .CodeMirror-linenumber { color: #f8f8f8; } 46 | .CodeMirror-cursor { border-left: 1px solid white !important; } 47 | span.cm-qualifier { color: #666666 !important; } 48 | span.cm-comment { color: #C71FF9 !important; } 49 | span.cm-atom { color: #B58AFD !important; } 50 | span.cm-number, span.cm-attribute { color: #ffd500 !important; } 51 | span.cm-keyword { color: #599eff !important; } 52 | span.cm-string { color: #37f14a !important; } 53 | span.cm-meta { color: #369BFF !important; } 54 | span.cm-variable-2, span.cm-tag { color: #99b2ff !important; } 55 | span.cm-variable-3, span.cm-def, span.cm-type { color: white !important; } 56 | span.cm-bracket { color: #8da6ce !important; } 57 | span.cm-builtin, pan.cm-special { color: #ff9e59 !important; } 58 | span.cm-link { color: #845dc4 !important; } 59 | span.cm-error { color: #F41000 !important; } 60 | .CodeMirror-activeline-background { background: #1C005A !important; } 61 | .CodeMirror-matchingbracket { outline:1px solid grey !important; color:white !important; } -------------------------------------------------------------------------------- /images/README.md: -------------------------------------------------------------------------------- 1 | # Images 2 | 3 | Just a folder of screenshots, not sure why I put a README here 🤷 4 | 5 | But, well, thanks for reading anyway! 6 | -------------------------------------------------------------------------------- /images/cosmonaut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azlen/roam-themes/01b45222cd0181399096758b54e3fad39d94b7f1/images/cosmonaut.png -------------------------------------------------------------------------------- /images/yggdrasil.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azlen/roam-themes/01b45222cd0181399096758b54e3fad39d94b7f1/images/yggdrasil.png -------------------------------------------------------------------------------- /images/zenith.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/azlen/roam-themes/01b45222cd0181399096758b54e3fad39d94b7f1/images/zenith.png -------------------------------------------------------------------------------- /yggdrasil.css: -------------------------------------------------------------------------------- 1 | /* IMPORT CORE THEME */ 2 | @import url('https://azlen.github.io/roam-themes/core.css'); 3 | 4 | /* GOOGLE FONTS */ 5 | @import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 6 | 7 | /* VARIABLES */ 8 | :root { 9 | --page-width: 616px; 10 | 11 | --header-font: "Crimson Text", serif; 12 | --body-font: "Crimson Text", serif; 13 | 14 | --bg-color: #f5f1e2; 15 | --page-color: rgba(236, 231, 209, .95); 16 | 17 | --text-color: #000000; 18 | --icon-color: #5c7080; 19 | --bullet-color: rgba(0, 0, 0, 0.2); 20 | 21 | --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.02); 22 | --color-primary: 181, 124, 38; 23 | --color-primary-contrast: #FFFFFF; 24 | --color-secondary: 100, 181, 38; 25 | 26 | --color-secondary-contrast: #FFFFFF; 27 | } 28 | 29 | /* YGGDRASIL CUSTOM STYLES */ 30 | 31 | .rm-page-ref-tag { 32 | padding: 3px 6px 2px 6px; 33 | } 34 | 35 | /* reverse colours for saving / saving-remote so that green is used for "saved" */ 36 | .rm-saving-icon .rm-synced { 37 | background-color: rgb(var(--color-secondary)); 38 | } 39 | .rm-saving-icon .rm-saving-remote { 40 | background-color: rgb(var(--color-primary)); 41 | } 42 | 43 | .block-bullet-view .bp3-button:not([class*="bp3-icon"]) { 44 | padding: 5px 14px 0px 14px!important; 45 | } 46 | 47 | .kanban-card { 48 | box-shadow: 0px 1px 2px rgba(0,0,0, 0.3); 49 | } 50 | .kanban-column { 51 | background-color: var(--bg-color); 52 | } 53 | 54 | /* CHANGE COLOURS IN CANVAS */ 55 | 56 | canvas[data-id="layer2-node"] { 57 | filter: invert(1) hue-rotate(170deg) saturate(2.5); 58 | } 59 | -------------------------------------------------------------------------------- /zenith.css: -------------------------------------------------------------------------------- 1 | /* IMPORT CORE THEME */ 2 | @import url('https://azlen.github.io/roam-themes/core.css'); 3 | 4 | /* GOOGLE FONTS */ 5 | @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap'); 6 | 7 | :root { 8 | --page-width: 616px; 9 | --page-order: row-reverse; /* new pages show up to the right */ 10 | /*--page-order: row; /* new pages show up to the left */ 11 | 12 | --header-font: "Source Sans Pro", "Inter", sans-serif; 13 | --body-font: "Source Sans Pro", "Inter", sans-serif; 14 | 15 | --bg-color: #EEEEEE; 16 | --page-color: rgba(255, 255, 255, 0.95); 17 | 18 | --text-color: #000000; 19 | --icon-color: #5c7080; 20 | --bullet-color: rgba(0, 0, 0, 0.2); 21 | 22 | --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05); 23 | 24 | --color-primary: 73, 197, 91; 25 | --color-primary-contrast: #FFFFFF; 26 | --color-secondary: 147, 100, 235; 27 | 28 | --color-secondary-contrast: #FFFFFF; 29 | } 30 | 31 | /* CHANGE COLOURS IN CANVAS */ 32 | canvas[data-id="layer2-node"] { 33 | filter: invert(1) hue-rotate(110deg) saturate(2.5); 34 | } --------------------------------------------------------------------------------