Roam by csun606

/* ==UserStyle==
@name         Roam
@version      20210901.00.33
@namespace    userstyles.world/user/csun606
@description  Roam Research
@author       csun606
@license      No License
==/UserStyle== */

@-moz-document domain("roamresearch.com") {
/*  Make sure you have the fonts Lato, Open Sans, and IBM Plex 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
https://fonts.google.com/featured/Plex
*/


 :root {
    --header-font:"Lato", sans-serif;
    --body-font:"Open Sans", sans-serif;
    --code-font:"Open Sans", monospace;
    --font-size: 0.95rem;
    --bg-color: #dadcde;
    --page-color: rgba(255, 255, 255, 0.95);
    --text-color: #111;
    --light-text-color: #030303fc;
    --page-tag-color: #f1f903;
    --color-primary: #f10522;
    --color-primary-light: #0059ff; /* Block ref */
    --color-primary-highlight: #e07ee96d;
    --color-secondary: #4033cc;
    --color-subtle-border: #cf96b1;
}

/* Body Colours */
 body, #app {
    background: var(--bg-color);
}
.roam-article {
    padding-right:1px !important;
    max-width: 800px;
    padding-left: 5px !important;
}
.roam-article > div {
    padding: 20px 10px 10px 10px;
    background: var(--page-color);
    box-shadow: var(--page-shadow);
    border: 1px solid #e5ecf1;
    border-radius: 5px;
    margin-top: 5px !important;
    width: auto;
}
.roam-body-main {
    top: 0 !important;
    height: 100% !important;
    width: auto !important;
    position: relative !important;
    padding-left: 5px;
    min-width: 500px;
}
.roam-main {
    width: unset !important;
    max-width: 100% !important;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    margin: auto;
    transition: padding-left 0.15s ease-out;
}

.block-highlight-blue {
  background-color: var(--color-primary-highlight) !important;
  z-index: 99;
}

div::selection, textarea::selection {
  background-color: var(--color-primary-highlight);
}

/* Typography */
 h1, h2, h3, h4, h5, h6, .rm-level1, .rm-level2, .rm-level3 .rm-title-editing-display {
    font-family: var(--header-font);
}
.rm-title-editing-display textarea {
    font-family: var(--header-font);
    font-size: 1em;
}
div, textarea {
    font-family: var(--body-font);
    font-size: var(--font-size);
    color: var(--text-color);
}
.roam-block-container {
    max-width: 1000px;
}

span.rm-page-ref-tag {
  color: var(--page-tag-color);
  opacity: 80%;
  font-size: 100%;
}


/* Embed Blocks */
 .rm-embed-container {
    background: #fcfdfd;
    border: 1px solid var(--color-subtle-border);
    border-radius: 4px;
    padding: 0.6em 0.4em;
    margin: 0.4em 0;
}
.block-highlight-yellow {
    background-color: white;
}
/* Code Syntax */
 code {
    font-family: var(--code-font);
    background: #F0F4F8;
    color: var(--text-color);
    border: none;
    padding: 4px 6px;
    opacity: 90%;
}

/* Queries */
 .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 {
    font-size: 95%;
    opacity: 95%;
}
.rm-ref-page-view-title span {
}
.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;
}
.rm-block-text, .roam-block {
    max-width: 64ch;
    font-size: 1.1em;
    line-height: 1.6em;
}
#right-sidebar > div {
    background-color: white;
    border-left: 0px solid #e9ebef;
    padding: 0px;
    overflow: none;
}
.rm-page-ref-brackets {
    display: none;
}


/* Bullet Points */
.rm-bullet .rm-bullet__inner {
  box-sizing: content-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    background-clip: content-box;
    border: 4px solid transparent;
    background-color: #949496;
}

.rm-bullet.rm-bullet--closed .rm-bullet__inner {
    box-sizing: content-box;
    border: 4px solid #D8E5EE;
}


.block-border-left {
    border-left: 1px solid #fff;
}
.kanban-board {
    background-color: #fff;
}
.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;
}
/*Block reference*/
.rm-block-ref::before {
    content:"";
    display: inline-block;
    width: 6px;
    border-radius: 2px;
    height: 10px;
    background: var(--color-primary-light);
    margin-right: 6px;
}
.rm-block-ref {
    border-bottom: none;
    font-size: 1em;
    color: var(--light-text-color);
    opacity: 90%;
}
.rm-block-ref:hover {
    background: none;
    cursor: pointer;
}
.block-ref-count-button {
    color: var(--color-primary);
    font-weight: 800;
    top: -10px;
}
.checkmark {
    background: #f60202;
}
.check-container input:checked ~ .checkmark {
    background: #c8e0bf;
}
.check-container input:checked ~ .checkmark:after {
    border-color: #548e60;
}
.rm-reference-item {
    margin-top: 8px;
    border-radius: 6px;
    border: 1px solid #736e72;
    margin-right: 8px;
    flex: 1 1 100%;
    word-break: break-word;
    background-color: #f5f6f7;
    padding: 8px;
}
.rm-level1 div, .rm-level1 textarea {
    color: var(--light-text-color);
    font-size: 1.7rem;
    font-weight: 600;
}
.rm-level2 div, .rm-level2 textarea {
    font-size: 1.4rem;
}
.rm-level3 div, .rm-level3 textarea {
    color: #e71ee5;
    font-weight: 400;
    font-size: 1.3rem;
}
/* Things with #[[]] */
.rm-page-ref {
    color: #3c81b7;
}
.rm-page-ref--link {
    color: var(--color-primary);
    font-weight: 600;
}
a {
    color: var(--color-secondary);
    font-weight: 600
}
.intercom-app, .intercom-launcher-frame, #intercom-container {
    display: none;
}
.roam-body .roam-app .roam-sidebar-container {
    background-color: white;
    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;
}
.rm-alias-external, .rm-alias-external:hover {
    font-weight: 600;
}

/* Set the background colour of popover tooltips to white */
.bp3-popover-content {
  background: var(--bg-color) !important;
}


/* -------------------------- */

/* Custom Data Tags and Pages */

/* -------------------------- */
span.rm-page-ref[data-tag="42SmartBlock"], span[data-link-title^="42SmartBlock"] .rm-page-ref {
  background: #eaa963 !important;
  color: #fdfdfa !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 500;
}

/* LAB */
span.rm-page-ref[data-tag="needtoorder"], span[data-link-title^="needtoorder"] .rm-page-ref {
  background: #EF5455 !important;
  color: #fce77d !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 650;
}
span.rm-page-ref[data-tag="Stream_LAB🧪"], span[data-link-title^="Stream_LAB🧪"] .rm-page-ref {
  background: #161b21 !important;
  color: #659fe5 !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 650;
}
span.rm-page-ref[data-tag="location"], span[data-link-title^="location"] .rm-page-ref {
  background: #8aaae5 !important;
  color: #FFFfff !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 500;
}
span.rm-page-ref[data-tag="Orange box_ab"], span[data-link-title^="Orange box_ab"] .rm-page-ref {
  background: #f25f1a!important;
  color: #FFF748 !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 500;
}
span.rm-page-ref[data-tag="FACS booking"], span[data-link-title^="FACS booking"] .rm-page-ref {
  background: #E2D1F9!important;
  color: #317773 !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 700;
}
span.rm-page-ref[data-tag="Received ✔️"], span[data-link-title^="Received ✔️"] .rm-page-ref {
  background: #8aaae5!important;
  color: #FFFfff !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 700;
}
span.rm-page-ref[data-tag="figures"], span[data-link-title^="figures"] .rm-page-ref {
  background: #c275ce!important;
  color: #FEFEDF !important;
  padding: 3px 7px;
  line-height: 2em;
  font-weight: 500;
}
span.rm-page-ref[data-tag="n=1"], span[data-link-title^="n=1"] .rm-page-ref {
  background: #f9f505 !important;
  color: #f60202 !important;
  padding: 3px 5px;
  line-height: 2em;
  font-weight: 700;
}
span.rm-page-ref[data-tag="n=2"], span[data-link-title^="n=2"] .rm-page-ref {
  background: #f9f505 !important;
  color: #f60202 !important;
  padding: ...