Skip to content

Instantly share code, notes, and snippets.

@linuz90
Last active August 31, 2022 04:41
Show Gist options
  • Save linuz90/bbb8d5e782cebce601476d1340f76a9d to your computer and use it in GitHub Desktop.
Save linuz90/bbb8d5e782cebce601476d1340f76a9d to your computer and use it in GitHub Desktop.
Better Roam Research CSS
:root {
--font-size: 15.5px;
--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;
--reference-item-background: hsl(0, 0%, 99%);
--brackets-color: rgba(0, 0, 0, 0.25);
--empty-text-color: hsl(203, 12%, 75%); }
.rm-title-untitled,
#block-input-ghost > span,
textarea::placeholder {
color: var(--empty-text-color) !important; }
body,
div,
textarea,
.level2 {
font-family: 'Quattro', -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-top: 10px;
margin-right: 16px;
margin-left: 16px; }
.roam-center > div:first-child {
padding-right: calc(0.5 * (100% - 820px)) !important;
padding-left: calc(0.5 * (100% - 820px)) !important; }
.roam-topbar {
background: var(--main-background-color) !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: transparent !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 !important; }
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) !important;
border: 1px solid #f0f0f0 !important;
border-radius: 6px !important;
padding: 8px 10px 8px 2px !important; }
.rm-reference-item .rm-block-text {
font-size: var(--font-size) !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 {
color: inherit !important;
background-color: transparent !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: #666666 !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; }
.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; }
.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; }
#app {
filter: invert(1) hue-rotate(180deg) !important; }
img,
div#buffer,
.bp3-portal,
.intercom-app,
.loading-astrolabe,
.bp3-dialog,
.twitter-tweet,
iframe {
filter: invert(1) hue-rotate(180deg) !important; }
.roam-highlight {
background-color: #e2cb47 !important; }
.bp3-overlay-backdrop {
background-color: rgba(255, 255, 255, 0.7) !important; }
:root {
--border-color: rgba(0, 0, 0, 0.07) !important;
--subtle-border-color: rgba(0, 0, 0, 0.05) !important;
--main-background-color: hsl(0, 0%, 96%) !important;
--body-background-color: hsl(0, 0%, 90%) !important;
--reference-item-background: hsl(0, 0%, 93%) !important;
--brackets-color: rgba(0, 0, 0, 0.3) !important;
--empty-text-color: hsl(203, 5%, 70%); } }
@cumtnp
Copy link

cumtnp commented Jul 24, 2020

title1

@cumtnp
Copy link

cumtnp commented Jul 24, 2020

#title2

@cumtnp
Copy link

cumtnp commented Jul 24, 2020

title2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment