├── README.md ├── roam-bear-theme-v2.png ├── roam-bear-theme.png ├── site - red graphite.css ├── site.css ├── solarized-light-rg.css └── solarized-light.css /README.md: -------------------------------------------------------------------------------- 1 | # Bear-like CSS for Roam (Chrome) 2 | 3 | A Roam theme (for Chrome) inspired by the Bear note-taking app. 4 | 5 | Installation notes below. 6 | 7 | Also, be sure to checkout this highly-customizable theme by @vandermerwed 8 | https://raw.githubusercontent.com/vandermerwed/Roam-Research-Dark/master/roam-research-dark.user.css 9 | 10 | ![roam bear theme screenshot](https://raw.githubusercontent.com/apg-dev/roam-theme-bear/master/roam-bear-theme-v2.png) 11 | 12 | 13 | ## Installation 14 | 15 | * Create new folder on your machine (e.g. Roam-css) and download site.css into that folder 16 | * Open Roam in Chrome, display developer tools (F12) 17 | * Select Sources > Overrides 18 | * Select folder for overrides > Choose the new folder (e.g. Roam-css) 19 | * Allow (when prompted "DevTools requests full access to ...") 20 | * Go into Elements tab and change any item (e.g. body > font-size: 15px) 21 | * Page may flicker - just refresh the page 22 | * You now have a new folder in Roam-css 23 | * Go into that new folder: roamresearch.com/assets/css/less-compile 24 | * Replace the site.css file with the site.css file you downloaded from git 25 | * If you prefer any of the other Bear themes instead of "high contrast", then replace site.css with any other included css file (e.g. solarized-light.css) 26 | * Refresh Roam page 27 | 28 | ## Usage 29 | 30 | * Changes will persist through browser refresh (may need to simply F12 > Refresh to pull in styling) 31 | * When opening a new tab, F12 > Refresh page will load up styling 32 | * To make any additional css changes, simply edit site.css, save, then refresh Roam page 33 | * To remove this theme (and go back to Roam default), F12 > Sources > Overrides > Right-click folder > Remove folder form workspace > Refresh page 34 | 35 | 36 | 37 | ## Other Notes 38 | 39 | * If you don't have Avenir Next fonts local on your machine, you'll need to add an import line or change the Avenir Next references to a local font you prefer. 40 | 41 | 42 | --- 43 | 44 | 45 | Enhancements to this theme welcomed and appreciated. 46 | -------------------------------------------------------------------------------- /roam-bear-theme-v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apg-dev/roam-theme-bear/7bebec01ef57af09102ef288e2802db48290d696/roam-bear-theme-v2.png -------------------------------------------------------------------------------- /roam-bear-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/apg-dev/roam-theme-bear/7bebec01ef57af09102ef288e2802db48290d696/roam-bear-theme.png -------------------------------------------------------------------------------- /site - red graphite.css: -------------------------------------------------------------------------------- 1 | @import "../fonts/Inter/inter.css"; 2 | .loading-astrolabe { 3 | margin: auto; 4 | position: relative; 5 | width: 250px; 6 | height: 250px; 7 | } 8 | .loading-astrolabe .wand { 9 | position: absolute; 10 | width: 80%; 11 | top: 24.5%; 12 | left: 10%; 13 | animation: nav 3.5s linear infinite; 14 | } 15 | .loading-astrolabe .wand-small { 16 | position: absolute; 17 | width: 80%; 18 | top: 24.5%; 19 | left: 11.5%; 20 | } 21 | .loading-astrolabe .background { 22 | width: 100%; 23 | border: none; 24 | margin-left: -3px; 25 | } 26 | .spinner-astrolabe { 27 | margin: auto; 28 | margin-top: 100px; 29 | position: relative; 30 | width: 200px; 31 | height: 200px; 32 | } 33 | .spinner-astrolabe .wand { 34 | position: absolute; 35 | width: 80%; 36 | top: 24.5%; 37 | left: 10%; 38 | animation: nav 3.5s linear 20s; 39 | } 40 | .spinner-astrolabe .wand:hover { 41 | animation: nav 3.5s linear infinite; 42 | } 43 | .spinner-astrolabe .wand-small { 44 | position: absolute; 45 | width: 80%; 46 | top: 24.5%; 47 | left: 11.5%; 48 | } 49 | .spinner-astrolabe .background { 50 | width: 100%; 51 | border: none; 52 | margin-left: -3px; 53 | } 54 | @keyframes spin { 55 | 0% { 56 | transform: rotate(0deg); 57 | } 58 | 100% { 59 | transform: rotate(360deg); 60 | } 61 | } 62 | @keyframes nav { 63 | 0% { 64 | transform: rotate(0deg); 65 | } 66 | 15% { 67 | transform: rotate(-30deg); 68 | } 69 | 25% { 70 | transform: rotate(30deg); 71 | } 72 | 40% { 73 | transform: rotate(-15deg); 74 | } 75 | 50% { 76 | transform: rotate(40deg); 77 | } 78 | 70% { 79 | transform: rotate(-50deg); 80 | } 81 | 85% { 82 | transform: rotate(75deg); 83 | } 84 | 90% { 85 | transform: rotate(-180deg); 86 | } 87 | 100% { 88 | transform: rotate(-355deg); 89 | } 90 | } 91 | .spinner-square { 92 | box-sizing: border-box; 93 | width: 300px; 94 | height: 300px; 95 | background-color: grey; 96 | display: grid; 97 | grid-template-rows: 1fr 1fr; 98 | padding: 20px; 99 | grid-gap: 20px; 100 | z-index: 3; 101 | grid-template-columns: 1fr 1fr; 102 | cursor: pointer; 103 | } 104 | .spinner-square .spinner-square-front { 105 | background-color: white; 106 | z-index: 5; 107 | } 108 | .spinner-square .spinner-square-rotate { 109 | position: absolute; 110 | margin-left: 75px; 111 | margin-top: 75px; 112 | background-color: black; 113 | width: 150px; 114 | height: 150px; 115 | animation: spin 4.5s linear infinite; 116 | } 117 | .scrollbar { 118 | margin-left: 30px; 119 | float: left; 120 | height: 300px; 121 | width: 65px; 122 | background: #F5F5F5; 123 | overflow-y: scroll; 124 | margin-bottom: 25px; 125 | } 126 | #scroll-1::-webkit-scrollbar-track { 127 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 128 | border-radius: 8px; 129 | background-color: #F5F5F5; 130 | } 131 | #scroll-1::-webkit-scrollbar { 132 | width: 8px; 133 | background-color: #F5F5F5; 134 | } 135 | #scroll-1::-webkit-scrollbar-thumb { 136 | border-radius: 8px; 137 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 138 | background-color: #8A9BA8; 139 | } 140 | #home { 141 | padding: 50px; 142 | background-color: blue; 143 | color: #182026; 144 | } 145 | #home .icons { 146 | padding-left: 20px; 147 | } 148 | #home .icons .bp3-icon-large:hover { 149 | transform: scale(2); 150 | margin-left: 60px; 151 | } 152 | #home2 .dark { 153 | color: white; 154 | background-color: #343a40; 155 | } 156 | #home2 .container { 157 | margin: auto; 158 | max-width: 1110px; 159 | } 160 | #home2 .block { 161 | padding: 7em 0 0; 162 | } 163 | #home2 #header { 164 | width: 100%; 165 | position: fixed; 166 | top: 0; 167 | } 168 | #home2 #header .nav { 169 | display: flex; 170 | flex: 0 0 auto; 171 | align-items: center; 172 | padding: 10px 14px; 173 | } 174 | #home2 #header .nav .bp3-button { 175 | color: white; 176 | } 177 | #home2 #body { 178 | margin-top: 50px; 179 | } 180 | #home2 h1 { 181 | margin-bottom: 20px; 182 | } 183 | #home2 .row { 184 | display: flex; 185 | flex-wrap: wrap; 186 | } 187 | #home2 .col { 188 | margin: 24px auto; 189 | max-width: 300px; 190 | } 191 | #home2 #testimonials .testimonial { 192 | text-align: center; 193 | } 194 | #home2 #logo-graph { 195 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 196 | opacity: .4; 197 | display: grid; 198 | } 199 | #home2 #footer { 200 | padding-bottom: 7em; 201 | } 202 | #page { 203 | font-family: Segoe UI, Roboto, sans-serif; 204 | } 205 | #page1 { 206 | margin: 0 auto; 207 | padding-top: 4em; 208 | max-width: 40em; 209 | font-family: Segoe UI, Roboto, sans-serif; 210 | color: #808080; 211 | } 212 | #page1 h1, 213 | #page1 h2 { 214 | color: #4d4d4d; 215 | text-align: center; 216 | } 217 | #page1 .sub { 218 | width: 400px; 219 | margin: 8px auto; 220 | } 221 | #page1 .hero { 222 | margin: 0 auto; 223 | display: flex; 224 | justify-content: center; 225 | } 226 | #page1 .hero button { 227 | min-height: 50px; 228 | font-size: 1.8em; 229 | padding: 16px 20px; 230 | margin: 8px; 231 | } 232 | #page1 .zk { 233 | padding: 25px; 234 | } 235 | #page1 .quotes { 236 | max-width: 80vw; 237 | margin: 20px auto; 238 | } 239 | #page1 .quote { 240 | float: right; 241 | padding-top: 1em; 242 | } 243 | #secret-invite-wrapper { 244 | height: 100vh; 245 | background-color: black; 246 | overscroll-behavior: none; 247 | } 248 | #secret-invite-wrapper #secret-invite { 249 | position: relative; 250 | margin: 0 auto; 251 | padding-top: 4em; 252 | max-width: 40em; 253 | font-family: Segoe UI, Roboto, sans-serif; 254 | color: #b3b3b3; 255 | } 256 | #secret-invite-wrapper #secret-invite #secret-scroll { 257 | position: absolute; 258 | height: 90vh; 259 | overflow: scroll; 260 | } 261 | #secret-invite-wrapper #secret-invite h1, 262 | #secret-invite-wrapper #secret-invite h2 { 263 | color: #cccccc; 264 | text-align: center; 265 | } 266 | #secret-invite-wrapper #secret-invite .sub { 267 | width: 400px; 268 | margin: 8px auto; 269 | } 270 | #secret-invite-wrapper #secret-invite .hero { 271 | margin: 0 auto; 272 | display: flex; 273 | justify-content: center; 274 | } 275 | #secret-invite-wrapper #secret-invite .hero button { 276 | min-height: 50px; 277 | font-size: 1.8em; 278 | padding: 16px 20px; 279 | margin: 8px; 280 | } 281 | #secret-invite-wrapper #secret-invite .zk { 282 | padding: 25px; 283 | } 284 | #secret-invite-wrapper #secret-invite .quotes { 285 | max-width: 80vw; 286 | margin: 20px auto; 287 | } 288 | #secret-invite-wrapper #secret-invite .quote { 289 | float: right; 290 | padding-top: 1em; 291 | } 292 | html { 293 | scroll-behavior: smooth; 294 | } 295 | #landing-page * { 296 | margin: 0; 297 | padding: 0; 298 | } 299 | #landing-page #form { 300 | display: flex; 301 | flex-direction: column; 302 | align-items: center; 303 | padding: 12px; 304 | } 305 | #landing-page #form .ff { 306 | text-align: center; 307 | line-height: 1.8em; 308 | font-size: 1.2em; 309 | max-width: 400px; 310 | } 311 | #landing-page #form form { 312 | display: flex; 313 | flex-direction: column; 314 | } 315 | #landing-page #form form textarea { 316 | max-width: 70vw; 317 | width: 300px; 318 | resize: none; 319 | border: 1px solid lightgrey; 320 | padding: 4px; 321 | } 322 | #landing-page #form form input { 323 | max-width: 70vw; 324 | width: 300px; 325 | padding: 4px; 326 | margin: 8px; 327 | } 328 | #landing-page #header ul { 329 | display: flex; 330 | list-style-type: none; 331 | background-color: #293742; 332 | color: #f5f8fa; 333 | } 334 | #landing-page #header ul .logo { 335 | padding: 8px; 336 | } 337 | #landing-page #header ul li:hover { 338 | background-color: #182026; 339 | } 340 | #landing-page #header ul li a { 341 | display: block; 342 | padding: 8px; 343 | text-decoration: none; 344 | width: 100%; 345 | height: 100%; 346 | color: inherit; 347 | } 348 | #landing-page #cover { 349 | background-color: #182026; 350 | padding: 40px 0 0 0; 351 | min-height: 100vh; 352 | color: #ced9e0; 353 | display: flex; 354 | flex-direction: column; 355 | align-items: center; 356 | } 357 | #landing-page #cover .a { 358 | background-color: #ced9e0; 359 | color: #182026; 360 | border-radius: 4px; 361 | cursor: pointer; 362 | text-decoration: none; 363 | } 364 | #landing-page #cover .a:hover { 365 | color: #0e5a8a; 366 | } 367 | #landing-page #cover #tag-line { 368 | padding: 30px 40px 0px; 369 | } 370 | #landing-page #cover #tag-line ul { 371 | line-height: 32px; 372 | margin-left: 32px; 373 | margin-right: 16px; 374 | margin-top: 25px; 375 | font-size: 16px; 376 | } 377 | #landing-page #cover #endorsement { 378 | margin: 80px 20px 20px; 379 | } 380 | #landing-page #cover #callouts { 381 | margin-top: 10%; 382 | } 383 | #landing-page #cover #callouts button { 384 | font-size: 20px; 385 | padding: 20px; 386 | background-color: #182026; 387 | } 388 | #landing-page #cover #image-collection { 389 | flex: 1 1 400px; 390 | max-width: 500px; 391 | background-color: #ced9e0; 392 | color: #293742; 393 | padding: 40px 40px 40px; 394 | display: flex; 395 | flex-direction: column; 396 | align-items: center; 397 | } 398 | #landing-page #cover #image-collection #images { 399 | color: #182026; 400 | padding: 40px 0px; 401 | display: grid; 402 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 403 | grid-column-gap: 20px; 404 | justify-items: start; 405 | align-items: center; 406 | } 407 | #landing-page #cover #image-collection #images img { 408 | margin: 8px; 409 | max-height: 70px; 410 | max-width: 100%; 411 | } 412 | #landing-page #features { 413 | padding: 40px 40px; 414 | background-color: #293742; 415 | border-top: 1px solid #5c7080; 416 | color: #d8e1e8; 417 | flex-direction: column; 418 | } 419 | #landing-page #features ul { 420 | padding-left: 16px; 421 | } 422 | #landing-page #features .feature { 423 | margin: 40px 0px; 424 | display: flex; 425 | justify-content: center; 426 | flex-wrap: wrap; 427 | } 428 | #landing-page #features .feature .feature-content { 429 | width: 400px; 430 | margin: 40px; 431 | } 432 | #landing-page #features .feature .feature-image { 433 | min-height: 400px; 434 | min-width: 400px; 435 | background-color: grey; 436 | } 437 | .rm-emoji-block-view { 438 | display: flex; 439 | flex: 0 0 auto; 440 | flex-wrap: wrap; 441 | margin-left: 40px; 442 | align-items: center; 443 | } 444 | .rm-emoji-block-view .rm-emoji-button { 445 | display: flex; 446 | flex: 0 0 auto; 447 | align-items: center; 448 | cursor: pointer; 449 | border-radius: 20px; 450 | height: 20px; 451 | margin: 0px 4px 4px 0px; 452 | } 453 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 454 | height: 16px; 455 | margin: 0px 4px; 456 | } 457 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 458 | height: 100%; 459 | font-size: 10px; 460 | margin-right: 6px; 461 | font-weight: 500; 462 | } 463 | .rm-emoji-tooltip { 464 | max-width: 200px; 465 | overflow-wrap: break-word; 466 | font-size: 12px; 467 | color: white; 468 | font-weight: 600; 469 | } 470 | .kanban-board { 471 | background-color: #a7b6c2; 472 | min-width: 100%; 473 | min-height: 48px; 474 | padding: 8px; 475 | overflow-x: scroll; 476 | } 477 | .kanban-column { 478 | background-color: #ededed; 479 | margin: 0px 4px 0px 4px; 480 | padding: 4px; 481 | min-width: 200px; 482 | } 483 | .kanban-title { 484 | text-align: center; 485 | } 486 | .kanban-card { 487 | background-color: white; 488 | margin: 8px; 489 | padding: 8px; 490 | } 491 | html { 492 | font-family: 'Inter', sans-serif; 493 | } 494 | @supports (font-variation-settings: normal) { 495 | html { 496 | font-family: 'Inter var', sans-serif; 497 | } 498 | } 499 | body { 500 | overscroll-behavior: none; 501 | } 502 | ::-webkit-scrollbar { 503 | width: 0px; 504 | background: transparent; 505 | } 506 | * { 507 | box-sizing: border-box; 508 | } 509 | *:focus { 510 | outline-width: 0; 511 | } 512 | .roam-lift { 513 | z-index: 10000; 514 | } 515 | .CodeMirror { 516 | height: auto !important; 517 | } 518 | @media (max-width: 500px) { 519 | .bp3-omnibar { 520 | max-width: 310px; 521 | left: calc((100vw - 310px) / 2); 522 | } 523 | } 524 | .rm-line { 525 | background-color: #ced9e0; 526 | flex: 0 0 1px; 527 | } 528 | .roam-body { 529 | height: 100vh; 530 | overflow: hidden; 531 | position: relative; 532 | background-color: #fbfbfb; /* RTB add: bear color */ 533 | } 534 | .roam-body .roam-app { 535 | height: 100%; 536 | width: 100%; 537 | position: relative; 538 | -webkit-overflow-scrolling: touch; 539 | color: #202b33; 540 | } 541 | .roam-body .roam-app h1 { 542 | color: #202b33; 543 | } 544 | .roam-body .roam-app .roam-sidebar-container { 545 | position: absolute; 546 | top: 45px; 547 | left: -232px; 548 | width: 232px; 549 | bottom: 45px; 550 | z-index: 999; 551 | transition: all 200ms ease-in; 552 | background-color: #2f3437; 553 | background-color: #182026; 554 | } 555 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 556 | position: absolute; 557 | z-index: 99; 558 | top: 0px; 559 | right: -8px; 560 | bottom: 0px; 561 | width: 0px; 562 | } 563 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 564 | position: absolute; 565 | top: 0; 566 | padding: 16px; 567 | } 568 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 569 | height: 100%; 570 | position: relative; 571 | } 572 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 573 | padding: 8px 20px; 574 | font-weight: bold; 575 | cursor: pointer; 576 | font-size: 14px; 577 | color: #5c7080; 578 | } 579 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 580 | color: #f5f8fa; 581 | background-color: #10161a; 582 | } 583 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 584 | color: #5c7080; 585 | } 586 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 587 | overflow-y: auto; 588 | } 589 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 590 | text-decoration: none; 591 | cursor: pointer; 592 | font-size: 14px; 593 | padding: 8px 0px 8px 4px; 594 | color: #5c7080; 595 | } 596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 597 | color: #f5f8fa; 598 | background-color: #10161a; 599 | } 600 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 601 | padding: 8px; 602 | margin-bottom: 8px; 603 | font-size: 14px; 604 | font-weight: bold; 605 | } 606 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 607 | margin-top: 64px; 608 | width: 100%; 609 | transition: all 150ms ease-in; 610 | position: absolute; 611 | overflow: scroll; 612 | } 613 | .roam-body .roam-app .roam-main { 614 | width: 100%; 615 | display: flex; 616 | 617 | } 618 | .roam-body .roam-app .roam-main .roam-article { 619 | position: relative; 620 | padding: 16px 42px 120px; 621 | font-size: 20px; /* RTB add: larger font */ 622 | color: #444444; /* RTB add: roam color */ 623 | } 624 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 625 | margin-bottom: 32px; 626 | } 627 | #right-sidebar .rm-reference-container { 628 | padding-top: 0px; 629 | border-top: none; 630 | } 631 | .roam-block .rm-reference-container { 632 | padding-top: 0px; 633 | border-top: none; 634 | } 635 | .roam-block .rm-reference-main { 636 | border: 1px solid #ced9e0; 637 | padding: 0px 16px 12px 16px; 638 | } 639 | .pointer { 640 | cursor: pointer; 641 | } 642 | .roam-topbar { 643 | height: 45px; 644 | position: fixed; 645 | width: 100%; 646 | z-index: 101; 647 | background-color: #fbfbfb; /* RTB change: bear background */ 648 | padding-right: 16px; 649 | padding-left: 16px; 650 | display: flex; 651 | flex-direction: column; 652 | justify-content: center; 653 | } 654 | .trunc { 655 | max-width: 120px; 656 | white-space: nowrap; 657 | text-overflow: ellipsis; 658 | overflow: hidden; 659 | } 660 | .bblack { 661 | border: 1px solid black; 662 | background-color: lightgrey; 663 | } 664 | .roam-popup-container { 665 | display: flex; 666 | flex-direction: column; 667 | overflow: scroll; 668 | } 669 | .roam-popup-container .roam-popup-content { 670 | position: absolute; 671 | top: 34px; 672 | bottom: 10px; 673 | width: 100%; 674 | overflow-y: scroll; 675 | } 676 | .rm-input { 677 | width: 100%; 678 | outline: 1px solid transparent; 679 | vertical-align: top; 680 | background-color: transparent; 681 | border: none; 682 | resize: none; 683 | } 684 | .rm-input::-webkit-input-placeholder { 685 | color: #ced9e0; 686 | } 687 | .rm-input:-moz-placeholder { 688 | /* Firefox 18- */ 689 | color: #ced9e0; 690 | } 691 | .rm-input::-moz-placeholder { 692 | /* Firefox 19+ */ 693 | color: #ced9e0; 694 | } 695 | .rm-input:-ms-input-placeholder { 696 | color: #ced9e0; 697 | } 698 | .rm-input::placeholder { 699 | color: #ced9e0; 700 | } 701 | .rm-title-textarea { 702 | width: 100%; 703 | outline: 1px solid transparent; 704 | vertical-align: top; 705 | line-height: 1.3em; 706 | background-color: transparent; 707 | border: none; 708 | resize: none; 709 | } 710 | .rm-title-textarea::-webkit-input-placeholder { 711 | color: #ced9e0; 712 | } 713 | .rm-title-textarea:-moz-placeholder { 714 | /* Firefox 18- */ 715 | color: #ced9e0; 716 | } 717 | .rm-title-textarea::-moz-placeholder { 718 | /* Firefox 19+ */ 719 | color: #ced9e0; 720 | } 721 | .rm-title-textarea:-ms-input-placeholder { 722 | color: #ced9e0; 723 | } 724 | .rm-title-textarea::placeholder { 725 | color: #ced9e0; 726 | } 727 | .rm-title-untitled { 728 | color: #ced9e0; 729 | } 730 | .rm-title-display { 731 | line-height: 1.3em; 732 | font-weight: 450; 733 | word-break: break-word; 734 | min-width: 100px; 735 | width: 100%; 736 | cursor: text; 737 | outline: 1px solid transparent; 738 | } 739 | .roam-log-container .roam-log-page { 740 | border-top: 1px solid #738694; 741 | margin-top: 40px; 742 | padding-top: 40px; 743 | padding-bottom: 16px; 744 | margin-bottom: 16px; 745 | } 746 | .roam-log-container .roam-log-page:first-child { 747 | border: 0px solid blue; 748 | margin-top: 0px; 749 | min-height: 500px; 750 | padding-top: 0px; 751 | } 752 | .roam-log-container .roam-log-preview { 753 | color: #8a9ba8; 754 | } 755 | .roam-log-container .roam-log-preview h1 { 756 | color: #8a9ba8; 757 | } 758 | .roam-log-container .roam-log-preview:hover { 759 | background-color: grey; 760 | } 761 | #buffer { 762 | display: flex; 763 | flex-direction: column; 764 | } 765 | #buffer .help-title { 766 | color: #f5f8fa; 767 | text-align: center; 768 | font-size: 16px; 769 | font-weight: bold; 770 | } 771 | #buffer .help-sub-title { 772 | color: #e1e8ed; 773 | text-align: center; 774 | } 775 | #buffer .help-item-text { 776 | color: #e1e8ed; 777 | } 778 | #buffer .help-item-label { 779 | opacity: 0.6; 780 | color: #e1e8ed; 781 | } 782 | .roam-table { 783 | padding-bottom: 24px; 784 | overflow-x: scroll; 785 | } 786 | .roam-table th, 787 | .roam-table td, 788 | .roam-table tr { 789 | font-size: 12px; 790 | min-width: 100px; 791 | max-height: 20px; 792 | padding: 8px 16px; 793 | margin: 0p; 794 | border: 1px solid grey; 795 | } 796 | .roam-table td { 797 | max-height: 20px; 798 | overflow: scroll; 799 | } 800 | .import-table { 801 | padding-bottom: 24px; 802 | max-width: 100%; 803 | } 804 | .import-table table { 805 | width: 100%; 806 | } 807 | .import-table th, 808 | .import-table td, 809 | .import-table tr { 810 | font-size: 12px; 811 | max-height: 20px; 812 | padding: 8px 16px; 813 | margin: 0p; 814 | border: 1px solid grey; 815 | } 816 | .import-table td { 817 | max-height: 20px; 818 | } 819 | .import-table td .import-preview { 820 | white-space: pre-wrap; 821 | word-break: break-word; 822 | max-width: 50px; 823 | } 824 | #info { 825 | padding: 8px 0px; 826 | margin: 0px 8px; 827 | font-size: 12px; 828 | } 829 | #info table { 830 | margin: 0 auto; 831 | } 832 | #info table, 833 | #info th, 834 | #info td { 835 | padding: 8px; 836 | margin: 0p; 837 | border: 1px solid grey; 838 | } 839 | .hoverparent:hover .hoveronly { 840 | opacity: 1; 841 | } 842 | .hoveronly { 843 | opacity: 0; 844 | } 845 | .hoveronly:hover { 846 | opacity: 1; 847 | } 848 | .tiny { 849 | font-size: 7px; 850 | } 851 | .CodeMirror { 852 | font-family: monospace; 853 | } 854 | .CodeMirror .CodeMirror-code pre { 855 | font-family: monospace; 856 | box-shadow: none; 857 | } 858 | .block-mention { 859 | margin: 4px 8px 4px 0px; 860 | cursor: pointer; 861 | padding: 8px; 862 | background-color: #bfccd6; 863 | } 864 | .block-mention:hover { 865 | background-color: #a7b6c2; 866 | } 867 | .rm-page-ref { 868 | cursor: pointer; 869 | } 870 | .rm-page-ref:hover { 871 | text-decoration: underline; 872 | } 873 | .rm-page-ref-tag { 874 | color: #a7b6c2; 875 | } 876 | .rm-page-ref-brackets { 877 | color: #a7b6c2; 878 | } 879 | .rm-page-ref-link-color { 880 | color: #cd5654; /* red graphit color */ 881 | } 882 | .rm-page-ref-namespace-color { 883 | color: green; 884 | } 885 | .rm-block-ref { 886 | padding: 4px 2px; 887 | margin: -4px 0px; 888 | font-size: 20px; /* RTB change: block ref's same size as others */ 889 | display: inline; 890 | border-bottom: 1px solid #ced9e0; 891 | cursor: alias; 892 | padding-left: 0px; /* RTB add: align to left */ 893 | } 894 | .rm-block-ref:hover { 895 | background-color: #f5f8fa; 896 | } 897 | .rm-reference-container { 898 | border-top: 2px solid #202b33; 899 | padding-top: 12px; 900 | margin-bottom: 8px; 901 | } 902 | .check-container { 903 | display: inline-block; 904 | position: relative; 905 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 906 | margin-bottom: 10px; 907 | cursor: pointer; 908 | font-size: 22px; 909 | -webkit-user-select: none; 910 | -moz-user-select: none; 911 | -ms-user-select: none; 912 | user-select: none; 913 | vertical-align: bottom; 914 | top: -12px; /* RTB change: align checkbox for updated spacing */ 915 | } 916 | /* Hide the browser's default checkbox */ 917 | .check-container input { 918 | position: absolute; 919 | opacity: 0; 920 | cursor: pointer; 921 | height: 0; 922 | width: 0; 923 | } 924 | /* Create a custom checkbox */ 925 | .checkmark { 926 | position: absolute; 927 | top: 0px; 928 | left: 0; 929 | height: 12px; 930 | border-radius: 2px; 931 | width: 12px; 932 | border: 1px solid #a7b6c2; 933 | } 934 | /* On mouse-over, add a grey background color */ 935 | /* When the checkbox is checked, add a blue background */ 936 | .check-container input:checked ~ .checkmark { 937 | background-color: #c75d62; /* red graphite */ 938 | border: none; 939 | } 940 | /* Create the checkmark/indicator (hidden when not checked) */ 941 | .checkmark:after { 942 | content: ""; 943 | position: absolute; 944 | display: none; 945 | } 946 | /* Show the checkmark when checked */ 947 | .check-container input:checked ~ .checkmark:after { 948 | display: block; 949 | } 950 | /* Style the checkmark/indicator */ 951 | .check-container .checkmark:after { 952 | left: 3.5px; 953 | top: 0.25px; 954 | width: 5px; 955 | height: 10px; 956 | border: solid white; 957 | border-width: 0 2px 2px 0; 958 | -webkit-transform: rotate(45deg); 959 | -ms-transform: rotate(45deg); 960 | transform: rotate(40deg) scale(0.8); 961 | } 962 | #roam-sidebar-logo a { 963 | text-decoration: none; 964 | } 965 | #roam-sidebar-logo:hover { 966 | background-color: #10161a; 967 | } 968 | .rm-find-or-create-wrapper { 969 | position: relative; 970 | transition: all 200ms ease-in; 971 | } 972 | .rm-find-or-create-wrapper .bp3-transition-container { 973 | width: 100%; 974 | } 975 | .rm-find-or-create-wrapper .bp3-menu { 976 | max-width: none; 977 | max-height: 400px; 978 | } 979 | .rm-find-or-create-wrapper .rm-menu-item { 980 | padding: 6px; 981 | cursor: pointer; 982 | border-radius: 2px; 983 | } 984 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 985 | font-weight: bold; 986 | } 987 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 988 | color: #0d8050; 989 | } 990 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 991 | word-break: break-word; 992 | color: #8a9ba8; 993 | overflow-wrap: break-spaces; 994 | margin-left: -20px; 995 | } 996 | .rm-fill { 997 | width: 100%; 998 | } 999 | .rm-pages-sort-menu-item { 1000 | padding-right: 16px; 1001 | padding-left: 16px; 1002 | font-weight: bold; 1003 | } 1004 | .rm-pages-row-highlight { 1005 | background-color: #f5f8fa; 1006 | } 1007 | .rm-pages-row { 1008 | display: flex; 1009 | flex: 0 0 auto; 1010 | justify-content: space-between; 1011 | align-items: flex-start; 1012 | } 1013 | .rm-pages-row .rm-pages-sort-header { 1014 | display: flex; 1015 | flex: 0 0 auto; 1016 | align-items: center; 1017 | cursor: pointer; 1018 | } 1019 | .rm-pages-row .rm-pages-sort-header:hover { 1020 | text-decoration: underline; 1021 | } 1022 | .rm-pages-row .rm-pages-title-col { 1023 | padding: 8px 4px; 1024 | flex: 1 0 50%; 1025 | text-overflow: ellipsis; 1026 | } 1027 | .rm-pages-row .rm-pages-action-col { 1028 | text-align: right; 1029 | flex: 1 0 0; 1030 | padding: 8px 4px; 1031 | } 1032 | .rm-pages-row .rm-pages-col { 1033 | color: #8a9ba8; 1034 | padding: 8px 4px; 1035 | flex: 1 0 15%; 1036 | } 1037 | .rm-reference-item { 1038 | margin-top: 8px; 1039 | margin-right: 8px; 1040 | flex: 1 1 100%; 1041 | word-break: break-word; 1042 | background-color: #f5f8fa; 1043 | padding-right: 8px; 1044 | } 1045 | .rm-level1 { 1046 | font-family: 'Avenir Next'; /* RTB change */ 1047 | font-weight: 400; 1048 | font-size: 1.8em; 1049 | } 1050 | .rm-level1 textarea { 1051 | line-height: 1.2; 1052 | } 1053 | .rm-level1 .roam-block { 1054 | line-height: 1.2; 1055 | margin-top: -8px; /* RTB add */ 1056 | } 1057 | .rm-level2 { 1058 | font-family: 'Avenir Next' !important; /* RTB change */ 1059 | font-weight: 400; 1060 | font-size: 1.4em; 1061 | } 1062 | 1063 | /* RTB new section */ 1064 | .rm-level2 .roam-block { 1065 | margin-top: -8px; 1066 | } 1067 | 1068 | .rm-level3 { 1069 | font-weight: 500; 1070 | font-size: 1.2em; 1071 | color: #5c7080; 1072 | } 1073 | 1074 | /* RTB new section */ 1075 | .rm-level3 .roam-block { 1076 | margin-top: -5px; 1077 | } 1078 | 1079 | .rm-title1 { 1080 | word-break: break-word; 1081 | font-weight: 400; 1082 | } 1083 | .rm-histogram-table { 1084 | width: 100%; 1085 | margin-left: -8px; 1086 | box-sizing: border-box; 1087 | } 1088 | .rm-histogram-table td { 1089 | vertical-align: top; 1090 | min-width: 18px; 1091 | max-width: 18px; 1092 | border: 1px solid transparent; 1093 | } 1094 | .rm-histogram-table td .flex-v-box { 1095 | border-right: 0.2px solid #48aff0; 1096 | justify-content: flex-start; 1097 | align-items: center; 1098 | } 1099 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 1100 | margin-top: 0px; 1101 | margin-bottom: 0px; 1102 | padding-bottom: 0px; 1103 | } 1104 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 1105 | transform-origin: center; 1106 | background-size: cover; 1107 | border: 1px solid darkgray; 1108 | font-size: 0.7em; 1109 | height: 12px; 1110 | width: 12px; 1111 | margin: 0px; 1112 | padding: 0px; 1113 | border-radius: 100%; 1114 | background-repeat: no-repeat; 1115 | } 1116 | .slider .slider-cell { 1117 | border: 1px solid transparent; 1118 | flex: "1 0 100%"; 1119 | } 1120 | .slider .flex-v-box { 1121 | justify-content: flex-start; 1122 | align-items: center; 1123 | } 1124 | .slider .flex-v-box .bp3-popover-wrapper { 1125 | margin-top: 0px; 1126 | margin-bottom: 0px; 1127 | padding-bottom: 0px; 1128 | } 1129 | .slider .flex-v-box .table-edited-by-view { 1130 | transform-origin: center; 1131 | background-size: cover; 1132 | border: 1px solid darkgray; 1133 | font-size: 0.7em; 1134 | height: 12px; 1135 | width: 12px; 1136 | margin: 0px; 1137 | padding: 0px; 1138 | border-radius: 100%; 1139 | background-repeat: no-repeat; 1140 | } 1141 | .nowrap { 1142 | white-space: nowrap; 1143 | } 1144 | #rm-mobile-bar .rm-mobile-button { 1145 | flex: 1 0 0; 1146 | } 1147 | .roam-intense { 1148 | background-color: yellow; 1149 | margin: -2px; 1150 | padding: 2px; 1151 | } 1152 | .roam-highlight { 1153 | background-color: #fef09f; 1154 | margin: -2px; 1155 | padding: 2px; 1156 | } 1157 | .roam-bullet-closed { 1158 | background-color: #ced9e0; 1159 | } 1160 | #right-sidebar .roam-bullet-closed { 1161 | background-color: #a7b6c2; 1162 | } 1163 | .level1 { 1164 | font-family: Roboto, sans-serif; 1165 | font-weight: 200; 1166 | font-size: 40px; 1167 | color: #444444; 1168 | letter-spacing: normal; 1169 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1170 | } 1171 | .rm-pm-editor { 1172 | padding: 5px; 1173 | min-height: 100px; 1174 | outline: 0 !important; 1175 | } 1176 | .rm-pm-editor h1 { 1177 | font-family: 'Inter', sans-serif; 1178 | font-weight: 400; 1179 | font-size: 1.8em; 1180 | } 1181 | .rm-pm-editor h1 textarea { 1182 | line-height: 1.2; 1183 | } 1184 | .rm-pm-editor h1 .roam-block { 1185 | line-height: 1.2; 1186 | } 1187 | .rm-pm-editor h2 { 1188 | font-family: 'Inter', sans-serif !important; 1189 | font-weight: 400; 1190 | font-size: 1.4em; 1191 | } 1192 | .rm-pm-editor h3 { 1193 | font-weight: 500; 1194 | font-size: 1.2em; 1195 | color: #5c7080; 1196 | } 1197 | .rm-pm-editor img { 1198 | max-width: 100%; 1199 | } 1200 | .rm-pm-sub-editor-wrapper { 1201 | padding: 2.5px; 1202 | margin: 2px; 1203 | background-color: rgba(201, 201, 207, 0.1); 1204 | } 1205 | .rm-section-item { 1206 | width: -webkit-max-content; 1207 | width: -moz-max-content; 1208 | width: max-content; 1209 | } 1210 | .rm-section { 1211 | background-color: yellow; 1212 | } 1213 | .rm-section-selected { 1214 | background-color: lightblue; 1215 | } 1216 | .rm-edit-view-wrapper { 1217 | min-width: 21px; 1218 | } 1219 | .edited-by-view { 1220 | flex: 0 0 21px; 1221 | transform-origin: center; 1222 | background-size: cover; 1223 | border: 1px solid darkgray; 1224 | font-size: 0.7em; 1225 | margin-top: 6.5px; 1226 | margin-right: 6px; 1227 | margin-left: 0px; 1228 | height: 15px; 1229 | width: 15px; 1230 | border-radius: 100%; 1231 | background-repeat: no-repeat; 1232 | } 1233 | .roam-block-container { 1234 | max-width: 740px; 1235 | border-radius: 2px; 1236 | } 1237 | .block-highlight-grey { 1238 | background-color: #ced9e0; 1239 | } 1240 | .block-highlight-blue { 1241 | background-color: #7cccff; 1242 | } 1243 | .block-highlight-yellow { 1244 | background-color: yellow; 1245 | } 1246 | .block-bullet-view { 1247 | flex: 1 1 100%; 1248 | margin-left: 5px; 1249 | } 1250 | .block-border-left { 1251 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1252 | } 1253 | .text-align-left { 1254 | text-align: left; 1255 | } 1256 | .text-align-center { 1257 | text-align: center; 1258 | } 1259 | .text-align-right { 1260 | text-align: right; 1261 | } 1262 | .text-align-justify { 1263 | text-align: justify; 1264 | } 1265 | .roam-block { 1266 | min-height: calc(1.5em + 8px); 1267 | box-sizing: border-box; 1268 | white-space: pre-wrap; 1269 | overflow-wrap: break-word; 1270 | margin-top: -1px; 1271 | min-width: 100px; 1272 | width: 100%; 1273 | line-height: 1.5em; 1274 | cursor: text; 1275 | padding-top: 4px; 1276 | padding-bottom: 4px; 1277 | } 1278 | .roam-block .span-view { 1279 | box-sizing: border-box; 1280 | } 1281 | .rm-block-text { 1282 | max-width: 700px; /* RTB change: desired section width */ 1283 | } 1284 | .rm-block-input { 1285 | line-height: 1.5em; 1286 | width: 100%; 1287 | outline: 1px solid transparent; 1288 | overflow-wrap: break-spaces; 1289 | vertical-align: top; 1290 | margin-top: -1px; 1291 | background-color: transparent; 1292 | padding-top: 4px; 1293 | padding-bottom: 4px; 1294 | letter-spacing: inherit; 1295 | border: none; 1296 | resize: none; 1297 | } 1298 | .controls { 1299 | display: flex; 1300 | flex: 0 0 40px; 1301 | padding-top: 4px; 1302 | padding-left: 4px; 1303 | } 1304 | .controls .block-expand { 1305 | transform: scale(1); 1306 | transform-origin: center; 1307 | } 1308 | .controls .block-expand .rm-caret { 1309 | transition: all 100ms ease-in; 1310 | } 1311 | .controls .block-expand .rm-rotate-90 { 1312 | transform: rotate(-90deg); 1313 | } 1314 | .controls .opacity-none { 1315 | opacity: 0; 1316 | } 1317 | .controls .opacity-7 { 1318 | opacity: 0.7; 1319 | } 1320 | .controls .cursor-pointer { 1321 | cursor: pointer; 1322 | } 1323 | .controls .cursor-grab { 1324 | cursor: grab; 1325 | } 1326 | .controls .bk-light-grey { 1327 | background-color: #ced9e0; 1328 | } 1329 | .controls .simple-bullet-outer { 1330 | display: flex; 1331 | height: 13px; 1332 | width: 13px; 1333 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1334 | border-radius: 50%; 1335 | justify-content: center; 1336 | align-items: center; 1337 | } 1338 | .controls .simple-bullet-outer .simple-bullet-inner { 1339 | border-radius: 50%; 1340 | width: 5px; 1341 | height: 5px; 1342 | background-color: #c75d62; /* RTB change: red graphite bullet */ 1343 | } 1344 | .version-bullet { 1345 | background-color: #a7b6c2; 1346 | border: none; 1347 | display: flex; 1348 | cursor: pointer; 1349 | flex-direction: column; 1350 | align-items: center; 1351 | justify-content: center; 1352 | padding: 0px; 1353 | transform: scale(0.9); 1354 | transform-origin: center; 1355 | margin-top: 2px; 1356 | margin-left: 0px; 1357 | height: 16px; 1358 | font-size: 9px; 1359 | color: white; 1360 | text-align: center; 1361 | min-height: 16px; 1362 | max-height: 16px; 1363 | min-width: 16px; 1364 | max-width: 16px; 1365 | border-radius: 16px; 1366 | } 1367 | .dnd-separator { 1368 | position: relative; 1369 | width: 100%; 1370 | } 1371 | .dnd-separator .dnd-drop-area { 1372 | position: absolute; 1373 | top: -11px; 1374 | height: 28px; 1375 | width: 100%; 1376 | } 1377 | .dnd-separator .dnd-drop-bar { 1378 | position: absolute; 1379 | z-index: 0; 1380 | top: -4px; 1381 | left: 20px; 1382 | width: 96%; 1383 | height: 4px; 1384 | border-radius: 10px; 1385 | background-color: #5c7080; 1386 | } 1387 | .rm-database { 1388 | background-color: #182026; 1389 | color: #ced9e0; 1390 | } 1391 | .rm-mentions-search-items { 1392 | padding: 8px; 1393 | } 1394 | .rm-mentions-search-items .rm-mentions-title { 1395 | font-size: 20px; 1396 | font-weight: lighter; 1397 | margin: 4px; 1398 | } 1399 | .rm-mentions-search-items .rm-mentions-search-item { 1400 | padding: 12px; 1401 | cursor: pointer; 1402 | background-color: #f5f8fa; 1403 | border: 1px solid #bfccd6; 1404 | } 1405 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1406 | background-color: #bfccd6; 1407 | } 1408 | .block-ref-count-button { 1409 | font-size: 0.9em; 1410 | } 1411 | .rm-grey-text { 1412 | color: #8a9ba8; 1413 | } 1414 | .rm-red-text { 1415 | color: red; 1416 | } 1417 | .flex-v-box { 1418 | display: flex; 1419 | flex: 0 0 auto; 1420 | flex-direction: column; 1421 | } 1422 | .flex-h-box { 1423 | display: flex; 1424 | flex: 0 0 auto; 1425 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1426 | } 1427 | .flex-align-start { 1428 | align-items: flex-start; 1429 | } 1430 | .flex-justify-start { 1431 | justify-content: flex-start; 1432 | } 1433 | .tags-input { 1434 | display: inline-block; 1435 | width: 10em; 1436 | margin: 0 0 4px; 1437 | padding: 4px 6px; 1438 | background: none; 1439 | border: 0; 1440 | outline: 0; 1441 | font: inherit; 1442 | color: inherit; 1443 | text-align: left; 1444 | text-shadow: none; 1445 | } 1446 | .tags-input:focus { 1447 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1448 | /* border: 2px solid white; */ 1449 | /* border-bottom-color: #448cca; */ 1450 | } 1451 | .tags-output { 1452 | display: inline-block; 1453 | margin-left: 4px; 1454 | } 1455 | .tags-output-item { 1456 | display: inline-block; 1457 | background-color: lightgrey; 1458 | cursor: pointer; 1459 | margin: 0 4px 4px 0; 1460 | padding: 4px 6px; 1461 | font-size: 10px; 1462 | border-radius: 4px; 1463 | } 1464 | .tags-output-item2 { 1465 | background-color: black; 1466 | display: inline-block; 1467 | text-decoration: none; 1468 | color: white; 1469 | cursor: pointer; 1470 | margin-left: 6px; 1471 | } 1472 | html { 1473 | margin: 0; 1474 | min-height: 100%; 1475 | } 1476 | body { 1477 | margin: 0; 1478 | padding: 0; 1479 | } 1480 | div { 1481 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1482 | font-size: 1em; 1483 | line-height: 1.5em; 1484 | margin: 0px; 1485 | padding: 0px; 1486 | } 1487 | textarea { 1488 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1489 | font-size: 1em; 1490 | line-height: 1.5em; 1491 | margin: 0px; 1492 | padding: 0px; 1493 | } 1494 | .xtra { 1495 | transform: scale(3); 1496 | border-radius: 50%; 1497 | padding: 4px; 1498 | } 1499 | .border { 1500 | border: 1px solid ; 1501 | } 1502 | .display-flex { 1503 | display: -webkit-flex; 1504 | display: flex; 1505 | } 1506 | .display-inline-flex { 1507 | display: -webkit-inline-flex; 1508 | display: inline-flex; 1509 | } 1510 | .react-resizable { 1511 | position: relative; 1512 | } 1513 | .react-resizable-handle { 1514 | position: absolute; 1515 | width: 20px; 1516 | height: 20px; 1517 | bottom: 0; 1518 | right: 0; 1519 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1520 | background-position: bottom right; 1521 | padding: 0 3px 3px 0; 1522 | background-repeat: no-repeat; 1523 | background-origin: content-box; 1524 | box-sizing: border-box; 1525 | cursor: se-resize; 1526 | } 1527 | .resize-card { 1528 | overflow-y: hidden; 1529 | } 1530 | .noselect { 1531 | -webkit-touch-callout: none; 1532 | /* iOS Safari */ 1533 | -webkit-user-select: none; 1534 | /* Safari */ 1535 | -khtml-user-select: none; 1536 | /* Konqueror HTML */ 1537 | -moz-user-select: none; 1538 | /* Firefox */ 1539 | -ms-user-select: none; 1540 | /* Internet Explorer/Edge */ 1541 | user-select: none; 1542 | /* Non-prefixed version, currently */ 1543 | } 1544 | 1545 | /* RTB additions below */ 1546 | 1547 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1548 | margin-top: 3px; 1549 | } 1550 | 1551 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1552 | margin-top: 3px; 1553 | } 1554 | 1555 | #roam-right-sidebar-content .rm-level1 .roam-block { 1556 | margin-top: -5px; 1557 | } 1558 | 1559 | #roam-right-sidebar-content .rm-level2 .roam-block { 1560 | margin-top: -5px; 1561 | } 1562 | 1563 | #roam-right-sidebar-content .rm-level3 .roam-block { 1564 | margin-top: -3px; 1565 | } 1566 | 1567 | #roam-right-sidebar-content { 1568 | font-size: 16px; 1569 | } 1570 | 1571 | #roam-right-sidebar-content .rm-block-ref { 1572 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1573 | /* color: #cd5654; Don't change color of full block ref */ 1574 | } 1575 | 1576 | a { 1577 | color: #cd5654; /* red graphite color */ 1578 | } 1579 | -------------------------------------------------------------------------------- /site.css: -------------------------------------------------------------------------------- 1 | @import "../fonts/Inter/inter.css"; 2 | .loading-astrolabe { 3 | margin: auto; 4 | position: relative; 5 | width: 250px; 6 | height: 250px; 7 | } 8 | .loading-astrolabe .wand { 9 | position: absolute; 10 | width: 80%; 11 | top: 24.5%; 12 | left: 10%; 13 | animation: nav 3.5s linear infinite; 14 | } 15 | .loading-astrolabe .wand-small { 16 | position: absolute; 17 | width: 80%; 18 | top: 24.5%; 19 | left: 11.5%; 20 | } 21 | .loading-astrolabe .background { 22 | width: 100%; 23 | border: none; 24 | margin-left: -3px; 25 | } 26 | .spinner-astrolabe { 27 | margin: auto; 28 | margin-top: 100px; 29 | position: relative; 30 | width: 200px; 31 | height: 200px; 32 | } 33 | .spinner-astrolabe .wand { 34 | position: absolute; 35 | width: 80%; 36 | top: 24.5%; 37 | left: 10%; 38 | animation: nav 3.5s linear 20s; 39 | } 40 | .spinner-astrolabe .wand:hover { 41 | animation: nav 3.5s linear infinite; 42 | } 43 | .spinner-astrolabe .wand-small { 44 | position: absolute; 45 | width: 80%; 46 | top: 24.5%; 47 | left: 11.5%; 48 | } 49 | .spinner-astrolabe .background { 50 | width: 100%; 51 | border: none; 52 | margin-left: -3px; 53 | } 54 | @keyframes spin { 55 | 0% { 56 | transform: rotate(0deg); 57 | } 58 | 100% { 59 | transform: rotate(360deg); 60 | } 61 | } 62 | @keyframes nav { 63 | 0% { 64 | transform: rotate(0deg); 65 | } 66 | 15% { 67 | transform: rotate(-30deg); 68 | } 69 | 25% { 70 | transform: rotate(30deg); 71 | } 72 | 40% { 73 | transform: rotate(-15deg); 74 | } 75 | 50% { 76 | transform: rotate(40deg); 77 | } 78 | 70% { 79 | transform: rotate(-50deg); 80 | } 81 | 85% { 82 | transform: rotate(75deg); 83 | } 84 | 90% { 85 | transform: rotate(-180deg); 86 | } 87 | 100% { 88 | transform: rotate(-355deg); 89 | } 90 | } 91 | .spinner-square { 92 | box-sizing: border-box; 93 | width: 300px; 94 | height: 300px; 95 | background-color: grey; 96 | display: grid; 97 | grid-template-rows: 1fr 1fr; 98 | padding: 20px; 99 | grid-gap: 20px; 100 | z-index: 3; 101 | grid-template-columns: 1fr 1fr; 102 | cursor: pointer; 103 | } 104 | .spinner-square .spinner-square-front { 105 | background-color: white; 106 | z-index: 5; 107 | } 108 | .spinner-square .spinner-square-rotate { 109 | position: absolute; 110 | margin-left: 75px; 111 | margin-top: 75px; 112 | background-color: black; 113 | width: 150px; 114 | height: 150px; 115 | animation: spin 4.5s linear infinite; 116 | } 117 | .scrollbar { 118 | margin-left: 30px; 119 | float: left; 120 | height: 300px; 121 | width: 65px; 122 | background: #F5F5F5; 123 | overflow-y: scroll; 124 | margin-bottom: 25px; 125 | } 126 | #scroll-1::-webkit-scrollbar-track { 127 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 128 | border-radius: 8px; 129 | background-color: #F5F5F5; 130 | } 131 | #scroll-1::-webkit-scrollbar { 132 | width: 8px; 133 | background-color: #F5F5F5; 134 | } 135 | #scroll-1::-webkit-scrollbar-thumb { 136 | border-radius: 8px; 137 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 138 | background-color: #8A9BA8; 139 | } 140 | #home { 141 | padding: 50px; 142 | background-color: blue; 143 | color: #182026; 144 | } 145 | #home .icons { 146 | padding-left: 20px; 147 | } 148 | #home .icons .bp3-icon-large:hover { 149 | transform: scale(2); 150 | margin-left: 60px; 151 | } 152 | #home2 .dark { 153 | color: white; 154 | background-color: #343a40; 155 | } 156 | #home2 .container { 157 | margin: auto; 158 | max-width: 1110px; 159 | } 160 | #home2 .block { 161 | padding: 7em 0 0; 162 | } 163 | #home2 #header { 164 | width: 100%; 165 | position: fixed; 166 | top: 0; 167 | } 168 | #home2 #header .nav { 169 | display: flex; 170 | flex: 0 0 auto; 171 | align-items: center; 172 | padding: 10px 14px; 173 | } 174 | #home2 #header .nav .bp3-button { 175 | color: white; 176 | } 177 | #home2 #body { 178 | margin-top: 50px; 179 | } 180 | #home2 h1 { 181 | margin-bottom: 20px; 182 | } 183 | #home2 .row { 184 | display: flex; 185 | flex-wrap: wrap; 186 | } 187 | #home2 .col { 188 | margin: 24px auto; 189 | max-width: 300px; 190 | } 191 | #home2 #testimonials .testimonial { 192 | text-align: center; 193 | } 194 | #home2 #logo-graph { 195 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 196 | opacity: .4; 197 | display: grid; 198 | } 199 | #home2 #footer { 200 | padding-bottom: 7em; 201 | } 202 | #page { 203 | font-family: Segoe UI, Roboto, sans-serif; 204 | } 205 | #page1 { 206 | margin: 0 auto; 207 | padding-top: 4em; 208 | max-width: 40em; 209 | font-family: Segoe UI, Roboto, sans-serif; 210 | color: #808080; 211 | } 212 | #page1 h1, 213 | #page1 h2 { 214 | color: #4d4d4d; 215 | text-align: center; 216 | } 217 | #page1 .sub { 218 | width: 400px; 219 | margin: 8px auto; 220 | } 221 | #page1 .hero { 222 | margin: 0 auto; 223 | display: flex; 224 | justify-content: center; 225 | } 226 | #page1 .hero button { 227 | min-height: 50px; 228 | font-size: 1.8em; 229 | padding: 16px 20px; 230 | margin: 8px; 231 | } 232 | #page1 .zk { 233 | padding: 25px; 234 | } 235 | #page1 .quotes { 236 | max-width: 80vw; 237 | margin: 20px auto; 238 | } 239 | #page1 .quote { 240 | float: right; 241 | padding-top: 1em; 242 | } 243 | #secret-invite-wrapper { 244 | height: 100vh; 245 | background-color: black; 246 | overscroll-behavior: none; 247 | } 248 | #secret-invite-wrapper #secret-invite { 249 | position: relative; 250 | margin: 0 auto; 251 | padding-top: 4em; 252 | max-width: 40em; 253 | font-family: Segoe UI, Roboto, sans-serif; 254 | color: #b3b3b3; 255 | } 256 | #secret-invite-wrapper #secret-invite #secret-scroll { 257 | position: absolute; 258 | height: 90vh; 259 | overflow: scroll; 260 | } 261 | #secret-invite-wrapper #secret-invite h1, 262 | #secret-invite-wrapper #secret-invite h2 { 263 | color: #cccccc; 264 | text-align: center; 265 | } 266 | #secret-invite-wrapper #secret-invite .sub { 267 | width: 400px; 268 | margin: 8px auto; 269 | } 270 | #secret-invite-wrapper #secret-invite .hero { 271 | margin: 0 auto; 272 | display: flex; 273 | justify-content: center; 274 | } 275 | #secret-invite-wrapper #secret-invite .hero button { 276 | min-height: 50px; 277 | font-size: 1.8em; 278 | padding: 16px 20px; 279 | margin: 8px; 280 | } 281 | #secret-invite-wrapper #secret-invite .zk { 282 | padding: 25px; 283 | } 284 | #secret-invite-wrapper #secret-invite .quotes { 285 | max-width: 80vw; 286 | margin: 20px auto; 287 | } 288 | #secret-invite-wrapper #secret-invite .quote { 289 | float: right; 290 | padding-top: 1em; 291 | } 292 | html { 293 | scroll-behavior: smooth; 294 | } 295 | #landing-page * { 296 | margin: 0; 297 | padding: 0; 298 | } 299 | #landing-page #form { 300 | display: flex; 301 | flex-direction: column; 302 | align-items: center; 303 | padding: 12px; 304 | } 305 | #landing-page #form .ff { 306 | text-align: center; 307 | line-height: 1.8em; 308 | font-size: 1.2em; 309 | max-width: 400px; 310 | } 311 | #landing-page #form form { 312 | display: flex; 313 | flex-direction: column; 314 | } 315 | #landing-page #form form textarea { 316 | max-width: 70vw; 317 | width: 300px; 318 | resize: none; 319 | border: 1px solid lightgrey; 320 | padding: 4px; 321 | } 322 | #landing-page #form form input { 323 | max-width: 70vw; 324 | width: 300px; 325 | padding: 4px; 326 | margin: 8px; 327 | } 328 | #landing-page #header ul { 329 | display: flex; 330 | list-style-type: none; 331 | background-color: #293742; 332 | color: #f5f8fa; 333 | } 334 | #landing-page #header ul .logo { 335 | padding: 8px; 336 | } 337 | #landing-page #header ul li:hover { 338 | background-color: #182026; 339 | } 340 | #landing-page #header ul li a { 341 | display: block; 342 | padding: 8px; 343 | text-decoration: none; 344 | width: 100%; 345 | height: 100%; 346 | color: inherit; 347 | } 348 | #landing-page #cover { 349 | background-color: #182026; 350 | padding: 40px 0 0 0; 351 | min-height: 100vh; 352 | color: #ced9e0; 353 | display: flex; 354 | flex-direction: column; 355 | align-items: center; 356 | } 357 | #landing-page #cover .a { 358 | background-color: #ced9e0; 359 | color: #182026; 360 | border-radius: 4px; 361 | cursor: pointer; 362 | text-decoration: none; 363 | } 364 | #landing-page #cover .a:hover { 365 | color: #0e5a8a; 366 | } 367 | #landing-page #cover #tag-line { 368 | padding: 30px 40px 0px; 369 | } 370 | #landing-page #cover #tag-line ul { 371 | line-height: 32px; 372 | margin-left: 32px; 373 | margin-right: 16px; 374 | margin-top: 25px; 375 | font-size: 16px; 376 | } 377 | #landing-page #cover #endorsement { 378 | margin: 80px 20px 20px; 379 | } 380 | #landing-page #cover #callouts { 381 | margin-top: 10%; 382 | } 383 | #landing-page #cover #callouts button { 384 | font-size: 20px; 385 | padding: 20px; 386 | background-color: #182026; 387 | } 388 | #landing-page #cover #image-collection { 389 | flex: 1 1 400px; 390 | max-width: 500px; 391 | background-color: #ced9e0; 392 | color: #293742; 393 | padding: 40px 40px 40px; 394 | display: flex; 395 | flex-direction: column; 396 | align-items: center; 397 | } 398 | #landing-page #cover #image-collection #images { 399 | color: #182026; 400 | padding: 40px 0px; 401 | display: grid; 402 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 403 | grid-column-gap: 20px; 404 | justify-items: start; 405 | align-items: center; 406 | } 407 | #landing-page #cover #image-collection #images img { 408 | margin: 8px; 409 | max-height: 70px; 410 | max-width: 100%; 411 | } 412 | #landing-page #features { 413 | padding: 40px 40px; 414 | background-color: #293742; 415 | border-top: 1px solid #5c7080; 416 | color: #d8e1e8; 417 | flex-direction: column; 418 | } 419 | #landing-page #features ul { 420 | padding-left: 16px; 421 | } 422 | #landing-page #features .feature { 423 | margin: 40px 0px; 424 | display: flex; 425 | justify-content: center; 426 | flex-wrap: wrap; 427 | } 428 | #landing-page #features .feature .feature-content { 429 | width: 400px; 430 | margin: 40px; 431 | } 432 | #landing-page #features .feature .feature-image { 433 | min-height: 400px; 434 | min-width: 400px; 435 | background-color: grey; 436 | } 437 | .rm-emoji-block-view { 438 | display: flex; 439 | flex: 0 0 auto; 440 | flex-wrap: wrap; 441 | margin-left: 40px; 442 | align-items: center; 443 | } 444 | .rm-emoji-block-view .rm-emoji-button { 445 | display: flex; 446 | flex: 0 0 auto; 447 | align-items: center; 448 | cursor: pointer; 449 | border-radius: 20px; 450 | height: 20px; 451 | margin: 0px 4px 4px 0px; 452 | } 453 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 454 | height: 16px; 455 | margin: 0px 4px; 456 | } 457 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 458 | height: 100%; 459 | font-size: 10px; 460 | margin-right: 6px; 461 | font-weight: 500; 462 | } 463 | .rm-emoji-tooltip { 464 | max-width: 200px; 465 | overflow-wrap: break-word; 466 | font-size: 12px; 467 | color: white; 468 | font-weight: 600; 469 | } 470 | .kanban-board { 471 | background-color: #a7b6c2; 472 | min-width: 100%; 473 | min-height: 48px; 474 | padding: 8px; 475 | overflow-x: scroll; 476 | } 477 | .kanban-column { 478 | background-color: #ededed; 479 | margin: 0px 4px 0px 4px; 480 | padding: 4px; 481 | min-width: 200px; 482 | } 483 | .kanban-title { 484 | text-align: center; 485 | } 486 | .kanban-card { 487 | background-color: white; 488 | margin: 8px; 489 | padding: 8px; 490 | } 491 | html { 492 | font-family: 'Inter', sans-serif; 493 | } 494 | @supports (font-variation-settings: normal) { 495 | html { 496 | font-family: 'Inter var', sans-serif; 497 | } 498 | } 499 | body { 500 | overscroll-behavior: none; 501 | } 502 | ::-webkit-scrollbar { 503 | width: 0px; 504 | background: transparent; 505 | } 506 | * { 507 | box-sizing: border-box; 508 | } 509 | *:focus { 510 | outline-width: 0; 511 | } 512 | .roam-lift { 513 | z-index: 10000; 514 | } 515 | .CodeMirror { 516 | height: auto !important; 517 | } 518 | @media (max-width: 500px) { 519 | .bp3-omnibar { 520 | max-width: 310px; 521 | left: calc((100vw - 310px) / 2); 522 | } 523 | } 524 | .rm-line { 525 | background-color: #ced9e0; 526 | flex: 0 0 1px; 527 | } 528 | .roam-body { 529 | height: 100vh; 530 | overflow: hidden; 531 | position: relative; 532 | background-color: #f9f9f9; /* RTB add: bear color */ 533 | } 534 | .roam-body .roam-app { 535 | height: 100%; 536 | width: 100%; 537 | position: relative; 538 | -webkit-overflow-scrolling: touch; 539 | color: #202b33; 540 | } 541 | .roam-body .roam-app h1 { 542 | color: #202b33; 543 | } 544 | .roam-body .roam-app .roam-sidebar-container { 545 | position: absolute; 546 | top: 45px; 547 | left: -232px; 548 | width: 232px; 549 | bottom: 45px; 550 | z-index: 999; 551 | transition: all 200ms ease-in; 552 | background-color: #2f3437; 553 | background-color: #182026; 554 | } 555 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 556 | position: absolute; 557 | z-index: 99; 558 | top: 0px; 559 | right: -8px; 560 | bottom: 0px; 561 | width: 0px; 562 | } 563 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 564 | position: absolute; 565 | top: 0; 566 | padding: 16px; 567 | } 568 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 569 | height: 100%; 570 | position: relative; 571 | } 572 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 573 | padding: 8px 20px; 574 | font-weight: bold; 575 | cursor: pointer; 576 | font-size: 14px; 577 | color: #5c7080; 578 | } 579 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 580 | color: #f5f8fa; 581 | background-color: #10161a; 582 | } 583 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 584 | color: #5c7080; 585 | } 586 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 587 | overflow-y: auto; 588 | } 589 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 590 | text-decoration: none; 591 | cursor: pointer; 592 | font-size: 14px; 593 | padding: 8px 0px 8px 4px; 594 | color: #5c7080; 595 | } 596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 597 | color: #f5f8fa; 598 | background-color: #10161a; 599 | } 600 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 601 | padding: 8px; 602 | margin-bottom: 8px; 603 | font-size: 14px; 604 | font-weight: bold; 605 | } 606 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 607 | margin-top: 64px; 608 | width: 100%; 609 | transition: all 150ms ease-in; 610 | position: absolute; 611 | overflow: scroll; 612 | } 613 | .roam-body .roam-app .roam-main { 614 | width: 100%; 615 | display: flex; 616 | 617 | } 618 | .roam-body .roam-app .roam-main .roam-article { 619 | position: relative; 620 | padding: 16px 42px 120px; 621 | font-size: 20px; /* RTB add: larger font */ 622 | color: #222222; /* RTB add: roam color */ 623 | } 624 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 625 | margin-bottom: 32px; 626 | } 627 | #right-sidebar .rm-reference-container { 628 | padding-top: 0px; 629 | border-top: none; 630 | } 631 | .roam-block .rm-reference-container { 632 | padding-top: 0px; 633 | border-top: none; 634 | } 635 | .roam-block .rm-reference-main { 636 | border: 1px solid #ced9e0; 637 | padding: 0px 16px 12px 16px; 638 | } 639 | .pointer { 640 | cursor: pointer; 641 | } 642 | .roam-topbar { 643 | height: 45px; 644 | position: fixed; 645 | width: 100%; 646 | z-index: 101; 647 | background-color: #f9f9f9; /* RTB change: bear background */ 648 | padding-right: 16px; 649 | padding-left: 16px; 650 | display: flex; 651 | flex-direction: column; 652 | justify-content: center; 653 | } 654 | .trunc { 655 | max-width: 120px; 656 | white-space: nowrap; 657 | text-overflow: ellipsis; 658 | overflow: hidden; 659 | } 660 | .bblack { 661 | border: 1px solid black; 662 | background-color: lightgrey; 663 | } 664 | .roam-popup-container { 665 | display: flex; 666 | flex-direction: column; 667 | overflow: scroll; 668 | } 669 | .roam-popup-container .roam-popup-content { 670 | position: absolute; 671 | top: 34px; 672 | bottom: 10px; 673 | width: 100%; 674 | overflow-y: scroll; 675 | } 676 | .rm-input { 677 | width: 100%; 678 | outline: 1px solid transparent; 679 | vertical-align: top; 680 | background-color: transparent; 681 | border: none; 682 | resize: none; 683 | } 684 | .rm-input::-webkit-input-placeholder { 685 | color: #ced9e0; 686 | } 687 | .rm-input:-moz-placeholder { 688 | /* Firefox 18- */ 689 | color: #ced9e0; 690 | } 691 | .rm-input::-moz-placeholder { 692 | /* Firefox 19+ */ 693 | color: #ced9e0; 694 | } 695 | .rm-input:-ms-input-placeholder { 696 | color: #ced9e0; 697 | } 698 | .rm-input::placeholder { 699 | color: #ced9e0; 700 | } 701 | .rm-title-textarea { 702 | width: 100%; 703 | outline: 1px solid transparent; 704 | vertical-align: top; 705 | line-height: 1.3em; 706 | background-color: transparent; 707 | border: none; 708 | resize: none; 709 | } 710 | .rm-title-textarea::-webkit-input-placeholder { 711 | color: #ced9e0; 712 | } 713 | .rm-title-textarea:-moz-placeholder { 714 | /* Firefox 18- */ 715 | color: #ced9e0; 716 | } 717 | .rm-title-textarea::-moz-placeholder { 718 | /* Firefox 19+ */ 719 | color: #ced9e0; 720 | } 721 | .rm-title-textarea:-ms-input-placeholder { 722 | color: #ced9e0; 723 | } 724 | .rm-title-textarea::placeholder { 725 | color: #ced9e0; 726 | } 727 | .rm-title-untitled { 728 | color: #ced9e0; 729 | } 730 | .rm-title-display { 731 | line-height: 1.3em; 732 | font-weight: 450; 733 | word-break: break-word; 734 | min-width: 100px; 735 | width: 100%; 736 | cursor: text; 737 | outline: 1px solid transparent; 738 | } 739 | .roam-log-container .roam-log-page { 740 | border-top: 1px solid #738694; 741 | margin-top: 40px; 742 | padding-top: 40px; 743 | padding-bottom: 16px; 744 | margin-bottom: 16px; 745 | } 746 | .roam-log-container .roam-log-page:first-child { 747 | border: 0px solid blue; 748 | margin-top: 0px; 749 | min-height: 500px; 750 | padding-top: 0px; 751 | } 752 | .roam-log-container .roam-log-preview { 753 | color: #8a9ba8; 754 | } 755 | .roam-log-container .roam-log-preview h1 { 756 | color: #8a9ba8; 757 | } 758 | .roam-log-container .roam-log-preview:hover { 759 | background-color: grey; 760 | } 761 | #buffer { 762 | display: flex; 763 | flex-direction: column; 764 | } 765 | #buffer .help-title { 766 | color: #f5f8fa; 767 | text-align: center; 768 | font-size: 16px; 769 | font-weight: bold; 770 | } 771 | #buffer .help-sub-title { 772 | color: #e1e8ed; 773 | text-align: center; 774 | } 775 | #buffer .help-item-text { 776 | color: #e1e8ed; 777 | } 778 | #buffer .help-item-label { 779 | opacity: 0.6; 780 | color: #e1e8ed; 781 | } 782 | .roam-table { 783 | padding-bottom: 24px; 784 | overflow-x: scroll; 785 | } 786 | .roam-table th, 787 | .roam-table td, 788 | .roam-table tr { 789 | font-size: 12px; 790 | min-width: 100px; 791 | max-height: 20px; 792 | padding: 8px 16px; 793 | margin: 0p; 794 | border: 1px solid grey; 795 | } 796 | .roam-table td { 797 | max-height: 20px; 798 | overflow: scroll; 799 | } 800 | .import-table { 801 | padding-bottom: 24px; 802 | max-width: 100%; 803 | } 804 | .import-table table { 805 | width: 100%; 806 | } 807 | .import-table th, 808 | .import-table td, 809 | .import-table tr { 810 | font-size: 12px; 811 | max-height: 20px; 812 | padding: 8px 16px; 813 | margin: 0p; 814 | border: 1px solid grey; 815 | } 816 | .import-table td { 817 | max-height: 20px; 818 | } 819 | .import-table td .import-preview { 820 | white-space: pre-wrap; 821 | word-break: break-word; 822 | max-width: 50px; 823 | } 824 | #info { 825 | padding: 8px 0px; 826 | margin: 0px 8px; 827 | font-size: 12px; 828 | } 829 | #info table { 830 | margin: 0 auto; 831 | } 832 | #info table, 833 | #info th, 834 | #info td { 835 | padding: 8px; 836 | margin: 0p; 837 | border: 1px solid grey; 838 | } 839 | .hoverparent:hover .hoveronly { 840 | opacity: 1; 841 | } 842 | .hoveronly { 843 | opacity: 0; 844 | } 845 | .hoveronly:hover { 846 | opacity: 1; 847 | } 848 | .tiny { 849 | font-size: 7px; 850 | } 851 | .CodeMirror { 852 | font-family: monospace; 853 | } 854 | .CodeMirror .CodeMirror-code pre { 855 | font-family: monospace; 856 | box-shadow: none; 857 | } 858 | .block-mention { 859 | margin: 4px 8px 4px 0px; 860 | cursor: pointer; 861 | padding: 8px; 862 | background-color: #bfccd6; 863 | } 864 | .block-mention:hover { 865 | background-color: #a7b6c2; 866 | } 867 | .rm-page-ref { 868 | cursor: pointer; 869 | } 870 | .rm-page-ref:hover { 871 | text-decoration: underline; 872 | } 873 | .rm-page-ref-tag { 874 | color: #a7b6c2; 875 | } 876 | .rm-page-ref-brackets { 877 | color: #a7b6c2; 878 | } 879 | .rm-page-ref-link-color { 880 | color: #137CBD; 881 | } 882 | .rm-page-ref-namespace-color { 883 | color: green; 884 | } 885 | .rm-block-ref { 886 | padding: 4px 2px; 887 | margin: -4px 0px; 888 | font-size: 20px; /* RTB change: block ref's same size as others */ 889 | display: inline; 890 | border-bottom: 1px solid #ced9e0; 891 | cursor: alias; 892 | padding-left: 0px; /* RTB add: align to left */ 893 | } 894 | .rm-block-ref:hover { 895 | background-color: #f5f8fa; 896 | } 897 | .rm-reference-container { 898 | border-top: 2px solid #202b33; 899 | padding-top: 12px; 900 | margin-bottom: 8px; 901 | } 902 | .check-container { 903 | display: inline-block; 904 | position: relative; 905 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 906 | margin-bottom: 10px; 907 | cursor: pointer; 908 | font-size: 22px; 909 | -webkit-user-select: none; 910 | -moz-user-select: none; 911 | -ms-user-select: none; 912 | user-select: none; 913 | vertical-align: bottom; 914 | top: -12px; /* RTB change: align checkbox for updated spacing */ 915 | } 916 | /* Hide the browser's default checkbox */ 917 | .check-container input { 918 | position: absolute; 919 | opacity: 0; 920 | cursor: pointer; 921 | height: 0; 922 | width: 0; 923 | } 924 | /* Create a custom checkbox */ 925 | .checkmark { 926 | position: absolute; 927 | top: 0px; 928 | left: 0; 929 | height: 12px; 930 | border-radius: 2px; 931 | width: 12px; 932 | border: 1px solid #a7b6c2; 933 | } 934 | /* On mouse-over, add a grey background color */ 935 | /* When the checkbox is checked, add a blue background */ 936 | .check-container input:checked ~ .checkmark { 937 | background-color: #137cbd; 938 | border: none; 939 | } 940 | /* Create the checkmark/indicator (hidden when not checked) */ 941 | .checkmark:after { 942 | content: ""; 943 | position: absolute; 944 | display: none; 945 | } 946 | /* Show the checkmark when checked */ 947 | .check-container input:checked ~ .checkmark:after { 948 | display: block; 949 | } 950 | /* Style the checkmark/indicator */ 951 | .check-container .checkmark:after { 952 | left: 3.5px; 953 | top: 0.25px; 954 | width: 5px; 955 | height: 10px; 956 | border: solid white; 957 | border-width: 0 2px 2px 0; 958 | -webkit-transform: rotate(45deg); 959 | -ms-transform: rotate(45deg); 960 | transform: rotate(40deg) scale(0.8); 961 | } 962 | #roam-sidebar-logo a { 963 | text-decoration: none; 964 | } 965 | #roam-sidebar-logo:hover { 966 | background-color: #10161a; 967 | } 968 | .rm-find-or-create-wrapper { 969 | position: relative; 970 | transition: all 200ms ease-in; 971 | } 972 | .rm-find-or-create-wrapper .bp3-transition-container { 973 | width: 100%; 974 | } 975 | .rm-find-or-create-wrapper .bp3-menu { 976 | max-width: none; 977 | max-height: 400px; 978 | } 979 | .rm-find-or-create-wrapper .rm-menu-item { 980 | padding: 6px; 981 | cursor: pointer; 982 | border-radius: 2px; 983 | } 984 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 985 | font-weight: bold; 986 | } 987 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 988 | color: #0d8050; 989 | } 990 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 991 | word-break: break-word; 992 | color: #8a9ba8; 993 | overflow-wrap: break-spaces; 994 | margin-left: -20px; 995 | } 996 | .rm-fill { 997 | width: 100%; 998 | } 999 | .rm-pages-sort-menu-item { 1000 | padding-right: 16px; 1001 | padding-left: 16px; 1002 | font-weight: bold; 1003 | } 1004 | .rm-pages-row-highlight { 1005 | background-color: #f5f8fa; 1006 | } 1007 | .rm-pages-row { 1008 | display: flex; 1009 | flex: 0 0 auto; 1010 | justify-content: space-between; 1011 | align-items: flex-start; 1012 | } 1013 | .rm-pages-row .rm-pages-sort-header { 1014 | display: flex; 1015 | flex: 0 0 auto; 1016 | align-items: center; 1017 | cursor: pointer; 1018 | } 1019 | .rm-pages-row .rm-pages-sort-header:hover { 1020 | text-decoration: underline; 1021 | } 1022 | .rm-pages-row .rm-pages-title-col { 1023 | padding: 8px 4px; 1024 | flex: 1 0 50%; 1025 | text-overflow: ellipsis; 1026 | } 1027 | .rm-pages-row .rm-pages-action-col { 1028 | text-align: right; 1029 | flex: 1 0 0; 1030 | padding: 8px 4px; 1031 | } 1032 | .rm-pages-row .rm-pages-col { 1033 | color: #8a9ba8; 1034 | padding: 8px 4px; 1035 | flex: 1 0 15%; 1036 | } 1037 | .rm-reference-item { 1038 | margin-top: 8px; 1039 | margin-right: 8px; 1040 | flex: 1 1 100%; 1041 | word-break: break-word; 1042 | background-color: #f5f8fa; 1043 | padding-right: 8px; 1044 | } 1045 | .rm-level1 { 1046 | font-family: 'Avenir Next'; /* RTB change */ 1047 | font-weight: 400; 1048 | font-size: 1.8em; 1049 | } 1050 | .rm-level1 textarea { 1051 | line-height: 1.2; 1052 | } 1053 | .rm-level1 .roam-block { 1054 | line-height: 1.2; 1055 | margin-top: -8px; /* RTB add */ 1056 | } 1057 | .rm-level2 { 1058 | font-family: 'Avenir Next' !important; /* RTB change */ 1059 | font-weight: 400; 1060 | font-size: 1.4em; 1061 | } 1062 | 1063 | /* RTB new section */ 1064 | .rm-level2 .roam-block { 1065 | margin-top: -8px; 1066 | } 1067 | 1068 | .rm-level3 { 1069 | font-weight: 500; 1070 | font-size: 1.2em; 1071 | color: #5c7080; 1072 | } 1073 | 1074 | /* RTB new section */ 1075 | .rm-level3 .roam-block { 1076 | margin-top: -5px; 1077 | } 1078 | 1079 | .rm-title1 { 1080 | word-break: break-word; 1081 | font-weight: 400; 1082 | } 1083 | .rm-histogram-table { 1084 | width: 100%; 1085 | margin-left: -8px; 1086 | box-sizing: border-box; 1087 | } 1088 | .rm-histogram-table td { 1089 | vertical-align: top; 1090 | min-width: 18px; 1091 | max-width: 18px; 1092 | border: 1px solid transparent; 1093 | } 1094 | .rm-histogram-table td .flex-v-box { 1095 | border-right: 0.2px solid #48aff0; 1096 | justify-content: flex-start; 1097 | align-items: center; 1098 | } 1099 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 1100 | margin-top: 0px; 1101 | margin-bottom: 0px; 1102 | padding-bottom: 0px; 1103 | } 1104 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 1105 | transform-origin: center; 1106 | background-size: cover; 1107 | border: 1px solid darkgray; 1108 | font-size: 0.7em; 1109 | height: 12px; 1110 | width: 12px; 1111 | margin: 0px; 1112 | padding: 0px; 1113 | border-radius: 100%; 1114 | background-repeat: no-repeat; 1115 | } 1116 | .slider .slider-cell { 1117 | border: 1px solid transparent; 1118 | flex: "1 0 100%"; 1119 | } 1120 | .slider .flex-v-box { 1121 | justify-content: flex-start; 1122 | align-items: center; 1123 | } 1124 | .slider .flex-v-box .bp3-popover-wrapper { 1125 | margin-top: 0px; 1126 | margin-bottom: 0px; 1127 | padding-bottom: 0px; 1128 | } 1129 | .slider .flex-v-box .table-edited-by-view { 1130 | transform-origin: center; 1131 | background-size: cover; 1132 | border: 1px solid darkgray; 1133 | font-size: 0.7em; 1134 | height: 12px; 1135 | width: 12px; 1136 | margin: 0px; 1137 | padding: 0px; 1138 | border-radius: 100%; 1139 | background-repeat: no-repeat; 1140 | } 1141 | .nowrap { 1142 | white-space: nowrap; 1143 | } 1144 | #rm-mobile-bar .rm-mobile-button { 1145 | flex: 1 0 0; 1146 | } 1147 | .roam-intense { 1148 | background-color: yellow; 1149 | margin: -2px; 1150 | padding: 2px; 1151 | } 1152 | .roam-highlight { 1153 | background-color: #fef09f; 1154 | margin: -2px; 1155 | padding: 2px; 1156 | } 1157 | .roam-bullet-closed { 1158 | background-color: #ced9e0; 1159 | } 1160 | #right-sidebar .roam-bullet-closed { 1161 | background-color: #a7b6c2; 1162 | } 1163 | .level1 { 1164 | font-family: Roboto, sans-serif; 1165 | font-weight: 200; 1166 | font-size: 40px; 1167 | color: #444444; 1168 | letter-spacing: normal; 1169 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1170 | } 1171 | .rm-pm-editor { 1172 | padding: 5px; 1173 | min-height: 100px; 1174 | outline: 0 !important; 1175 | } 1176 | .rm-pm-editor h1 { 1177 | font-family: 'Inter', sans-serif; 1178 | font-weight: 400; 1179 | font-size: 1.8em; 1180 | } 1181 | .rm-pm-editor h1 textarea { 1182 | line-height: 1.2; 1183 | } 1184 | .rm-pm-editor h1 .roam-block { 1185 | line-height: 1.2; 1186 | } 1187 | .rm-pm-editor h2 { 1188 | font-family: 'Inter', sans-serif !important; 1189 | font-weight: 400; 1190 | font-size: 1.4em; 1191 | } 1192 | .rm-pm-editor h3 { 1193 | font-weight: 500; 1194 | font-size: 1.2em; 1195 | color: #5c7080; 1196 | } 1197 | .rm-pm-editor img { 1198 | max-width: 100%; 1199 | } 1200 | .rm-pm-sub-editor-wrapper { 1201 | padding: 2.5px; 1202 | margin: 2px; 1203 | background-color: rgba(201, 201, 207, 0.1); 1204 | } 1205 | .rm-section-item { 1206 | width: -webkit-max-content; 1207 | width: -moz-max-content; 1208 | width: max-content; 1209 | } 1210 | .rm-section { 1211 | background-color: yellow; 1212 | } 1213 | .rm-section-selected { 1214 | background-color: lightblue; 1215 | } 1216 | .rm-edit-view-wrapper { 1217 | min-width: 21px; 1218 | } 1219 | .edited-by-view { 1220 | flex: 0 0 21px; 1221 | transform-origin: center; 1222 | background-size: cover; 1223 | border: 1px solid darkgray; 1224 | font-size: 0.7em; 1225 | margin-top: 6.5px; 1226 | margin-right: 6px; 1227 | margin-left: 0px; 1228 | height: 15px; 1229 | width: 15px; 1230 | border-radius: 100%; 1231 | background-repeat: no-repeat; 1232 | } 1233 | .roam-block-container { 1234 | max-width: 740px; 1235 | border-radius: 2px; 1236 | } 1237 | .block-highlight-grey { 1238 | background-color: #ced9e0; 1239 | } 1240 | .block-highlight-blue { 1241 | background-color: #7cccff; 1242 | } 1243 | .block-highlight-yellow { 1244 | background-color: yellow; 1245 | } 1246 | .block-bullet-view { 1247 | flex: 1 1 100%; 1248 | margin-left: 5px; 1249 | } 1250 | .block-border-left { 1251 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1252 | } 1253 | .text-align-left { 1254 | text-align: left; 1255 | } 1256 | .text-align-center { 1257 | text-align: center; 1258 | } 1259 | .text-align-right { 1260 | text-align: right; 1261 | } 1262 | .text-align-justify { 1263 | text-align: justify; 1264 | } 1265 | .roam-block { 1266 | min-height: calc(1.5em + 8px); 1267 | box-sizing: border-box; 1268 | white-space: pre-wrap; 1269 | overflow-wrap: break-word; 1270 | margin-top: -1px; 1271 | min-width: 100px; 1272 | width: 100%; 1273 | line-height: 1.5em; 1274 | cursor: text; 1275 | padding-top: 4px; 1276 | padding-bottom: 4px; 1277 | } 1278 | .roam-block .span-view { 1279 | box-sizing: border-box; 1280 | } 1281 | .rm-block-text { 1282 | max-width: 700px; /* RTB change: desired section width */ 1283 | } 1284 | .rm-block-input { 1285 | line-height: 1.5em; 1286 | width: 100%; 1287 | outline: 1px solid transparent; 1288 | overflow-wrap: break-spaces; 1289 | vertical-align: top; 1290 | margin-top: -1px; 1291 | background-color: transparent; 1292 | padding-top: 4px; 1293 | padding-bottom: 4px; 1294 | letter-spacing: inherit; 1295 | border: none; 1296 | resize: none; 1297 | } 1298 | .controls { 1299 | display: flex; 1300 | flex: 0 0 40px; 1301 | padding-top: 4px; 1302 | padding-left: 4px; 1303 | } 1304 | .controls .block-expand { 1305 | transform: scale(1); 1306 | transform-origin: center; 1307 | } 1308 | .controls .block-expand .rm-caret { 1309 | transition: all 100ms ease-in; 1310 | } 1311 | .controls .block-expand .rm-rotate-90 { 1312 | transform: rotate(-90deg); 1313 | } 1314 | .controls .opacity-none { 1315 | opacity: 0; 1316 | } 1317 | .controls .opacity-7 { 1318 | opacity: 0.7; 1319 | } 1320 | .controls .cursor-pointer { 1321 | cursor: pointer; 1322 | } 1323 | .controls .cursor-grab { 1324 | cursor: grab; 1325 | } 1326 | .controls .bk-light-grey { 1327 | background-color: #ced9e0; 1328 | } 1329 | .controls .simple-bullet-outer { 1330 | display: flex; 1331 | height: 13px; 1332 | width: 13px; 1333 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1334 | border-radius: 50%; 1335 | justify-content: center; 1336 | align-items: center; 1337 | } 1338 | .controls .simple-bullet-outer .simple-bullet-inner { 1339 | border-radius: 50%; 1340 | width: 5px; 1341 | height: 5px; 1342 | background-color: #3d76bf; /* RTB change: blue bullet */ 1343 | } 1344 | .version-bullet { 1345 | background-color: #a7b6c2; 1346 | border: none; 1347 | display: flex; 1348 | cursor: pointer; 1349 | flex-direction: column; 1350 | align-items: center; 1351 | justify-content: center; 1352 | padding: 0px; 1353 | transform: scale(0.9); 1354 | transform-origin: center; 1355 | margin-top: 2px; 1356 | margin-left: 0px; 1357 | height: 16px; 1358 | font-size: 9px; 1359 | color: white; 1360 | text-align: center; 1361 | min-height: 16px; 1362 | max-height: 16px; 1363 | min-width: 16px; 1364 | max-width: 16px; 1365 | border-radius: 16px; 1366 | } 1367 | .dnd-separator { 1368 | position: relative; 1369 | width: 100%; 1370 | } 1371 | .dnd-separator .dnd-drop-area { 1372 | position: absolute; 1373 | top: -11px; 1374 | height: 28px; 1375 | width: 100%; 1376 | } 1377 | .dnd-separator .dnd-drop-bar { 1378 | position: absolute; 1379 | z-index: 0; 1380 | top: -4px; 1381 | left: 20px; 1382 | width: 96%; 1383 | height: 4px; 1384 | border-radius: 10px; 1385 | background-color: #5c7080; 1386 | } 1387 | .rm-database { 1388 | background-color: #182026; 1389 | color: #ced9e0; 1390 | } 1391 | .rm-mentions-search-items { 1392 | padding: 8px; 1393 | } 1394 | .rm-mentions-search-items .rm-mentions-title { 1395 | font-size: 20px; 1396 | font-weight: lighter; 1397 | margin: 4px; 1398 | } 1399 | .rm-mentions-search-items .rm-mentions-search-item { 1400 | padding: 12px; 1401 | cursor: pointer; 1402 | background-color: #f5f8fa; 1403 | border: 1px solid #bfccd6; 1404 | } 1405 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1406 | background-color: #bfccd6; 1407 | } 1408 | .block-ref-count-button { 1409 | font-size: 0.9em; 1410 | } 1411 | .rm-grey-text { 1412 | color: #8a9ba8; 1413 | } 1414 | .rm-red-text { 1415 | color: red; 1416 | } 1417 | .flex-v-box { 1418 | display: flex; 1419 | flex: 0 0 auto; 1420 | flex-direction: column; 1421 | } 1422 | .flex-h-box { 1423 | display: flex; 1424 | flex: 0 0 auto; 1425 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1426 | } 1427 | .flex-align-start { 1428 | align-items: flex-start; 1429 | } 1430 | .flex-justify-start { 1431 | justify-content: flex-start; 1432 | } 1433 | .tags-input { 1434 | display: inline-block; 1435 | width: 10em; 1436 | margin: 0 0 4px; 1437 | padding: 4px 6px; 1438 | background: none; 1439 | border: 0; 1440 | outline: 0; 1441 | font: inherit; 1442 | color: inherit; 1443 | text-align: left; 1444 | text-shadow: none; 1445 | } 1446 | .tags-input:focus { 1447 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1448 | /* border: 2px solid white; */ 1449 | /* border-bottom-color: #448cca; */ 1450 | } 1451 | .tags-output { 1452 | display: inline-block; 1453 | margin-left: 4px; 1454 | } 1455 | .tags-output-item { 1456 | display: inline-block; 1457 | background-color: lightgrey; 1458 | cursor: pointer; 1459 | margin: 0 4px 4px 0; 1460 | padding: 4px 6px; 1461 | font-size: 10px; 1462 | border-radius: 4px; 1463 | } 1464 | .tags-output-item2 { 1465 | background-color: black; 1466 | display: inline-block; 1467 | text-decoration: none; 1468 | color: white; 1469 | cursor: pointer; 1470 | margin-left: 6px; 1471 | } 1472 | html { 1473 | margin: 0; 1474 | min-height: 100%; 1475 | } 1476 | body { 1477 | margin: 0; 1478 | padding: 0; 1479 | } 1480 | div { 1481 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1482 | font-size: 1em; 1483 | line-height: 1.5em; 1484 | margin: 0px; 1485 | padding: 0px; 1486 | } 1487 | textarea { 1488 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1489 | font-size: 1em; 1490 | line-height: 1.5em; 1491 | margin: 0px; 1492 | padding: 0px; 1493 | } 1494 | .xtra { 1495 | transform: scale(3); 1496 | border-radius: 50%; 1497 | padding: 4px; 1498 | } 1499 | .border { 1500 | border: 1px solid ; 1501 | } 1502 | .display-flex { 1503 | display: -webkit-flex; 1504 | display: flex; 1505 | } 1506 | .display-inline-flex { 1507 | display: -webkit-inline-flex; 1508 | display: inline-flex; 1509 | } 1510 | .react-resizable { 1511 | position: relative; 1512 | } 1513 | .react-resizable-handle { 1514 | position: absolute; 1515 | width: 20px; 1516 | height: 20px; 1517 | bottom: 0; 1518 | right: 0; 1519 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1520 | background-position: bottom right; 1521 | padding: 0 3px 3px 0; 1522 | background-repeat: no-repeat; 1523 | background-origin: content-box; 1524 | box-sizing: border-box; 1525 | cursor: se-resize; 1526 | } 1527 | .resize-card { 1528 | overflow-y: hidden; 1529 | } 1530 | .noselect { 1531 | -webkit-touch-callout: none; 1532 | /* iOS Safari */ 1533 | -webkit-user-select: none; 1534 | /* Safari */ 1535 | -khtml-user-select: none; 1536 | /* Konqueror HTML */ 1537 | -moz-user-select: none; 1538 | /* Firefox */ 1539 | -ms-user-select: none; 1540 | /* Internet Explorer/Edge */ 1541 | user-select: none; 1542 | /* Non-prefixed version, currently */ 1543 | } 1544 | 1545 | /* RTB additions below */ 1546 | 1547 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1548 | margin-top: 3px; 1549 | } 1550 | 1551 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1552 | margin-top: 3px; 1553 | } 1554 | 1555 | #roam-right-sidebar-content .rm-level1 .roam-block { 1556 | margin-top: -5px; 1557 | } 1558 | 1559 | #roam-right-sidebar-content .rm-level2 .roam-block { 1560 | margin-top: -5px; 1561 | } 1562 | 1563 | #roam-right-sidebar-content .rm-level3 .roam-block { 1564 | margin-top: -3px; 1565 | } 1566 | 1567 | #roam-right-sidebar-content { 1568 | font-size: 16px; 1569 | } 1570 | 1571 | #roam-right-sidebar-content .rm-block-ref { 1572 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1573 | /* color: #137CBD; Don't change color of full block ref */ 1574 | } 1575 | -------------------------------------------------------------------------------- /solarized-light-rg.css: -------------------------------------------------------------------------------- 1 | @import "../fonts/Inter/inter.css"; 2 | .loading-astrolabe { 3 | margin: auto; 4 | position: relative; 5 | width: 250px; 6 | height: 250px; 7 | } 8 | .loading-astrolabe .wand { 9 | position: absolute; 10 | width: 80%; 11 | top: 24.5%; 12 | left: 10%; 13 | animation: nav 3.5s linear infinite; 14 | } 15 | .loading-astrolabe .wand-small { 16 | position: absolute; 17 | width: 80%; 18 | top: 24.5%; 19 | left: 11.5%; 20 | } 21 | .loading-astrolabe .background { 22 | width: 100%; 23 | border: none; 24 | margin-left: -3px; 25 | } 26 | .spinner-astrolabe { 27 | margin: auto; 28 | margin-top: 100px; 29 | position: relative; 30 | width: 200px; 31 | height: 200px; 32 | } 33 | .spinner-astrolabe .wand { 34 | position: absolute; 35 | width: 80%; 36 | top: 24.5%; 37 | left: 10%; 38 | animation: nav 3.5s linear 20s; 39 | } 40 | .spinner-astrolabe .wand:hover { 41 | animation: nav 3.5s linear infinite; 42 | } 43 | .spinner-astrolabe .wand-small { 44 | position: absolute; 45 | width: 80%; 46 | top: 24.5%; 47 | left: 11.5%; 48 | } 49 | .spinner-astrolabe .background { 50 | width: 100%; 51 | border: none; 52 | margin-left: -3px; 53 | } 54 | @keyframes spin { 55 | 0% { 56 | transform: rotate(0deg); 57 | } 58 | 100% { 59 | transform: rotate(360deg); 60 | } 61 | } 62 | @keyframes nav { 63 | 0% { 64 | transform: rotate(0deg); 65 | } 66 | 15% { 67 | transform: rotate(-30deg); 68 | } 69 | 25% { 70 | transform: rotate(30deg); 71 | } 72 | 40% { 73 | transform: rotate(-15deg); 74 | } 75 | 50% { 76 | transform: rotate(40deg); 77 | } 78 | 70% { 79 | transform: rotate(-50deg); 80 | } 81 | 85% { 82 | transform: rotate(75deg); 83 | } 84 | 90% { 85 | transform: rotate(-180deg); 86 | } 87 | 100% { 88 | transform: rotate(-355deg); 89 | } 90 | } 91 | .spinner-square { 92 | box-sizing: border-box; 93 | width: 300px; 94 | height: 300px; 95 | background-color: grey; 96 | display: grid; 97 | grid-template-rows: 1fr 1fr; 98 | padding: 20px; 99 | grid-gap: 20px; 100 | z-index: 3; 101 | grid-template-columns: 1fr 1fr; 102 | cursor: pointer; 103 | } 104 | .spinner-square .spinner-square-front { 105 | background-color: white; 106 | z-index: 5; 107 | } 108 | .spinner-square .spinner-square-rotate { 109 | position: absolute; 110 | margin-left: 75px; 111 | margin-top: 75px; 112 | background-color: black; 113 | width: 150px; 114 | height: 150px; 115 | animation: spin 4.5s linear infinite; 116 | } 117 | .scrollbar { 118 | margin-left: 30px; 119 | float: left; 120 | height: 300px; 121 | width: 65px; 122 | background: #F5F5F5; 123 | overflow-y: scroll; 124 | margin-bottom: 25px; 125 | } 126 | #scroll-1::-webkit-scrollbar-track { 127 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 128 | border-radius: 8px; 129 | background-color: #F5F5F5; 130 | } 131 | #scroll-1::-webkit-scrollbar { 132 | width: 8px; 133 | background-color: #F5F5F5; 134 | } 135 | #scroll-1::-webkit-scrollbar-thumb { 136 | border-radius: 8px; 137 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 138 | background-color: #8A9BA8; 139 | } 140 | #home { 141 | padding: 50px; 142 | background-color: blue; 143 | color: #182026; 144 | } 145 | #home .icons { 146 | padding-left: 20px; 147 | } 148 | #home .icons .bp3-icon-large:hover { 149 | transform: scale(2); 150 | margin-left: 60px; 151 | } 152 | #home2 .dark { 153 | color: white; 154 | background-color: #343a40; 155 | } 156 | #home2 .container { 157 | margin: auto; 158 | max-width: 1110px; 159 | } 160 | #home2 .block { 161 | padding: 7em 0 0; 162 | } 163 | #home2 #header { 164 | width: 100%; 165 | position: fixed; 166 | top: 0; 167 | } 168 | #home2 #header .nav { 169 | display: flex; 170 | flex: 0 0 auto; 171 | align-items: center; 172 | padding: 10px 14px; 173 | } 174 | #home2 #header .nav .bp3-button { 175 | color: white; 176 | } 177 | #home2 #body { 178 | margin-top: 50px; 179 | } 180 | #home2 h1 { 181 | margin-bottom: 20px; 182 | } 183 | #home2 .row { 184 | display: flex; 185 | flex-wrap: wrap; 186 | } 187 | #home2 .col { 188 | margin: 24px auto; 189 | max-width: 300px; 190 | } 191 | #home2 #testimonials .testimonial { 192 | text-align: center; 193 | } 194 | #home2 #logo-graph { 195 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 196 | opacity: .4; 197 | display: grid; 198 | } 199 | #home2 #footer { 200 | padding-bottom: 7em; 201 | } 202 | #page { 203 | font-family: Segoe UI, Roboto, sans-serif; 204 | } 205 | #page1 { 206 | margin: 0 auto; 207 | padding-top: 4em; 208 | max-width: 40em; 209 | font-family: Segoe UI, Roboto, sans-serif; 210 | color: #808080; 211 | } 212 | #page1 h1, 213 | #page1 h2 { 214 | color: #4d4d4d; 215 | text-align: center; 216 | } 217 | #page1 .sub { 218 | width: 400px; 219 | margin: 8px auto; 220 | } 221 | #page1 .hero { 222 | margin: 0 auto; 223 | display: flex; 224 | justify-content: center; 225 | } 226 | #page1 .hero button { 227 | min-height: 50px; 228 | font-size: 1.8em; 229 | padding: 16px 20px; 230 | margin: 8px; 231 | } 232 | #page1 .zk { 233 | padding: 25px; 234 | } 235 | #page1 .quotes { 236 | max-width: 80vw; 237 | margin: 20px auto; 238 | } 239 | #page1 .quote { 240 | float: right; 241 | padding-top: 1em; 242 | } 243 | #secret-invite-wrapper { 244 | height: 100vh; 245 | background-color: black; 246 | overscroll-behavior: none; 247 | } 248 | #secret-invite-wrapper #secret-invite { 249 | position: relative; 250 | margin: 0 auto; 251 | padding-top: 4em; 252 | max-width: 40em; 253 | font-family: Segoe UI, Roboto, sans-serif; 254 | color: #b3b3b3; 255 | } 256 | #secret-invite-wrapper #secret-invite #secret-scroll { 257 | position: absolute; 258 | height: 90vh; 259 | overflow: scroll; 260 | } 261 | #secret-invite-wrapper #secret-invite h1, 262 | #secret-invite-wrapper #secret-invite h2 { 263 | color: #cccccc; 264 | text-align: center; 265 | } 266 | #secret-invite-wrapper #secret-invite .sub { 267 | width: 400px; 268 | margin: 8px auto; 269 | } 270 | #secret-invite-wrapper #secret-invite .hero { 271 | margin: 0 auto; 272 | display: flex; 273 | justify-content: center; 274 | } 275 | #secret-invite-wrapper #secret-invite .hero button { 276 | min-height: 50px; 277 | font-size: 1.8em; 278 | padding: 16px 20px; 279 | margin: 8px; 280 | } 281 | #secret-invite-wrapper #secret-invite .zk { 282 | padding: 25px; 283 | } 284 | #secret-invite-wrapper #secret-invite .quotes { 285 | max-width: 80vw; 286 | margin: 20px auto; 287 | } 288 | #secret-invite-wrapper #secret-invite .quote { 289 | float: right; 290 | padding-top: 1em; 291 | } 292 | html { 293 | scroll-behavior: smooth; 294 | } 295 | #landing-page * { 296 | margin: 0; 297 | padding: 0; 298 | } 299 | #landing-page #form { 300 | display: flex; 301 | flex-direction: column; 302 | align-items: center; 303 | padding: 12px; 304 | } 305 | #landing-page #form .ff { 306 | text-align: center; 307 | line-height: 1.8em; 308 | font-size: 1.2em; 309 | max-width: 400px; 310 | } 311 | #landing-page #form form { 312 | display: flex; 313 | flex-direction: column; 314 | } 315 | #landing-page #form form textarea { 316 | max-width: 70vw; 317 | width: 300px; 318 | resize: none; 319 | border: 1px solid lightgrey; 320 | padding: 4px; 321 | } 322 | #landing-page #form form input { 323 | max-width: 70vw; 324 | width: 300px; 325 | padding: 4px; 326 | margin: 8px; 327 | } 328 | #landing-page #header ul { 329 | display: flex; 330 | list-style-type: none; 331 | background-color: #293742; 332 | color: #f5f8fa; 333 | } 334 | #landing-page #header ul .logo { 335 | padding: 8px; 336 | } 337 | #landing-page #header ul li:hover { 338 | background-color: #182026; 339 | } 340 | #landing-page #header ul li a { 341 | display: block; 342 | padding: 8px; 343 | text-decoration: none; 344 | width: 100%; 345 | height: 100%; 346 | color: inherit; 347 | } 348 | #landing-page #cover { 349 | background-color: #182026; 350 | padding: 40px 0 0 0; 351 | min-height: 100vh; 352 | color: #ced9e0; 353 | display: flex; 354 | flex-direction: column; 355 | align-items: center; 356 | } 357 | #landing-page #cover .a { 358 | background-color: #ced9e0; 359 | color: #182026; 360 | border-radius: 4px; 361 | cursor: pointer; 362 | text-decoration: none; 363 | } 364 | #landing-page #cover .a:hover { 365 | color: #0e5a8a; 366 | } 367 | #landing-page #cover #tag-line { 368 | padding: 30px 40px 0px; 369 | } 370 | #landing-page #cover #tag-line ul { 371 | line-height: 32px; 372 | margin-left: 32px; 373 | margin-right: 16px; 374 | margin-top: 25px; 375 | font-size: 16px; 376 | } 377 | #landing-page #cover #endorsement { 378 | margin: 80px 20px 20px; 379 | } 380 | #landing-page #cover #callouts { 381 | margin-top: 10%; 382 | } 383 | #landing-page #cover #callouts button { 384 | font-size: 20px; 385 | padding: 20px; 386 | background-color: #182026; 387 | } 388 | #landing-page #cover #image-collection { 389 | flex: 1 1 400px; 390 | max-width: 500px; 391 | background-color: #ced9e0; 392 | color: #293742; 393 | padding: 40px 40px 40px; 394 | display: flex; 395 | flex-direction: column; 396 | align-items: center; 397 | } 398 | #landing-page #cover #image-collection #images { 399 | color: #182026; 400 | padding: 40px 0px; 401 | display: grid; 402 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 403 | grid-column-gap: 20px; 404 | justify-items: start; 405 | align-items: center; 406 | } 407 | #landing-page #cover #image-collection #images img { 408 | margin: 8px; 409 | max-height: 70px; 410 | max-width: 100%; 411 | } 412 | #landing-page #features { 413 | padding: 40px 40px; 414 | background-color: #293742; 415 | border-top: 1px solid #5c7080; 416 | color: #d8e1e8; 417 | flex-direction: column; 418 | } 419 | #landing-page #features ul { 420 | padding-left: 16px; 421 | } 422 | #landing-page #features .feature { 423 | margin: 40px 0px; 424 | display: flex; 425 | justify-content: center; 426 | flex-wrap: wrap; 427 | } 428 | #landing-page #features .feature .feature-content { 429 | width: 400px; 430 | margin: 40px; 431 | } 432 | #landing-page #features .feature .feature-image { 433 | min-height: 400px; 434 | min-width: 400px; 435 | background-color: grey; 436 | } 437 | .rm-emoji-block-view { 438 | display: flex; 439 | flex: 0 0 auto; 440 | flex-wrap: wrap; 441 | margin-left: 40px; 442 | align-items: center; 443 | } 444 | .rm-emoji-block-view .rm-emoji-button { 445 | display: flex; 446 | flex: 0 0 auto; 447 | align-items: center; 448 | cursor: pointer; 449 | border-radius: 20px; 450 | height: 20px; 451 | margin: 0px 4px 4px 0px; 452 | } 453 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 454 | height: 16px; 455 | margin: 0px 4px; 456 | } 457 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 458 | height: 100%; 459 | font-size: 10px; 460 | margin-right: 6px; 461 | font-weight: 500; 462 | } 463 | .rm-emoji-tooltip { 464 | max-width: 200px; 465 | overflow-wrap: break-word; 466 | font-size: 12px; 467 | color: white; 468 | font-weight: 600; 469 | } 470 | .kanban-board { 471 | background-color: #a7b6c2; 472 | min-width: 100%; 473 | min-height: 48px; 474 | padding: 8px; 475 | overflow-x: scroll; 476 | } 477 | .kanban-column { 478 | background-color: #ededed; 479 | margin: 0px 4px 0px 4px; 480 | padding: 4px; 481 | min-width: 200px; 482 | } 483 | .kanban-title { 484 | text-align: center; 485 | } 486 | .kanban-card { 487 | background-color: white; 488 | margin: 8px; 489 | padding: 8px; 490 | } 491 | html { 492 | font-family: 'Inter', sans-serif; 493 | } 494 | @supports (font-variation-settings: normal) { 495 | html { 496 | font-family: 'Inter var', sans-serif; 497 | } 498 | } 499 | body { 500 | overscroll-behavior: none; 501 | } 502 | ::-webkit-scrollbar { 503 | width: 0px; 504 | background: transparent; 505 | } 506 | * { 507 | box-sizing: border-box; 508 | } 509 | *:focus { 510 | outline-width: 0; 511 | } 512 | .roam-lift { 513 | z-index: 10000; 514 | } 515 | .CodeMirror { 516 | height: auto !important; 517 | } 518 | @media (max-width: 500px) { 519 | .bp3-omnibar { 520 | max-width: 310px; 521 | left: calc((100vw - 310px) / 2); 522 | } 523 | } 524 | .rm-line { 525 | background-color: #ced9e0; 526 | flex: 0 0 1px; 527 | } 528 | .roam-body { 529 | height: 100vh; 530 | overflow: hidden; 531 | position: relative; 532 | background-color: #fbfbfb; /* RTB add: bear color */ 533 | } 534 | .roam-body .roam-app { 535 | height: 100%; 536 | width: 100%; 537 | position: relative; 538 | -webkit-overflow-scrolling: touch; 539 | color: #202b33; 540 | } 541 | .roam-body .roam-app h1 { 542 | color: #202b33; 543 | } 544 | .roam-body .roam-app .roam-sidebar-container { 545 | position: absolute; 546 | top: 45px; 547 | left: -232px; 548 | width: 232px; 549 | bottom: 45px; 550 | z-index: 999; 551 | transition: all 200ms ease-in; 552 | background-color: #2f3437; 553 | background-color: #182026; 554 | } 555 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 556 | position: absolute; 557 | z-index: 99; 558 | top: 0px; 559 | right: -8px; 560 | bottom: 0px; 561 | width: 0px; 562 | } 563 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 564 | position: absolute; 565 | top: 0; 566 | padding: 16px; 567 | } 568 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 569 | height: 100%; 570 | position: relative; 571 | } 572 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 573 | padding: 8px 20px; 574 | font-weight: bold; 575 | cursor: pointer; 576 | font-size: 14px; 577 | color: #5c7080; 578 | } 579 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 580 | color: #f5f8fa; 581 | background-color: #10161a; 582 | } 583 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 584 | color: #5c7080; 585 | } 586 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 587 | overflow-y: auto; 588 | } 589 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 590 | text-decoration: none; 591 | cursor: pointer; 592 | font-size: 14px; 593 | padding: 8px 0px 8px 4px; 594 | color: whitesmoke; 595 | } 596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 597 | color: #f5f8fa; 598 | background-color: #10161a; 599 | } 600 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 601 | padding: 8px; 602 | margin-bottom: 8px; 603 | font-size: 14px; 604 | font-weight: bold; 605 | } 606 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 607 | margin-top: 64px; 608 | width: 100%; 609 | transition: all 150ms ease-in; 610 | position: absolute; 611 | overflow: scroll; 612 | } 613 | .roam-body .roam-app .roam-main { 614 | width: 100%; 615 | display: flex; 616 | 617 | } 618 | .roam-body .roam-app .roam-main .roam-article { 619 | position: relative; 620 | padding: 16px 42px 120px; 621 | font-size: 20px; /* RTB add: larger font */ 622 | color: #444444; /* RTB add: roam color */ 623 | } 624 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 625 | margin-bottom: 32px; 626 | } 627 | #right-sidebar .rm-reference-container { 628 | padding-top: 0px; 629 | border-top: none; 630 | } 631 | .roam-block .rm-reference-container { 632 | padding-top: 0px; 633 | border-top: none; 634 | } 635 | .roam-block .rm-reference-main { 636 | border: 1px solid #ced9e0; 637 | padding: 0px 16px 12px 16px; 638 | } 639 | .pointer { 640 | cursor: pointer; 641 | } 642 | .roam-topbar { 643 | height: 45px; 644 | position: fixed; 645 | width: 100%; 646 | z-index: 101; 647 | background-color: #fbfbfb; /* RTB change: bear background */ 648 | padding-right: 16px; 649 | padding-left: 16px; 650 | display: flex; 651 | flex-direction: column; 652 | justify-content: center; 653 | } 654 | .trunc { 655 | max-width: 120px; 656 | white-space: nowrap; 657 | text-overflow: ellipsis; 658 | overflow: hidden; 659 | } 660 | .bblack { 661 | border: 1px solid black; 662 | background-color: lightgrey; 663 | } 664 | .roam-popup-container { 665 | display: flex; 666 | flex-direction: column; 667 | overflow: scroll; 668 | } 669 | .roam-popup-container .roam-popup-content { 670 | position: absolute; 671 | top: 34px; 672 | bottom: 10px; 673 | width: 100%; 674 | overflow-y: scroll; 675 | } 676 | .rm-input { 677 | width: 100%; 678 | outline: 1px solid transparent; 679 | vertical-align: top; 680 | background-color: transparent; 681 | border: none; 682 | resize: none; 683 | } 684 | .rm-input::-webkit-input-placeholder { 685 | color: #ced9e0; 686 | } 687 | .rm-input:-moz-placeholder { 688 | /* Firefox 18- */ 689 | color: #ced9e0; 690 | } 691 | .rm-input::-moz-placeholder { 692 | /* Firefox 19+ */ 693 | color: #ced9e0; 694 | } 695 | .rm-input:-ms-input-placeholder { 696 | color: #ced9e0; 697 | } 698 | .rm-input::placeholder { 699 | color: #ced9e0; 700 | } 701 | .rm-title-textarea { 702 | width: 100%; 703 | outline: 1px solid transparent; 704 | vertical-align: top; 705 | line-height: 1.3em; 706 | background-color: transparent; 707 | border: none; 708 | resize: none; 709 | } 710 | .rm-title-textarea::-webkit-input-placeholder { 711 | color: #ced9e0; 712 | } 713 | .rm-title-textarea:-moz-placeholder { 714 | /* Firefox 18- */ 715 | color: #ced9e0; 716 | } 717 | .rm-title-textarea::-moz-placeholder { 718 | /* Firefox 19+ */ 719 | color: #ced9e0; 720 | } 721 | .rm-title-textarea:-ms-input-placeholder { 722 | color: #ced9e0; 723 | } 724 | .rm-title-textarea::placeholder { 725 | color: #ced9e0; 726 | } 727 | .rm-title-untitled { 728 | color: #ced9e0; 729 | } 730 | .rm-title-display { 731 | line-height: 1.3em; 732 | font-weight: 450; 733 | word-break: break-word; 734 | min-width: 100px; 735 | width: 100%; 736 | cursor: text; 737 | outline: 1px solid transparent; 738 | } 739 | .roam-log-container .roam-log-page { 740 | border-top: 1px solid #738694; 741 | margin-top: 40px; 742 | padding-top: 40px; 743 | padding-bottom: 16px; 744 | margin-bottom: 16px; 745 | } 746 | .roam-log-container .roam-log-page:first-child { 747 | border: 0px solid blue; 748 | margin-top: 0px; 749 | min-height: 500px; 750 | padding-top: 0px; 751 | } 752 | .roam-log-container .roam-log-preview { 753 | color: #8a9ba8; 754 | } 755 | .roam-log-container .roam-log-preview h1 { 756 | color: #8a9ba8; 757 | } 758 | .roam-log-container .roam-log-preview:hover { 759 | background-color: grey; 760 | } 761 | #buffer { 762 | display: flex; 763 | flex-direction: column; 764 | } 765 | #buffer .help-title { 766 | color: #f5f8fa; 767 | text-align: center; 768 | font-size: 16px; 769 | font-weight: bold; 770 | } 771 | #buffer .help-sub-title { 772 | color: #e1e8ed; 773 | text-align: center; 774 | } 775 | #buffer .help-item-text { 776 | color: #e1e8ed; 777 | } 778 | #buffer .help-item-label { 779 | opacity: 0.6; 780 | color: #e1e8ed; 781 | } 782 | .roam-table { 783 | padding-bottom: 24px; 784 | overflow-x: scroll; 785 | } 786 | .roam-table th, 787 | .roam-table td, 788 | .roam-table tr { 789 | font-size: 12px; 790 | min-width: 100px; 791 | max-height: 20px; 792 | padding: 8px 16px; 793 | margin: 0p; 794 | border: 1px solid grey; 795 | } 796 | .roam-table td { 797 | max-height: 20px; 798 | overflow: scroll; 799 | } 800 | .import-table { 801 | padding-bottom: 24px; 802 | max-width: 100%; 803 | } 804 | .import-table table { 805 | width: 100%; 806 | } 807 | .import-table th, 808 | .import-table td, 809 | .import-table tr { 810 | font-size: 12px; 811 | max-height: 20px; 812 | padding: 8px 16px; 813 | margin: 0p; 814 | border: 1px solid grey; 815 | } 816 | .import-table td { 817 | max-height: 20px; 818 | } 819 | .import-table td .import-preview { 820 | white-space: pre-wrap; 821 | word-break: break-word; 822 | max-width: 50px; 823 | } 824 | #info { 825 | padding: 8px 0px; 826 | margin: 0px 8px; 827 | font-size: 12px; 828 | } 829 | #info table { 830 | margin: 0 auto; 831 | } 832 | #info table, 833 | #info th, 834 | #info td { 835 | padding: 8px; 836 | margin: 0p; 837 | border: 1px solid grey; 838 | } 839 | .hoverparent:hover .hoveronly { 840 | opacity: 1; 841 | } 842 | .hoveronly { 843 | opacity: 0; 844 | } 845 | .hoveronly:hover { 846 | opacity: 1; 847 | } 848 | .tiny { 849 | font-size: 7px; 850 | } 851 | .CodeMirror { 852 | font-family: monospace; 853 | } 854 | .CodeMirror .CodeMirror-code pre { 855 | font-family: monospace; 856 | box-shadow: none; 857 | } 858 | .block-mention { 859 | margin: 4px 8px 4px 0px; 860 | cursor: pointer; 861 | padding: 8px; 862 | background-color: #bfccd6; 863 | } 864 | .block-mention:hover { 865 | background-color: #a7b6c2; 866 | } 867 | .rm-page-ref { 868 | cursor: pointer; 869 | } 870 | .rm-page-ref:hover { 871 | text-decoration: underline; 872 | } 873 | .rm-page-ref-tag { 874 | color: #a7b6c2; 875 | } 876 | .rm-page-ref-brackets { 877 | color: #a7b6c2; 878 | } 879 | .rm-page-ref-link-color { 880 | color: #cd5654; /* red graphit color */ 881 | } 882 | .rm-page-ref-namespace-color { 883 | color: green; 884 | } 885 | .rm-block-ref { 886 | padding: 4px 2px; 887 | margin: -4px 0px; 888 | font-size: 20px; /* RTB change: block ref's same size as others */ 889 | display: block; /* default inline */ 890 | border-bottom: 1px solid #ced9e0; 891 | cursor: alias; 892 | padding-left: 0px; /* RTB add: align to left */ 893 | } 894 | .rm-block-ref:hover { 895 | background-color: #f5f8fa; 896 | } 897 | .rm-reference-container { 898 | border-top: 2px solid #202b33; 899 | padding-top: 12px; 900 | margin-bottom: 8px; 901 | } 902 | .check-container { 903 | display: inline-block; 904 | position: relative; 905 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 906 | margin-bottom: 10px; 907 | cursor: pointer; 908 | font-size: 22px; 909 | -webkit-user-select: none; 910 | -moz-user-select: none; 911 | -ms-user-select: none; 912 | user-select: none; 913 | vertical-align: bottom; 914 | top: -12px; /* RTB change: align checkbox for updated spacing */ 915 | } 916 | /* Hide the browser's default checkbox */ 917 | .check-container input { 918 | position: absolute; 919 | opacity: 0; 920 | cursor: pointer; 921 | height: 0; 922 | width: 0; 923 | } 924 | /* Create a custom checkbox */ 925 | .checkmark { 926 | position: absolute; 927 | top: 0px; 928 | left: 0; 929 | height: 12px; 930 | border-radius: 2px; 931 | width: 12px; 932 | border: 1px solid #a7b6c2; 933 | } 934 | /* On mouse-over, add a grey background color */ 935 | /* When the checkbox is checked, add a blue background */ 936 | .check-container input:checked ~ .checkmark { 937 | background-color: #c75d62; /* red graphite */ 938 | border: none; 939 | } 940 | /* Create the checkmark/indicator (hidden when not checked) */ 941 | .checkmark:after { 942 | content: ""; 943 | position: absolute; 944 | display: none; 945 | } 946 | /* Show the checkmark when checked */ 947 | .check-container input:checked ~ .checkmark:after { 948 | display: block; 949 | } 950 | /* Style the checkmark/indicator */ 951 | .check-container .checkmark:after { 952 | left: 3.5px; 953 | top: 0.25px; 954 | width: 5px; 955 | height: 10px; 956 | border: solid white; 957 | border-width: 0 2px 2px 0; 958 | -webkit-transform: rotate(45deg); 959 | -ms-transform: rotate(45deg); 960 | transform: rotate(40deg) scale(0.8); 961 | } 962 | #roam-sidebar-logo a { 963 | text-decoration: none; 964 | } 965 | #roam-sidebar-logo:hover { 966 | /* background-color: #10161a; */ 967 | } 968 | .rm-find-or-create-wrapper { 969 | position: relative; 970 | transition: all 200ms ease-in; 971 | } 972 | .rm-find-or-create-wrapper .bp3-transition-container { 973 | width: 100%; 974 | } 975 | .rm-find-or-create-wrapper .bp3-menu { 976 | max-width: none; 977 | max-height: 400px; 978 | } 979 | .rm-find-or-create-wrapper .rm-menu-item { 980 | padding: 6px; 981 | cursor: pointer; 982 | border-radius: 2px; 983 | } 984 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 985 | font-weight: bold; 986 | } 987 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 988 | color: #0d8050; 989 | } 990 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 991 | word-break: break-word; 992 | color: #8a9ba8; 993 | overflow-wrap: break-spaces; 994 | margin-left: -20px; 995 | } 996 | .rm-fill { 997 | width: 100%; 998 | } 999 | .rm-pages-sort-menu-item { 1000 | padding-right: 16px; 1001 | padding-left: 16px; 1002 | font-weight: bold; 1003 | } 1004 | .rm-pages-row-highlight { 1005 | background-color: #f5f8fa; 1006 | } 1007 | .rm-pages-row { 1008 | display: flex; 1009 | flex: 0 0 auto; 1010 | justify-content: space-between; 1011 | align-items: flex-start; 1012 | } 1013 | .rm-pages-row .rm-pages-sort-header { 1014 | display: flex; 1015 | flex: 0 0 auto; 1016 | align-items: center; 1017 | cursor: pointer; 1018 | } 1019 | .rm-pages-row .rm-pages-sort-header:hover { 1020 | text-decoration: underline; 1021 | } 1022 | .rm-pages-row .rm-pages-title-col { 1023 | padding: 8px 4px; 1024 | flex: 1 0 50%; 1025 | text-overflow: ellipsis; 1026 | } 1027 | .rm-pages-row .rm-pages-action-col { 1028 | text-align: right; 1029 | flex: 1 0 0; 1030 | padding: 8px 4px; 1031 | } 1032 | .rm-pages-row .rm-pages-col { 1033 | color: #8a9ba8; 1034 | padding: 8px 4px; 1035 | flex: 1 0 15%; 1036 | } 1037 | .rm-reference-item { 1038 | margin-top: 8px; 1039 | margin-right: 8px; 1040 | flex: 1 1 100%; 1041 | word-break: break-word; 1042 | background-color: #f5f8fa; 1043 | padding-right: 8px; 1044 | } 1045 | .rm-level1 { 1046 | font-family: 'Avenir Next'; /* RTB change */ 1047 | font-weight: 400; 1048 | font-size: 1.8em; 1049 | } 1050 | .rm-level1 textarea { 1051 | line-height: 1.2; 1052 | } 1053 | .rm-level1 .roam-block { 1054 | line-height: 1.2; 1055 | margin-top: -8px; /* RTB add */ 1056 | } 1057 | .rm-level2 { 1058 | font-family: 'Avenir Next' !important; /* RTB change */ 1059 | font-weight: 400; 1060 | font-size: 1.4em; 1061 | } 1062 | 1063 | /* RTB new section */ 1064 | .rm-level2 .roam-block { 1065 | margin-top: -8px; 1066 | } 1067 | 1068 | .rm-level3 { 1069 | font-weight: 500; 1070 | font-size: 1.2em; 1071 | color: #5c7080; 1072 | } 1073 | 1074 | /* RTB new section */ 1075 | .rm-level3 .roam-block { 1076 | margin-top: -5px; 1077 | } 1078 | 1079 | .rm-title1 { 1080 | word-break: break-word; 1081 | font-weight: 400; 1082 | } 1083 | .rm-histogram-table { 1084 | width: 100%; 1085 | margin-left: -8px; 1086 | box-sizing: border-box; 1087 | } 1088 | .rm-histogram-table td { 1089 | vertical-align: top; 1090 | min-width: 18px; 1091 | max-width: 18px; 1092 | border: 1px solid transparent; 1093 | } 1094 | .rm-histogram-table td .flex-v-box { 1095 | border-right: 0.2px solid #48aff0; 1096 | justify-content: flex-start; 1097 | align-items: center; 1098 | } 1099 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 1100 | margin-top: 0px; 1101 | margin-bottom: 0px; 1102 | padding-bottom: 0px; 1103 | } 1104 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 1105 | transform-origin: center; 1106 | background-size: cover; 1107 | border: 1px solid darkgray; 1108 | font-size: 0.7em; 1109 | height: 12px; 1110 | width: 12px; 1111 | margin: 0px; 1112 | padding: 0px; 1113 | border-radius: 100%; 1114 | background-repeat: no-repeat; 1115 | } 1116 | .slider .slider-cell { 1117 | border: 1px solid transparent; 1118 | flex: "1 0 100%"; 1119 | } 1120 | .slider .flex-v-box { 1121 | justify-content: flex-start; 1122 | align-items: center; 1123 | } 1124 | .slider .flex-v-box .bp3-popover-wrapper { 1125 | margin-top: 0px; 1126 | margin-bottom: 0px; 1127 | padding-bottom: 0px; 1128 | } 1129 | .slider .flex-v-box .table-edited-by-view { 1130 | transform-origin: center; 1131 | background-size: cover; 1132 | border: 1px solid darkgray; 1133 | font-size: 0.7em; 1134 | height: 12px; 1135 | width: 12px; 1136 | margin: 0px; 1137 | padding: 0px; 1138 | border-radius: 100%; 1139 | background-repeat: no-repeat; 1140 | } 1141 | .nowrap { 1142 | white-space: nowrap; 1143 | } 1144 | #rm-mobile-bar .rm-mobile-button { 1145 | flex: 1 0 0; 1146 | } 1147 | .roam-intense { 1148 | background-color: yellow; 1149 | margin: -2px; 1150 | padding: 2px; 1151 | } 1152 | .roam-highlight { 1153 | background-color: #fef09f; 1154 | margin: -2px; 1155 | padding: 2px; 1156 | } 1157 | .roam-bullet-closed { 1158 | background-color: #ced9e0; 1159 | } 1160 | #right-sidebar .roam-bullet-closed { 1161 | background-color: #a7b6c2; 1162 | } 1163 | .level1 { 1164 | font-family: Roboto, sans-serif; 1165 | font-weight: 200; 1166 | font-size: 40px; 1167 | color: #444444; 1168 | letter-spacing: normal; 1169 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1170 | } 1171 | .rm-pm-editor { 1172 | padding: 5px; 1173 | min-height: 100px; 1174 | outline: 0 !important; 1175 | } 1176 | .rm-pm-editor h1 { 1177 | font-family: 'Inter', sans-serif; 1178 | font-weight: 400; 1179 | font-size: 1.8em; 1180 | } 1181 | .rm-pm-editor h1 textarea { 1182 | line-height: 1.2; 1183 | } 1184 | .rm-pm-editor h1 .roam-block { 1185 | line-height: 1.2; 1186 | } 1187 | .rm-pm-editor h2 { 1188 | font-family: 'Inter', sans-serif !important; 1189 | font-weight: 400; 1190 | font-size: 1.4em; 1191 | } 1192 | .rm-pm-editor h3 { 1193 | font-weight: 500; 1194 | font-size: 1.2em; 1195 | color: #5c7080; 1196 | } 1197 | .rm-pm-editor img { 1198 | max-width: 100%; 1199 | } 1200 | .rm-pm-sub-editor-wrapper { 1201 | padding: 2.5px; 1202 | margin: 2px; 1203 | background-color: rgba(201, 201, 207, 0.1); 1204 | } 1205 | .rm-section-item { 1206 | width: -webkit-max-content; 1207 | width: -moz-max-content; 1208 | width: max-content; 1209 | } 1210 | .rm-section { 1211 | background-color: yellow; 1212 | } 1213 | .rm-section-selected { 1214 | background-color: lightblue; 1215 | } 1216 | .rm-edit-view-wrapper { 1217 | min-width: 21px; 1218 | } 1219 | .edited-by-view { 1220 | flex: 0 0 21px; 1221 | transform-origin: center; 1222 | background-size: cover; 1223 | border: 1px solid darkgray; 1224 | font-size: 0.7em; 1225 | margin-top: 6.5px; 1226 | margin-right: 6px; 1227 | margin-left: 0px; 1228 | height: 15px; 1229 | width: 15px; 1230 | border-radius: 100%; 1231 | background-repeat: no-repeat; 1232 | } 1233 | .roam-block-container { 1234 | max-width: 740px; 1235 | border-radius: 2px; 1236 | } 1237 | .block-highlight-grey { 1238 | background-color: #ced9e0; 1239 | } 1240 | .block-highlight-blue { 1241 | background-color: #7cccff; 1242 | } 1243 | .block-highlight-yellow { 1244 | background-color: yellow; 1245 | } 1246 | .block-bullet-view { 1247 | flex: 1 1 100%; 1248 | margin-left: 5px; 1249 | } 1250 | .block-border-left { 1251 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1252 | } 1253 | .text-align-left { 1254 | text-align: left; 1255 | } 1256 | .text-align-center { 1257 | text-align: center; 1258 | } 1259 | .text-align-right { 1260 | text-align: right; 1261 | } 1262 | .text-align-justify { 1263 | text-align: justify; 1264 | } 1265 | .roam-block { 1266 | min-height: calc(1.5em + 8px); 1267 | box-sizing: border-box; 1268 | white-space: pre-wrap; 1269 | overflow-wrap: break-word; 1270 | margin-top: -1px; 1271 | min-width: 100px; 1272 | width: 100%; 1273 | line-height: 1.5em; 1274 | cursor: text; 1275 | padding-top: 4px; 1276 | padding-bottom: 4px; 1277 | } 1278 | .roam-block .span-view { 1279 | box-sizing: border-box; 1280 | } 1281 | .rm-block-text { 1282 | max-width: 700px; /* RTB change: desired section width */ 1283 | } 1284 | .rm-block-input { 1285 | line-height: 1.5em; 1286 | width: 100%; 1287 | outline: 1px solid transparent; 1288 | overflow-wrap: break-spaces; 1289 | vertical-align: top; 1290 | margin-top: -1px; 1291 | background-color: transparent; 1292 | padding-top: 4px; 1293 | padding-bottom: 4px; 1294 | letter-spacing: inherit; 1295 | border: none; 1296 | resize: none; 1297 | } 1298 | .controls { 1299 | display: flex; 1300 | flex: 0 0 40px; 1301 | padding-top: 4px; 1302 | padding-left: 4px; 1303 | } 1304 | .controls .block-expand { 1305 | transform: scale(1); 1306 | transform-origin: center; 1307 | } 1308 | .controls .block-expand .rm-caret { 1309 | transition: all 100ms ease-in; 1310 | } 1311 | .controls .block-expand .rm-rotate-90 { 1312 | transform: rotate(-90deg); 1313 | } 1314 | .controls .opacity-none { 1315 | opacity: 0; 1316 | } 1317 | .controls .opacity-7 { 1318 | opacity: 0.7; 1319 | } 1320 | .controls .cursor-pointer { 1321 | cursor: pointer; 1322 | } 1323 | .controls .cursor-grab { 1324 | cursor: grab; 1325 | } 1326 | .controls .bk-light-grey { 1327 | background-color: #ced9e0; 1328 | } 1329 | .controls .simple-bullet-outer { 1330 | display: flex; 1331 | height: 13px; 1332 | width: 13px; 1333 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1334 | border-radius: 50%; 1335 | justify-content: center; 1336 | align-items: center; 1337 | } 1338 | .controls .simple-bullet-outer .simple-bullet-inner { 1339 | border-radius: 50%; 1340 | width: 5px; 1341 | height: 5px; 1342 | background-color: #c75d62; /* RTB change: red graphite bullet */ 1343 | } 1344 | .version-bullet { 1345 | background-color: #a7b6c2; 1346 | border: none; 1347 | display: flex; 1348 | cursor: pointer; 1349 | flex-direction: column; 1350 | align-items: center; 1351 | justify-content: center; 1352 | padding: 0px; 1353 | transform: scale(0.9); 1354 | transform-origin: center; 1355 | margin-top: 2px; 1356 | margin-left: 0px; 1357 | height: 16px; 1358 | font-size: 9px; 1359 | color: white; 1360 | text-align: center; 1361 | min-height: 16px; 1362 | max-height: 16px; 1363 | min-width: 16px; 1364 | max-width: 16px; 1365 | border-radius: 16px; 1366 | } 1367 | .dnd-separator { 1368 | position: relative; 1369 | width: 100%; 1370 | } 1371 | .dnd-separator .dnd-drop-area { 1372 | position: absolute; 1373 | top: -11px; 1374 | height: 28px; 1375 | width: 100%; 1376 | } 1377 | .dnd-separator .dnd-drop-bar { 1378 | position: absolute; 1379 | z-index: 0; 1380 | top: -4px; 1381 | left: 20px; 1382 | width: 96%; 1383 | height: 4px; 1384 | border-radius: 10px; 1385 | background-color: #5c7080; 1386 | } 1387 | .rm-database { 1388 | background-color: #182026; 1389 | color: #ced9e0; 1390 | } 1391 | .rm-mentions-search-items { 1392 | padding: 8px; 1393 | } 1394 | .rm-mentions-search-items .rm-mentions-title { 1395 | font-size: 20px; 1396 | font-weight: lighter; 1397 | margin: 4px; 1398 | } 1399 | .rm-mentions-search-items .rm-mentions-search-item { 1400 | padding: 12px; 1401 | cursor: pointer; 1402 | background-color: #f5f8fa; 1403 | border: 1px solid #bfccd6; 1404 | } 1405 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1406 | background-color: #bfccd6; 1407 | } 1408 | .block-ref-count-button { 1409 | font-size: 0.9em; 1410 | } 1411 | .rm-grey-text { 1412 | color: #8a9ba8; 1413 | } 1414 | .rm-red-text { 1415 | color: red; 1416 | } 1417 | .flex-v-box { 1418 | display: flex; 1419 | flex: 0 0 auto; 1420 | flex-direction: column; 1421 | } 1422 | .flex-h-box { 1423 | display: flex; 1424 | flex: 0 0 auto; 1425 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1426 | } 1427 | .flex-align-start { 1428 | align-items: flex-start; 1429 | } 1430 | .flex-justify-start { 1431 | justify-content: flex-start; 1432 | } 1433 | .tags-input { 1434 | display: inline-block; 1435 | width: 10em; 1436 | margin: 0 0 4px; 1437 | padding: 4px 6px; 1438 | background: none; 1439 | border: 0; 1440 | outline: 0; 1441 | font: inherit; 1442 | color: inherit; 1443 | text-align: left; 1444 | text-shadow: none; 1445 | } 1446 | .tags-input:focus { 1447 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1448 | /* border: 2px solid white; */ 1449 | /* border-bottom-color: #448cca; */ 1450 | } 1451 | .tags-output { 1452 | display: inline-block; 1453 | margin-left: 4px; 1454 | } 1455 | .tags-output-item { 1456 | display: inline-block; 1457 | background-color: lightgrey; 1458 | cursor: pointer; 1459 | margin: 0 4px 4px 0; 1460 | padding: 4px 6px; 1461 | font-size: 10px; 1462 | border-radius: 4px; 1463 | } 1464 | .tags-output-item2 { 1465 | background-color: black; 1466 | display: inline-block; 1467 | text-decoration: none; 1468 | color: white; 1469 | cursor: pointer; 1470 | margin-left: 6px; 1471 | } 1472 | html { 1473 | margin: 0; 1474 | min-height: 100%; 1475 | } 1476 | body { 1477 | margin: 0; 1478 | padding: 0; 1479 | } 1480 | div { 1481 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1482 | font-size: 1em; 1483 | line-height: 1.5em; 1484 | margin: 0px; 1485 | padding: 0px; 1486 | } 1487 | textarea { 1488 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1489 | font-size: 1em; 1490 | line-height: 1.5em; 1491 | margin: 0px; 1492 | padding: 0px; 1493 | } 1494 | .xtra { 1495 | transform: scale(3); 1496 | border-radius: 50%; 1497 | padding: 4px; 1498 | } 1499 | .border { 1500 | border: 1px solid ; 1501 | } 1502 | .display-flex { 1503 | display: -webkit-flex; 1504 | display: flex; 1505 | } 1506 | .display-inline-flex { 1507 | display: -webkit-inline-flex; 1508 | display: inline-flex; 1509 | } 1510 | .react-resizable { 1511 | position: relative; 1512 | } 1513 | .react-resizable-handle { 1514 | position: absolute; 1515 | width: 20px; 1516 | height: 20px; 1517 | bottom: 0; 1518 | right: 0; 1519 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1520 | background-position: bottom right; 1521 | padding: 0 3px 3px 0; 1522 | background-repeat: no-repeat; 1523 | background-origin: content-box; 1524 | box-sizing: border-box; 1525 | cursor: se-resize; 1526 | } 1527 | .resize-card { 1528 | overflow-y: hidden; 1529 | } 1530 | .noselect { 1531 | -webkit-touch-callout: none; 1532 | /* iOS Safari */ 1533 | -webkit-user-select: none; 1534 | /* Safari */ 1535 | -khtml-user-select: none; 1536 | /* Konqueror HTML */ 1537 | -moz-user-select: none; 1538 | /* Firefox */ 1539 | -ms-user-select: none; 1540 | /* Internet Explorer/Edge */ 1541 | user-select: none; 1542 | /* Non-prefixed version, currently */ 1543 | } 1544 | 1545 | /* RTB additions below */ 1546 | 1547 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1548 | margin-top: 3px; 1549 | } 1550 | 1551 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1552 | margin-top: 3px; 1553 | } 1554 | 1555 | #roam-right-sidebar-content .rm-level1 .roam-block { 1556 | margin-top: -5px; 1557 | } 1558 | 1559 | #roam-right-sidebar-content .rm-level2 .roam-block { 1560 | margin-top: -5px; 1561 | } 1562 | 1563 | #roam-right-sidebar-content .rm-level3 .roam-block { 1564 | margin-top: -3px; 1565 | } 1566 | 1567 | #roam-right-sidebar-content { 1568 | font-size: 16px; 1569 | } 1570 | 1571 | #roam-right-sidebar-content .rm-block-ref { 1572 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1573 | /* color: #cd5654; Don't change color of full block ref */ 1574 | } 1575 | 1576 | a { 1577 | color: #cd5654; /* red graphite color */ 1578 | } 1579 | 1580 | /* 1581 | .bp3-elevation-3 .dont-unfocus-block { 1582 | filter: invert(100%); 1583 | } 1584 | 1585 | */ 1586 | 1587 | /* Add a border around the block currently being edited */ 1588 | /* 1589 | .rm-block-input { 1590 | background-color: #b3d7ff; 1591 | border-radius: 10px; 1592 | padding-left: 10px; 1593 | padding-right: 10px; 1594 | } 1595 | */ 1596 | 1597 | .rm-reference-item { 1598 | background-color: #f5f8fa; 1599 | } 1600 | 1601 | div[id^='block-input-'] > span > div { 1602 | background-color: #a8a9bd30 !important; 1603 | } 1604 | 1605 | /* Change sideboard to all one color, and update font color accordingly */ 1606 | 1607 | .roam-body .roam-app .roam-sidebar-container { 1608 | background-color: #586F76; 1609 | } 1610 | 1611 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 1612 | color: #fef6e5; 1613 | } 1614 | 1615 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 1616 | color: #fef6e5; 1617 | } 1618 | 1619 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 1620 | color: #fef6e5; 1621 | } 1622 | 1623 | /* Change Roam Research logo color to match theme*/ 1624 | #roam-sidebar-logo { 1625 | filter: brightness(0) saturate(100%) invert(92%) sepia(20%) saturate(457%) hue-rotate(315deg) brightness(108%) contrast(99%); 1626 | } 1627 | 1628 | #roam-sidebar-logo:focus, #roam-sidebar-logo:hover { 1629 | text-decoration: none !important; 1630 | } 1631 | 1632 | /* Better hover effect for shortcut pages in left side-bar */ 1633 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 1634 | color: #fef6e5; 1635 | font-weight: bold; 1636 | background-color: #586F76; 1637 | } 1638 | 1639 | /* Change color of the email address at top of left sidebar to match theme */ 1640 | .bp3-button div { 1641 | color: #fef6e5 !important; 1642 | } 1643 | 1644 | 1645 | 1646 | -------------------------------------------------------------------------------- /solarized-light.css: -------------------------------------------------------------------------------- 1 | @import "../fonts/Inter/inter.css"; 2 | .loading-astrolabe { 3 | margin: auto; 4 | position: relative; 5 | width: 250px; 6 | height: 250px; 7 | } 8 | .loading-astrolabe .wand { 9 | position: absolute; 10 | width: 80%; 11 | top: 24.5%; 12 | left: 10%; 13 | animation: nav 3.5s linear infinite; 14 | } 15 | .loading-astrolabe .wand-small { 16 | position: absolute; 17 | width: 80%; 18 | top: 24.5%; 19 | left: 11.5%; 20 | } 21 | .loading-astrolabe .background { 22 | width: 100%; 23 | border: none; 24 | margin-left: -3px; 25 | } 26 | .spinner-astrolabe { 27 | margin: auto; 28 | margin-top: 100px; 29 | position: relative; 30 | width: 200px; 31 | height: 200px; 32 | } 33 | .spinner-astrolabe .wand { 34 | position: absolute; 35 | width: 80%; 36 | top: 24.5%; 37 | left: 10%; 38 | animation: nav 3.5s linear 20s; 39 | } 40 | .spinner-astrolabe .wand:hover { 41 | animation: nav 3.5s linear infinite; 42 | } 43 | .spinner-astrolabe .wand-small { 44 | position: absolute; 45 | width: 80%; 46 | top: 24.5%; 47 | left: 11.5%; 48 | } 49 | .spinner-astrolabe .background { 50 | width: 100%; 51 | border: none; 52 | margin-left: -3px; 53 | } 54 | @keyframes spin { 55 | 0% { 56 | transform: rotate(0deg); 57 | } 58 | 100% { 59 | transform: rotate(360deg); 60 | } 61 | } 62 | @keyframes nav { 63 | 0% { 64 | transform: rotate(0deg); 65 | } 66 | 15% { 67 | transform: rotate(-30deg); 68 | } 69 | 25% { 70 | transform: rotate(30deg); 71 | } 72 | 40% { 73 | transform: rotate(-15deg); 74 | } 75 | 50% { 76 | transform: rotate(40deg); 77 | } 78 | 70% { 79 | transform: rotate(-50deg); 80 | } 81 | 85% { 82 | transform: rotate(75deg); 83 | } 84 | 90% { 85 | transform: rotate(-180deg); 86 | } 87 | 100% { 88 | transform: rotate(-355deg); 89 | } 90 | } 91 | .spinner-square { 92 | box-sizing: border-box; 93 | width: 300px; 94 | height: 300px; 95 | background-color: grey; 96 | display: grid; 97 | grid-template-rows: 1fr 1fr; 98 | padding: 20px; 99 | grid-gap: 20px; 100 | z-index: 3; 101 | grid-template-columns: 1fr 1fr; 102 | cursor: pointer; 103 | } 104 | .spinner-square .spinner-square-front { 105 | background-color: white; 106 | z-index: 5; 107 | } 108 | .spinner-square .spinner-square-rotate { 109 | position: absolute; 110 | margin-left: 75px; 111 | margin-top: 75px; 112 | background-color: black; 113 | width: 150px; 114 | height: 150px; 115 | animation: spin 4.5s linear infinite; 116 | } 117 | .scrollbar { 118 | margin-left: 30px; 119 | float: left; 120 | height: 300px; 121 | width: 65px; 122 | background: #F5F5F5; 123 | overflow-y: scroll; 124 | margin-bottom: 25px; 125 | } 126 | #scroll-1::-webkit-scrollbar-track { 127 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 128 | border-radius: 8px; 129 | background-color: #F5F5F5; 130 | } 131 | #scroll-1::-webkit-scrollbar { 132 | width: 8px; 133 | background-color: #F5F5F5; 134 | } 135 | #scroll-1::-webkit-scrollbar-thumb { 136 | border-radius: 8px; 137 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); 138 | background-color: #8A9BA8; 139 | } 140 | #home { 141 | padding: 50px; 142 | background-color: blue; 143 | color: #182026; 144 | } 145 | #home .icons { 146 | padding-left: 20px; 147 | } 148 | #home .icons .bp3-icon-large:hover { 149 | transform: scale(2); 150 | margin-left: 60px; 151 | } 152 | #home2 .dark { 153 | color: white; 154 | background-color: #343a40; 155 | } 156 | #home2 .container { 157 | margin: auto; 158 | max-width: 1110px; 159 | } 160 | #home2 .block { 161 | padding: 7em 0 0; 162 | } 163 | #home2 #header { 164 | width: 100%; 165 | position: fixed; 166 | top: 0; 167 | } 168 | #home2 #header .nav { 169 | display: flex; 170 | flex: 0 0 auto; 171 | align-items: center; 172 | padding: 10px 14px; 173 | } 174 | #home2 #header .nav .bp3-button { 175 | color: white; 176 | } 177 | #home2 #body { 178 | margin-top: 50px; 179 | } 180 | #home2 h1 { 181 | margin-bottom: 20px; 182 | } 183 | #home2 .row { 184 | display: flex; 185 | flex-wrap: wrap; 186 | } 187 | #home2 .col { 188 | margin: 24px auto; 189 | max-width: 300px; 190 | } 191 | #home2 #testimonials .testimonial { 192 | text-align: center; 193 | } 194 | #home2 #logo-graph { 195 | -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); 196 | opacity: .4; 197 | display: grid; 198 | } 199 | #home2 #footer { 200 | padding-bottom: 7em; 201 | } 202 | #page { 203 | font-family: Segoe UI, Roboto, sans-serif; 204 | } 205 | #page1 { 206 | margin: 0 auto; 207 | padding-top: 4em; 208 | max-width: 40em; 209 | font-family: Segoe UI, Roboto, sans-serif; 210 | color: #808080; 211 | } 212 | #page1 h1, 213 | #page1 h2 { 214 | color: #4d4d4d; 215 | text-align: center; 216 | } 217 | #page1 .sub { 218 | width: 400px; 219 | margin: 8px auto; 220 | } 221 | #page1 .hero { 222 | margin: 0 auto; 223 | display: flex; 224 | justify-content: center; 225 | } 226 | #page1 .hero button { 227 | min-height: 50px; 228 | font-size: 1.8em; 229 | padding: 16px 20px; 230 | margin: 8px; 231 | } 232 | #page1 .zk { 233 | padding: 25px; 234 | } 235 | #page1 .quotes { 236 | max-width: 80vw; 237 | margin: 20px auto; 238 | } 239 | #page1 .quote { 240 | float: right; 241 | padding-top: 1em; 242 | } 243 | #secret-invite-wrapper { 244 | height: 100vh; 245 | background-color: black; 246 | overscroll-behavior: none; 247 | } 248 | #secret-invite-wrapper #secret-invite { 249 | position: relative; 250 | margin: 0 auto; 251 | padding-top: 4em; 252 | max-width: 40em; 253 | font-family: Segoe UI, Roboto, sans-serif; 254 | color: #b3b3b3; 255 | } 256 | #secret-invite-wrapper #secret-invite #secret-scroll { 257 | position: absolute; 258 | height: 90vh; 259 | overflow: scroll; 260 | } 261 | #secret-invite-wrapper #secret-invite h1, 262 | #secret-invite-wrapper #secret-invite h2 { 263 | color: #cccccc; 264 | text-align: center; 265 | } 266 | #secret-invite-wrapper #secret-invite .sub { 267 | width: 400px; 268 | margin: 8px auto; 269 | } 270 | #secret-invite-wrapper #secret-invite .hero { 271 | margin: 0 auto; 272 | display: flex; 273 | justify-content: center; 274 | } 275 | #secret-invite-wrapper #secret-invite .hero button { 276 | min-height: 50px; 277 | font-size: 1.8em; 278 | padding: 16px 20px; 279 | margin: 8px; 280 | } 281 | #secret-invite-wrapper #secret-invite .zk { 282 | padding: 25px; 283 | } 284 | #secret-invite-wrapper #secret-invite .quotes { 285 | max-width: 80vw; 286 | margin: 20px auto; 287 | } 288 | #secret-invite-wrapper #secret-invite .quote { 289 | float: right; 290 | padding-top: 1em; 291 | } 292 | html { 293 | scroll-behavior: smooth; 294 | } 295 | #landing-page * { 296 | margin: 0; 297 | padding: 0; 298 | } 299 | #landing-page #form { 300 | display: flex; 301 | flex-direction: column; 302 | align-items: center; 303 | padding: 12px; 304 | } 305 | #landing-page #form .ff { 306 | text-align: center; 307 | line-height: 1.8em; 308 | font-size: 1.2em; 309 | max-width: 400px; 310 | } 311 | #landing-page #form form { 312 | display: flex; 313 | flex-direction: column; 314 | } 315 | #landing-page #form form textarea { 316 | max-width: 70vw; 317 | width: 300px; 318 | resize: none; 319 | border: 1px solid lightgrey; 320 | padding: 4px; 321 | } 322 | #landing-page #form form input { 323 | max-width: 70vw; 324 | width: 300px; 325 | padding: 4px; 326 | margin: 8px; 327 | } 328 | #landing-page #header ul { 329 | display: flex; 330 | list-style-type: none; 331 | background-color: #293742; 332 | color: #f5f8fa; 333 | } 334 | #landing-page #header ul .logo { 335 | padding: 8px; 336 | } 337 | #landing-page #header ul li:hover { 338 | background-color: #182026; 339 | } 340 | #landing-page #header ul li a { 341 | display: block; 342 | padding: 8px; 343 | text-decoration: none; 344 | width: 100%; 345 | height: 100%; 346 | color: inherit; 347 | } 348 | #landing-page #cover { 349 | background-color: #182026; 350 | padding: 40px 0 0 0; 351 | min-height: 100vh; 352 | color: #ced9e0; 353 | display: flex; 354 | flex-direction: column; 355 | align-items: center; 356 | } 357 | #landing-page #cover .a { 358 | background-color: #ced9e0; 359 | color: #182026; 360 | border-radius: 4px; 361 | cursor: pointer; 362 | text-decoration: none; 363 | } 364 | #landing-page #cover .a:hover { 365 | color: #0e5a8a; 366 | } 367 | #landing-page #cover #tag-line { 368 | padding: 30px 40px 0px; 369 | } 370 | #landing-page #cover #tag-line ul { 371 | line-height: 32px; 372 | margin-left: 32px; 373 | margin-right: 16px; 374 | margin-top: 25px; 375 | font-size: 16px; 376 | } 377 | #landing-page #cover #endorsement { 378 | margin: 80px 20px 20px; 379 | } 380 | #landing-page #cover #callouts { 381 | margin-top: 10%; 382 | } 383 | #landing-page #cover #callouts button { 384 | font-size: 20px; 385 | padding: 20px; 386 | background-color: #182026; 387 | } 388 | #landing-page #cover #image-collection { 389 | flex: 1 1 400px; 390 | max-width: 500px; 391 | background-color: #ced9e0; 392 | color: #293742; 393 | padding: 40px 40px 40px; 394 | display: flex; 395 | flex-direction: column; 396 | align-items: center; 397 | } 398 | #landing-page #cover #image-collection #images { 399 | color: #182026; 400 | padding: 40px 0px; 401 | display: grid; 402 | grid-template-columns: repeat(auto-fill, minmax(100px, auto)); 403 | grid-column-gap: 20px; 404 | justify-items: start; 405 | align-items: center; 406 | } 407 | #landing-page #cover #image-collection #images img { 408 | margin: 8px; 409 | max-height: 70px; 410 | max-width: 100%; 411 | } 412 | #landing-page #features { 413 | padding: 40px 40px; 414 | background-color: #293742; 415 | border-top: 1px solid #5c7080; 416 | color: #d8e1e8; 417 | flex-direction: column; 418 | } 419 | #landing-page #features ul { 420 | padding-left: 16px; 421 | } 422 | #landing-page #features .feature { 423 | margin: 40px 0px; 424 | display: flex; 425 | justify-content: center; 426 | flex-wrap: wrap; 427 | } 428 | #landing-page #features .feature .feature-content { 429 | width: 400px; 430 | margin: 40px; 431 | } 432 | #landing-page #features .feature .feature-image { 433 | min-height: 400px; 434 | min-width: 400px; 435 | background-color: grey; 436 | } 437 | .rm-emoji-block-view { 438 | display: flex; 439 | flex: 0 0 auto; 440 | flex-wrap: wrap; 441 | margin-left: 40px; 442 | align-items: center; 443 | } 444 | .rm-emoji-block-view .rm-emoji-button { 445 | display: flex; 446 | flex: 0 0 auto; 447 | align-items: center; 448 | cursor: pointer; 449 | border-radius: 20px; 450 | height: 20px; 451 | margin: 0px 4px 4px 0px; 452 | } 453 | .rm-emoji-block-view .rm-emoji-button .rm-emoji { 454 | height: 16px; 455 | margin: 0px 4px; 456 | } 457 | .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { 458 | height: 100%; 459 | font-size: 10px; 460 | margin-right: 6px; 461 | font-weight: 500; 462 | } 463 | .rm-emoji-tooltip { 464 | max-width: 200px; 465 | overflow-wrap: break-word; 466 | font-size: 12px; 467 | color: white; 468 | font-weight: 600; 469 | } 470 | .kanban-board { 471 | background-color: #a7b6c2; 472 | min-width: 100%; 473 | min-height: 48px; 474 | padding: 8px; 475 | overflow-x: scroll; 476 | } 477 | .kanban-column { 478 | background-color: #ededed; 479 | margin: 0px 4px 0px 4px; 480 | padding: 4px; 481 | min-width: 200px; 482 | } 483 | .kanban-title { 484 | text-align: center; 485 | } 486 | .kanban-card { 487 | background-color: white; 488 | margin: 8px; 489 | padding: 8px; 490 | } 491 | html { 492 | font-family: 'Inter', sans-serif; 493 | } 494 | @supports (font-variation-settings: normal) { 495 | html { 496 | font-family: 'Inter var', sans-serif; 497 | } 498 | } 499 | body { 500 | overscroll-behavior: none; 501 | } 502 | ::-webkit-scrollbar { 503 | width: 0px; 504 | background: transparent; 505 | } 506 | * { 507 | box-sizing: border-box; 508 | } 509 | *:focus { 510 | outline-width: 0; 511 | } 512 | .roam-lift { 513 | z-index: 10000; 514 | } 515 | .CodeMirror { 516 | height: auto !important; 517 | } 518 | @media (max-width: 500px) { 519 | .bp3-omnibar { 520 | max-width: 310px; 521 | left: calc((100vw - 310px) / 2); 522 | } 523 | } 524 | .rm-line { 525 | background-color: #ced9e0; 526 | flex: 0 0 1px; 527 | } 528 | .roam-body { 529 | height: 100vh; 530 | overflow: hidden; 531 | position: relative; 532 | background-color: #fcf6e5; /* RTB add: bear color - solarized light */ 533 | } 534 | .roam-body .roam-app { 535 | height: 100%; 536 | width: 100%; 537 | position: relative; 538 | -webkit-overflow-scrolling: touch; 539 | color: #202b33; 540 | } 541 | .roam-body .roam-app h1 { 542 | color: #202b33; 543 | } 544 | .roam-body .roam-app .roam-sidebar-container { 545 | position: absolute; 546 | top: 45px; 547 | left: -232px; 548 | width: 232px; 549 | bottom: 45px; 550 | z-index: 999; 551 | transition: all 200ms ease-in; 552 | background-color: #2f3437; 553 | background-color: #182026; 554 | } 555 | .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { 556 | position: absolute; 557 | z-index: 99; 558 | top: 0px; 559 | right: -8px; 560 | bottom: 0px; 561 | width: 0px; 562 | } 563 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { 564 | position: absolute; 565 | top: 0; 566 | padding: 16px; 567 | } 568 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { 569 | height: 100%; 570 | position: relative; 571 | } 572 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 573 | padding: 8px 20px; 574 | font-weight: bold; 575 | cursor: pointer; 576 | font-size: 14px; 577 | color: #5c7080; 578 | } 579 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 580 | color: #f5f8fa; 581 | background-color: #10161a; 582 | } 583 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 584 | color: #5c7080; 585 | } 586 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { 587 | overflow-y: auto; 588 | } 589 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 590 | text-decoration: none; 591 | cursor: pointer; 592 | font-size: 14px; 593 | padding: 8px 0px 8px 4px; 594 | color: #5c7080; 595 | } 596 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 597 | color: #f5f8fa; 598 | background-color: #10161a; 599 | } 600 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { 601 | padding: 8px; 602 | margin-bottom: 8px; 603 | font-size: 14px; 604 | font-weight: bold; 605 | } 606 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { 607 | margin-top: 64px; 608 | width: 100%; 609 | transition: all 150ms ease-in; 610 | position: absolute; 611 | overflow: scroll; 612 | } 613 | .roam-body .roam-app .roam-main { 614 | width: 100%; 615 | display: flex; 616 | 617 | } 618 | .roam-body .roam-app .roam-main .roam-article { 619 | position: relative; 620 | padding: 16px 42px 120px; 621 | font-size: 20px; /* RTB add: larger font */ 622 | color: #585f61; /* RTB add: roam color - solarized light */ 623 | } 624 | .roam-body .roam-app .roam-main .roam-article .rm-title-display { 625 | margin-bottom: 32px; 626 | } 627 | #right-sidebar .rm-reference-container { 628 | padding-top: 0px; 629 | border-top: none; 630 | } 631 | .roam-block .rm-reference-container { 632 | padding-top: 0px; 633 | border-top: none; 634 | } 635 | .roam-block .rm-reference-main { 636 | border: 1px solid #ced9e0; 637 | padding: 0px 16px 12px 16px; 638 | } 639 | .pointer { 640 | cursor: pointer; 641 | } 642 | .roam-topbar { 643 | height: 45px; 644 | position: fixed; 645 | width: 100%; 646 | z-index: 101; 647 | background-color: #fef6e5; /* RTB change: bear background - solarized light */ 648 | padding-right: 16px; 649 | padding-left: 16px; 650 | display: flex; 651 | flex-direction: column; 652 | justify-content: center; 653 | } 654 | .trunc { 655 | max-width: 120px; 656 | white-space: nowrap; 657 | text-overflow: ellipsis; 658 | overflow: hidden; 659 | } 660 | .bblack { 661 | border: 1px solid black; 662 | background-color: lightgrey; 663 | } 664 | .roam-popup-container { 665 | display: flex; 666 | flex-direction: column; 667 | overflow: scroll; 668 | } 669 | .roam-popup-container .roam-popup-content { 670 | position: absolute; 671 | top: 34px; 672 | bottom: 10px; 673 | width: 100%; 674 | overflow-y: scroll; 675 | } 676 | .rm-input { 677 | width: 100%; 678 | outline: 1px solid transparent; 679 | vertical-align: top; 680 | background-color: transparent; 681 | border: none; 682 | resize: none; 683 | } 684 | .rm-input::-webkit-input-placeholder { 685 | color: #ced9e0; 686 | } 687 | .rm-input:-moz-placeholder { 688 | /* Firefox 18- */ 689 | color: #ced9e0; 690 | } 691 | .rm-input::-moz-placeholder { 692 | /* Firefox 19+ */ 693 | color: #ced9e0; 694 | } 695 | .rm-input:-ms-input-placeholder { 696 | color: #ced9e0; 697 | } 698 | .rm-input::placeholder { 699 | color: #ced9e0; 700 | } 701 | .rm-title-textarea { 702 | width: 100%; 703 | outline: 1px solid transparent; 704 | vertical-align: top; 705 | line-height: 1.3em; 706 | background-color: transparent; 707 | border: none; 708 | resize: none; 709 | } 710 | .rm-title-textarea::-webkit-input-placeholder { 711 | color: #ced9e0; 712 | } 713 | .rm-title-textarea:-moz-placeholder { 714 | /* Firefox 18- */ 715 | color: #ced9e0; 716 | } 717 | .rm-title-textarea::-moz-placeholder { 718 | /* Firefox 19+ */ 719 | color: #ced9e0; 720 | } 721 | .rm-title-textarea:-ms-input-placeholder { 722 | color: #ced9e0; 723 | } 724 | .rm-title-textarea::placeholder { 725 | color: #ced9e0; 726 | } 727 | .rm-title-untitled { 728 | color: #ced9e0; 729 | } 730 | .rm-title-display { 731 | line-height: 1.3em; 732 | font-weight: 450; 733 | word-break: break-word; 734 | min-width: 100px; 735 | width: 100%; 736 | cursor: text; 737 | outline: 1px solid transparent; 738 | } 739 | .roam-log-container .roam-log-page { 740 | border-top: 1px solid #738694; 741 | margin-top: 40px; 742 | padding-top: 40px; 743 | padding-bottom: 16px; 744 | margin-bottom: 16px; 745 | } 746 | .roam-log-container .roam-log-page:first-child { 747 | border: 0px solid blue; 748 | margin-top: 0px; 749 | min-height: 500px; 750 | padding-top: 0px; 751 | } 752 | .roam-log-container .roam-log-preview { 753 | color: #8a9ba8; 754 | } 755 | .roam-log-container .roam-log-preview h1 { 756 | color: #8a9ba8; 757 | } 758 | .roam-log-container .roam-log-preview:hover { 759 | background-color: grey; 760 | } 761 | #buffer { 762 | display: flex; 763 | flex-direction: column; 764 | } 765 | #buffer .help-title { 766 | color: #f5f8fa; 767 | text-align: center; 768 | font-size: 16px; 769 | font-weight: bold; 770 | } 771 | #buffer .help-sub-title { 772 | color: #e1e8ed; 773 | text-align: center; 774 | } 775 | #buffer .help-item-text { 776 | color: #e1e8ed; 777 | } 778 | #buffer .help-item-label { 779 | opacity: 0.6; 780 | color: #e1e8ed; 781 | } 782 | .roam-table { 783 | padding-bottom: 24px; 784 | overflow-x: scroll; 785 | } 786 | .roam-table th, 787 | .roam-table td, 788 | .roam-table tr { 789 | font-size: 12px; 790 | min-width: 100px; 791 | max-height: 20px; 792 | padding: 8px 16px; 793 | margin: 0p; 794 | border: 1px solid grey; 795 | } 796 | .roam-table td { 797 | max-height: 20px; 798 | overflow: scroll; 799 | } 800 | .import-table { 801 | padding-bottom: 24px; 802 | max-width: 100%; 803 | } 804 | .import-table table { 805 | width: 100%; 806 | } 807 | .import-table th, 808 | .import-table td, 809 | .import-table tr { 810 | font-size: 12px; 811 | max-height: 20px; 812 | padding: 8px 16px; 813 | margin: 0p; 814 | border: 1px solid grey; 815 | } 816 | .import-table td { 817 | max-height: 20px; 818 | } 819 | .import-table td .import-preview { 820 | white-space: pre-wrap; 821 | word-break: break-word; 822 | max-width: 50px; 823 | } 824 | #info { 825 | padding: 8px 0px; 826 | margin: 0px 8px; 827 | font-size: 12px; 828 | } 829 | #info table { 830 | margin: 0 auto; 831 | } 832 | #info table, 833 | #info th, 834 | #info td { 835 | padding: 8px; 836 | margin: 0p; 837 | border: 1px solid grey; 838 | } 839 | .hoverparent:hover .hoveronly { 840 | opacity: 1; 841 | } 842 | .hoveronly { 843 | opacity: 0; 844 | } 845 | .hoveronly:hover { 846 | opacity: 1; 847 | } 848 | .tiny { 849 | font-size: 7px; 850 | } 851 | .CodeMirror { 852 | font-family: monospace; 853 | } 854 | .CodeMirror .CodeMirror-code pre { 855 | font-family: monospace; 856 | box-shadow: none; 857 | } 858 | .block-mention { 859 | margin: 4px 8px 4px 0px; 860 | cursor: pointer; 861 | padding: 8px; 862 | background-color: #bfccd6; 863 | } 864 | .block-mention:hover { 865 | background-color: #a7b6c2; 866 | } 867 | .rm-page-ref { 868 | cursor: pointer; 869 | } 870 | .rm-page-ref:hover { 871 | text-decoration: underline; 872 | } 873 | .rm-page-ref-tag { 874 | color: #a7b6c2; 875 | } 876 | .rm-page-ref-brackets { 877 | color: #a7b6c2; 878 | } 879 | .rm-page-ref-link-color { 880 | color: #9d6500; /* solarized light color */ 881 | } 882 | .rm-page-ref-namespace-color { 883 | color: green; 884 | } 885 | .rm-block-ref { 886 | padding: 4px 2px; 887 | margin: -4px 0px; 888 | font-size: 20px; /* RTB change: block ref's same size as others */ 889 | display: inline; 890 | border-bottom: 1px solid #ced9e0; 891 | cursor: alias; 892 | padding-left: 0px; /* RTB add: align to left */ 893 | } 894 | .rm-block-ref:hover { 895 | background-color: #f5f8fa; 896 | } 897 | .rm-reference-container { 898 | border-top: 2px solid #202b33; 899 | padding-top: 12px; 900 | margin-bottom: 8px; 901 | } 902 | .check-container { 903 | display: inline-block; 904 | position: relative; 905 | padding-left: 16px; /* RTB change: align checkbox for updated spacing */ 906 | margin-bottom: 10px; 907 | cursor: pointer; 908 | font-size: 22px; 909 | -webkit-user-select: none; 910 | -moz-user-select: none; 911 | -ms-user-select: none; 912 | user-select: none; 913 | vertical-align: bottom; 914 | top: -12px; /* RTB change: align checkbox for updated spacing */ 915 | } 916 | /* Hide the browser's default checkbox */ 917 | .check-container input { 918 | position: absolute; 919 | opacity: 0; 920 | cursor: pointer; 921 | height: 0; 922 | width: 0; 923 | } 924 | /* Create a custom checkbox */ 925 | .checkmark { 926 | position: absolute; 927 | top: 0px; 928 | left: 0; 929 | height: 12px; 930 | border-radius: 2px; 931 | width: 12px; 932 | border: 1px solid #a7b6c2; 933 | } 934 | /* On mouse-over, add a grey background color */ 935 | /* When the checkbox is checked, add a blue background */ 936 | .check-container input:checked ~ .checkmark { 937 | background-color: #9d6500; /* solarized light */ 938 | border: none; 939 | } 940 | /* Create the checkmark/indicator (hidden when not checked) */ 941 | .checkmark:after { 942 | content: ""; 943 | position: absolute; 944 | display: none; 945 | } 946 | /* Show the checkmark when checked */ 947 | .check-container input:checked ~ .checkmark:after { 948 | display: block; 949 | } 950 | /* Style the checkmark/indicator */ 951 | .check-container .checkmark:after { 952 | left: 3.5px; 953 | top: 0.25px; 954 | width: 5px; 955 | height: 10px; 956 | border: solid white; 957 | border-width: 0 2px 2px 0; 958 | -webkit-transform: rotate(45deg); 959 | -ms-transform: rotate(45deg); 960 | transform: rotate(40deg) scale(0.8); 961 | } 962 | #roam-sidebar-logo a { 963 | text-decoration: none; 964 | } 965 | #roam-sidebar-logo:hover { 966 | background-color: #10161a; 967 | } 968 | .rm-find-or-create-wrapper { 969 | position: relative; 970 | transition: all 200ms ease-in; 971 | } 972 | .rm-find-or-create-wrapper .bp3-transition-container { 973 | width: 100%; 974 | } 975 | .rm-find-or-create-wrapper .bp3-menu { 976 | max-width: none; 977 | max-height: 400px; 978 | } 979 | .rm-find-or-create-wrapper .rm-menu-item { 980 | padding: 6px; 981 | cursor: pointer; 982 | border-radius: 2px; 983 | } 984 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { 985 | font-weight: bold; 986 | } 987 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { 988 | color: #0d8050; 989 | } 990 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { 991 | word-break: break-word; 992 | color: #8a9ba8; 993 | overflow-wrap: break-spaces; 994 | margin-left: -20px; 995 | } 996 | .rm-fill { 997 | width: 100%; 998 | } 999 | .rm-pages-sort-menu-item { 1000 | padding-right: 16px; 1001 | padding-left: 16px; 1002 | font-weight: bold; 1003 | } 1004 | .rm-pages-row-highlight { 1005 | background-color: #f5f8fa; 1006 | } 1007 | .rm-pages-row { 1008 | display: flex; 1009 | flex: 0 0 auto; 1010 | justify-content: space-between; 1011 | align-items: flex-start; 1012 | } 1013 | .rm-pages-row .rm-pages-sort-header { 1014 | display: flex; 1015 | flex: 0 0 auto; 1016 | align-items: center; 1017 | cursor: pointer; 1018 | } 1019 | .rm-pages-row .rm-pages-sort-header:hover { 1020 | text-decoration: underline; 1021 | } 1022 | .rm-pages-row .rm-pages-title-col { 1023 | padding: 8px 4px; 1024 | flex: 1 0 50%; 1025 | text-overflow: ellipsis; 1026 | } 1027 | .rm-pages-row .rm-pages-action-col { 1028 | text-align: right; 1029 | flex: 1 0 0; 1030 | padding: 8px 4px; 1031 | } 1032 | .rm-pages-row .rm-pages-col { 1033 | color: #8a9ba8; 1034 | padding: 8px 4px; 1035 | flex: 1 0 15%; 1036 | } 1037 | .rm-reference-item { 1038 | margin-top: 8px; 1039 | margin-right: 8px; 1040 | flex: 1 1 100%; 1041 | word-break: break-word; 1042 | background-color: #f5f8fa; 1043 | padding-right: 8px; 1044 | } 1045 | .rm-level1 { 1046 | font-family: 'Avenir Next'; /* RTB change */ 1047 | font-weight: 400; 1048 | font-size: 1.8em; 1049 | } 1050 | .rm-level1 textarea { 1051 | line-height: 1.2; 1052 | } 1053 | .rm-level1 .roam-block { 1054 | line-height: 1.2; 1055 | margin-top: -8px; /* RTB add */ 1056 | } 1057 | .rm-level2 { 1058 | font-family: 'Avenir Next' !important; /* RTB change */ 1059 | font-weight: 400; 1060 | font-size: 1.4em; 1061 | } 1062 | 1063 | /* RTB new section */ 1064 | .rm-level2 .roam-block { 1065 | margin-top: -8px; 1066 | } 1067 | 1068 | .rm-level3 { 1069 | font-weight: 500; 1070 | font-size: 1.2em; 1071 | color: #5c7080; 1072 | } 1073 | 1074 | /* RTB new section */ 1075 | .rm-level3 .roam-block { 1076 | margin-top: -5px; 1077 | } 1078 | 1079 | .rm-title1 { 1080 | word-break: break-word; 1081 | font-weight: 400; 1082 | } 1083 | .rm-histogram-table { 1084 | width: 100%; 1085 | margin-left: -8px; 1086 | box-sizing: border-box; 1087 | } 1088 | .rm-histogram-table td { 1089 | vertical-align: top; 1090 | min-width: 18px; 1091 | max-width: 18px; 1092 | border: 1px solid transparent; 1093 | } 1094 | .rm-histogram-table td .flex-v-box { 1095 | border-right: 0.2px solid #48aff0; 1096 | justify-content: flex-start; 1097 | align-items: center; 1098 | } 1099 | .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { 1100 | margin-top: 0px; 1101 | margin-bottom: 0px; 1102 | padding-bottom: 0px; 1103 | } 1104 | .rm-histogram-table td .flex-v-box .table-edited-by-view { 1105 | transform-origin: center; 1106 | background-size: cover; 1107 | border: 1px solid darkgray; 1108 | font-size: 0.7em; 1109 | height: 12px; 1110 | width: 12px; 1111 | margin: 0px; 1112 | padding: 0px; 1113 | border-radius: 100%; 1114 | background-repeat: no-repeat; 1115 | } 1116 | .slider .slider-cell { 1117 | border: 1px solid transparent; 1118 | flex: "1 0 100%"; 1119 | } 1120 | .slider .flex-v-box { 1121 | justify-content: flex-start; 1122 | align-items: center; 1123 | } 1124 | .slider .flex-v-box .bp3-popover-wrapper { 1125 | margin-top: 0px; 1126 | margin-bottom: 0px; 1127 | padding-bottom: 0px; 1128 | } 1129 | .slider .flex-v-box .table-edited-by-view { 1130 | transform-origin: center; 1131 | background-size: cover; 1132 | border: 1px solid darkgray; 1133 | font-size: 0.7em; 1134 | height: 12px; 1135 | width: 12px; 1136 | margin: 0px; 1137 | padding: 0px; 1138 | border-radius: 100%; 1139 | background-repeat: no-repeat; 1140 | } 1141 | .nowrap { 1142 | white-space: nowrap; 1143 | } 1144 | #rm-mobile-bar .rm-mobile-button { 1145 | flex: 1 0 0; 1146 | } 1147 | .roam-intense { 1148 | background-color: yellow; 1149 | margin: -2px; 1150 | padding: 2px; 1151 | } 1152 | .roam-highlight { 1153 | background-color: #fef09f; 1154 | margin: -2px; 1155 | padding: 2px; 1156 | } 1157 | .roam-bullet-closed { 1158 | background-color: #ced9e0; 1159 | } 1160 | #right-sidebar .roam-bullet-closed { 1161 | background-color: #a7b6c2; 1162 | } 1163 | .level1 { 1164 | font-family: Roboto, sans-serif; 1165 | font-weight: 200; 1166 | font-size: 40px; 1167 | color: #444444; 1168 | letter-spacing: normal; 1169 | /*-ms-font-feature-settings: 'ss20' 1;*/ 1170 | } 1171 | .rm-pm-editor { 1172 | padding: 5px; 1173 | min-height: 100px; 1174 | outline: 0 !important; 1175 | } 1176 | .rm-pm-editor h1 { 1177 | font-family: 'Inter', sans-serif; 1178 | font-weight: 400; 1179 | font-size: 1.8em; 1180 | } 1181 | .rm-pm-editor h1 textarea { 1182 | line-height: 1.2; 1183 | } 1184 | .rm-pm-editor h1 .roam-block { 1185 | line-height: 1.2; 1186 | } 1187 | .rm-pm-editor h2 { 1188 | font-family: 'Inter', sans-serif !important; 1189 | font-weight: 400; 1190 | font-size: 1.4em; 1191 | } 1192 | .rm-pm-editor h3 { 1193 | font-weight: 500; 1194 | font-size: 1.2em; 1195 | color: #5c7080; 1196 | } 1197 | .rm-pm-editor img { 1198 | max-width: 100%; 1199 | } 1200 | .rm-pm-sub-editor-wrapper { 1201 | padding: 2.5px; 1202 | margin: 2px; 1203 | background-color: rgba(201, 201, 207, 0.1); 1204 | } 1205 | .rm-section-item { 1206 | width: -webkit-max-content; 1207 | width: -moz-max-content; 1208 | width: max-content; 1209 | } 1210 | .rm-section { 1211 | background-color: yellow; 1212 | } 1213 | .rm-section-selected { 1214 | background-color: lightblue; 1215 | } 1216 | .rm-edit-view-wrapper { 1217 | min-width: 21px; 1218 | } 1219 | .edited-by-view { 1220 | flex: 0 0 21px; 1221 | transform-origin: center; 1222 | background-size: cover; 1223 | border: 1px solid darkgray; 1224 | font-size: 0.7em; 1225 | margin-top: 6.5px; 1226 | margin-right: 6px; 1227 | margin-left: 0px; 1228 | height: 15px; 1229 | width: 15px; 1230 | border-radius: 100%; 1231 | background-repeat: no-repeat; 1232 | } 1233 | .roam-block-container { 1234 | max-width: 740px; 1235 | border-radius: 2px; 1236 | } 1237 | .block-highlight-grey { 1238 | background-color: #ced9e0; 1239 | } 1240 | .block-highlight-blue { 1241 | background-color: #7cccff; 1242 | } 1243 | .block-highlight-yellow { 1244 | background-color: yellow; 1245 | } 1246 | .block-bullet-view { 1247 | flex: 1 1 100%; 1248 | margin-left: 5px; 1249 | } 1250 | .block-border-left { 1251 | /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ 1252 | } 1253 | .text-align-left { 1254 | text-align: left; 1255 | } 1256 | .text-align-center { 1257 | text-align: center; 1258 | } 1259 | .text-align-right { 1260 | text-align: right; 1261 | } 1262 | .text-align-justify { 1263 | text-align: justify; 1264 | } 1265 | .roam-block { 1266 | min-height: calc(1.5em + 8px); 1267 | box-sizing: border-box; 1268 | white-space: pre-wrap; 1269 | overflow-wrap: break-word; 1270 | margin-top: -1px; 1271 | min-width: 100px; 1272 | width: 100%; 1273 | line-height: 1.5em; 1274 | cursor: text; 1275 | padding-top: 4px; 1276 | padding-bottom: 4px; 1277 | } 1278 | .roam-block .span-view { 1279 | box-sizing: border-box; 1280 | } 1281 | .rm-block-text { 1282 | max-width: 700px; /* RTB change: desired section width */ 1283 | } 1284 | .rm-block-input { 1285 | line-height: 1.5em; 1286 | width: 100%; 1287 | outline: 1px solid transparent; 1288 | overflow-wrap: break-spaces; 1289 | vertical-align: top; 1290 | margin-top: -1px; 1291 | background-color: transparent; 1292 | padding-top: 4px; 1293 | padding-bottom: 4px; 1294 | letter-spacing: inherit; 1295 | border: none; 1296 | resize: none; 1297 | } 1298 | .controls { 1299 | display: flex; 1300 | flex: 0 0 40px; 1301 | padding-top: 4px; 1302 | padding-left: 4px; 1303 | } 1304 | .controls .block-expand { 1305 | transform: scale(1); 1306 | transform-origin: center; 1307 | } 1308 | .controls .block-expand .rm-caret { 1309 | transition: all 100ms ease-in; 1310 | } 1311 | .controls .block-expand .rm-rotate-90 { 1312 | transform: rotate(-90deg); 1313 | } 1314 | .controls .opacity-none { 1315 | opacity: 0; 1316 | } 1317 | .controls .opacity-7 { 1318 | opacity: 0.7; 1319 | } 1320 | .controls .cursor-pointer { 1321 | cursor: pointer; 1322 | } 1323 | .controls .cursor-grab { 1324 | cursor: grab; 1325 | } 1326 | .controls .bk-light-grey { 1327 | background-color: #ced9e0; 1328 | } 1329 | .controls .simple-bullet-outer { 1330 | display: flex; 1331 | height: 13px; 1332 | width: 13px; 1333 | margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ 1334 | border-radius: 50%; 1335 | justify-content: center; 1336 | align-items: center; 1337 | } 1338 | .controls .simple-bullet-outer .simple-bullet-inner { 1339 | border-radius: 50%; 1340 | width: 5px; 1341 | height: 5px; 1342 | background-color: #9d6500; /* RTB change: solarized light bullet */ 1343 | } 1344 | .version-bullet { 1345 | background-color: #a7b6c2; 1346 | border: none; 1347 | display: flex; 1348 | cursor: pointer; 1349 | flex-direction: column; 1350 | align-items: center; 1351 | justify-content: center; 1352 | padding: 0px; 1353 | transform: scale(0.9); 1354 | transform-origin: center; 1355 | margin-top: 2px; 1356 | margin-left: 0px; 1357 | height: 16px; 1358 | font-size: 9px; 1359 | color: white; 1360 | text-align: center; 1361 | min-height: 16px; 1362 | max-height: 16px; 1363 | min-width: 16px; 1364 | max-width: 16px; 1365 | border-radius: 16px; 1366 | } 1367 | .dnd-separator { 1368 | position: relative; 1369 | width: 100%; 1370 | } 1371 | .dnd-separator .dnd-drop-area { 1372 | position: absolute; 1373 | top: -11px; 1374 | height: 28px; 1375 | width: 100%; 1376 | } 1377 | .dnd-separator .dnd-drop-bar { 1378 | position: absolute; 1379 | z-index: 0; 1380 | top: -4px; 1381 | left: 20px; 1382 | width: 96%; 1383 | height: 4px; 1384 | border-radius: 10px; 1385 | background-color: #5c7080; 1386 | } 1387 | .rm-database { 1388 | background-color: #182026; 1389 | color: #ced9e0; 1390 | } 1391 | .rm-mentions-search-items { 1392 | padding: 8px; 1393 | } 1394 | .rm-mentions-search-items .rm-mentions-title { 1395 | font-size: 20px; 1396 | font-weight: lighter; 1397 | margin: 4px; 1398 | } 1399 | .rm-mentions-search-items .rm-mentions-search-item { 1400 | padding: 12px; 1401 | cursor: pointer; 1402 | background-color: #f5f8fa; 1403 | border: 1px solid #bfccd6; 1404 | } 1405 | .rm-mentions-search-items .rm-mentions-search-item:hover { 1406 | background-color: #bfccd6; 1407 | } 1408 | .block-ref-count-button { 1409 | font-size: 0.9em; 1410 | } 1411 | .rm-grey-text { 1412 | color: #8a9ba8; 1413 | } 1414 | .rm-red-text { 1415 | color: red; 1416 | } 1417 | .flex-v-box { 1418 | display: flex; 1419 | flex: 0 0 auto; 1420 | flex-direction: column; 1421 | } 1422 | .flex-h-box { 1423 | display: flex; 1424 | flex: 0 0 auto; 1425 | padding-bottom: 10px; /* RTB add: a little extra space between bullets */ 1426 | } 1427 | .flex-align-start { 1428 | align-items: flex-start; 1429 | } 1430 | .flex-justify-start { 1431 | justify-content: flex-start; 1432 | } 1433 | .tags-input { 1434 | display: inline-block; 1435 | width: 10em; 1436 | margin: 0 0 4px; 1437 | padding: 4px 6px; 1438 | background: none; 1439 | border: 0; 1440 | outline: 0; 1441 | font: inherit; 1442 | color: inherit; 1443 | text-align: left; 1444 | text-shadow: none; 1445 | } 1446 | .tags-input:focus { 1447 | /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ 1448 | /* border: 2px solid white; */ 1449 | /* border-bottom-color: #448cca; */ 1450 | } 1451 | .tags-output { 1452 | display: inline-block; 1453 | margin-left: 4px; 1454 | } 1455 | .tags-output-item { 1456 | display: inline-block; 1457 | background-color: lightgrey; 1458 | cursor: pointer; 1459 | margin: 0 4px 4px 0; 1460 | padding: 4px 6px; 1461 | font-size: 10px; 1462 | border-radius: 4px; 1463 | } 1464 | .tags-output-item2 { 1465 | background-color: black; 1466 | display: inline-block; 1467 | text-decoration: none; 1468 | color: white; 1469 | cursor: pointer; 1470 | margin-left: 6px; 1471 | } 1472 | html { 1473 | margin: 0; 1474 | min-height: 100%; 1475 | } 1476 | body { 1477 | margin: 0; 1478 | padding: 0; 1479 | } 1480 | div { 1481 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1482 | font-size: 1em; 1483 | line-height: 1.5em; 1484 | margin: 0px; 1485 | padding: 0px; 1486 | } 1487 | textarea { 1488 | font-family: 'Avenir Next'; /* RTB change: desired font (bear) */ 1489 | font-size: 1em; 1490 | line-height: 1.5em; 1491 | margin: 0px; 1492 | padding: 0px; 1493 | } 1494 | .xtra { 1495 | transform: scale(3); 1496 | border-radius: 50%; 1497 | padding: 4px; 1498 | } 1499 | .border { 1500 | border: 1px solid ; 1501 | } 1502 | .display-flex { 1503 | display: -webkit-flex; 1504 | display: flex; 1505 | } 1506 | .display-inline-flex { 1507 | display: -webkit-inline-flex; 1508 | display: inline-flex; 1509 | } 1510 | .react-resizable { 1511 | position: relative; 1512 | } 1513 | .react-resizable-handle { 1514 | position: absolute; 1515 | width: 20px; 1516 | height: 20px; 1517 | bottom: 0; 1518 | right: 0; 1519 | background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); 1520 | background-position: bottom right; 1521 | padding: 0 3px 3px 0; 1522 | background-repeat: no-repeat; 1523 | background-origin: content-box; 1524 | box-sizing: border-box; 1525 | cursor: se-resize; 1526 | } 1527 | .resize-card { 1528 | overflow-y: hidden; 1529 | } 1530 | .noselect { 1531 | -webkit-touch-callout: none; 1532 | /* iOS Safari */ 1533 | -webkit-user-select: none; 1534 | /* Safari */ 1535 | -khtml-user-select: none; 1536 | /* Konqueror HTML */ 1537 | -moz-user-select: none; 1538 | /* Firefox */ 1539 | -ms-user-select: none; 1540 | /* Internet Explorer/Edge */ 1541 | user-select: none; 1542 | /* Non-prefixed version, currently */ 1543 | } 1544 | 1545 | /* RTB additions below */ 1546 | 1547 | #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { 1548 | margin-top: 3px; 1549 | } 1550 | 1551 | #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { 1552 | margin-top: 3px; 1553 | } 1554 | 1555 | #roam-right-sidebar-content .rm-level1 .roam-block { 1556 | margin-top: -5px; 1557 | } 1558 | 1559 | #roam-right-sidebar-content .rm-level2 .roam-block { 1560 | margin-top: -5px; 1561 | } 1562 | 1563 | #roam-right-sidebar-content .rm-level3 .roam-block { 1564 | margin-top: -3px; 1565 | } 1566 | 1567 | #roam-right-sidebar-content { 1568 | font-size: 16px; 1569 | } 1570 | 1571 | #roam-right-sidebar-content .rm-block-ref { 1572 | font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ 1573 | /* color: #9d6500; Don't change color of full block ref in sidebar */ 1574 | } 1575 | 1576 | a { 1577 | color: #9d6500; /* solarized light color */ 1578 | } 1579 | 1580 | /* 1581 | 1582 | Popup menu when typing / below 1583 | 1584 | .bp3-elevation-3 { 1585 | background-color: navajowhite !important; 1586 | } 1587 | 1588 | .bp3-elevation-3 div { 1589 | font-family: ... 1590 | } 1591 | 1592 | */ 1593 | 1594 | #right-sidebar { 1595 | background-color: rgb(247, 249, 251) !important; /* nicer light gray color */ 1596 | } 1597 | 1598 | /* target block embeds on main page and in sidebar */ 1599 | div[id^='block-input-'] > span > div { 1600 | background-color: #acb0e830 !important; 1601 | } 1602 | 1603 | --------------------------------------------------------------------------------