roam-research
| /* | |
| ### ROAM CUSTOM THEME ### | |
| > Many thanks to the Roam Slack community for all the resources, particularly @Anthony and @Mark for their patience with me that helped in this construction. Mostly adapted from Anthony's bear themes, with some mix and matches from other people's codes. I don't know what I'm doing really, just wanted to make it pretty. | |
| > Edits by Rob Haisfield | |
| > v1.0 | |
| */ | |
| /* Editor */ | |
| body {font-size: 150%; font-family: 'Inter' !important;} | |
| div, textarea { | |
| font-family: 'Inter' !important; | |
| } | |
| .loading-astrolabe { | |
| margin: auto; | |
| position: relative; | |
| width: 250px; | |
| height: 250px; | |
| } | |
| .loading-astrolabe .wand { | |
| position: absolute; | |
| width: 80%; | |
| top: 24.5%; | |
| left: 10%; | |
| animation: nav 3.5s linear infinite; | |
| } | |
| .loading-astrolabe .wand-small { | |
| position: absolute; | |
| width: 80%; | |
| top: 24.5%; | |
| left: 11.5%; | |
| } | |
| .loading-astrolabe .background { | |
| width: 100%; | |
| border: none; | |
| margin-left: -3px; | |
| } | |
| .spinner-astrolabe { | |
| margin: auto; | |
| margin-top: 100px; | |
| position: relative; | |
| width: 200px; | |
| height: 200px; | |
| } | |
| .spinner-astrolabe .wand { | |
| position: absolute; | |
| width: 80%; | |
| top: 24.5%; | |
| left: 10%; | |
| animation: nav 3.5s linear 20s; | |
| } | |
| .spinner-astrolabe .wand:hover { | |
| animation: nav 3.5s linear infinite; | |
| } | |
| .spinner-astrolabe .wand-small { | |
| position: absolute; | |
| width: 80%; | |
| top: 24.5%; | |
| left: 11.5%; | |
| } | |
| .spinner-astrolabe .background { | |
| width: 100%; | |
| border: none; | |
| margin-left: -3px; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes nav { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 15% { | |
| transform: rotate(-30deg); | |
| } | |
| 25% { | |
| transform: rotate(30deg); | |
| } | |
| 40% { | |
| transform: rotate(-15deg); | |
| } | |
| 50% { | |
| transform: rotate(40deg); | |
| } | |
| 70% { | |
| transform: rotate(-50deg); | |
| } | |
| 85% { | |
| transform: rotate(75deg); | |
| } | |
| 90% { | |
| transform: rotate(-180deg); | |
| } | |
| 100% { | |
| transform: rotate(-355deg); | |
| } | |
| } | |
| .spinner-square { | |
| box-sizing: border-box; | |
| width: 300px; | |
| height: 300px; | |
| background-color: grey; | |
| display: grid; | |
| grid-template-rows: 1fr 1fr; | |
| padding: 20px; | |
| grid-gap: 20px; | |
| z-index: 3; | |
| grid-template-columns: 1fr 1fr; | |
| cursor: pointer; | |
| } | |
| .spinner-square .spinner-square-front { | |
| background-color: white; | |
| z-index: 5; | |
| } | |
| .spinner-square .spinner-square-rotate { | |
| position: absolute; | |
| margin-left: 75px; | |
| margin-top: 75px; | |
| background-color: black; | |
| width: 150px; | |
| height: 150px; | |
| animation: spin 4.5s linear infinite; | |
| } | |
| .scrollbar { | |
| margin-left: 30px; | |
| float: left; | |
| height: 300px; | |
| width: 65px; | |
| background: #F5F5F5; | |
| overflow-y: scroll; | |
| margin-bottom: 25px; | |
| } | |
| #scroll-1::-webkit-scrollbar-track { | |
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| border-radius: 8px; | |
| background-color: #F5F5F5; | |
| } | |
| #scroll-1::-webkit-scrollbar { | |
| width: 8px; | |
| background-color: #F5F5F5; | |
| } | |
| #scroll-1::-webkit-scrollbar-thumb { | |
| border-radius: 8px; | |
| -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); | |
| background-color: #8A9BA8; | |
| } | |
| #home { | |
| padding: 50px; | |
| background-color: blue; | |
| color: #182026; | |
| } | |
| #home .icons { | |
| padding-left: 20px; | |
| } | |
| #home .icons .bp3-icon-large:hover { | |
| transform: scale(2); | |
| margin-left: 60px; | |
| } | |
| #home2 .dark { | |
| color: white; | |
| background-color: #343a40; | |
| } | |
| #home2 .container { | |
| margin: auto; | |
| max-width: 1110px; | |
| } | |
| #home2 .block { | |
| padding: 7em 0 0; | |
| } | |
| #home2 #header { | |
| width: 100%; | |
| position: fixed; | |
| top: 0; | |
| } | |
| #home2 #header .nav { | |
| display: flex; | |
| flex: 0 0 auto; | |
| align-items: center; | |
| padding: 10px 14px; | |
| } | |
| #home2 #header .nav .bp3-button { | |
| color: white; | |
| } | |
| #home2 #body { | |
| margin-top: 50px; | |
| } | |
| #home2 h1 { | |
| margin-bottom: 20px; | |
| } | |
| #home2 .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| #home2 .col { | |
| margin: 24px auto; | |
| max-width: 300px; | |
| } | |
| #home2 #testimonials .testimonial { | |
| text-align: center; | |
| } | |
| #home2 #logo-graph { | |
| -webkit-filter: grayscale(100%) brightness(60%) contrast(10000000%); | |
| opacity: .4; | |
| display: grid; | |
| } | |
| #home2 #footer { | |
| padding-bottom: 7em; | |
| } | |
| #page { | |
| font-family: Segoe UI, Roboto, sans-serif; | |
| } | |
| #page1 { | |
| margin: 0 auto; | |
| padding-top: 4em; | |
| max-width: 40em; | |
| font-family: Segoe UI, Roboto, sans-serif; | |
| color: #808080; | |
| } | |
| #page1 h1, | |
| #page1 h2 { | |
| color: #4d4d4d; | |
| text-align: center; | |
| } | |
| #page1 .sub { | |
| width: 400px; | |
| margin: 8px auto; | |
| } | |
| #page1 .hero { | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| #page1 .hero button { | |
| min-height: 50px; | |
| font-size: 1.8em; | |
| padding: 16px 20px; | |
| margin: 8px; | |
| } | |
| #page1 .zk { | |
| padding: 25px; | |
| } | |
| #page1 .quotes { | |
| max-width: 80vw; | |
| margin: 20px auto; | |
| } | |
| #page1 .quote { | |
| float: right; | |
| padding-top: 1em; | |
| } | |
| #secret-invite-wrapper { | |
| height: 100vh; | |
| background-color: black; | |
| overscroll-behavior: none; | |
| } | |
| #secret-invite-wrapper #secret-invite { | |
| position: relative; | |
| margin: 0 auto; | |
| padding-top: 4em; | |
| max-width: 40em; | |
| font-family: Segoe UI, Roboto, sans-serif; | |
| color: #b3b3b3; | |
| } | |
| #secret-invite-wrapper #secret-invite #secret-scroll { | |
| position: absolute; | |
| height: 90vh; | |
| overflow: scroll; | |
| } | |
| #secret-invite-wrapper #secret-invite h1, | |
| #secret-invite-wrapper #secret-invite h2 { | |
| color: #cccccc; | |
| text-align: center; | |
| } | |
| #secret-invite-wrapper #secret-invite .sub { | |
| width: 400px; | |
| margin: 8px auto; | |
| } | |
| #secret-invite-wrapper #secret-invite .hero { | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| #secret-invite-wrapper #secret-invite .hero button { | |
| min-height: 50px; | |
| font-size: 1.8em; | |
| padding: 16px 20px; | |
| margin: 8px; | |
| } | |
| #secret-invite-wrapper #secret-invite .zk { | |
| padding: 25px; | |
| } | |
| #secret-invite-wrapper #secret-invite .quotes { | |
| max-width: 80vw; | |
| margin: 20px auto; | |
| } | |
| #secret-invite-wrapper #secret-invite .quote { | |
| float: right; | |
| padding-top: 1em; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| #landing-page * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #landing-page #form { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| padding: 12px; | |
| } | |
| #landing-page #form .ff { | |
| text-align: center; | |
| line-height: 1.8em; | |
| font-size: 1.2em; | |
| max-width: 400px; | |
| } | |
| #landing-page #form form { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #landing-page #form form textarea { | |
| max-width: 70vw; | |
| width: 300px; | |
| resize: none; | |
| border: 1px solid lightgrey; | |
| padding: 4px; | |
| } | |
| #landing-page #form form input { | |
| max-width: 70vw; | |
| width: 300px; | |
| padding: 4px; | |
| margin: 8px; | |
| } | |
| #landing-page #header ul { | |
| display: flex; | |
| list-style-type: none; | |
| background-color: #293742; | |
| color: #f5f8fa; | |
| } | |
| #landing-page #header ul .logo { | |
| padding: 8px; | |
| } | |
| #landing-page #header ul li:hover { | |
| background-color: #182026; | |
| } | |
| #landing-page #header ul li a { | |
| display: block; | |
| padding: 8px; | |
| text-decoration: none; | |
| width: 100%; | |
| height: 100%; | |
| color: inherit; | |
| } | |
| #landing-page #cover { | |
| background-color: #182026; | |
| padding: 40px 0 0 0; | |
| min-height: 100vh; | |
| color: #ced9e0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #landing-page #cover .a { | |
| background-color: #ced9e0; | |
| color: #182026; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| #landing-page #cover .a:hover { | |
| color: #0e5a8a; | |
| } | |
| #landing-page #cover #tag-line { | |
| padding: 30px 40px 0px; | |
| } | |
| #landing-page #cover #tag-line ul { | |
| line-height: 32px; | |
| margin-left: 32px; | |
| margin-right: 16px; | |
| margin-top: 25px; | |
| font-size: 16px; | |
| } | |
| #landing-page #cover #endorsement { | |
| margin: 80px 20px 20px; | |
| } | |
| #landing-page #cover #callouts { | |
| margin-top: 10%; | |
| } | |
| #landing-page #cover #callouts button { | |
| font-size: 20px; | |
| padding: 20px; | |
| background-color: #182026; | |
| } | |
| #landing-page #cover #image-collection { | |
| flex: 1 1 400px; | |
| max-width: 500px; | |
| background-color: #ced9e0; | |
| color: #293742; | |
| padding: 40px 40px 40px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| #landing-page #cover #image-collection #images { | |
| color: #182026; | |
| padding: 40px 0px; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(100px, auto)); | |
| grid-column-gap: 20px; | |
| justify-items: start; | |
| align-items: center; | |
| } | |
| #landing-page #cover #image-collection #images img { | |
| margin: 8px; | |
| max-height: 70px; | |
| max-width: 100%; | |
| } | |
| #landing-page #features { | |
| padding: 40px 40px; | |
| background-color: #293742; | |
| border-top: 1px solid #5c7080; | |
| color: #d8e1e8; | |
| flex-direction: column; | |
| } | |
| #landing-page #features ul { | |
| padding-left: 16px; | |
| } | |
| #landing-page #features .feature { | |
| margin: 40px 0px; | |
| display: flex; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| #landing-page #features .feature .feature-content { | |
| width: 400px; | |
| margin: 40px; | |
| } | |
| #landing-page #features .feature .feature-image { | |
| min-height: 400px; | |
| min-width: 400px; | |
| background-color: grey; | |
| } | |
| .rm-emoji-block-view { | |
| display: flex; | |
| flex: 0 0 auto; | |
| flex-wrap: wrap; | |
| margin-left: 40px; | |
| align-items: center; | |
| } | |
| .rm-emoji-block-view .rm-emoji-button { | |
| display: flex; | |
| flex: 0 0 auto; | |
| align-items: center; | |
| cursor: pointer; | |
| border-radius: 20px; | |
| height: 20px; | |
| margin: 0px 4px 4px 0px; | |
| } | |
| .rm-emoji-block-view .rm-emoji-button .rm-emoji { | |
| height: 16px; | |
| margin: 0px 4px; | |
| } | |
| .rm-emoji-block-view .rm-emoji-button .rm-emoji-number { | |
| height: 100%; | |
| font-size: 10px; | |
| margin-right: 6px; | |
| font-weight: 500; | |
| } | |
| .rm-emoji-tooltip { | |
| max-width: 200px; | |
| overflow-wrap: break-word; | |
| font-size: 12px; | |
| color: white; | |
| font-weight: 600; | |
| } | |
| .kanban-board { | |
| background-color: #a7b6c2; | |
| min-width: 100%; | |
| min-height: 48px; | |
| padding: 8px; | |
| overflow-x: scroll; | |
| } | |
| .kanban-column { | |
| background-color: #ededed; | |
| margin: 0px 4px 0px 4px; | |
| padding: 4px; | |
| min-width: 200px; | |
| } | |
| .kanban-title { | |
| text-align: center; | |
| } | |
| .kanban-card { | |
| background-color: white; | |
| margin: 8px; | |
| padding: 8px; | |
| } | |
| html { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| @supports (font-variation-settings: normal) { | |
| html { | |
| font-family: 'Inter var', sans-serif; | |
| } | |
| } | |
| body { | |
| overscroll-behavior: none; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 0px; | |
| background: transparent; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| *:focus { | |
| outline-width: 0; | |
| } | |
| .roam-lift { | |
| z-index: 10000; | |
| } | |
| .CodeMirror { | |
| height: auto !important; | |
| } | |
| @media (max-width: 500px) { | |
| .bp3-omnibar { | |
| max-width: 310px; | |
| left: calc((100vw - 310px) / 2); | |
| } | |
| } | |
| .rm-line { | |
| background-color: #ced9e0; | |
| flex: 0 0 1px; | |
| } | |
| .roam-body { | |
| height: 100vh; | |
| overflow: hidden; | |
| position: relative; | |
| background-color: #fdf6e3; /* RTB add: bear color - solarized light */ | |
| } | |
| .roam-body .roam-app { | |
| height: 100%; | |
| width: 100%; | |
| position: relative; | |
| -webkit-overflow-scrolling: touch; | |
| color: #202b33; | |
| } | |
| .roam-body .roam-app h1 { | |
| color: #202b33; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container { | |
| position: absolute; | |
| top: 45px; | |
| left: -232px; | |
| width: 232px; | |
| bottom: 45px; | |
| z-index: 999; | |
| transition: all 200ms ease-in; | |
| background-color: #2f3437; | |
| background-color: #182026; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-hover-sidebar-reveal { | |
| position: absolute; | |
| z-index: 99; | |
| top: 0px; | |
| right: -8px; | |
| bottom: 0px; | |
| width: 0px; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-topnav { | |
| position: absolute; | |
| top: 0; | |
| padding: 16px; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content { | |
| height: 100%; | |
| position: relative; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { | |
| padding: 8px 20px; | |
| font-weight: bold; | |
| cursor: pointer; | |
| font-size: 14px; | |
| color: #5c7080; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { | |
| color: #f5f8fa; | |
| background-color: #10161a; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { | |
| color: #5c7080; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages { | |
| overflow-y: auto; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { | |
| text-decoration: none; | |
| cursor: pointer; | |
| font-size: 14px; | |
| padding: 8px 0px 8px 4px; | |
| color: #5c7080; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { | |
| color: #f5f8fa; | |
| background-color: #10161a; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .title { | |
| padding: 8px; | |
| margin-bottom: 8px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .roam-sidebar-body { | |
| margin-top: 64px; | |
| width: 100%; | |
| transition: all 150ms ease-in; | |
| position: absolute; | |
| overflow: scroll; | |
| } | |
| .roam-body .roam-app .roam-main { | |
| width: 100%; | |
| display: flex; | |
| } | |
| .roam-body .roam-app .roam-main .roam-article { | |
| position: relative; | |
| padding: 16px 42px 120px; | |
| font-size: 20px; /* RTB add: larger font */ | |
| color: #444444; /* RTB add: roam color - solarized light */ | |
| } | |
| .roam-body .roam-app .roam-main .roam-article .rm-title-display { | |
| margin-bottom: 32px; | |
| } | |
| #right-sidebar .rm-reference-container { | |
| padding-top: 0px; | |
| border-top: none; | |
| } | |
| .roam-block .rm-reference-container { | |
| padding-top: 0px; | |
| border-top: none; | |
| } | |
| .pointer { | |
| cursor: pointer; | |
| } | |
| .roam-topbar { | |
| height: 45px; | |
| position: fixed; | |
| width: 100%; | |
| z-index: 101; | |
| background-color: #fcf5e5; /* RTB change: bear background - solarized light */ | |
| padding-right: 16px; | |
| padding-left: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .trunc { | |
| max-width: 120px; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| overflow: hidden; | |
| } | |
| .bblack { | |
| border: 1px solid black; | |
| background-color: lightgrey; | |
| } | |
| .roam-popup-container { | |
| display: flex; | |
| flex-direction: column; | |
| overflow: scroll; | |
| } | |
| .roam-popup-container .roam-popup-content { | |
| position: absolute; | |
| top: 34px; | |
| bottom: 10px; | |
| width: 100%; | |
| overflow-y: scroll; | |
| } | |
| .rm-input { | |
| width: 100%; | |
| outline: 1px solid transparent; | |
| vertical-align: top; | |
| background-color: transparent; | |
| border: none; | |
| resize: none; | |
| } | |
| .rm-input::-webkit-input-placeholder { | |
| color: #ced9e0; | |
| } | |
| .rm-input:-moz-placeholder { | |
| /* Firefox 18- */ | |
| color: #ced9e0; | |
| } | |
| .rm-input::-moz-placeholder { | |
| /* Firefox 19+ */ | |
| color: #ced9e0; | |
| } | |
| .rm-input:-ms-input-placeholder { | |
| color: #ced9e0; | |
| } | |
| .rm-input::placeholder { | |
| color: #ced9e0; | |
| } | |
| .rm-title-textarea { | |
| width: 100%; | |
| outline: 1px solid transparent; | |
| vertical-align: top; | |
| line-height: 1.3em; | |
| background-color: transparent; | |
| border: none; | |
| resize: none; | |
| } | |
| .rm-title-textarea::-webkit-input-placeholder { | |
| color: #ced9e0; | |
| } | |
| .rm-title-textarea:-moz-placeholder { | |
| /* Firefox 18- */ | |
| color: #ced9e0; | |
| } | |
| .rm-title-textarea::-moz-placeholder { | |
| /* Firefox 19+ */ | |
| color: #ced9e0; | |
| } | |
| .rm-title-textarea:-ms-input-placeholder { | |
| color: #ced9e0; | |
| } | |
| .rm-title-textarea::placeholder { | |
| color: #ced9e0; | |
| } | |
| .rm-title-untitled { | |
| color: #ced9e0; | |
| } | |
| .rm-title-display { | |
| line-height: 1.3em; | |
| font-weight: 450; | |
| word-break: break-word; | |
| min-width: 100px; | |
| width: 100%; | |
| cursor: text; | |
| outline: 1px solid transparent; | |
| } | |
| .roam-log-container .roam-log-page { | |
| border-top: 1px solid #738694; | |
| margin-top: 40px; | |
| padding-top: 40px; | |
| padding-bottom: 16px; | |
| margin-bottom: 16px; | |
| } | |
| .roam-log-container .roam-log-page:first-child { | |
| border: 0px solid blue; | |
| margin-top: 0px; | |
| min-height: 500px; | |
| padding-top: 0px; | |
| } | |
| .roam-log-container .roam-log-preview { | |
| color: #8a9ba8; | |
| } | |
| .roam-log-container .roam-log-preview h1 { | |
| color: #8a9ba8; | |
| } | |
| .roam-log-container .roam-log-preview:hover { | |
| background-color: grey; | |
| } | |
| #buffer { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| #buffer .help-title { | |
| color: #f5f8fa; | |
| text-align: center; | |
| font-size: 16px; | |
| font-weight: bold; | |
| } | |
| #buffer .help-sub-title { | |
| color: #e1e8ed; | |
| text-align: center; | |
| } | |
| #buffer .help-item-text { | |
| color: #e1e8ed; | |
| } | |
| #buffer .help-item-label { | |
| opacity: 0.6; | |
| color: #e1e8ed; | |
| } | |
| .roam-table { | |
| padding-bottom: 24px; | |
| overflow-x: scroll; | |
| } | |
| .roam-table th, | |
| .roam-table td, | |
| .roam-table tr { | |
| font-size: 12px; | |
| min-width: 100px; | |
| max-height: 20px; | |
| padding: 8px 16px; | |
| margin: 0p; | |
| border: 1px solid grey; | |
| } | |
| .roam-table td { | |
| max-height: 20px; | |
| overflow: scroll; | |
| } | |
| .import-table { | |
| padding-bottom: 24px; | |
| max-width: 100%; | |
| } | |
| .import-table table { | |
| width: 100%; | |
| } | |
| .import-table th, | |
| .import-table td, | |
| .import-table tr { | |
| font-size: 12px; | |
| max-height: 20px; | |
| padding: 8px 16px; | |
| margin: 0p; | |
| border: 1px solid grey; | |
| } | |
| .import-table td { | |
| max-height: 20px; | |
| } | |
| .import-table td .import-preview { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| max-width: 50px; | |
| } | |
| #info { | |
| padding: 8px 0px; | |
| margin: 0px 8px; | |
| font-size: 12px; | |
| } | |
| #info table { | |
| margin: 0 auto; | |
| } | |
| #info table, | |
| #info th, | |
| #info td { | |
| padding: 8px; | |
| margin: 0p; | |
| border: 1px solid grey; | |
| } | |
| .hoverparent:hover .hoveronly { | |
| opacity: 1; | |
| } | |
| .hoveronly { | |
| opacity: 0; | |
| } | |
| .hoveronly:hover { | |
| opacity: 1; | |
| } | |
| .tiny { | |
| font-size: 7px; | |
| } | |
| .CodeMirror { | |
| font-family: monospace; | |
| } | |
| .CodeMirror .CodeMirror-code pre { | |
| font-family: monospace; | |
| box-shadow: none; | |
| } | |
| .block-mention { | |
| margin: 4px 8px 4px 0px; | |
| cursor: pointer; | |
| padding: 8px; | |
| background-color: #bfccd6; | |
| } | |
| .block-mention:hover { | |
| background-color: #a7b6c2; | |
| } | |
| .rm-page-ref { | |
| cursor: pointer; | |
| } | |
| .rm-page-ref:hover { | |
| text-decoration: underline; | |
| } | |
| .rm-page-ref-tag { | |
| color: #a7b6c2; | |
| } | |
| .rm-page-ref-brackets { | |
| color: #268bd261; /* color of brackets*/ | |
| } | |
| .rm-page-ref-link-color { | |
| color: #9d6500; /* color of page link references*/ | |
| } | |
| .rm-page-ref-namespace-color { | |
| color: green; | |
| } | |
| .rm-block-ref { | |
| padding: 4px 2px; | |
| margin: -4px 0px; | |
| font-size: 20px; /* RTB change: block ref's same size as others */ | |
| display: inline; | |
| border-bottom: 1px solid #93a1a1; | |
| cursor: alias; | |
| padding-left: 0px; /* RTB add: align to left */ | |
| } | |
| .rm-block-ref:hover { | |
| background-color: #f5f8fa; | |
| } | |
| .rm-reference-container { | |
| border-top: 2px solid #202b33; | |
| padding-top: 12px; | |
| margin-bottom: 8px; | |
| } | |
| .check-container { | |
| display: inline-block; | |
| position: relative; | |
| padding-left: 16px; /* RTB change: align checkbox for updated spacing */ | |
| margin-bottom: 10px; | |
| cursor: pointer; | |
| font-size: 22px; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| vertical-align: bottom; | |
| top: -12px; /* RTB change: align checkbox for updated spacing */ | |
| } | |
| /* Hide the browser's default checkbox */ | |
| .check-container input { | |
| position: absolute; | |
| opacity: 0; | |
| cursor: pointer; | |
| height: 0; | |
| width: 0; | |
| } | |
| /* Create a custom checkbox */ | |
| .checkmark { | |
| position: absolute; | |
| top: 0px; | |
| left: 0; | |
| height: 12px; | |
| border-radius: 2px; | |
| width: 12px; | |
| border: 1px solid #a7b6c2; | |
| } | |
| /* On mouse-over, add a grey background color */ | |
| /* When the checkbox is checked, add a blue background */ | |
| .check-container input:checked ~ .checkmark { | |
| background-color: #9d6500; /* solarized light */ | |
| border: none; | |
| } | |
| /* Create the checkmark/indicator (hidden when not checked) */ | |
| .checkmark:after { | |
| content: ""; | |
| position: absolute; | |
| display: none; | |
| } | |
| /* Show the checkmark when checked */ | |
| .check-container input:checked ~ .checkmark:after { | |
| display: block; | |
| } | |
| /* Style the checkmark/indicator */ | |
| .check-container .checkmark:after { | |
| left: 3.5px; | |
| top: 0.25px; | |
| width: 5px; | |
| height: 10px; | |
| border: solid white; | |
| border-width: 0 2px 2px 0; | |
| -webkit-transform: rotate(45deg); | |
| -ms-transform: rotate(45deg); | |
| transform: rotate(40deg) scale(0.8); | |
| } | |
| #roam-sidebar-logo a { | |
| text-decoration: none; | |
| } | |
| #roam-sidebar-logo:hover { | |
| background-color: #10161a; | |
| } | |
| .rm-find-or-create-wrapper { | |
| position: relative; | |
| transition: all 200ms ease-in; | |
| } | |
| .rm-find-or-create-wrapper .bp3-transition-container { | |
| width: 100%; | |
| } | |
| .rm-find-or-create-wrapper .bp3-menu { | |
| max-width: none; | |
| max-height: 400px; | |
| } | |
| .rm-find-or-create-wrapper .rm-menu-item { | |
| padding: 6px; | |
| cursor: pointer; | |
| border-radius: 2px; | |
| } | |
| .rm-find-or-create-wrapper .rm-menu-item .rm-search-title { | |
| font-weight: bold; | |
| } | |
| .rm-find-or-create-wrapper .rm-menu-item .rm-search-title .rm-new-page { | |
| color: #0d8050; | |
| } | |
| .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item { | |
| word-break: break-word; | |
| color: #8a9ba8; | |
| overflow-wrap: break-spaces; | |
| margin-left: -20px; | |
| } | |
| .rm-fill { | |
| width: 100%; | |
| } | |
| .rm-pages-sort-menu-item { | |
| padding-right: 16px; | |
| padding-left: 16px; | |
| font-weight: bold; | |
| } | |
| .rm-pages-row-highlight { | |
| background-color: #f5f8fa; | |
| } | |
| .rm-pages-row { | |
| display: flex; | |
| flex: 0 0 auto; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| } | |
| .rm-pages-row .rm-pages-sort-header { | |
| display: flex; | |
| flex: 0 0 auto; | |
| align-items: center; | |
| cursor: pointer; | |
| } | |
| .rm-pages-row .rm-pages-sort-header:hover { | |
| text-decoration: underline; | |
| } | |
| .rm-pages-row .rm-pages-title-col { | |
| padding: 8px 4px; | |
| flex: 1 0 50%; | |
| text-overflow: ellipsis; | |
| } | |
| .rm-pages-row .rm-pages-action-col { | |
| text-align: right; | |
| flex: 1 0 0; | |
| padding: 8px 4px; | |
| } | |
| .rm-pages-row .rm-pages-col { | |
| color: #8a9ba8; | |
| padding: 8px 4px; | |
| flex: 1 0 15%; | |
| } | |
| .rm-reference-item { | |
| margin-top: 8px; | |
| margin-right: 8px; | |
| flex: 1 1 100%; | |
| word-break: break-word; | |
| background-color: #f5f8fa; | |
| padding-right: 8px; | |
| } | |
| .rm-level1 { | |
| font-family: 'Computer Modern Serif'; /* RTB change */ | |
| font-weight: 400; | |
| font-size: 1.8em; | |
| } | |
| .rm-level1 textarea { | |
| line-height: 1.2; | |
| } | |
| .rm-level1 .roam-block { | |
| line-height: 1.2; | |
| margin-top: -8px; /* RTB add */ | |
| } | |
| .rm-level2 { | |
| font-family: 'Computer Modern Serif' !important; /* RTB change */ | |
| font-weight: 400; | |
| font-size: 1.4em; | |
| } | |
| /* RTB new section */ | |
| .rm-level2 .roam-block { | |
| margin-top: -8px; | |
| } | |
| .rm-level3 { | |
| font-weight: 500; | |
| font-size: 1.2em; | |
| color: #5c7080; | |
| } | |
| /* RTB new section */ | |
| .rm-level3 .roam-block { | |
| margin-top: -5px; | |
| } | |
| .rm-title1 { | |
| word-break: break-word; | |
| font-weight: 400; | |
| } | |
| .rm-histogram-table { | |
| width: 100%; | |
| margin-left: -8px; | |
| box-sizing: border-box; | |
| } | |
| .rm-histogram-table td { | |
| vertical-align: top; | |
| min-width: 18px; | |
| max-width: 18px; | |
| border: 1px solid transparent; | |
| } | |
| .rm-histogram-table td .flex-v-box { | |
| border-right: 0.2px solid #48aff0; | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| .rm-histogram-table td .flex-v-box .bp3-popover-wrapper { | |
| margin-top: 0px; | |
| margin-bottom: 0px; | |
| padding-bottom: 0px; | |
| } | |
| .rm-histogram-table td .flex-v-box .table-edited-by-view { | |
| transform-origin: center; | |
| background-size: cover; | |
| border: 1px solid darkgray; | |
| font-size: 0.7em; | |
| height: 12px; | |
| width: 12px; | |
| margin: 0px; | |
| padding: 0px; | |
| border-radius: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .slider .slider-cell { | |
| border: 1px solid transparent; | |
| flex: "1 0 100%"; | |
| } | |
| .slider .flex-v-box { | |
| justify-content: flex-start; | |
| align-items: center; | |
| } | |
| .slider .flex-v-box .bp3-popover-wrapper { | |
| margin-top: 0px; | |
| margin-bottom: 0px; | |
| padding-bottom: 0px; | |
| } | |
| .slider .flex-v-box .table-edited-by-view { | |
| transform-origin: center; | |
| background-size: cover; | |
| border: 1px solid darkgray; | |
| font-size: 0.7em; | |
| height: 12px; | |
| width: 12px; | |
| margin: 0px; | |
| padding: 0px; | |
| border-radius: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .nowrap { | |
| white-space: nowrap; | |
| } | |
| #rm-mobile-bar .rm-mobile-button { | |
| flex: 1 0 0; | |
| } | |
| .roam-intense { | |
| background-color: yellow; | |
| margin: -2px; | |
| padding: 2px; | |
| } | |
| .roam-highlight { | |
| background-color: #abffa0c4; | |
| margin: -2px; | |
| padding: 2px; | |
| } | |
| .roam-bullet-closed { | |
| background-color: #ced9e0; | |
| } | |
| #right-sidebar .roam-bullet-closed { | |
| background-color: #a7b6c2; | |
| } | |
| .level1 { | |
| font-family: Roboto, sans-serif; | |
| font-weight: 200; | |
| font-size: 40px; | |
| color: #444444; | |
| letter-spacing: normal; | |
| /*-ms-font-feature-settings: 'ss20' 1;*/ | |
| } | |
| .rm-pm-editor { | |
| padding: 5px; | |
| min-height: 100px; | |
| outline: 0 !important; | |
| } | |
| .rm-pm-editor h1 { | |
| font-family: 'Inter', sans-serif; | |
| font-weight: 400; | |
| font-size: 1.8em; | |
| } | |
| .rm-pm-editor h1 textarea { | |
| line-height: 1.2; | |
| } | |
| .rm-pm-editor h1 .roam-block { | |
| line-height: 1.2; | |
| } | |
| .rm-pm-editor h2 { | |
| font-family: 'Inter', sans-serif !important; | |
| font-weight: 400; | |
| font-size: 1.4em; | |
| } | |
| .rm-pm-editor h3 { | |
| font-weight: 500; | |
| font-size: 1.2em; | |
| color: #5c7080; | |
| } | |
| .rm-pm-editor img { | |
| max-width: 100%; | |
| } | |
| .rm-pm-sub-editor-wrapper { | |
| padding: 2.5px; | |
| margin: 2px; | |
| background-color: rgba(201, 201, 207, 0.1); | |
| } | |
| .rm-section-item { | |
| width: -webkit-max-content; | |
| width: -moz-max-content; | |
| width: max-content; | |
| } | |
| .rm-section { | |
| background-color: yellow; | |
| } | |
| .rm-section-selected { | |
| background-color: lightblue; | |
| } | |
| .rm-edit-view-wrapper { | |
| min-width: 21px; | |
| } | |
| .edited-by-view { | |
| flex: 0 0 21px; | |
| transform-origin: center; | |
| background-size: cover; | |
| border: 1px solid darkgray; | |
| font-size: 0.7em; | |
| margin-top: 6.5px; | |
| margin-right: 6px; | |
| margin-left: 0px; | |
| height: 15px; | |
| width: 15px; | |
| border-radius: 100%; | |
| background-repeat: no-repeat; | |
| } | |
| .roam-block-container { | |
| max-width: 740px; | |
| border-radius: 2px; | |
| } | |
| .block-highlight-grey { | |
| background-color: #ced9e0; | |
| } | |
| .block-highlight-blue { | |
| background-color: #7cccff; | |
| } | |
| .block-highlight-yellow { | |
| background-color: yellow; | |
| } | |
| .block-bullet-view { | |
| flex: 1 1 100%; | |
| margin-left: 5px; | |
| } | |
| .block-border-left { | |
| /* border-left: 1px solid #bfccd6; RTB: Remove left-side vertical lines */ | |
| } | |
| .text-align-left { | |
| text-align: left; | |
| } | |
| .text-align-center { | |
| text-align: center; | |
| } | |
| .text-align-right { | |
| text-align: right; | |
| } | |
| .text-align-justify { | |
| text-align: justify; | |
| } | |
| .roam-block { | |
| min-height: calc(1.5em + 8px); | |
| box-sizing: border-box; | |
| white-space: pre-wrap; | |
| overflow-wrap: break-word; | |
| margin-top: -1px; | |
| min-width: 100px; | |
| width: 100%; | |
| line-height: 1.5em; | |
| cursor: text; | |
| padding-top: 4px; | |
| padding-bottom: 4px; | |
| } | |
| .roam-block .span-view { | |
| box-sizing: border-box; | |
| } | |
| .rm-block-text { | |
| max-width: 700px; /* RTB change: desired section width */ | |
| } | |
| .controls { | |
| display: flex; | |
| flex: 0 0 40px; | |
| padding-top: 4px; | |
| padding-left: 4px; | |
| } | |
| .controls .block-expand { | |
| transform: scale(1); | |
| transform-origin: center; | |
| } | |
| .controls .block-expand .rm-caret { | |
| transition: all 100ms ease-in; | |
| } | |
| .controls .block-expand .rm-rotate-90 { | |
| transform: rotate(-90deg); | |
| } | |
| .controls .opacity-none { | |
| opacity: 0; | |
| } | |
| .controls .opacity-7 { | |
| opacity: 0.7; | |
| } | |
| .controls .cursor-pointer { | |
| cursor: pointer; | |
| } | |
| .controls .cursor-grab { | |
| cursor: grab; | |
| } | |
| .controls .bk-light-grey { | |
| background-color: #ced9e0; | |
| } | |
| .controls .simple-bullet-outer { | |
| display: flex; | |
| height: 13px; | |
| width: 13px; | |
| margin-top: 6.3px; /* RTB change: center bullet to match font sizing */ | |
| border-radius: 50%; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .controls .simple-bullet-outer .simple-bullet-inner { | |
| border-radius: 50%; | |
| width: 5px; | |
| height: 5px; | |
| background-color: #9d6500; /* RTB change: solarized light bullet */ | |
| } | |
| .version-bullet { | |
| background-color: #a7b6c2; | |
| border: none; | |
| display: flex; | |
| cursor: pointer; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0px; | |
| transform: scale(0.9); | |
| transform-origin: center; | |
| margin-top: 2px; | |
| margin-left: 0px; | |
| height: 16px; | |
| font-size: 9px; | |
| color: white; | |
| text-align: center; | |
| min-height: 16px; | |
| max-height: 16px; | |
| min-width: 16px; | |
| max-width: 16px; | |
| border-radius: 16px; | |
| } | |
| .dnd-separator { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .dnd-separator .dnd-drop-area { | |
| position: absolute; | |
| top: -11px; | |
| height: 28px; | |
| width: 100%; | |
| } | |
| .dnd-separator .dnd-drop-bar { | |
| position: absolute; | |
| z-index: 0; | |
| top: -4px; | |
| left: 20px; | |
| width: 96%; | |
| height: 4px; | |
| border-radius: 10px; | |
| background-color: #5c7080; | |
| } | |
| .rm-database { | |
| background-color: #182026; | |
| color: #ced9e0; | |
| } | |
| .rm-mentions-search-items { | |
| padding: 8px; | |
| } | |
| .rm-mentions-search-items .rm-mentions-title { | |
| font-size: 20px; | |
| font-weight: lighter; | |
| margin: 4px; | |
| } | |
| .rm-mentions-search-items .rm-mentions-search-item { | |
| padding: 12px; | |
| cursor: pointer; | |
| background-color: #f5f8fa; | |
| border: 1px solid #bfccd6; | |
| } | |
| .rm-mentions-search-items .rm-mentions-search-item:hover { | |
| background-color: #bfccd6; | |
| } | |
| .block-ref-count-button { | |
| font-size: 0.9em; | |
| } | |
| .rm-grey-text { | |
| color: #8a9ba8; | |
| } | |
| .rm-red-text { | |
| color: red; | |
| } | |
| .flex-v-box { | |
| display: flex; | |
| flex: 0 0 auto; | |
| flex-direction: column; | |
| } | |
| .flex-h-box { | |
| display: flex; | |
| flex: 0 0 auto; | |
| padding-bottom: 10px; /* RTB add: a little extra space between bullets */ | |
| } | |
| .flex-align-start { | |
| align-items: flex-start; | |
| } | |
| .flex-justify-start { | |
| justify-content: flex-start; | |
| } | |
| .tags-input { | |
| display: inline-block; | |
| width: 10em; | |
| margin: 0 0 4px; | |
| padding: 4px 6px; | |
| background: none; | |
| border: 0; | |
| outline: 0; | |
| font: inherit; | |
| color: inherit; | |
| text-align: left; | |
| text-shadow: none; | |
| } | |
| .tags-input:focus { | |
| /* box-shadow: 0 0 5px rgba(81, 203, 238, 1); */ | |
| /* border: 2px solid white; */ | |
| /* border-bottom-color: #448cca; */ | |
| } | |
| .tags-output { | |
| display: inline-block; | |
| margin-left: 4px; | |
| } | |
| .tags-output-item { | |
| display: inline-block; | |
| background-color: lightgrey; | |
| cursor: pointer; | |
| margin: 0 4px 4px 0; | |
| padding: 4px 6px; | |
| font-size: 10px; | |
| border-radius: 4px; | |
| } | |
| .tags-output-item2 { | |
| background-color: black; | |
| display: inline-block; | |
| text-decoration: none; | |
| color: white; | |
| cursor: pointer; | |
| margin-left: 6px; | |
| } | |
| html { | |
| margin: 0; | |
| min-height: 100%; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| div { | |
| font-family: 'Computer Modern Serif'; /* RTB change: desired font (bear) */ | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| textarea { | |
| font-family: 'Computer Modern Serif'; /* RTB change: desired font (bear) */ | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| .xtra { | |
| transform: scale(3); | |
| border-radius: 50%; | |
| padding: 4px; | |
| } | |
| .border { | |
| border: 1px solid ; | |
| } | |
| .display-flex { | |
| display: -webkit-flex; | |
| display: flex; | |
| } | |
| .display-inline-flex { | |
| display: -webkit-inline-flex; | |
| display: inline-flex; | |
| } | |
| .react-resizable { | |
| position: relative; | |
| } | |
| .react-resizable-handle { | |
| position: absolute; | |
| width: 20px; | |
| height: 20px; | |
| bottom: 0; | |
| right: 0; | |
| background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+'); | |
| background-position: bottom right; | |
| padding: 0 3px 3px 0; | |
| background-repeat: no-repeat; | |
| background-origin: content-box; | |
| box-sizing: border-box; | |
| cursor: se-resize; | |
| } | |
| .resize-card { | |
| overflow-y: hidden; | |
| } | |
| .noselect { | |
| -webkit-touch-callout: none; | |
| /* iOS Safari */ | |
| -webkit-user-select: none; | |
| /* Safari */ | |
| -khtml-user-select: none; | |
| /* Konqueror HTML */ | |
| -moz-user-select: none; | |
| /* Firefox */ | |
| -ms-user-select: none; | |
| /* Internet Explorer/Edge */ | |
| user-select: none; | |
| /* Non-prefixed version, currently */ | |
| } | |
| /* RTB additions below */ | |
| #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { | |
| margin-top: 3px; | |
| } | |
| #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { | |
| margin-top: 3px; | |
| } | |
| #roam-right-sidebar-content .rm-level1 .roam-block { | |
| margin-top: -5px; | |
| } | |
| #roam-right-sidebar-content .rm-level2 .roam-block { | |
| margin-top: -5px; | |
| } | |
| #roam-right-sidebar-content .rm-level3 .roam-block { | |
| margin-top: -3px; | |
| } | |
| #roam-right-sidebar-content { | |
| font-size: 16px; | |
| } | |
| #roam-right-sidebar-content .rm-block-ref { | |
| font-size: 14px; /* make block ref in side-bar a little smaller to show that's it's a reference */ | |
| /* color: #9d6500; Don't change color of full block ref in sidebar */ | |
| } | |
| a { | |
| color: #9d6500; /* solarized light color */ | |
| } | |
| /* | |
| Popup menu when typing / below | |
| .bp3-elevation-3 { | |
| background-color: navajowhite !important; | |
| } | |
| .bp3-elevation-3 div { | |
| font-family: ... | |
| } | |
| */ | |
| #right-sidebar { | |
| background-color: rgb(247, 249, 251) !important; /* nicer light gray color */ | |
| } | |
| /* target block embeds on main page and in sidebar */ | |
| div[id^='block-input-'] > span > div { | |
| background-color: #acb0e830 !important; | |
| } | |
| /* RTB additions below */ | |
| #roam-right-sidebar-content span.simple-bullet-outer.cursor-grab { | |
| margin-top: 3px; | |
| } | |
| #roam-right-sidebar-content .block-bullet-view .simple-bullet-outer { | |
| margin-top: 3px; | |
| } | |
| #roam-right-sidebar-content .rm-level1 .roam-block { | |
| margin-top: -5px; | |
| } | |
| #roam-right-sidebar-content .rm-level2 .roam-block { | |
| margin-top: -5px; | |
| } | |
| #roam-right-sidebar-content .rm-level3 .roam-block { | |
| margin-top: -3px; | |
| } | |
| /* Side Bar */ | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button, | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper, | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { | |
| background-color: #586f76; | |
| color: #e9e1cc; | |
| } | |
| /* Better hover effect for shortcut pages in left side-bar */ | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { | |
| color: #DAD5B6; | |
| background-color: #767558; | |
| } | |
| /* Omni Sidebar Hover State */ | |
| .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { | |
| color: #DAD5B6; | |
| background-color: #767558; | |
| } | |
| /* Side Bar Open/Close Icon */ | |
| .bp3-button:before, | |
| .bp3-minimal:before, | |
| .bp3-icon-menu:before, | |
| .bp3-small:before { | |
| color: #e9e1cc !important; | |
| } | |
| /* Change sideboard to all one color */ | |
| .roam-body .roam-app .roam-sidebar-container { | |
| background-color: #586F76 !important; | |
| } | |
| /*Change Roam Research logo color to match theme*/ | |
| #roam-sidebar-logo { | |
| filter: brightness(0) saturate(100%) invert(92%) sepia(20%) saturate(457%) hue-rotate(315deg) brightness(108%) contrast(99%); | |
| } | |
| #roam-sidebar-logo:focus, #roam-sidebar-logo:hover { | |
| text-decoration: none !important; | |
| } | |
| /* Change color of the email address at top of left sidebar to match theme */ | |
| .bp3-button div { | |
| color: #FEF6E5 !important; | |
| } | |
| /*Pill Page References*/ | |
| /*span.rm-page-ref { | |
| background-color: #fbd15b75 !important; | |
| font-size: 18px; | |
| letter-spacing: .07em; | |
| } | |
| span.rm-page-ref { | |
| color: black !important; | |
| border-radius: 10px; | |
| padding: 2px 3px 2px 3px; | |
| } | |
| span.rm-page-ref:hover { | |
| color: black !important; | |
| background-color: #b0d4fc !important; | |
| text-decoration: none; | |
| } | |
| span.rm-page-ref:hover { | |
| color: #000 !important; | |
| background-color: #ffca36d9 !important; | |
| border-radius: 15px; | |
| text-decoration: none; | |
| }*/ | |
| /* Tag Styles hashtags*/ | |
| /*.rm-page-ref-tag | |
| color: #f8c764 !important; | |
| background-color: #423212; | |
| border-radius: 10px; | |
| padding: 2px 3px 2px 3px; | |
| } | |
| .rm-page-ref-tag:hover { | |
| color: white !important; | |
| background-color: #e88a24; | |
| text-decoration: none; | |
| } | |
| */ | |
| /*scrollbar*/ | |
| ::-webkit-scrollbar { | |
| width: 7px; | |
| } | |
| /*lets me customize color of the selected block and text within it*/ | |
| .rm-block-input { | |
| line-height: 1.5em; | |
| width: 100%; | |
| outline: 1px solid rgba(0, 0, 0, 0); | |
| overflow-wrap: break-spaces; | |
| vertical-align: top; | |
| margin-top: -1px; | |
| color: #000 !important; | |
| background-color: #bf9a286b; | |
| padding-top: 4px; | |
| padding-bottom: 4px; | |
| padding-left: 5px; | |
| letter-spacing: inherit; | |
| border-radius: 10px; | |
| resize: none; | |
| } | |
| /* search bar full width */ | |
| .rm-find-or-create-wrapper { | |
| flex: 0 1 100% !important; | |
| } | |
| /* reduces font size when I'm doing an inline search with [[]] or (()) */ | |
| div.bp3-elevation-3 { | |
| font-size: 0.7em; | |
| } | |
| /*Wraps text when I'm doing an inline search with [[]] or (())*/ | |
| .bp3-text-overflow-ellipsis { | |
| text-overflow: unset; | |
| white-space: unset; | |
| } | |
| /* Increases the height of the inline search box */ | |
| div.bp3-elevation-3[style^='max-height: 300px; top: 26px; overflow: auto;'] { | |
| max-height: 600px !important; | |
| } | |
| /* Right side bar reference boxes */ | |
| #right-sidebar .rm-reference-item { | |
| background-color: #ede6f9; | |
| border-radius: 15px; | |
| padding: 5px; | |
| } | |
| /*RR change: additional text styles*/ | |
| .roam-app strong { | |
| color: #6c71c4 !important; | |
| } | |
| .roam-app em { | |
| color: #d33682; | |
| } | |
| /*RR change: Markdown Links */ | |
| .roam-app a { | |
| color: #2aa198; | |
| } | |
| .roam-app a:focus, | |
| .roam-app a:hover { | |
| color: #2aa198; | |
| text-decoration: underline; | |
| } | |
| /* Reference Boxes */ | |
| /*.rm-reference-item { | |
| background-color: #ede6f9; | |
| border-radius: 15px; | |
| padding: 20px; | |
| }*/ | |
| .roam-block .rm-reference-main { | |
| border: 2px solid #ced9e0; | |
| padding: 0px 16px 12px 16px; | |
| background-color: #ced9e073; | |
| } | |
| .loading-astrolabe{ | |
| display: block; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| background: url(https://i.imgur.com/KWl6pqT.gif) no-repeat; | |
| width: 600px; | |
| height: 600px; | |
| padding-left: 600px; /* Equal to width of new image */ | |
| } | |
| .loading-astrolabe .wand{ | |
| visibility: hidden !important; | |
| } | |
| /* full width of text */ | |
| .roam-block-container { | |
| max-width: 100% !important; | |
| } | |
| div.roam-center > div:first-child { | |
| padding-right: calc((100% - 950px) / 2) !important; | |
| padding-left: calc((100% - 1500px) / 2) !important; | |
| } | |
| .hoverparent[style^='position: relative; width: 500px;'] { | |
| width: 100% !important; | |
| } | |
| .hoverparent .react-resizable[style^='width: 500px;'] { | |
| width: 100% !important; | |
| } | |
| .react-resizable[style^='width: 580px;'], | |
| .react-resizable[style^='width: 720px;'] { | |
| width: 100% !important; | |
| } | |
| .hoverparent[style^="position: relative; width: 580px;"], | |
| .hoverparent[style^="position: relative; width: 720px;"] { | |
| width: 100% !important; | |
| } | |
| .rm-block-text { | |
| max-width: 100%; | |
| } | |
| /* Andy Matuschak Mode */ | |
| .roam-center { | |
| flex: 1 1 100% !important; | |
| flex-basis: 10% !important; | |
| } | |
| #right-sidebar { | |
| background-color: #fcf5e5 !important; | |
| } | |
| #right-sidebar #roam-right-sidebar-content { | |
| overflow: scroll !important; | |
| white-space: wrap; | |
| display: flex; | |
| /* Below is for masonry layout */ | |
| } | |
| #right-sidebar #roam-right-sidebar-content > div { | |
| position: relative; | |
| display: flex; | |
| flex: 1 0 40%; | |
| flex-direction: column; | |
| padding: 10px; | |
| border: 1px solid #bfbfbf !important; | |
| border-radius: 5px; | |
| background-color: rgb(247, 249, 251) !important; | |
| align-self: flex-start; | |
| margin-right: 0px !important; | |
| height: 780px; | |
| overflow-y: scroll; | |
| /* Below is for masonry layout */ | |
| margin-bottom: 16px; | |
| min-height: fit-content; | |
| width: 900px; | |
| } | |
| .roam-log-container .roam-log-page { | |
| padding: 10px; | |
| border: 1px solid #000; | |
| border-radius: 5px; | |
| background-color: #fcf5e5 !important; | |
| } | |
| .roam-toolkit-block-mode--highlight{background-color: #bf9a286b; !important;} | |
| .kanban-board { | |
| margin-right: -14% !important; | |
| margin-left: 0% !important; | |
| font-size: 12px !important;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment