Skip to content

Instantly share code, notes, and snippets.

@marbiano
Created November 23, 2021 22:48
Show Gist options
  • Save marbiano/5b37d3d1400811e6d865c5dab39b4cdc to your computer and use it in GitHub Desktop.
Save marbiano/5b37d3d1400811e6d865c5dab39b4cdc to your computer and use it in GitHub Desktop.
Roam theme
/* ------------- WARNING - Super 1.0, messy, broken rubbish CSS in here ------------- */
/* ------------- Customer support not included :) ------------- */
:root {
--header-font: "Open Sans", sans-serif;
--body-font: "Inter", sans-serif;
--font-size: 1.02em;
--bg-color: #EEF3F3;
--page-color: rgba(255, 255, 255, 0.95);
--text-color: #49556f;
--light-text-color: #5c7496;
--icon-color: #6a76a1;
/* #5c7080 */
--bullet-color: rgba(0, 0, 0, 0.2);
--page-shadow: 0px 6px 10px rgba(43, 45, 47, .05);
--block-shadow: 0px 2px 4px rgba(90, 99, 104, .05);
--color-primary: #EC6F35;
--color-primary-highlight: #ffdd99b8;
--color-primary-contrast: #FFFFFF;
--color-secondary: #8a3cc8;
--color-secondary-contrast: #FFFFFF;
--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%);
}
.roam-sidebar-container {
box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 10px 0px !important;
}
::selection {
background: #8fdcf3ba;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: #8fdcf3ba;
/* Gecko Browsers */
}
.block-highlight-blue {
background: #8fdcf3ba;
}
#buffer.tall {
height: calc(100vh - 50px) !important;
}
.check-container {
padding-right: 4px;
}
span.rm-page-ref {
border-radius: 2px;
padding-left: 1px;
padding-right: 1px;
}
.content span.rm-page-ref {
padding: 4px 1px 1px;
/* required for fixing azo */
}
.center-proj {
text-align: center;
}
div#buffer {
display: none;
visibility: hidden;
}
.zoom-path-view {
margin-top: 20px;
}
#block-input {
background: white;
}
.roam-body #block-input > span > div {
padding: 6px 24px;
background: white;
}
span.bp3-icon-small.bp3-icon-star {
display: none;
visibility: hidden;
}
.rm-embed-inner-block-hide {
margin-left: -40px;
}
#right-sidebar > div {
border: none;
}
.rm-level3 {
font-weight: 400;
font-size: 1.3em;
}
.rm-page-ref {
color: #9aabd0;
}
.rm-page-ref-link-color {
color: var(--color-primary);
font-weight: 600;
}
a {
color: #8a3cc8;
}
.intercom-app, .intercom-launcher-frame, #intercom-container {
display: none !important;
}
.rm-embed-container {
background-color: white;
padding: 0.8em;
border: 1px solid #e9edf6;
border-radius: 4px;
box-shadow: var(--block-shadow);
}
.block-ref-count-button {
color: var(--color-primary) !important;
font-weight: 800;
top: -10px;
}
.bp3-popover-target button {
border-radius: 6em !important;
opacity: 0.6 !important;
padding: 0 !important;
}
/* Start of "Better Roam" theming */
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;
}
body, #app {
background: var(--main-background-color) !important;
}
span.checkmark {
top: -2px;
}
.rm-level3 div, .rm-level3 textarea {
line-height: 1.2 !important;
color: var(--light-text-color);
}
h1.level2 {
font-weight: 400 !important;
font-family: var(--header-font);
overflow-wrap: break-word;
}
.roam-log-container .roam-log-page:first-child {
min-height: 0 !important;
border: none !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-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;
}
strong {
font-weight: 700 !important;
}
/* ----- Start of my Theming -----*/
h1, h2, h3, h4, h5, h6 {
font-family: var(--header-font);
font-size: 3em;
}
div, textarea {
font-weight: 400;
color: #3f4758;
font-family: var(--body-font);
line-height: 1.7em !important;
font-size: 1.001em;
}
.rm-pomodoro {
background: #fff !important;
color: #ff4747 !important;
padding: 4px 14px;
line-height: 2em;
font-weight: 600;
border-radius: 2em;
border: 1px solid #ff474770;
}
.rm-title-display, .rm-title-textarea {
font-family: var(--header-font);
font-size: var(--font-size) !important;
max-width: 600px !important;
}
.rm-title-display {
margin-top: 0.6em !important;
}
/* ----- Pomo styling -----*/
.rm-pomodoro {
background: #ff6956 !important;
color: #fff !important;
padding: 4px 14px;
line-height: 2em;
font-weight: 600;
border-radius: 2em;
border: 1px solid #ed5845;
}
.rm-pomodoro::first-letter {
margin-right: 8px;
}
/* ----- Query styling -----*/
.rm-query {
border: 0.5px solid #e4e9ec;
border-radius: 5px;
}
.rm-query .rm-query-title {
background-color: #f7f8f8;
padding: 0.8em;
color: #d1dbe2;
font-size: 80%;
}
.rm-reference-main.rm-query-content {
padding: 0.8em;
}
.rm-reference-main .rm-reference-item .controls {
margin-left: -1em;
}
.rm-ref-page-view {
padding: 0.4em 0.2em;
}
div.flex-v-box.starred-pages-wrapper > div.flex-h-box > span {
font-size: 14px !important;
opacity: 0.8;
letter-spacing: 0.04em;
}
div.roam-sidebar-container.noselect > div > div {
font-size: 14px !important;
letter-spacing: 0.03em;
}
.roam-log-container .roam-log-page {
min-height: 0 !important;
border-top: 1px solid var(--border-color) !important;
}
/* ------ Reference Items ------ */
.rm-reference-item {
background: var(--reference-item-background) !important;
margin-top: 8px;
border-radius: 6px;
border: 1px solid #f0f0f0 !important;
margin-right: 8px;
flex: 1 1 100%;
word-break: break-word;
padding: 8px 10px 8px 2px !important;
}
/* ----- Make left borders and bullets subtle -----*/
.block-border-left {
border-left-color: var(--subtle-border-color) !important;
}
.controls .simple-bullet-outer .simple-bullet-inner {
background-color: #e5e9f2;
}
/* ------ Kanbans ------ */
.rm-full-width {
max-width: 100%;
}
.kanban-board {
background-color: #fff;
}
.kanban-card {
background-color: white;
margin: 8px;
box-shadow: 0px 1px 2px #9eb3c0a8;
padding: 10px;
border-radius: 2px;
line-height: 1.3em;
}
.kanban-title {
text-align: center;
font-weight: 600;
font-size: 1.1em;
opacity: 0.8;
color: #485f6f;
padding-top: 8px;
border-bottom: 1px solid #c5d1d8;
}
.kanban-column {
background-color: #e7eff3;
margin: 0px 4px 0px 4px;
padding: 4px;
min-width: 120px;
border-radius: 3px;
}
/* ------ Block Refs ------ */
.rm-block-ref::before {
content:'';
display: inline-block;
width: 2px;
border-radius: 40px;
height: 12px;
background: #ff913c;
margin-right: 8px;
text-decoration: none;
}
.rm-block-ref {
border-bottom: none;
font-size: 1em;
color: #515e70;
}
.rm-block-ref:hover {
background: none;
cursor: pointer;
text-decoration: none;
}
.checkmark {
background: #fff;
}
.check-container input:checked ~ .checkmark {
background: #33bdea;
}
.check-container input:checked ~ .checkmark:after {
border-color: #fff;
}
.roam-body .roam-app .roam-sidebar-container {
background-color: white;
border-right: 1px #eee solid;
}
.rm-block-text > * {
font-size: var(--font-size) !important;
}
.rm-block-text {
max-width: 600px;
}
.block-highlight-yellow {
background-color: var(--color-primary-highlight)
}
textarea {
font-size: var(--font-size) !important;
font-family: var(--body-font) !important;
max-width: 600px !important;
}
/* ------- Zenith Features -------*/
html, body, .roam-app {
overflow: hidden !important;
}
/* hide scrollbars */
::-webkit-scrollbar {
width: 0px;
background: transparent;
/* Chrome/Safari/Webkit */
}
/* hide scrollbars */
* {
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
}
.bp3-button.bp3-minimal::before, .bp3-button.bp3-minimal *, .bp3-button.bp3-minimal *::before {
color: var(--icon-color) !important;
}
.bp3-button.bp3-minimal:hover::before, .bp3-button.bp3-minimal:hover *, .bp3-button.bp3-minimal:hover *::before {
color: var(--text-color) !important;
}
*[class*="bp3-icon"], *[class*="bp3-icon"]::before {
color: var(--icon-color) !important;
}
.bp3-popover {
color: var(--color-secondary-contrast) !important;
}
.rm-alias-external, .rm-alias-external:hover {
color: var(--color-secondary) !important;
font-weight: 600;
}
/* -------------------------- */
/* PAGE CARDS */
/* -------------------------- */
.roam-article {
padding-right: 10px !important;
max-width: 740px;
padding-left: 20px !important;
}
.roam-article > div {
padding: 30px 50px 50px 50px;
background: var(--page-color);
box-shadow: var(--page-shadow);
border: 1px solid #e5ecf1;
border-radius: 6px;
margin-top: 10px !important;
width: auto;
}
.roam-body-main {
top: 0 !important;
height: 100% !important;
width: auto !important;
position: relative !important;
padding-left: 50px;
min-width: 600px;
}
.roam-main {
width: unset !important;
max-width: 100% !important;
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
margin: auto;
transition: padding-left 0.15s ease-out;
}
/* -------------------------- */
/* RIGHT SIDEBAR */
/* -------------------------- */
#right-sidebar {
display: inline-flex !important;
vertical-align: top;
background-color: transparent !important;
border: none !important;
flex-direction: row !important;
padding-right: 100px;
}
/* hide icon to close sidebar */
#right-sidebar > .flex-h-box {
display: none;
}
/* spacing and scrolling */
#roam-right-sidebar-content > * {
margin: 0px 0px 0 14px !important;
overflow-y: auto !important;
max-height: 100vh;
padding: 50px 0px 100px 0px;
display: block !important;
position: relative !important;
border: none !important;
}
#roam-right-sidebar-content {
visibility: visible;
display: flex;
flex-direction: row;
align-items: flex-start;
/* allow pages to have their own height */
justify-content: flex-end;
}
.roam-center > div:first-child {
padding: 0 !important;
}
.roam-body-main > * {
display: inline-block;
}
#roam-right-sidebar-content > * > .flex-h-box {
display: block !important;
padding: 18px 10px !important;
}
#roam-right-sidebar-content > * > div {
background: var(--page-color);
border: 1px solid var(--border-color);
box-shadow: var(--page-shadow);
}
#roam-right-sidebar-content > * > div:first-child {
border-radius: 6px 6px 0px 0px;
border-bottom: 0;
}
#roam-right-sidebar-content > * > div:first-child:last-child {
border-radius: 6px;
border-top: 0;
}
#roam-right-sidebar-content > * > div:last-child:not(:first-child) {
border-radius: 0px 0px 6px 6px;
padding-bottom: 50px !important;
width:600px;
border-top: 0;
}
#roam-right-sidebar-content > div > div:not(.flex-h-box) {
padding: 0px 50px 0px 40px;
}
#roam-right-sidebar-content > div > .flex-h-box > .bp3-button, #roam-right-sidebar-content .flex-h-box > .bp3-popover-wrapper {
margin: auto !important;
width: 20px !important;
text-align: center;
}
#roam-right-sidebar-content > div > .flex-h-box > .bp3-button:first-child, #roam-right-sidebar-content .flex-h-box > .bp3-button:last-child {
display: block;
}
#roam-right-sidebar-content > div .bp3-icon-plus ~ .bp3-button, #roam-right-sidebar-content > div .bp3-icon-plus ~ .bp3-popover-wrapper {
display: none;
}
/* position minus button */
#roam-right-sidebar-content > div .bp3-icon-minus, #roam-right-sidebar-content > div .bp3-icon-plus {
position: absolute;
top: 20px;
left: 20px;
}
/* position filter button */
#roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-popover-wrapper {
position: absolute;
top: 20px;
left: 50px;
}
/* position references button */
#roam-right-sidebar-content > div .bp3-icon-minus ~ button.bp3-button {
position: absolute;
top: 20px;
left: 80px;
}
/* position close button */
#roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-cross {
position: absolute;
top: 20px;
right: 20px;
}
#roam-right-sidebar-content > div .bp3-icon-minus + * {
margin: 20px 5px 5px 30px !important;
max-width: 540px;
}
#roam-right-sidebar-content > div .level2 a {
color: var(--text-color);
line-height: 1.4em;
transition: 400ms;
font-size: 1.1em;
}
#roam-right-sidebar-content > div a:hover {
color: var(--color-primary);
text-decoration: none;
transition: 400ms;
}
#roam-right-sidebar-content > div .bp3-icon-plus ~ h1 {
margin-top: 10px !important;
}
#roam-right-sidebar-content > div .bp3-icon-plus ~ .bp3-button:last-child {
margin-top: 20px !important;
}
#roam-right-sidebar-content > div .bp3-icon-plus, #roam-right-sidebar-content > div .bp3-icon-plus ~ * {
display: block;
flex: none !important;
}
#roam-right-sidebar-content > div .bp3-icon-plus + * {
white-space: nowrap;
writing-mode: vertical-rl;
min-width: 0;
}
#roam-right-sidebar-content > div .bp3-icon-plus + div {
padding: 0px 12.5px;
}
/* fix positioning problems with menu icon */
.roam-topbar *[class*="icon-menu"]::before {
position: absolute !important;
top: 4px !important;
left: 4px !important;
}
.roam-topbar .bp3-icon-menu-open::before {
content:"";
/* prevent menu icon from changing on hover */
}
/* -------------------------- */
/* LEFT SIDEBAR */
/* -------------------------- */
/* HIDE LOGO*/
#roam-sidebar-logo {
display: none;
}
.roam-sidebar-content * {
color: var(--icon-color) !important;
}
.starred-pages > a > .page:hover {
background-color: transparent !important;
color: var(--primary-color) !important;
}
.starred-pages > a {
padding-left: 0 !important;
}
.starred-pages-wrapper {
margin-left:10px;
}
.log-button * {
}
.log-button {
background: none !important;
}
.log-button:hover, .log-button:hover * {
color: var(--text-color) !important;
}
.roam-sidebar-content {
color: var(--text-color) !important;
}
.roam-topbar {
opacity: 1 !important;
background-color: transparent !important;
margin-top: 70px;
width: 20px;
display: inline-block;
padding-left: 0px !important;
position: relative !important;
position: sticky !important;
left: 0px;
transition: none !important;
z-index: 999;
border: none !important;
}
.roam-sidebar-container > .roam-sidebar-content::before {
content:"";
position: absolute;
top: -70px;
right: -30px;
width: 400px;
height: 100vh;
opacity: 0.7;
z-index: -1;
}
.roam-sidebar-container {
border: none !important;
top: 0px !important;
padding-top: 70px;
visibility: hidden;
/* hide background */
transition: all .25s ease-out;
width: 240px !important;
padding-right: 40px;
padding-left: 10px;
backdrop-filter: blur(5px);
background: #000000 !important;
}
.roam-sidebar-container > .roam-sidebar-content {
display: block !important;
height: auto !important;
visibility: visible;
/* show contents */
}
.roam-sidebar-container > .roam-sidebar-content > * {
opacity: 0 !important;
transition: opacity .6s ease-out !important
}
.roam-sidebar-container:not([style*="top: 0px"]) {
left: -170px !important;
}
.roam-sidebar-container[style*="top: 0px"] > .roam-sidebar-content > * {
opacity: 1 !important;
}
.roam-sidebar-container[style*="top: 0px"] + .roam-main {
padding-left: 180px;
}
/* fix height with absolute positioning of email address */
.roam-sidebar-content > .flex-h-box {
height: 40px;
}
.roam-sidebar-content > .flex-h-box > * {
pointer-events: auto;
}
.roam-sidebar-content > .flex-h-box ~ * {
pointer-events: all;
}
.roam-sidebar-content > .flex-h-box > .flex-h-box {
position: absolute;
left: 45px;
top: 5px;
}
.roam-topbar > .flex-h-box {
width: 50px;
flex-direction: column;
height: 1px !important;
align-items: start !important;
text-align: center;
position: -webkit-sticky !important;
position: sticky !important;
left: 0px;
}
.roam-topbar > .flex-h-box > * {
flex: 0 0 20px !important;
margin: auto !important;
max-width: 20px !important;
max-height: 20px !important;
}
.roam-topbar > div >.bp3-button:first-child {
align-self: start !important;
position: fixed !important;
left: 16px;
top: 78px;
z-index: 9999999 !important;
}
.roam-topbar > div > *:nth-child(2) {
margin-top:20px !important;
}
.rm-reference-item {
background-color: transparent !important;
}
.rm-ref-page-view-title a {
color: var(--light-text-color);
font-size: 1.1em;
text-decoration: none !important;
}
/* SOME BLACKMAGIC TO GET SEARCH ICON TO FUNCTION LIKE OTHER BUTTONS */
.roam-topbar .bp3-icon-search {
padding: 4px;
border-radius: 3px;
margin: 0 !important;
cursor: pointer;
}
/* style contains `200px` if search bar is NOT selected */
/* hovering search bar in this mode == hovering icon itself */
/* we must however have the search bar in front of the icon (but invisible) so that it can focus on click */
/* very hacky :P */
.rm-find-or-create-wrapper[style*="200px"]:hover .bp3-icon-search,
.roam-topbar .bp3-icon-search:hover {
background-color: rgba(var(--color-primary), 0.4);
color: var(--text-color) !important;
}
.roam-topbar .bp3-icon-search svg {
padding: 1px;
}
/* fix centering on calendar icon */
.roam-topbar .bp3-icon-calendar {
margin: 0 !important;
}
.rm-find-or-create-wrapper {
width: 20px !important;
}
.rm-find-or-create-wrapper .bp3-overlay {
position: fixed;
top: 150px;
left: calc(50% - 325px);
width: 650px;
}
.roam-body-main {
display: block;
width: 100%;
}
/* -------------------------- */
/* POPOVER STYLES */
/* -------------------------- */
.bp3-menu-divider {
border-color: rgba(255, 255, 255, 0.25) !important;
}
.bp3-text-small {
color: var(--text-color) !important;
opacity: 0.6;
}
.bp3-transition-container {
/* not very good at these z-indexes huh? */
z-index: 9999999999 !important;
}
.bp3-popover {
min-width: 230px;
/* fix width */
pointer-events: none;
/* prevent from getting in the way of hover*/
}
.bp3-popover .bp3-menu, .bp3-popover .bp3-popover-content {
pointer-events: auto;
}
.bp3-popover .bp3-popover-arrow svg * {
fill: var(--page-color);
}
.bp3-popover .bp3-popover-content {
background-color: var(--page-color) !important;
max-width: 480px;
}
#app .bp3-popover .bp3-popover-arrow svg * {
fill: rgb(var(--color-secondary));
fill: var(--page-color);
}
/* what a mess! */
/*.roam-body-main .bp3-popover .bp3-popover-content, .roam-body-main .bp3-menu,
.roam-sidebar-container .bp3-popover .bp3-popover-content, .roam-sidebar-container .bp3-menu {
background-color: rgb(var(--color-secondary)) !important;
}
.roam-body-main .bp3-popover .bp3-popover-content, .roam-body-main .bp3-popover .bp3-popover-content *,
.roam-sidebar-container .bp3-popover .bp3-popover-content, .roam-sidebar-container .bp3-popover .bp3-popover-content * {
color: var(--color-secondary-contrast) !important;
}*/
body > .bp3-portal .bp3-menu {
background-color: var(--page-color) !important;
}
body > .bp3-portal .bp3-popover-content, body > .bp3-portal .bp3-popover-content * {
color: var(--text-color) !important;
}
.bp3-popover .bp3-button, .bp3-popover .bp3-button * {
color: var(--text-color) !important;
}
body > .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] > span::before, body > .bp3-portal *[style*="rgba(72, 176, 240, 0.5)"] * {
color: var(--color-secondary-contrast) !important;
}
body > .bp3-portal .bp3-menu-divider {
border-color: rgba(0, 0, 0, 0.2) !important;
}
body > .bp3-portal .bp3-text-small {
color: rgba(0, 0, 0, 0.5) !important;
}
.emoji-mart {
border: none !important;
}
/* -------------------------- */
/* SEARCH BAR */
/* -------------------------- */
#find-or-create-input {
opacity: 0;
z-index: 10000; /* bring in front of icon to keep clickable */
cursor: pointer;
}
/*#find-or-create-input:active, */#find-or-create-input:focus {
opacity: 1;
position: fixed;
width: 600px;
top: 100px;
left: calc(50% - 600px / 2);
cursor: text;
}
#find-or-create-input {
border-radius: 10px 10px 0px 0px;
font-size: 18px;
padding: 20px 20px;
}
/* if input is empty (no menu) then use all-around border-radius*/
#find-or-create-input[value=""] {
border-radius: 10px;
}
/* highlight around search box */
#find-or-create-input:focus {
box-shadow: 0 0 0 1px rgb(var(--color-primary)), 0 0 0 3px rgba(var(--color-primary), 0.3), inset 0 1px 1px rgba(16,22,26, 0.2);
}
/* styling dropdown menu*/
.rm-find-or-create-wrapper .bp3-popover {
border-radius: 0px 0px 10px 10px;
overflow: hidden;
background: var(--page-color);
backdrop-filter: blur(5px);
}
/* prevent coloured menu */
.rm-find-or-create-wrapper .bp3-popover-content, .rm-find-or-create-wrapper .bp3-menu {
background-color: transparent !important;
}
/* properly position search menu overlay */
.rm-find-or-create-wrapper .bp3-overlay {
top: 142px;
width: 600px;
left: calc(50% - 300px);
z-index: 999999;
}
/* new page text */
.rm-find-or-create-wrapper .rm-new-page {
color: rgb(var(--color-primary)) !important;
}
/* selected search result */
.rm-find-or-create-wrapper .rm-menu-item[style*="background"] {
background-color: rgba(0, 0, 0, 0.1) !important;
}
/* search results highlighted words */
.rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item span[style*="yellow"],
.rm-pages-title-col span[style*="yellow"]{
background-color: rgba(var(--color-primary), 0.4) !important;
color: var(--text-color);
}
.bp3-input {
background-color: var(--page-color) !important;
color: var(--text-color) !important;
}
.bp3-input::placeholder {
background-color: var(--page-color) !important;
color: var(--text-color) !important;
opacity: 0.3;
}
.rm-search-list-item {
color: var(--text-color) !important;
opacity: 0.6;
}
/* -------------------------- */
/* DIAGRAM */
/* -------------------------- */
.rm-block-text svg {
background-color: var(--bg-color) !important;
border: none !important;
}
.bp3-button, .roam-block div[style*="100vh"] > button {
background-image: none !important;
padding: 0px 10px !important;
border: none !important;
border-radius: 5px !important;
}
.roam-block div[style*="100vh"] > button {
background-color: var(--bg-color) !important;
}
.bp3-button:hover, .roam-block div[style*="100vh"] > button:hover {
background-color: rgba(var(--color-primary), 0.5) !important;
}
.roam-block div[style*="100vh"] div[style*="background-color: white"] {
background-color: var(--page-color) !important;
border-color: var(--bg-color) !important;
}
.roam-center svg > g > rect:first-child, #roam-right-sidebar-content > div svg > g > rect:first-child {
display: none;
}
.roam-center svg > g > foreignObject, #roam-right-sidebar-content > div svg > g > foreignObject {
background-color: var(--page-color);
border-radius: 8px;
filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, .05));
border: 1px solid transparent;
}
/* SELECTION */
.roam-center svg > g > rect[stroke="red"] + foreignObject, #roam-right-sidebar-content > div svg > g > rect[stroke="red"] + foreignObject {
border-color: var(--color-primary-highlight);
}
.roam-center svg > g > rect[style*="stroke: red"] + foreignObject, #roam-right-sidebar-content > div svg > g > rect[style*="stroke: red"] + foreignObject {
border-color: var(--color-primary-highlight);
}
.roam-center svg > g > rect[style*="rgba"] + foreignObject, #roam-right-sidebar-content > div svg > g > rect[style*="rgba"] + foreignObject {
background-color: white
}
.roam-center svg > g > foreignObject > input:first-child, #roam-right-sidebar-content > div svg > g > foreignObject > input:first-child {
background-color: var(--color-primary-highlight) !important;
color: var(--color-primary-contrast);
height: 30px;
}
.roam-center svg > line[style*="stroke: red"], #roam-right-sidebar-content > div svg > line[style*="stroke: red"] {
stroke: var(--color-secondary) !important;
}
.roam-center svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"], #roam-right-sidebar-content > div svg > rect[style*="fill: rgba(55, 141, 240, 0.5)"] {
fill: var(--color-secondary) !important;
stroke: var(--color-secondary) !important;
}
/* -------------------------- */
/* SEARCH PAGE */
/* -------------------------- */
#all-pages-search {
max-height: calc(100% - 50px);
overflow-y: auto;
padding-bottom: 100px !important;
}
#all-pages-search > div {
padding: 0 !important;
}
.rm-pages-row-header {
background-color: rgba(var(--color-primary), 0.4) !important;
color: var(--color-secondary-contrast) !important;
border: none !important;
}
.rm-pages-row[style] .bp3-icon::before {
margin-left: 5px;
color: var(--color-secondary-contrast) !important;
}
.rm-pages-row-highlight {
background-color: var(--page-color);
}
.rm-pages-row[style] .rm-pages-action-col {
color: transparent !important;
}
/* use wrench icon for actions header rather than "AC..." */
.rm-pages-row[style] .rm-pages-action-col::before {
font-family:"Icons16";
content:"";
color: var(--color-secondary-contrast);
position: absolute;
margin-left: 10px;
}
/* style new page button */
.bp3-intent-success {
color: rgb(var(--color-primary)) !important;
}
.bp3-intent-success:hover {
background-color: rgba(73, 197, 91, 0.2) !important;
}
.bp3-intent-success:active {
background-color: rgba(73, 197, 91, 0.4) !important;
}
/* new search page */
.bp3-control-indicator {
background-color: var(--page-color) !important;
background-image: none !important;
border: 1px solid rgba(var(--color-primary), 0.6) !important;
}
.bp3-control input:checked ~ .bp3-control-indicator {
background-color: rgb(var(--color-primary)) !important;
box-shadow: none !important;
/* sliders */
}
.bp3-checkbox > input:checked ~ .bp3-control-indicator::before {
width: 0.9em !important;
height: 0.9em !important;
}
.rm-clickable-pill {
background-color: rgba(var(--color-primary), 0.4) !important;
}
.rm-clickable-pill.empty-pill {
background-color: var(--page-color) !important;
}
.rm-pages-col-word-count > div > span:first-child, .rm-pages-col-word-count + div > div > span:first-child {
display: none
}
/*.rm-pages-col-word-count > div > .sorting-button-group::before {
content: "WORDS";
font-size: 0.8em;
}
.rm-pages-col-word-count + div > div > .sorting-button-group::before {
content: "REFS";
font-size: 0.8em;
}*/
.sorted-header-text {
color: var(--text-color) !important;
}
.rm-pages-row .rm-pages-col {
flex: 0 0 60px !important;
}
.rm-pages-row .rm-pages-col:nth-last-child(1), .rm-pages-row .rm-pages-col:nth-last-child(2) {
flex: 0 0 140px !important;
}
.rm-all-pages .table > div {
max-width: 580px !important;
min-width: 580px !important;
}
.sort-button::before {
color: var(--text-color) !important;
}
.sort-button.focused::before {
color: rgb(var(--color-primary)) !important;
}
.rm-pages-row {
border-bottom: none !important;
}
.rm-pages-row:nth-child(2n+1) {
background-color: rgba(var(--color-primary), 0.15);
border-radius:3px;
}
/* fix width change on border */
.rm-all-pages .bp3-input {
border: 1px solid transparent;
}
.rm-all-pages .bp3-input.focused {
border: 1px solid rgb(var(--color-primary)) !important;
}
/* -------------------------- */
/* Custom Data Tags and Pages */
/* -------------------------- */
span.rm-page-ref[data-tag='Tweet'], span[data-link-title^='Tweet'] .rm-page-ref {
background: #81d5ed !important;
color: white !important;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Literature Notes'], span[data-link-title^='Literature Notes'] .rm-page-ref {
background: #9769ff !important;
color: white !important;
padding: 3px 7px;
font-weight: 500;
line-height: 2em;
}
span.rm-page-ref[data-tag='Evergreens'], span[data-link-title^='Evergreens'] .rm-page-ref {
background: #0dbac6 !important;
color: #fff !important;
padding: 3px 8px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Seedling'], span[data-link-title^='Seedling'] .rm-page-ref {
color: #0dbac6 !important;
padding: 3px 3px;
font-weight: 600;
line-height: 1.4em;
}
span.rm-page-ref[data-tag='Idea Bank'], span[data-link-title^='Idea Bank'] .rm-page-ref {
color: #fcb815 !important;
padding: 3px 4px;
font-weight: 700;
line-height: 1.4em;
}
span.rm-page-ref[data-tag='Idea Bank']:before {
content:'✦ ';
}
span.rm-page-ref[data-tag='Illustrated Notes'], span[data-link-title^='Illustrated Notes'] .rm-page-ref {
color: #7172fc;
padding: 3px 4px;
font-weight: 700;
line-height: 1.4em;
}
span.rm-page-ref[data-tag='Garden Notes'], span[data-link-title^='Garden Notes'] .rm-page-ref {
color: #9dbc13;
padding: 3px 4px;
font-weight: 700;
line-height: 1.4em;
}
span.rm-page-ref[data-tag='Video Tutorial'] {
color: #db3b8d;
padding: 3px 4px;
line-height: 1.4em;
font-weight: 700;
}
span.rm-page-ref[data-tag='Essay'], span[data-link-title^='Essay'] .rm-page-ref {
background: #adcb2a;
color: #fff;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Livestream'], span[data-link-title^='Livestream'] .rm-page-ref {
color: #b979cf;
padding: 3px 4px;
line-height: 1.4em;
font-weight: 700;
}
span.rm-page-ref[data-tag='Talk'], span[data-link-title^='Talk'] .rm-page-ref {
background: #7172fc;
color: #fff;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Waiting'], span[data-link-title^='Waiting'] .rm-page-ref {
background: #f9c866;
color: #fff;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Researching'], span[data-link-title^='Researching'] .rm-page-ref {
background: #ff9d66 !important;
color: #fff;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Synthesising'], span[data-link-title^='Synthesising'] .rm-page-ref {
background: #fc766f !important;
color: #fff !important;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span.rm-page-ref[data-tag='Alive'], span[data-link-title^='Alive'] .rm-page-ref {
background: #ee5f85 !important;
color: #fff !important;
padding: 3px 7px;
line-height: 2em;
font-weight: 500;
}
span[data-link-title^='Book/'] .rm-page-ref {
color: #119BF0 !important;
font-weight: 600;
}
span[data-link-title^='Evergreen/'] .rm-page-ref {
color: #00ACC0 !important;
font-weight: 600;
}
span[data-link-title^='➽'] .rm-page-ref {
color: #35B2D4 !important;
font-weight: 700;
}
span[data-link-title^='Video/'] .rm-page-ref {
color: #119BF0 !important;
font-weight: 600;
}
span[data-link-title^='Project/'] .rm-page-ref {
color: #5135D4 !important;
font-weight: 700;
}
span[data-link-title^='Area/'] .rm-page-ref {
color: #D4357F !important;
font-weight: 600;
}
span[data-link-title^='Article/'] .rm-page-ref {
color: #119BF0 !important;
font-weight: 600;
}
span[data-link-title^='Course/'] .rm-page-ref {
color: #5391F8 !important;
font-weight: 600;
}
span[data-link-title^='Safari/'] .rm-page-ref {
color: #00B490 !important;
font-weight: 600;
}
span[data-link-title^='Safari/'] .rm-page-ref::before {
content: '⁙ ';
font-size: 1.4em;
}
span[data-link-title^='Idea/'] .rm-page-ref {
color: #fcb815 !important;
padding: 3px 4px;
font-weight: 700;
line-height: 1.4em;
}
span[data-link-title^='Idea/'] .rm-page-ref::before {
content:'✦ ';
}
span[data-link-title^='Orbit'] .rm-page-ref {
color: #9B9EDD !important;
font-weight: 500;
}
span[data-link-title^='Orbit'] .rm-page-ref::after {
content: '⍜';
padding-left: 6px;
padding-right: 3px;
}
span[data-link-title^='interval'] .rm-page-ref, span[data-link-title^='factor'] .rm-page-ref {
font-weight: 300;
}
/* -------------------------- */
/* TODO System */
/* -------------------------- */
span[data-link-title^='ℂ'] .rm-page-ref, span.rm-page-ref[data-tag='ℂ'], span[data-link-title^='☉'] .rm-page-ref, span.rm-page-ref[data-tag='☉'], span[data-link-title^='ᵟ'] .rm-page-ref, span.rm-page-ref[data-tag='ᵟ'] {
font-weight: 400;
opacity: 0.7;
color: #8A70C7;
padding-left: 0.2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment