Created
June 10, 2020 05:32
-
-
Save rushikb/209bea4c124fb8acea924be2470e2e88 to your computer and use it in GitHub Desktop.
RKB_zenithdecker
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, 0.05); | |
| --block-shadow: 0px 2px 4px rgba(90, 99, 104, 0.05); | |
| --color-primary: #4c92c8; | |
| --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-body | |
| .roam-app | |
| .roam-sidebar-container | |
| .roam-sidebar-content | |
| .starred-pages-wrapper | |
| .starred-pages | |
| .page, | |
| .roam-body .roam-app .roam-sidebar-container > * { | |
| opacity: 80%; | |
| box-shadow: none !important; | |
| } | |
| .roam-sidebar-container { | |
| box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 10px 0px !important; | |
| } | |
| .roam-center { | |
| max-width: 740px; | |
| } | |
| ::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-page-ref-namespace-color { | |
| color: green; | |
| } | |
| .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: 1px solid var(--color-primary) !important; | |
| border-radius: 6em !important; | |
| opacity: 60% !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 { | |
| line-height: 1.2em !important; | |
| font-family: var(--header-font); | |
| } | |
| .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: 80%; | |
| 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: 80%; | |
| 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 ------ */ | |
| /* | |
| * ⌗ for block refs 🚀 | |
| */ | |
| .rm-block-ref::before { | |
| content: '⌗'; | |
| display: inline-block; | |
| color: #4d94ff; | |
| margin-right: 5px; | |
| top: -2px; | |
| position: relative; | |
| } | |
| .rm-block-ref { | |
| border-bottom: none; | |
| font-size: 1em; | |
| color: #515e70; | |
| } | |
| .rm-block-ref { | |
| display: inline-flex; | |
| border-bottom: none; | |
| font-size: 1em; | |
| color: #627a9d; | |
| background-color: #f5f7fa; | |
| } | |
| .rm-block-ref:hover { | |
| cursor: pointer; | |
| } | |
| .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: 540px; | |
| } | |
| .block-highlight-yellow { | |
| background-color: var(--color-primary-highlight); | |
| } | |
| textarea { | |
| font-size: var(--font-size) !important; | |
| font-family: var(--body-font) !important; | |
| max-width: 540px !important; | |
| } | |
| /* ------- Zenith Features -------*/ | |
| html, | |
| body, | |
| .roam-app { | |
| overflow: hidden !important; | |
| } | |
| /* hide scrollbars */ | |
| ::-webkit-scrollbar { | |
| width: 0px; | |
| background: transparent; /* Chrome/Safari/Webkit */ | |
| } | |
| /* hide scrollbars */ | |
| .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: 100%; | |
| 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; | |
| } | |
| .roam-body-main { | |
| top: 0 !important; | |
| height: 100% !important; | |
| width: auto !important; | |
| position: relative !important; | |
| padding-left: 50px; | |
| } | |
| .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; | |
| } | |
| .roam-center { | |
| flex: 1 1 100% !important; | |
| flex-basis: 35% !important; | |
| } | |
| /* -------------------------- */ | |
| /* 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 0.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 0.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: 50px; | |
| 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: 580px; | |
| top: 100px; | |
| left: calc(50% - 308px); | |
| 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 var(--color-primary-highlight), | |
| 0 0 0 3px var(--color-primary-highlight), | |
| 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: 580px; | |
| left: calc(50% - 308px); | |
| 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: var(--color-primary-highlight) !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; | |
| } | |
| /* -------------------------- */ | |
| /* 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, 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 ------------ */ | |
| span.rm-page-ref[data-tag^="W/"] { | |
| background: #569C3B; | |
| color: #fff; | |
| padding: 3px 7px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| /* zettels */ | |
| span.rm-page-ref[data-tag^="Z: "] { | |
| background: #569C3B; | |
| color: #fff; | |
| padding: 3px 7px; | |
| line-height: 2em; | |
| font-weight: 500; | |
| } | |
| /* Custom data tags */ | |
| span.rm-page-ref[data-tag="imp"] { | |
| background: #4747c4; | |
| color: white; | |
| padding: 3px 5px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| span.rm-page-ref[data-tag="q"] { | |
| background: #e80202; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="fix"] { | |
| background: #e80202; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="follow_up"] { | |
| background: #e80202; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="flag"] { | |
| background: #e80202; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="nb"] { | |
| background: #6a09bf; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="p"] { | |
| background: #40bf09; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="fixed"] { | |
| background: #40bf09; | |
| color: white; | |
| padding: 3px 5px; | |
| font-weight: 500; | |
| line-height: 1em; | |
| } | |
| span.rm-page-ref[data-tag="idea"] { | |
| background: #0DBAC6; | |
| color: #fff; | |
| padding: 3px 5px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| span.rm-page-ref[data-tag="stats"] { | |
| background: #0DBAC6; | |
| color: #fff; | |
| padding: 3px 5px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| span.rm-page-ref[data-tag="quotes"] { | |
| background: #0DBAC6; | |
| color: #fff; | |
| padding: 3px 5px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| span.rm-page-ref[data-tag="TIL"] { | |
| background: #0DBAC6; | |
| color: #fff; | |
| padding: 3px 5px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| span.rm-page-ref[data-tag="Action Items"] { | |
| background: #4747c4; | |
| color: #fff; | |
| padding: 3px 5px; | |
| line-height: 1em; | |
| font-weight: 500; | |
| } | |
| span.rm-page-ref[data-tag="Inbox"] { | |
| color: #4f9d06; | |
| padding: 3px 3px; | |
| font-weight: 600; | |
| line-height: 1.4em; | |
| } | |
| span.rm-page-ref[data-tag="Journal"] { | |
| color: #4f9d06; | |
| padding: 3px 3px; | |
| font-weight: 600; | |
| line-height: 1.4em; | |
| } | |
| span.rm-page-ref[data-tag="Work_Log"] { | |
| color: #4f9d06; | |
| padding: 3px 3px; | |
| font-weight: 600; | |
| line-height: 1.4em; | |
| } | |
| span.rm-page-ref[data-tag="Tasks"] { | |
| color: #4f9d06; | |
| padding: 3px 3px; | |
| font-weight: 600; | |
| line-height: 1.4em; | |
| } | |
| span.rm-page-ref[data-tag="Writing"] { | |
| color: #4f9d06; | |
| padding: 3px 3px; | |
| font-weight: 600; | |
| line-height: 1.4em; | |
| } | |
| span.rm-page-ref[data-tag="Tools"] { | |
| color: #4f069d; | |
| padding: 3px 3px; | |
| font-weight: 600; | |
| line-height: 1.4em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment