:root{
--color-accent-1: #354B62;
--color-accent-2: #B78343;
--color-dark-1: #252422;
--color-dark-op: #826840;
--color-gray: #847D70;
--color-sidebars: #ECECEC;
--color-light-1: #ffffff;
--color-light-2: #F2F0EE;
--color-thought-tag: #FBE4EB;
--color-area-tag: #D9ECF4;
--color-subtask-tag: #DDF4D6;
--color-timeline-tag: #F9F7C0;
--color-urgent-tag: #FDD9D9;
--color-inbox-tag: #E9E3FB;
--color-person-tag: #FFE9D4;
--color-consideration-tag: #D9ECF4;
--color-editlater-tag: #FDD9D9;
--color-morning-tag: #FFE9D4;
--color-evening-tag: #E9E3FB;
--color-quicktask-tag: #DDF4D6;
}
/* FONTS */
h1.rm-title-display, .rm-title-textarea {
font-family: 'Arial Black' !important;
color: var(--color-accent-1) !important;
font-weight: 700;
font-size: 48px;
}
.roam-body .roam-app {
color: var(--color-dark-1);
}
body, textarea {
font-size: 14px;
}
/*SEARCH */
.bp3-input,
.bp3-input[readonly] {
background: var(--color-light-2);
}
.rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item {
word-break: break-word;
color: var(--color-dark-1);
overflow-wrap: break-spaces;
margin-left: -20px;
}
/* BODY AND BLOCKS */
.roam-block-container {
max-width: 1000px;
}
.roam-block {
max-width: 850px;
}
.roam-body-main {
display: block;
}
.rm-page-ref-brackets {
display:none;
}
.block-border-left {
border-left: 1px solid var(--color-accent-1);
}
/* KANBAN */
.kanban-board {
background-color: transparent;
padding: 0;
}
.kanban-title {
background: transparent;
color: var(--color-gray) !important;
font-weight: bold;
padding: 0px !important;
max-height: 30px;
border: none;
display: flex;
align-items: center;
}
.kanban-title > span {
display: block;
margin: auto;
}
.kanban-column {
border-radius: 10px;
box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
padding: 0;
overflow: hidden;
}
.kanban-card {
border-radius: 10px;
box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
}
.kanban-card {
background-color: var(--color-light-1);
margin: 8px;
box-shadow: 0px 1px 2px var(--color-gray);
padding: 10px;
border-radius: 4px;
line-height: 1.3em;
}
.kanban-column {
margin: 0px 4px 0px 4px;
min-width: 200px;
border-radius: 6px;
}
/* SIDEBAR LEFT */
.roam-body .roam-app .roam-sidebar-container {
background-color: var(--color-sidebars);
border-right: 1px dashed var(--color-gray);
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper {
color: var(--color-accent-1);
font-size: 16px;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper > :first-child {
display: none;
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
font-size: 15px
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page, .roam-body .roam-app .roam-sidebar-container > * {
opacity: 80%;
box-shadow: none;
color: var(--color-gray);
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button {
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
color: var(--color-accent-1);
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover, .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover {
background: white;
color: var(--color-dark-op);
opacity: 100;
}
/* SIDEBAR RIGHT */
#right-sidebar {
background-color: var(--color-sidebars) !important;
border-left: 1px dashed var(--color-gray);
}
#right-sidebar .bp3-button + div {
font-weight: 700
}
#right-sidebar .bp3-button + div strong {
font-weight: 400;
color: var(--color-dark-op);
}
/* QUERY */
.rm-query {
background-color: transparent;
border: none;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-radius: 10px;
}
.rm-query .rm-query-title {
background-color: var(--color-gray);
color: var(--color-sidebars);
font-size: .8em;
}
/* PAGE SORTER */
.rm-pages-row .rm-pages-col {
color: black;
padding: 8px 4px;
flex: 1 0 15%;
}
.rm-clickable-pill.empty-pill {
color: black;
}
.title-children-text {
color: var(--color-gray);
}
#rm-all-pages-column-titles {
background-color: var(--color-sidebars);
border-bottom: 1px dashed var(--color-gray);
}
.rm-pages-row-header {
background-color: var(--color-sidebars);
}
.rm-clickable-pill.level1-pill {
background-color: var(--color-accent-2);
}
.rm-clickable-pill {
background-color: var(--color-accent-2);
}
/* SLIDER */
.bp3-intent-primary {
background-color: var(--color-gray) !important;
}
.bp3-slider-handle {
background-color: #DEEADE !important;
border-radius: 10px;
}
.bp3-slider-label {
color: var(--color-accent-1) !important;
}
.bp3-slider-handle .bp3-slider-label{
background-color: var(--color-accent-1) !important;
color: var(--color-light-1) !important;
}
/* CHECKBOX */
.check-container {
padding-right: 2px;
vertical-align: text-bottom;
top: -5px;
}
.check-container .checkmark {
width: 14px;
height: 14px;
}
.check-container .checkmark::after {
left: 4.5px;
top: 1px;
}
.check-container input[checked] + .checkmark {
background-color: var(--color-accent-2) !important;
}
/* REFERENCES */
span.rm-page-ref[data-tag] {
background-color: #F4F4F4;
color: var(--color-accent-1);
padding: 3px 7px;
line-height: 2em;
border-right: solid 1px;
border-bottom: solid 1px;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag]:not([data-tag="42SmartBlock"]):not([data-tag="Source"]):not([data-tag="Thought"]):not([data-tag="Quicktask"]):not([data-tag="Area"]):not([data-tag="Consideration"]):not([data-tag="Evening"]):not([data-tag="Morning"]):not([data-tag="Editlater"]):not([data-tag="Urgent"]):not([data-tag="Inbox"]):not([data-tag="Timeline"]):not([data-tag="Subtask"]):not([data-tag="Person"])::before{
content: '🌍';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Source"]::before {
content: '📚';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Source"] {
background-color: var(--color-quicktask-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Quicktask"]::before {
content: '⛳️';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Quicktask"] {
background-color: var(--color-quicktask-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Evening"]::before {
content: '🛌';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Evening"] {
background-color: var(--color-evening-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Morning"] {
background-color: var(--color-morning-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Morning"]::before {
content: '🌅';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Editlater"] {
background-color: var(--color-editlater-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Editlater"]::before {
content: '🛠';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Consideration"] {
background-color: var(--color-consideration-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Consideration"]::before {
content: '🗳' ;
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Inbox"] {
background-color: var(--color-inbox-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Inbox"]::before {
content: '📥';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Person"] {
background-color: var(--color-person-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Person"]::before {
content: '🙇♂️';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Urgent"] {
background-color: var(--color-urgent-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Urgent"]::before {
content: '🚩';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Timeline"] {
background-color: var(--color-timeline-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Timeline"]::before {
content: '🕘';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Subtask"] {
background-color: var(--color-subtask-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Subtask"]::before {
content: '🌱';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Area"] {
background-color: var(--color-area-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Area"]::before {
content: '🗺';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
span.rm-page-ref[data-tag="Thought"] {
background-color: var(--color-thought-tag);
color: #252422;
padding: 3px 7px;
line-height: 2em;
border-radius: 10px;
font-weight: 600;
}
span.rm-page-ref[data-tag="Thought"]::before {
content: '🧠';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
.rm-block-ref::before {
content: '✈️';
display: inline-block;
width: 10px;
border-radius: 40px;
height: 10px;
margin-right: 10px;
}
.rm-reference-item {
margin-top: 8px;
border-radius: 6px;
border: 1px dashed var(--color-gray);
margin-right: 8px;
flex: 1 1 100%;
word-break: break-word;
background-color: var(--color-sidebars);
padding: 8px;
}
.rm-page-ref {
color: var(--color-dark-op);
border-bottom: dashed var(--color-dark-op);
border-width: thin;
}
.rm-page-ref-link-color {
color: var(--color-dark-op);
}
a {
color: var(--color-accent-2);
}