Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.