Skip to content

Instantly share code, notes, and snippets.

@piperswe
Forked from jchen1/Roam-tufte.css
Last active February 25, 2021 00:51
Show Gist options
  • Save piperswe/4e5fea15f669b0431f50f70acbd88ff6 to your computer and use it in GitHub Desktop.
Save piperswe/4e5fea15f669b0431f50f70acbd88ff6 to your computer and use it in GitHub Desktop.
Make it suitable for use with Stylish, without external imports (other than Google Fonts)
@-moz-document domain("roamresearch.com") {
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro&display=swap');
:root {
--text-size-xs: 0.69rem;
--text-size-sm: 1rem;
--text-size-md: 1rem;
--text-size-2xl: 1.7rem;
--text-size-3xl: 2.2rem;
--text-size-4xl: 3.2rem;
--border-color: #dddddd;
--link-color: #c6262e;
--header-font: "Playfair Display", serif;
--body-font: "Merriweather", serif;
--monospace-font: "Source Code Pro", monospace;
--header-color: #f0e8db;
--header-text-color: #111;
--text-color: #111;
--background-color: #fffdfa;
--right-sidebar-background-color: #fffdfa;
--right-sidebar-border-size: 1px;
--tag-background-color: #f0e8db;
--tag-background-hover-color: #f0e8db;
--tag-hover-color: #e82c2e;
--tag-color: #555;
--sidebar-color: #fffdfa;
--sidebar-text-color: #111;
--sidebar-text-hover-color: #F2B230;
}
html {
font-size: 14px
}
@media(min-width:700px) {
html {
font-size: 16px
}
}
body,
div,
p,
textarea {
font-family: var(--body-font)!important;
color: var(--text-color)
}
h1,
h2,
h3,
h4,
h5,
h6,
.rm-level1 *,
.rm-level2 *,
.rm-level3 *,
.rm-heading-level-1 > .rm-block__self .rm-block__input,
.rm-heading-level-2 > .rm-block__self .rm-block__input,
.rm-heading-level-3 > .rm-block__self .rm-block__input,
textarea.rm-title-textarea {
font-family: var(--header-font)!important
}
.CodeMirror .CodeMirror-code pre,
.CodeMirror-linenumber {
font-family: var(--monospace-font)!important;
font-size: var(--text-size-sm)
}
.rm-page-ref,
.rm-page-ref-tag {
font-weight: 700
}
body,
div,
p,
textarea {
line-height: unset;
letter-spacing: 0
}
p,
.roam-block,
textarea.rm-block-input {
font-size: var(--text-size-md);
line-height: 1.65
}
.rm-block > .rm-block__self > .controls {
margin-top: 2px
}
h1,
.rm-level1 span,
.sidebar-content h1.level2,
.rm-title-editing-display textarea,
.rm-heading-level-1 > .rm-block__self .rm-block__input,
h1 textarea {
margin-top: 0;
font-size: var(--text-size-4xl)!important;
line-height: 1.25
}
.rm-heading-level-1 > .rm-block__self .rm-block__input {
margin-top: 2rem;
margin-bottom: 1.5rem
}
.rm-heading-level-1 > rm-block__self textarea.rm-block__input {
margin-bottom: 1.7rem;
padding: 6px 0
}
.rm-heading-level-1 > .rm-block__self > .controls {
margin-top: calc(2rem + 24px)
}
h2,
.rm-level2 span,
.rm-heading-level-2 > .rm-block__self .rm-block__input,
h2 textarea {
font-size: var(--text-size-3xl)!important;
font-style: italic;
line-height: 1.25;
margin-top: 2.1rem;
margin-bottom: 1.4rem
}
.rm-heading-level-2 > .rm-block__self textarea.rm-block__input {
margin-bottom: 1.6rem;
padding: 4px 0
}
.rm-heading-level-2 > .rm-block__self > .controls {
margin-top: calc(2rem + 16px)
}
h3,
.rm-level3 span,
.rm-heading-level-3 > .rm-block__self .rm-block__input {
font-size: var(--text-size-2xl)!important;
color: var(--text-color);
font-style: italic;
line-height: 1.25;
margin-top: 2rem;
margin-bottom: 1.4rem
}
.rm-heading-level-3 > .rm-block__self textarea.rm-block__input {
margin-bottom: 1.8rem;
padding: 5px 0 4px
}
.rm-heading-level-3 > .rm-block__self > .controls {
margin-top: calc(2rem + 12px)
}
caption,
.text-caption {
font-size: var(--text-size-sm)!important
}
small,
.text-small {
font-size: var(--text-size-xs)!important
}
.rm-zoom.zoom-mentions-view {
font-size: unset
}
.sidebar-content .window-headers > div {
font-size: var(--text-size-md)!important
}
.sidebar-content div[style*="padding-bottom: 8px"] > div[style*="margin-top: -8px"] {
margin-top: 8px!important
}
.rm-page-ref__brackets {
display: none
}
a {
color: var(--link-color);
font-weight: 700
}
a:hover {
color: var(--link-color);
text-decoration: underline
}
div.rm-block-text,
textarea.rm-block-text {
margin-top: -.25rem
}
.check-container {
top: -.1rem!important;
margin-right: 4px
}
.checkmark {
height: 1rem;
width: 1rem
}
.check-container .checkmark::after {
left: 4.5px;
top: .5px
}
.roam-table th,
.roam-table td,
.roam-table tr {
border: 0;
border-bottom: 1px solid var(--border-color)
}
.roam-table table > *:first-child > tr:first-of-type,
.roam-table table.dont-focus-block tr:nth-of-type(2) {
border-top: 2px solid var(--text-color);
border-bottom: 0
}
.roam-table table tbody > tr:last-of-type {
border-bottom: 2px solid var(--text-color)
}
.roam-table span[style*="background-color: rgb(14, 90, 138);"] {
background-color: unset!important
}
div#right-sidebar {
background-color: var(--right-sidebar-background-color);
padding-top: 45px
}
div.roam-center,
div.roam-body-main {
background-color: var(--background-color)
}
div#right-sidebar {
border-left: var(--right-sidebar-border-size) solid var(--border-color)
}
.roam-sidebar-container {
border-right: var(--right-sidebar-border-size) solid var(--border-color)
}
#right-sidebar .level2 > a {
color: var(--text-color)
}
.rm-reference-item {
background-color: var(--background-color)
}
#right-sidebar .rm-reference-item {
background-color: var(--right-sidebar-background-color)
}
#right-sidebar .bp3-button:before,
#right-sidebar .bp3-button .bp3-icon {
color: var(--sidebar-text-color)
}
.rm-page-ref-tag,
.rm-page-ref {
color: var(--tag-color)!important;
background-color: var(--tag-background-color);
padding: 2px 4px;
border-radius: 5px;
transition: color, background .35s ease-in-out 0s
}
.rm-page-ref-tag:hover,
.rm-page-ref:hover {
color: var(--tag-hover-color)!important;
background-color: var(--tag-background-hover-color)!important;
text-decoration: none
}
div[style="color: rgb(206, 217, 224);"],
strong[style="color: rgb(206, 217, 224);"] {
color: var(--text-color)!important
}
#roam-sidebar-logo {
display: none
}
.roam-body .roam-app .roam-sidebar-container {
background-color: var(--sidebar-color)
}
.roam-sidebar-container .rm-db-title-container .rm-db-title,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button,
.starred-pages-wrapper > div > span,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .rm-db-title .expand-icon {
color: var(--sidebar-text-color)
}
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover {
font-weight: 400
}
div.starred-pages-wrapper > div:first-child {
background-color: var(--border-color)!important
}
.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,
.roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .top-row:hover {
background-color: unset;
color: var(--sidebar-text-hover-color)!important
}
div.roam-sidebar-container[style*="top: 0px;"] {
padding-top: 45px
}
div.roam-sidebar-container[style*="top: 0px;"] span.bp3-icon-menu-closed {
opacity: 1!important
}
.log-button > div {
color: inherit
}
div.roam-sidebar-container span.bp3-icon-menu-closed::before,
.rm-topbar .bp3-button[class*=bp3-icon-]::before,
.rm-topbar .bp3-button .bp3-icon {
color: var(--header-text-color)
}
#find-or-create-input {
background-color: var(--background-color)
}
.rm-find-or-create-wrapper .bp3-popover .bp3-menu {
background-color: var(--background-color)
}
.rm-find-or-create-wrapper .bp3-popover .bp3-menu div[style*=background-color] {
background-color: var(--header-color)!important
}
.rm-ref-page-view-title > a {
color: var(--tag-color);
background-color: var(--tag-background-color);
font-size: var(--text-size-md)
}
.rm-query .rm-query-title {
background-color: var(--header-color);
color: var(--header-text-color);
font-family: var(--monospace-font)!important;
font-size: var(--text-size-sm)
}
.sidebar-content > div > div {
border-bottom: 1px solid var(--border-color)!important
}
.block-border-left {
border-left: 1px solid var(--border-color)
}
.roam-log-container .roam-log-page {
border-top: 1px solid var(--border-color)
}
.roam-log-container .roam-log-page:first-child {
border-top: 0
}
.rm-embed-container {
background-color: var(--background-color)
}
span[style="color: red;"] {
color: var(--link-color)!important
}
.rm-query {
border-color: var(--border-color)
}
.rm-multibar {
border-color: var(--border-color)
}
.rm-multibar:hover {
border-color: var(--border-color)
}
.check-container input:checked ~ .checkmark {
background-color: var(--tag-color)
}
.intercom-lightweight-app {
display: none
}
.CodeMirror {
border: 1px solid var(--border-color);
background-color: var(--background-color)
}
.CodeMirror-gutters {
background-color: var(--header-color)
}
.CodeMirror-linenumber {
color: var(--tag-color)
}
.rm-sidebar-outline .rm-title-display {
padding-top: 0;
padding-bottom: 8px
}
#rm-mobile-bar {
z-index: 6
}
.roam-body-main {
position: relative
}
.rm-topbar {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 9999;
background-color: var(--header-color)
}
.bp3-tooltip .bp3-popover-arrow-fill {
fill: var(--background-color)
}
.bp3-tooltip .bp3-popover-content {
background-color: var(--background-color);
color: var(--text-color)
}
.bp3-tooltip .bp3-popover-content a {
color: var(--text-color)
}
@media(min-width:700px) {
div.roam-center > div {
padding-right: 0!important
}
#roam-right-sidebar-content {
padding-left: 42px
}
div.roam-sidebar-container[style*=box-shadow] {
bottom: 0!important;
box-shadow: unset!important
}
.sidebar-content > div > div {
padding: 16px 0
}
.rm-title-display,
.roam-body-main .rm-title-editing-display {
margin-top: 50px
}
.roam-article .roam-log-page:not(:first-child) .rm-title-display {
margin-top: 0
}
#right-sidebar .rm-sidebar-outline .rm-title-editing-display {
margin-top: -56px;
margin-bottom: 8px
}
.rm-title-display,
.roam-body-main .rm-title-editing-display {
padding-top: 8px
}
.check-container .checkmark::after {
left: 5px;
top: 1.5px
}
}
.rm-help-popup {
z-index: 9999
}
.rm-help-popup .rm-help-popup__drag-handle {
background-color: var(--background-color);
border-color: var(--border-color)
}
.jsPanel-hdr,
#jsPanelDNP-min {
border-radius: 5px
}
.jsPanel-headerbar {
border-top-left-radius: 5px;
border-top-right-radius: 5px
}
div[data-tippy-root] {
background-color: var(--background-color)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment