main.css

:root {
  --font-size: 15.5px;
  --font-color: hsl(205, 23%, 16%);
  --font-color-lighter: hsl(0, 0%, 40%);
  --font-color-placeholder: hsl(0, 0%, 70%);
  --link-color: hsl(203, 82%, 35%);
  --selection-color: hsl(203, 100%, 74%);
  --ref-hover-bg-color: hsl(204, 33%, 97%);
  --border-color: rgba(0, 0, 0, 0.12);
  --subtle-border-color: rgba(0, 0, 0, 0.07);
  --search-border-color: rgba(0, 0, 0, 0.07);
  --page-background-color: hsl(210, 9%, 98%);
  --main-area-background-color: #ffffff;
  --secondary-background-color: hsl(210, 9%, 95%);
  --popup-background-color: #ffffff;
  --reference-item-background: hsl(0, 0%, 99%);
  --brackets-color: rgba(0, 0, 0, 0.25);
  --empty-text-color: hsl(203, 12%, 75%); }

body,
.roam-body,
.roam-app,
.rm-pages-title-text,
.bp3-button {
  color: var(--font-color) !important; }

html,
body,
#app {
  background: var(--page-background-color) !important; }

.roam-center {
  border-left: 1px solid var(--subtle-border-color) !important;
  border-top: 1px solid var(--subtle-border-color) !important;
  border-right: 1px solid var(--subtle-border-color) !important;
  border-radius: 12px;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.03) !important;
  overflow: visible !important;
  background: var(--main-area-background-color) !important;
  margin-right: 12px;
  margin-left: 12px; }
  @media (max-width: 640px) {
    .roam-center {
      margin-right: 6px;
      margin-left: 6px; } }

.roam-center .roam-article {
  padding: 16px 36px 120px !important; }
  @media (max-width: 860px) {
    .roam-center .roam-article {
      padding: 12px 28px 120px !important; } }
  @media (max-width: 640px) {
    .roam-center .roam-article {
      padding: 10px 20px 120px !important; } }

.roam-topbar {
  background: var(--page-background-color) !important;
  border-bottom: none !important; }
  .roam-topbar input#find-or-create-input {
    box-shadow: none !important;
    border: 1px solid var(--search-border-color) !important; }

.roam-body,
.roam-topbar,
#right-sidebar,
.roam-sidebar-container {
  background: var(--page-background-color) !important;
  box-shadow: none !important; }

#right-sidebar {
  border: none !important;
  transition: none !important;
  overflow: hidden !important; }
  #right-sidebar h1 {
    font-size: 18px !important; }
  #right-sidebar #roam-right-sidebar-content {
    margin-left: -6px !important; }
    #right-sidebar #roam-right-sidebar-content > div[style] {
      border-bottom: 1px solid var(--subtle-border-color) !important; }
  #right-sidebar .hoverparent,
  #right-sidebar .react-resizable {
    max-width: 100% !important; }
    #right-sidebar .hoverparent img,
    #right-sidebar .react-resizable img {
      max-width: 100% !important; }

.rm-title-display,
.rm-title-textarea {
  height: auto !important;
  line-height: 1.5 !important;
  font-size: 26px !important;
  font-weight: 700 !important; }

.rm-level1 {
  margin-top: -4px !important; }
  .rm-level1 div,
  .rm-level1 textarea {
    font-size: 22px !important;
    line-height: 1.5 !important;
    font-weight: 700 !important; }

.rm-level2 {
  margin-top: -3px !important; }
  .rm-level2 div,
  .rm-level2 textarea {
    font-size: 20px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important; }

.rm-level3 {
  margin-top: -2px !important; }
  .rm-level3 div,
  .rm-level3 textarea {
    font-size: 18px !important;
    line-height: 1.5 !important; }

.level2 {
  font-weight: inherit !important; }

h1 {
  color: var(--font-color) !important; }

div.roam-article span > a:not(.rm-alias-page):after {
  content: "";
  display: inline-block;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48ZyBmaWxsPSIjMzM3QUI3Ij48cGF0aCBkPSJNNiAxMmwxLjA2NTgxZS0xNCAxLjUwOTk2ZS0wN2M4LjMzOTI3ZS0wOC41NTIyODUuNDQ3NzE1IDEgMSAxaDkuNWwtNC4zNzExNGUtMDgtMS43NzYzNmUtMTVjLjU1MjI4NSAyLjQxNDExZS0wOCAxLS40NDc3MTUgMS0xIDIuNDE0MTFlLTA4LS41NTIyODUtLjQ0NzcxNS0xLTEtMWgtOS41bC00LjM3MTE0ZS0wOCAzLjU1MjcxZS0xNWMtLjU1MjI4NSAyLjQxNDExZS0wOC0xIC40NDc3MTUtMSAxIDAgMCAwIDguODgxNzhlLTE1IDAgOC44ODE3OGUtMTVaIj48L3BhdGg+PHBhdGggZD0iTTguMiAxNC43MjJsMS4wMDg3OWUtMDctOC4yMjU5MWUtMDhjLS42MjEwMzguNTA2NDA2LTEuMzk4NjcuNzgxNDA3LTIuMi43NzhsLTEuNTI5OWUtMDctMy41NTI3MWUtMTVjLTEuOTMzLTguNDQ5NGUtMDgtMy41LTEuNTY3LTMuNS0zLjUgOC40NDk0ZS0wOC0xLjkzMyAxLjU2Ny0zLjUgMy41LTMuNWwxLjM2NDc3ZS0wNy01LjAzNzkzZS0xMGMuODAxNDIxLS4wMDI5NTgzNSAxLjU3OTAyLjI3MjM4MSAyLjIuNzc5bC0zLjY2NDA2ZS0wOC0yLjk2MDQzZS0wOGMuNDI5OTU0LjM0NzM4NyAxLjA2MDExLjI4MDQ1MyAxLjQwNzUtLjE0OTUgLjM0NzM4Ny0uNDI5OTU0LjI4MDQ1My0xLjA2MDExLS4xNDk1LTEuNDA3NWw4LjE3MTUxZS0wOCA2LjYwMjcxZS0wOGMtMi4zNjI2Ny0xLjkwOTA4LTUuODI1NjEtMS41NDEzNy03LjczNDY5LjgyMTMwOCAtMS45MDkwOCAyLjM2MjY3LTEuNTQxMzcgNS44MjU2MS44MjEzMDggNy43MzQ2OSAyLjAxNjQ2IDEuNjI5MzMgNC44OTY5MiAxLjYyOTMzIDYuOTEzMzggMS4zMjA1NGUtMDdsLTEuNTM0OThlLTA4IDEuMjQxMDFlLTA4Yy40Mjk2NzgtLjM0NzM4Ny40OTYzODctLjk3NzMyMi4xNDktMS40MDcgLS4zNDczODctLjQyOTY3OC0uOTc3MzIyLS40OTYzODctMS40MDctLjE0OVoiPjwvcGF0aD48cGF0aCBkPSJNMTggNi41bC04LjUxNDdlLTA4IDEuMDI1NTFlLTEwYy0xLjI1ODM5LjAwMTUxNTYyLTIuNDc4NDcuNDMzMDI2LTMuNDU4IDEuMjIzbC0xLjExOTYzZS0wOSA5LjA1NzgzZS0xMGMtLjQyOTQwMS4zNDczODctLjQ5NTg4Ny45NzcwOTktLjE0ODUgMS40MDY1IC4zNDczODcuNDI5NDAxLjk3NzA5OS40OTU4ODcgMS40MDY1LjE0ODVsMS4xMTc2OGUtMDgtOS4xMDk5NWUtMDljLjYyMTEyLS41MDYyNTkgMS4zOTg3LS43ODEyNDEgMi4yLS43NzhsLTEuNTI5OWUtMDcgMy41NTI3MWUtMTVjMS45MzMtOC40NDk0ZS0wOCAzLjUgMS41NjcgMy41IDMuNSA4LjQ0OTRlLTA4IDEuOTMzLTEuNTY3IDMuNS0zLjUgMy41bC0xLjY3NDk0ZS0wNyA3LjcxMThlLTEwYy0uODAxMjAzLjAwMzY4ODkxLTEuNTc4ODMtLjI3MDk1My0yLjItLjc3N2w1LjIzNjA2ZS0wOCA0LjIzMzI2ZS0wOGMtLjQyOTY3OC0uMzQ3Mzg3LTEuMDU5NjEtLjI4MDY3OC0xLjQwNy4xNDkgLS4zNDczODcuNDI5Njc4LS4yODA2NzggMS4wNTk2MS4xNDkgMS40MDdsMS41NDU4OGUtMDcgMS4yNDgzNmUtMDdjMi4zNjMyMyAxLjkwODM5IDUuODI2MDYgMS41Mzk2OCA3LjczNDQ1LS44MjM1NDggMS45MDgzOS0yLjM2MzIzIDEuNTM5NjgtNS44MjYwNi0uODIzNTQ4LTcuNzM0NDUgLS45Nzc2ODEtLjc4OTUxNC0yLjE5NjI1LTEuMjIwNDItMy40NTI5MS0xLjIyMVoiPjwvcGF0aD48L2c+PC9zdmc+);
  transform: rotate(-45deg);
  background-size: 15px 15px;
  width: 15px;
  height: 15px;
  margin: 0 2px 0 3px;
  position: relative;
  bottom: -2px;
  left: -1px; }
div.roam-article .rm-level1 span > a:not(.rm-alias-page):after {
  background-size: 20px 20px;
  width: 20px;
  height: 20px; }
div.roam-article .rm-level2 span > a:not(.rm-alias-page):after {
  background-size: 18px 18px;
  width: 18px;
  height: 18px; }
div.roam-article .rm-level3 span > a:not(.rm-alias-page):after {
  background-size: 16px 16px;
  width: 16px;
  height: 16px; }

.block-highlight-blue {
  background-color: var(--selection-color) !important; }

.rm-page-ref-link-color {
  color: var(--link-color) !important; }

.rm-page-ref-brackets {
  color: var(--brackets-color) !important; }

.bp3-input {
  color: var(--font-color) !important;
  background: var(--main-area-background-color) !important; }
  .bp3-input::placeholder {
    color: var(--font-color-placeholder) !important; }

.bp3-elevation-3,
.confirmation-content-dialog,
.bp3-dialog {
  background: var(--popup-background-color) !important; }

.bp3-elevation-3 div.dont-unfocus-block[style*="background"] {
  background: var(--secondary-background-color) !important; }

.rm-title-untitled,
#block-input-ghost > span,
textarea::placeholder {
  color: var(--empty-text-color) !important; }

.rm-all-pages .table .rm-pages-row.rm-pages-row-header {
  background: var(--page-background-color) !important; }

body,
div,
textarea,
.level2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important; }

iframe {
  border: none !important; }

.loading-astrolabe {
  position: absolute !important;
  width: 80px !important;
  height: 80px !important;
  opacity: 0.3 !important;
  top: calc(50% - 40px) !important;
  left: calc(50% - 40px) !important; }

#roam-sidebar-logo {
  display: none !important; }

.rm-page-ref-tag {
  color: #9099a1 !important; }

span.checkmark {
  top: -2px; }

.roam-log-container .roam-log-page {
  border-top: 1px solid var(--subtle-border-color) !important; }
  .roam-log-container .roam-log-page:first-child {
    min-height: 0 !important;
    border-top: none !important; }

.rm-embed-container {
  border-radius: 6px !important; }

.rm-reference-item {
  background: var(--reference-item-background) !important;
  border: 1px solid var(--subtle-border-color) !important;
  border-radius: 6px !important;
  padding: 8px 10px 8px 2px !important; }
  .rm-reference-item .rm-block-text {
    font-size: var(--font-size) !important; }

.rm-full-width {
  margin-right: 0 !important; }

.kanban-board {
  max-width: 100% !important;
  padding: 2px !important;
  background: none !important; }
  .kanban-board .kanban-column {
    border-radius: 6px !important; }
    .kanban-board .kanban-column:not([style*="background"]) {
      background: var(--secondary-background-color) !important; }
    .kanban-board .kanban-column .kanban-title {
      border-bottom: 1px solid var(--subtle-border-color) !important; }
    .kanban-board .kanban-column .kanban-card {
      background: var(--main-area-background-color) !important;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15), 0px 4px 6px rgba(0, 0, 0, 0.05) !important;
      border-radius: 4px !important;
      padding: 6px 10px !important;
      font-size: 15px !important; }

.bp3-button {
  color: var(--font-color-lighter) !important; }

.bp3-popover-content div > div > .flex-h-box div > div > span,
.bp3-popover-content div > div > .flex-h-box div > div > strong,
.bp3-popover-content div > div > div > button,
.bp3-popover-content > ul > div {
  color: #182026 !important; }

.DayPicker {
  color: #182026 !important; }

.rm-block-ref {
  border-bottom: 0.5px solid var(--border-color) !important; }
  .rm-block-ref:hover {
    background: var(--ref-hover-bg-color) !important; }

.CodeMirror {
  font-size: 13px !important; }

.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover,
.roam-body
.roam-app
.roam-sidebar-container
.roam-sidebar-content
.starred-pages-wrapper
.starred-pages
.page:hover {
  background-color: transparent !important;
  color: var(--font-color) !important; }

.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,
.bp3-minimal > div {
  color: var(--font-color-lighter) !important;
  font-size: 13px !important; }

.roam-sidebar-content {
  padding: 0 !important; }
  .roam-sidebar-content > div:not(.log-button):not(:first-child) {
    padding: 0 !important; }
  .roam-sidebar-content > div:first-child {
    padding-bottom: 18px !important; }
  .roam-sidebar-content div {
    line-height: 1.2 !important; }
  .roam-sidebar-content .rm-db-title {
    margin-top: 0 !important;
    color: var(--font-color-lighter) !important; }

.starred-pages-wrapper > div:first-child {
  display: none; }
.starred-pages-wrapper .flex-h-box,
.starred-pages-wrapper .flex-h-box span {
  font-size: 13px !important;
  opacity: 0.6 !important; }

.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 .starred-pages .page {
  padding: 6px 24px 6px !important; }
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .shortcut {
  padding: 14px 24px 0; }
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .top-row {
  padding: 12px 0 0 20px; }
  .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .top-row:hover {
    background-color: inherit; }

.bp3-icon-small {
  padding-left: 24px !important; }

.rm-block-text {
  max-width: 660px !important;
  font-size: var(--font-size) !important; }

.block-bullet-view {
  margin-bottom: 3px !important; }

.controls .simple-bullet-outer {
  margin-top: 4px !important; }

.block-border-left {
  border-left-color: var(--subtle-border-color) !important; }

.rm-reference-main div > strong {
  color: gray !important; }

#rm-mobile-bar {
  background-color: var(--main-area-background-color) !important; }
  #rm-mobile-bar[style*="bottom: 0px"] {
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 15px, rgba(0, 0, 0, 0.1) 0px 0px 50px !important; }

/* Credits */
.roam-topbar > div > div:last-child ul.bp3-menu:after {
  content: "Better Roam Research theme by @linuz90";
  width: 160px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.4;
  padding: 7px;
  opacity: 0.6;
  color: var(--font-color-lighter); }

@media (prefers-color-scheme: dark) {
  :root {
    --font-color: hsl(205, 0%, 98%);
    --font-color-lighter: hsl(0, 0%, 50%);
    --font-color-placeholder: hsl(0, 0%, 36%);
    --link-color: hsl(203, 62%, 55%);
    --selection-color: hsl(203, 56%, 36%);
    --reference-item-background: hsl(0, 0%, 8%);
    --ref-hover-bg-color: hsl(204, 20%, 17%);
    --border-color: rgba(255, 255, 255, 0.25);
    --subtle-border-color: rgba(255, 255, 255, 0.07);
    --search-border-color: rgba(255, 255, 255, 0.06);
    --page-background-color: hsl(228, 15%, 13%);
    --main-area-background-color: hsl(240, 12%, 10%);
    --secondary-background-color: hsl(233, 15%, 21%);
    --popup-background-color: hsl(0, 0%, 4%);
    --brackets-color: rgba(255, 255, 255, 0.3);
    --empty-text-color: hsl(203, 5%, 70%); }

  .roam-highlight,
  .block-highlight-yellow {
    background-color: #5a5016 !important; }

  .bp3-overlay-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important; }

  .rm-embed-container {
    background-color: #2b3033 !important; } }