roam-mappletons-andy-subdued.css

/*  Make sure you have the fonts Lato and Open Sans installed locally on your machine.
They're free to download from Google:
https://fonts.google.com/specimen/Lato
https://fonts.google.com/specimen/Open+Sans  */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lato', sans-serif;
}


div,
textarea {
    font-family: 'Open Sans';
}
.roam-topbar {
    background: transparent;
}
.roam-body {
    background-color: #fcfcfc;
}
.roam-block-container {
    max-width: 1000px;
}

.rm-query {
    border: 0.5px solid #e4e9ec;
    border-radius: 5px;
}

.rm-query .rm-query-title {
    background-color: #f7f8f8;
    padding: 0.8em;
    color: #d1dbe2;
    font-size: 80%;
}

.rm-reference-main.rm-query-content {
    padding: 0.8em;
}

.rm-reference-main .rm-reference-item .rm-block-text {
    font-size: 90%;
}

.rm-reference-main .rm-reference-item .controls {
    margin-left: -1em;
}

.rm-ref-page-view {
    padding: 0.4em 0.2em;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page {
    padding: 6px;
}

div.flex-v-box.starred-pages-wrapper > div.flex-h-box > span {
    font-size: 14px;
    opacity: 80%;
    letter-spacing: 0.04em;
}

div.roam-sidebar-container.noselect > div > div {
    font-size: 14px;
    letter-spacing: 0.03em;
}

#block-input {
    background: white;
}

.roam-body #block-input > span > div {
    padding: 6px 24px;
    background: white;
}

span.bp3-icon-small.bp3-icon-star {
    display: none;
    visibility: hidden;
}

.roam-block {
    max-width: 850px;
}

#right-sidebar > div {
    background-color: #fcfcfc;
    border-left: 1px solid #e9ebef;
}

.controls .simple-bullet-outer .simple-bullet-inner {
    background-color: #dde2ee;
}
.block-border-left {
    border-left: 1px solid #dbdbdb;
}
.kanban-board {
    background-color: #fcfcfc;
}
.kanban-card {
    background-color: white;
    margin: 8px;
    box-shadow: 0px 1px 2px #9EB3C0;
    padding: 10px;
    border-radius: 2px;
    line-height: 1.3em;
}
.kanban-title {
    text-align: center;
    font-weight: bold;
    padding-top: 6px;
}
.kanban-column {
    background-color: #E4EDF2;
    margin: 0px 4px 0px 4px;
    padding: 4px;
    min-width: 200px;
    border-radius: 3px;
}

.checkmark {
    background: #fff;
}
.check-container input:checked ~ .checkmark {
    background: #33bdea;
}
.check-container input:checked ~ .checkmark:after {
    border-color: #fff;
}
.rm-reference-item {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #e4e9ee;
    margin-right: 8px;
    flex: 1 1 100%;
    word-break: break-word;
    background-color: #f5f7fa;
    padding: 8px;
}

.rm-level2 {
    font-size: 1.5em;
}
.rm-level3 {
    color: #939aae;
    font-weight: 400;
    font-size: 1.3em;
}
.rm-page-ref {
    color: #9aabd0;
}
.rm-page-ref-link-color {
    color: #4d94ff;
    font-weight: 600;
}
a {
    color: #8A3CC8;
}
.intercom-app,
.intercom-launcher-frame,
#intercom-container {
    display: none;
}
.roam-body .roam-app .roam-sidebar-container {
    background-color: #fafafa;
    border-right: 1px #eee solid;
}
.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;
}
.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: black;
    opacity: 100%;
}
#buffer.tall {
    height: calc(100vh - 50px);
}

.check-container {
    padding-right: 4px;
}
span.rm-page-ref {
    border-radius: 2px;
    padding-left: 1px;
    padding-right: 1px;
}
.content span.rm-page-ref {
    padding: 4px 1px 1px;
    /* required for fixing azo */
}
.center-proj {
    text-align: center;
}


/* Custom data tags */
span.rm-page-ref[data-tag="TwitterPost"] {
    background: #81D5ED;
    color: white;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Literature Notes"] {
    background: #9769FF;
    color: white;
    padding: 3px 7px;
    font-weight: 500;
    line-height: 2em;
}


span.rm-page-ref[data-tag="Evergreens"] {
    background: #0DBAC6;
    color: #fff;
    padding: 3px 8px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Seedling"] {
    color: #0dbac6;
    padding: 3px 3px;
    font-weight: 600;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Idea Bank"] {
    color: #FCB815;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Idea Bank"]:before {
    content: '✦ '
}

span.rm-page-ref[data-tag="Illustrated Notes"] {
    color: #7172FC;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Garden Notes"] {
    color: #9DBC13;
    padding: 3px 4px;
    font-weight: 700;
    line-height: 1.4em;
}

span.rm-page-ref[data-tag="Video Tutorial"] {
    color: #db3b8d;
    padding: 3px 4px;
    line-height: 1.4em;
    font-weight: 700;
}

span.rm-page-ref[data-tag="Essay"] {
    background: #ADCB2A;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}


span.rm-page-ref[data-tag="Livestream"] {
    color: #B979CF;
    padding: 3px 4px;
    line-height: 1.4em;
    font-weight: 700;
}

span.rm-page-ref[data-tag="Talk"] {
    background: #7172FC;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Waiting"] {
    background: #F9C866;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Researching"] {
    background: #FF9D66;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

span.rm-page-ref[data-tag="Synthesising"] {
    background: #FC766F;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}


span.rm-page-ref[data-tag="Alive"] {
    background: #EE5F85;
    color: #fff;
    padding: 3px 7px;
    line-height: 2em;
    font-weight: 500;
}

/* Andy Matuschak */
.roam-center {
    flex: 1 1 100% !important;
    flex-basis: 50% !important;
}

#right-sidebar {
    background-color: white !important;
}

#right-sidebar #roam-right-sidebar-content {
    overflow: scroll !important;
    white-space: normal;
    display: flex;
    align-content: flex-start;
    /* Below is for masonry layout */
    flex-flow: column wrap;
}

#right-sidebar #roam-right-sidebar-content > div {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    padding: 10px;
    border: 0.5px solid #e4e9ec !important;
    border-radius: 5px;
    background-color: white !important;
    align-self: flex-start;
    margin-right: 0px !important;
    /* Below is for masonry layout */
    margin-bottom: 16px;
    min-height: fit-content;
    max-width: 600px
}

#right-sidebar #roam-right-sidebar-content > div > div:nth-child(2) {
    resize: vertical;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 780px;
}

.roam-log-container .roam-log-page {
    padding: 10px;
    border-top: 1px solid #dbdbdb;
}
/* modifications begin */


/* sidebar magic 🔥 :)
 * resets the padding changes when sidebar is visible. 
 * This allows the sidebar to overlay the content, instead of pushing it. 
 * on click, the content gets pushed (as expected)
 * ~ is the sibling CSS selector; to detect the closed state of the sidebar
 */
.roam-sidebar-container:not([style^='left: 0px; top: 0px; bottom: 0px;']) ~ .roam-main .roam-body-main {
    width: 100vw !important;
}

.roam-sidebar-container:not([style^='left: 0px; top: 0px; bottom: 0px;']) ~ .roam-main .roam-body-main > .roam-center > div:first-child {
    padding-right: calc((100% - 800px) / 2) !important;
    padding-left: calc((100% - 800px) / 2) !important;
}

/* Prevents weird siderbar scroll */
html {
  overflow: hidden;
}

/*  more sidebar fixes */

/* makes the shortcuts stick edge-to-edge, 
 * with spacing on the left 
*/
.starred-pages-wrapper {
  padding: 8px 0 !important;
}

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.starred-pages-wrapper > div.flex-h-box {
  padding-left: 20px;
}

/*
* ⌗ for block refs 🚀
*/
.rm-block-ref::before {
    content: '⌗';
    display: inline-block;
    color: #4d94ff;
    margin-right: 5px;
    top: -2px;
    position: relative;
}
.rm-block-ref {
    display: inline-flex;
    border-bottom: none;
    font-size: 1em;
    color: #627a9d;
    background-color: #f5f7fa;
}

.rm-block-ref:hover {
    cursor: pointer;
}


/* Scrollbar improvements */
div::-webkit-scrollbar-track {
    background-color: #fcfcfc!important;
}

div::-webkit-scrollbar-thumb {
    background-color: #d1dbe2 !important;
}

/* OSX-like scrollbars 🤓 (width increases on hover)
 * default width is 6px - increases to 8px on hover
 * spacing around is 2px (defined by the same-colored border)
*/
div::-webkit-scrollbar {
    width: 10px; 
    height: 10px;
    border-radius: 20px;
}
div::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}
div::-webkit-scrollbar-thumb {
    background-color: #d1dbe2;
    border: 3px #fcfcfc solid;
    border-radius: 20px;
}
div::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px #fcfcfc solid;
}


#buffer {
    z-index: 1;
}

#buffer > div > div::-webkit-scrollbar-track {
    background-color: #2f3537 !important;
}


#buffer > div > div::-webkit-scrollbar-thumb {
    background-color: #d1dbe2 !important;
}

/* hover scrollbar */
#buffer > div > div::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-radius: 20px;
}
#buffer > div > div::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}
#buffer > div > div::-webkit-scrollbar-thumb {
    background-color: #d1dbe2;
    border: 3px #2f3537 solid;
    border-radius: 20px;
}
#buffer > div > div::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
    border: 2px #2f3537 solid;
}

/* other modifications */

.roam-bullet-closed {
    color: #a7bbc8;
}

.rm-page-ref-brackets {
    opacity: 0.4;
}


.block-highlight-yellow {
    background-color: #ffec99;
}