Created
November 23, 2021 22:48
-
-
Save marbiano/5b37d3d1400811e6d865c5dab39b4cdc to your computer and use it in GitHub Desktop.
Roam theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ------------- 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