Skip to content

Instantly share code, notes, and snippets.

@jurnalanas

jurnalanas/better roam backup.css

Created October 26, 2020 22:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jurnalanas/e783b87c424e76da61e292ef2afd8d62 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jurnalanas/e783b87c424e76da61e292ef2afd8d62 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
better roam backup.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;
--cards-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: 0 !important;
background: none !important;
}
.kanban-board .kanban-column {
border-radius: 6px !important;
padding: 0 !important;
margin: 0 !important;
}
.kanban-board .kanban-column:not([style*=background]) {
background: transparent !important;
}
.kanban-board .kanban-column[style*=background] {
background: var(--secondary-background-color) !important;
}
.kanban-board .kanban-column .kanban-title {
text-align: left !important;
border-bottom: 1px solid var(--subtle-border-color) !important;
padding: 2px 8px !important;
min-height: 31px;
max-height: 31px;
font-size: 14px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kanban-board .kanban-column .kanban-card {
background: var(--cards-background-color) !important;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7), 0px 4px 7px -1px rgba(0, 0, 0, 0.07) !important;
border-radius: 4px !important;
padding: 6px 10px !important;
margin: 0px 6px 12px !important;
font-size: 14px !important;
}
.kanban-board .kanban-column .kanban-card .check-container {
margin-bottom: 8px !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(0, 0%, 8%);
--main-area-background-color: hsl(0, 0%, 12%);
--cards-background-color: hsl(0, 0%, 20%);
--secondary-background-color: hsl(0, 0%, 18%);
--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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment