roamCSS

/* 
From the Magic List Youtube

https://gist.github.com/wirtzdan/cbaf758e707a9f5a498829c60519cd9b

*/

: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%);
  --border-color: rgba(0, 0, 0, 0.08);
  --subtle-border-color: rgba(0, 0, 0, 0.05);
  --main-background-color: hsl(210, 9%, 98%);
  --body-background-color: #ffffff;
  --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;
}

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

.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(--body-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;
}

.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(--main-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;
}

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

.roam-center {
  border-left: 1px solid var(--border-color) !important;
  border-top: 1px solid var(--border-color) !important;
  border-right: 1px solid var(--border-color) !important;
  border-radius: 6px;
  box-shadow: 0px 2px 14px rgba(0, 0, 0, 0.04) !important;
  overflow: visible !important;
  background: var(--body-background-color) !important;
  margin-right: 12px;
  margin-left: 12px;
}

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

.roam-body,
.roam-topbar,
#right-sidebar,
.roam-sidebar-container {
  background: var(--main-background-color) !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 > 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-page-ref-tag {
  color: #9099a1;
}

span.checkmark {
  top: -2px;
}

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

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

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

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

.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-reference-item {
  background: var(--reference-item-background);
  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-reference-container .bp3-button {
  color: #182026 !important;
}
.rm-reference-container .bp3-popover-content .flex-h-box div > div > span {
  color: #202b33 !important;
}

.rm-embed-container {
  background-color: #21282c !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: 640px !important;
  font-size: var(--font-size) !important;
}

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

.roam-article > div > div h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  height: auto !important;
  line-height: 1.5 !important;
}

.rm-title-display,
.rm-title-textarea {
  height: auto !important;
  line-height: 1.5 !important;
}

.roam-log-container .roam-log-preview h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
}

strong {
  font-weight: 700 !important;
}

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

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

@media (prefers-color-scheme: dark) {
  body {
    background: #171717 !important;
  }

  .roam-highlight {
    background-color: #453e17 !important;
  }

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

  :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%, 40%);
    --border-color: rgba(255, 255, 255, 0.07);
    --subtle-border-color: rgba(255, 255, 255, 0.05);
    --main-background-color: hsl(0, 0%, 4%);
    --body-background-color: hsl(0, 0%, 10%);
    --popup-background-color: hsl(0, 0%, 14%);
    --reference-item-background: hsl(0, 0%, 8%);
    --brackets-color: rgba(255, 255, 255, 0.3);
    --empty-text-color: hsl(203, 5%, 70%);
  }
}

/* Adjustments */

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

.checkmark {
  background: #fff;
  width: 14px;
  height: 14px;
}
.check-container input:checked ~ .checkmark {
  background: #48bb78;
}

.check-container {
  padding-left: 16px;
}

.check-container .checkmark:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
}

.check-container input:checked ~ .checkmark:after {
  border-color: #fff;
}

.rm-query-title {
  font-size: 0px;
}
.rm-query-title::after {
  font-size: 14px;
  content: "Query";
}

.block-ref-count-button {
  background: #ebf8ff !important;
  color: #2b6cb0 !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}

.block-ref-count-button:hover {
  background: #bee3f8 !important;
}

.rm-query {
  border-radius: 4px;
}

.rm-query-content {
  background: white;
  border-color: var(--subtle-border-color);
}

.rm-mentions .rm-reference-item {
  background: white;
}

.rm-query .rm-reference-item {
  background: var(--reference-item-background);
}

.roam-article .rm-reference-item {
  background: var(--reference-item-background);
}

/* Kanban Styling */
.kanban-board {
  background-color: #f2f5f9;
  max-height: 600px;
  overflow-x: auto;
  overflow-y: auto;
}

.kanban-column {
  background-color: transparent;
}

.kanban-card {
  box-shadow: 0 1px 4px 0 rgba(21, 27, 38, 0.08);
  border-radius: 4px;
  box-shadow: 0 1px 4px 0 rgba(21, 27, 38, 0.08);
}

.kanban-card:hover {
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.kanban-title {
  text-align: left;
  margin: 0px 8px;
  font-weight: 700px;
  border-bottom: none;
}

/* Custom tags */
span.rm-page-ref[data-tag="Share"] {
  background: #edf2f8;
  color: #4a5569;
  background: #ceedff;
  color: #2a69ac;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Seed"] {
  background: #e9d8fd;
  color: #44337a;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Seedling"] {
  background: #b2f5ea;
  color: #285e61;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Evergreen"] {
  background: #c6f6d5;
  color: #2d8258;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Notes"] {
  background: #e2e8f0;
  color: #2d3748;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Highlights"] {
  background: #fefcbf;
  color: #9c4221;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Inbox"] {
  background: #fed7d7;
  color: #9b2c2c;
  display: inline-block;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 0.5rem;
  border-radius: 0.125rem;
}

span.rm-page-ref[data-tag="Today"] {
  color: #48bb78;
  font-weight: 700;
}

span.rm-page-ref[data-tag="Upcoming"] {
  color: #f59f00;
  font-weight: 700;
}

span.rm-page-ref[data-tag="Later"] {
  color: #4c6ef5;
  font-weight: 700;
}