Last active
July 29, 2023 20:22
-
-
Save jbnv/7fc774844264d5a2be541c9d6bd19b66 to your computer and use it in GitHub Desktop.
Stylesheet for Roam Research
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
| /* Based on original Dark Age theme by @shodty */ | |
| /* MAIN BODY AND BLOCK COLORS */ | |
| .roam-body-main { | |
| margin-top: 45px; | |
| border-radius: 12px; | |
| background: var(--background); | |
| margin-right: 6px; | |
| margin-left: 9px; | |
| } | |
| .rm-bullet__inner { | |
| background-color: var(--bullets); | |
| } | |
| .rm-bullet--closed .rm-bullet__inner { | |
| border: 4px solid var(--closed-bullets) !important; | |
| /* !important needed */ | |
| } | |
| .rm-bullet__inner:hover { | |
| background-color: var(--icons-hover); | |
| } | |
| .rm-caret { | |
| color: var(--links--hover); | |
| opacity: 1 !important; | |
| /* !important needed */ | |
| position: relative; | |
| top: -1.5px; | |
| } | |
| .rm-caret-hidden { | |
| opacity: 0 !important; | |
| /* !important needed */ | |
| } | |
| .rm-caret:hover { | |
| color: var(--icons-hover); | |
| } | |
| .version-bullet { | |
| background-color: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| color: var(--body-text); | |
| } | |
| .rm-block-input { | |
| color: var(--body-text); | |
| background-color: var(--sidebar-background); | |
| padding-left: 6px; | |
| border-radius: 5px; | |
| } | |
| /* Block reference */ | |
| .block-ref-count-button { | |
| color: var(--icons); | |
| background: transparent; | |
| z-index: 1000; | |
| transition: color 0.3s ease; | |
| font-family: var(--monospace); | |
| margin-right: 6px; | |
| margin-top: 2px; | |
| border-radius: 0; | |
| } | |
| .block-ref-count-button:hover { | |
| color: var(--icons-hover); | |
| transition: color 0.3s ease, border 0.3s ease; | |
| } | |
| .rm-block-ref, span[style*="color: red"] { | |
| color: var(--body-text); | |
| border-bottom: var(--references-style) var(--references-color); | |
| } | |
| span[style*="color: red"] { | |
| color: var(--block-reference-text) !important; | |
| border-bottom: var(--references-style) var(--references-color); | |
| } | |
| .rm-block-ref:hover, span[style*="color: red"]:hover { | |
| background-color: var(--kanban-column-background); | |
| transition: color 0.3s ease; | |
| } | |
| span[style*="color: red"]:hover { | |
| cursor: nw-resize; | |
| } | |
| /* Filter icon */ | |
| .bp3-icon.bp3-icon-filter[style*="color: rgb(168, 42, 42);"] { | |
| color: var(--filter-icon) !important; | |
| /* !important needed */ | |
| } | |
| /* Inline Block References */ | |
| .rm-inline-references { | |
| background-color: var(--background); | |
| box-shadow: var(--references-color) 40px 0px 50px -40px inset; | |
| padding: 5px 20px 5px; | |
| } | |
| .rm-inline-references:before { | |
| color: var(--block-reference-text); | |
| content: "Block References"; | |
| font-weight: 500; | |
| } | |
| .rm-zoom-mask { | |
| color: var(--body-text); | |
| } | |
| .rm-zoom-item-content.rm-zoom-collapsed-item { | |
| color: var(--references-color); | |
| text-decoration: underline; | |
| } | |
| .bp3-icon-caret-right { | |
| color: var(--icons) !important; | |
| /* !important needed */ | |
| } | |
| .squish[style*="color: rgb(138, 155, 168);"]>svg>g>path { | |
| fill: var(--icons) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-icon-standard.bp3-icon-circle { | |
| color: var(--icons); | |
| } | |
| /* BETTERROAM-LIKE STYLE Original BetterRoam theme by @linuz90 */ | |
| .roam-article { | |
| padding: 10px 30px 0px 30px !important; | |
| /* !important needed */ | |
| } | |
| .roam-app, .roam-body-main.flex-h-box, .roam-body { | |
| background: var(--sidebar-background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* TOPBAR & SIDEBAR STYLE AND COLORS */ | |
| /* Right sidebar and topbar */ | |
| #right-sidebar, .rm-topbar { | |
| background-color: var(--sidebar-background); | |
| } | |
| .sidebar-content { | |
| margin-left: 4px; | |
| margin-right: 6px; | |
| padding: 5px; | |
| min-width: 100%; | |
| min-height: 100%; | |
| } | |
| /* Spacing between right sidebar items */ | |
| #roam-right-sidebar-content>div>div:nth-child(n)>div { | |
| padding-top: 11px !important; | |
| /* !important needed */ | |
| padding-bottom: 11px !important; | |
| /* !important needed */ | |
| } | |
| #roam-right-sidebar-content { | |
| margin-top: 9px; | |
| border: 1px solid var(--sidebar-background); | |
| border-radius: 12px; | |
| background: var(--background); | |
| margin-right: 6px; | |
| } | |
| #right-sidebar .rm-title-textarea { | |
| width: 95%; | |
| } | |
| .roam-main { | |
| height: 99%; | |
| } | |
| /* fix references layout in right sidebar */ | |
| .sidebar-content .rm-reference-container { | |
| border: 0; | |
| padding: 0; | |
| } | |
| /* Left sidebar */ | |
| .roam-sidebar-container { | |
| background-color: transparent !important; | |
| /* !important needed */ | |
| -webkit-backdrop-filter: blur(15px); | |
| backdrop-filter: blur(15px); | |
| } | |
| .rm-topbar { | |
| border-bottom: 0; | |
| } | |
| /* Compact formatting */ | |
| .log-button, .page, .starred-pages-wrapper, td { | |
| line-height: normal; | |
| } | |
| /* fix to ensure search popover does not slide under left sidebar when open */ | |
| .rm-find-or-create-wrapper:focus-within { | |
| flex: 1 1 30% !important; | |
| /* !important needed */ | |
| } | |
| div[style*="border-bottom: 1px solid rgb(138, 155, 168);"] { | |
| border-bottom: 1px solid var(--references-color) !important; | |
| /* !important needed */ | |
| } | |
| div[style*="border-bottom-color: rgb(138, 155, 168);"] { | |
| border-bottom-color: var(--references-color) !important; | |
| /* !important needed */ | |
| } | |
| /* Ensure right sidebar properly styled via Murf */ | |
| #right-sidebar .rm-resize-handle { | |
| z-index: 1; | |
| } | |
| #right-sidebar { | |
| height: 99%; | |
| } | |
| /* Hide sidebar button visibility */ | |
| .bp3-icon-menu-closed { | |
| transition: opacity 0.3s ease !important; | |
| /* !important needed */ | |
| } | |
| /* Block search dropdown menu */ | |
| .rm-autocomplete-result { | |
| color: var(--dropdown-menu-text) !important; | |
| /* !important needed */ | |
| } | |
| span[style*="color: rgb(129, 145, 157);"] { | |
| color: var(--icons) !important; | |
| } | |
| /* Left sidebar text color (CREDIT - Roam-util)*/ | |
| .roam-sidebar-container .rm-db-title-container .rm-db-title, .roam-sidebar-container .rm-db-title-container .rm-db-title .bp3-icon.bp3-icon-chevron-down.expand-icon, .starred-pages-wrapper>div>span { | |
| color: var(--icons); | |
| transition: color 0.3s ease !important; | |
| /* !important needed */ | |
| } | |
| .log-button, .page { | |
| color: var(--sidebar-text) !important; | |
| /* !important needed */ | |
| } | |
| /* Left sidebar hover color (CREDIT - Roam-util)*/ | |
| .log-button:hover, .page:hover, .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .top-row:hover, .roam-sidebar-container .rm-db-title-container .rm-db-title .bp3-icon.bp3-icon-chevron-down.expand-icon:hover { | |
| background-color: unset !important; | |
| /* !important needed */ | |
| color: var(--icons-hover) !important; | |
| /* !important needed */ | |
| transition: color 0.3s ease !important; | |
| /* !important needed */ | |
| } | |
| /* MOBILE */ | |
| /* Mobile bar (HT: Azlen) */ | |
| #rm-mobile-bar { | |
| background-color: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| } | |
| #rm-mobile-bar .bp3-button i::before, #rm-mobile-bar .bp3-button::before { | |
| color: var(--icons) !important; | |
| /* !important needed */ | |
| } | |
| /* align mobile bar buttons */ | |
| .bp3-button.bp3-minimal.rm-mobile-button.dont-unfocus-block[style*="padding: 6px 4px 4px;"], .bp3-button.bp3-minimal.rm-mobile-button.dont-unfocus-block[style*="padding: 6.1px 4px 4px;"] { | |
| margin: 6px 4px; | |
| transform: scale(1.2); | |
| } | |
| #mobile-more-icon-button>i { | |
| margin: 14px 4px !important; | |
| /* !important needed */ | |
| transform: scale(1.2) !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* FONTS. TEXT STYLING, AND COLORS */ | |
| /* Global Font */ | |
| body, div, textarea { | |
| font-family: var(--global-font); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| .rm-italics, em { | |
| color: var(--italics-color); | |
| } | |
| .rm-bold, strong { | |
| color: var(--bold-color); | |
| } | |
| /* Headings */ | |
| h1 { | |
| font-size: 2.2em; | |
| } | |
| .rm-title-textarea { | |
| color: var(--body-text); | |
| } | |
| /* Cursor color */ | |
| .roam-body .roam-app { | |
| caret-color: var(--cursor); | |
| } | |
| /* Body text color */ | |
| .roam-body .roam-app { | |
| color: var(--body-text); | |
| } | |
| /* Left sidebar separator color */ | |
| div[style*="background-color: rgb(57, 75, 89);"] { | |
| background-color: var(--icons) !important; | |
| /* !important needed */ | |
| } | |
| /* Heading/Header Colors */ | |
| .rm-heading-level-1>.rm-block__self .rm-block__input { | |
| color: var(--heading); | |
| } | |
| .rm-heading-level-2>.rm-block__self .rm-block__input { | |
| color: var(--heading); | |
| } | |
| .rm-heading-level-3>.rm-block__self .rm-block__input { | |
| color: var(--heading); | |
| } | |
| /* Page title & Daily date color */ | |
| .rm-title-display, .level2, .rm-ref-page-view-title>a { | |
| color: var(--page-heading) !important; | |
| /* !important needed */ | |
| font-family: var(--header-font); | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| transition: color 0.3s ease; | |
| } | |
| /* Right sidebar collapsed outlines */ | |
| #roam-right-sidebar-content a[style*="font-weight: bold; cursor: pointer;"] { | |
| color: var(--page-heading); | |
| font-family: var(--header-font); | |
| font-weight: 500 !important; | |
| /* !important needed */ | |
| font-size: 1.5em; | |
| } | |
| /* Main link coloring + hover */ | |
| .rm-alias--block { | |
| color: var(--page-links); | |
| transition: color 0.3s ease; | |
| text-decoration: var(--references-style) var(--references-color); | |
| } | |
| .rm-alias--page { | |
| color: var(--page-links); | |
| transition: color 0.3s ease; | |
| text-decoration: var(--references-style) var(--references-color); | |
| } | |
| .rm-alias--external, a { | |
| color: var(--external-links); | |
| transition: color 0.3s ease; | |
| } | |
| /* Internal Roam Links [[Roam]] & #Roam & #[[Roam]] */ | |
| .bp3-text-overflow-ellipsis a, .rm-pages-title-text strong { | |
| color: var(--page-links); | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| } | |
| .rm-page-ref, .rm-page-ref--link { | |
| color: var(--page-links); | |
| font-weight: 500; | |
| transition: color 0.3s ease; | |
| } | |
| .rm-page-ref__brackets { | |
| color: var(--references-color); | |
| } | |
| .rm-page-ref--tag { | |
| color: var(--hashtags); | |
| font-weight: 500; | |
| padding-left: 2px; | |
| padding-right: 2px; | |
| transition: color 0.3s ease; | |
| } | |
| .rm-page-ref--tag:hover, .rm-page-ref:hover, .rm-pages-title-text strong:hover, .rm-ref-page-view-title>a>span[style*="text-decoration: underline"] { | |
| color: var(--links-hover); | |
| text-decoration: none !important; | |
| /* !important needed */ | |
| transition: color 0.3s ease; | |
| } | |
| .rm-page-ref--link:hover, a:focus, a:hover { | |
| color: var(--links-hover); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| /* Attribute links */ | |
| .rm-attr-ref { | |
| color: var(--attributes-color); | |
| } | |
| /* Block and Page embed */ | |
| .rm-embed--page.rm-embed-container { | |
| background-color: var(--background); | |
| margin-bottom: 0; | |
| padding: 10px 20px 10px 15px !important; | |
| /* !important needed */ | |
| border-radius: 5px; | |
| box-shadow: 0 0 2px 1px var(--references-color); | |
| } | |
| .rm-embed--page.rm-embed-container::before { | |
| content: "Page Embed"; | |
| color: var(--block-reference-text); | |
| font-weight: 500; | |
| } | |
| .rm-embed__content .rm-reference-container { | |
| border: none; | |
| } | |
| .rm-embed__content .rm-reference-main { | |
| border-color: var(--references-color); | |
| } | |
| .rm-embed-margin-action { | |
| background-color: var(--closed-bullets) !important; | |
| /* !important needed */ | |
| } | |
| .rm-embed-margin-action.rm-not { | |
| margin-left: -7px; | |
| } | |
| .rm-embed-margin-action.rm-active { | |
| margin-left: -7px; | |
| } | |
| .rm-embed-container { | |
| margin-left: -20px; | |
| background-color: transparent !important; | |
| } | |
| .rm-embed-edit { | |
| background-color: transparent !important; | |
| /* !important needed */ | |
| padding-top: 5px; | |
| } | |
| .rm-embed-inner-block-hide { | |
| margin: 2px 2px 2px 4px !important; | |
| /* !important needed */ | |
| background-color: var(--background); | |
| padding: 3px 10px 3px 3px; | |
| border-radius: 5px; | |
| box-shadow: 0 0 2px 1px var(--references-color); | |
| } | |
| .rm-embed-inner-block-hide:before { | |
| content: "Block Embed"; | |
| color: var(--block-reference-text); | |
| padding-left: 8px; | |
| font-weight: 500; | |
| } | |
| .rm-embed-inner-block-hide .roam-block-container.rm-not-focused.block-bullet-view { | |
| margin-left: 6px; | |
| } | |
| .rm-embed-container .rm-page__title { | |
| color: var(--page-heading); | |
| font-family: var(--header-font); | |
| padding-top: 5px; | |
| } | |
| .rm-nested-refs { | |
| background-color: transparent; | |
| } | |
| /* Namespace text color [[roam/css]] when using CTRL+C CTRL+L */ | |
| .rm-page-ref--namespace { | |
| color: var(--namespaces); | |
| font-weight: 600; | |
| transition: color 0.3s ease; | |
| } | |
| .rm-page-ref--namespace:hover { | |
| color: var(--links-hover); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| /* Highlights */ | |
| .rm-highlight, .rm-highlight:hover { | |
| color: var(--highlight-text-color); | |
| background-color: var(--highlighter); | |
| } | |
| .block-highlight-yellow { | |
| background: var(--dropdown-menu-background) !important; | |
| /* !important needed */ | |
| } | |
| /* highlight adjustments */ | |
| .rm-highlight .rm-page-ref--link, .rm-highlight .rm-page-ref--tag, .rm-highlight .rm-page-ref__brackets, .rm-highlight .rm-bold, .rm-highlight .rm-italics { | |
| background-color: var(--background); | |
| opacity: 0.9; | |
| padding: 0px 3px 0px 3px; | |
| } | |
| /* Word Count */ | |
| .bp3-button:not([class*="bp3-intent-"]) { | |
| color: var(--body-text); | |
| font-family: var(--monospace); | |
| background: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| transition: color 0.3s ease; | |
| padding: 0px 10px 0px 10px; | |
| transform: scale(0.9); | |
| } | |
| /* Query */ | |
| .rm-query-title { | |
| background: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| color: var(--block-reference-text) !important; | |
| /* !important needed */ | |
| font-weight: 500; | |
| box-shadow: 0 0 2px 1px var(--references-color); | |
| border-radius: 5px; | |
| padding-top: 4px !important; | |
| /* !important needed */ | |
| padding-bottom: 4px !important; | |
| /* !important needed */ | |
| } | |
| .rm-query { | |
| box-shadow: 0 0 2px 1px var(--references-color); | |
| border-radius: 5px; | |
| border: transparent; | |
| padding: 0; | |
| } | |
| .rm-ref-page-view { | |
| margin-right: 20px; | |
| } | |
| /* Alias */ | |
| span[style*="background-color: rgb(235, 241, 245);"] { | |
| background: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| color: var(--block-reference-text) !important; | |
| /* !important needed */ | |
| border: 1px solid var(--body-text); | |
| transition: color 0.3s ease, border 0.3s ease; | |
| } | |
| /* diagram */ | |
| svg[style*="background-color: rgb(86, 112, 134);"] { | |
| background: var(--closed-bullets) !important; | |
| /* !important needed */ | |
| } | |
| div[style*="background-color: white"] { | |
| background: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| } | |
| svg[style*="background-color: rgb(86, 112, 134);"] g rect { | |
| fill: var(--background); | |
| } | |
| rect[fill="#fff"] { | |
| fill: var(--links-hover) !important; | |
| /* !important needed */ | |
| } | |
| svg[style*="background-color: rgb(86, 112, 134);"] foreignObject { | |
| cursor: -webkit-grab; | |
| cursor: grab; | |
| } | |
| svg[style*="background-color: rgb(86, 112, 134);"] foreignObject .rm-input { | |
| background-color: transparent !important; | |
| /* !important needed */ | |
| color: var(--background); | |
| } | |
| line[style*="stroke: black;"] { | |
| stroke: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| button { | |
| background-color: var(--icons); | |
| color: var(--background); | |
| } | |
| /* Reaction */ | |
| .rm-emoji-button { | |
| background: transparent !important; | |
| /* !important needed */ | |
| border: 1px solid #7C6EAD !important; | |
| /* !important needed */ | |
| } | |
| .rm-emoji-number { | |
| color: var(--body-text); | |
| } | |
| .rm-emoji-tooltip { | |
| color: var(--page-links); | |
| } | |
| span[style*="color: rgb(167, 182, 194);"] { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| /* chart */ | |
| svg[style*="background-color: white;"] { | |
| background: transparent !important; | |
| /* !important needed */ | |
| } | |
| g circle { | |
| fill: var(--links-hover) !important; | |
| /* !important needed */ | |
| } | |
| /* Calculation */ | |
| .dont-focus-block.rm-calc-val { | |
| background: var(--kanban-column-background); | |
| padding: 3px 6px 4px; | |
| color: var(--body-text); | |
| border-radius: 5px; | |
| } | |
| .dont-focus-block.rm-calc-val:before { | |
| content: "❇️"; | |
| color: var(--bold-color); | |
| } | |
| /* Calendar */ | |
| .bp3-datepicker { | |
| background-color: var(--sidebar-background); | |
| } | |
| .DayPicker-Day:hover { | |
| background: var(--references-color) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-divider { | |
| border-color: var(--references-color); | |
| } | |
| .bp3-datepicker-caption { | |
| background-color: #FAFAFA; | |
| border-radius: 5px; | |
| } | |
| .bp3-datepicker-day-wrapper { | |
| color: var(--body-text); | |
| } | |
| .bp3-datepicker .DayPicker-Day.DayPicker-Day--outside { | |
| opacity: 0.4; | |
| } | |
| .bp3-icon-chevron-left, .bp3-icon-chevron-right, .bp3-icon-double-caret-vertical { | |
| color: var(--icons) !important; | |
| /* !important needed */ | |
| } | |
| /* Kanban Card Styling */ | |
| .kanban-column-container { | |
| background-color: var(--kanban-main-background); | |
| border-radius: 4px; | |
| } | |
| .kanban-board { | |
| background-color: transparent; | |
| } | |
| .kanban-title { | |
| color: var(--links-hover); | |
| } | |
| .kanban-column { | |
| background-color: var(--kanban-column-background); | |
| border-radius: 4px; | |
| } | |
| .kanban-card { | |
| background-color: var(--kanban-card-background); | |
| border-radius: 4px; | |
| } | |
| .kanban-card:hover { | |
| color: var(--kanban-text-hover); | |
| background-color: var(--icons); | |
| transition: background-color 0.3s ease; | |
| } | |
| /* Pomodoro */ | |
| .rm-pomodoro { | |
| padding: 5px 10px 3px 3px !important; | |
| /* !important needed */ | |
| } | |
| .bp3-button.rm-pomodoro.running { | |
| background: #E91E63 !important; | |
| /* !important needed */ | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-button.rm-pomodoro.break { | |
| background: #4CAF50 !important; | |
| /* !important needed */ | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| /* JSS warning */ | |
| .bp3-button.dont-focus-block { | |
| background: var(--sidebar-background); | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| font-family: var(--monospace); | |
| font-weight: Bold; | |
| } | |
| div[style*="background: rgb(255, 243, 205);"] { | |
| background-color: var(--closed-bullets) !important; | |
| /* !important needed */ | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* REFERENCE SECTION */ | |
| /* Reference Background Color + Spacing Fixes */ | |
| .rm-reference-item { | |
| background-color: transparent; | |
| margin: 10px 0; | |
| padding-bottom: 10px; | |
| border-bottom: solid var(--references-color); | |
| } | |
| .rm-level1 { | |
| margin-bottom: 20px; | |
| } | |
| /* Reference Section Divider */ | |
| .rm-reference-container { | |
| border-top: solid double var(--references-color); | |
| padding-top: 15px; | |
| } | |
| /* Remove second small line (HT Hasan Yalcinkaya) */ | |
| .rm-reference-container .dont-focus-block { | |
| border-top: 0; | |
| } | |
| /* Daily Notes Divider */ | |
| .roam-log-page { | |
| border-bottom: 1.5px solid var(--references-color) !important; | |
| /* !important needed */ | |
| border-top: 0 !important; | |
| /* !important needed */ | |
| padding: 0 0 30px 0 !important; | |
| /* !important needed */ | |
| margin: 0 !important; | |
| /* !important needed */ | |
| } | |
| .roam-log-page.roam-log-preview { | |
| color: var(--references-color); | |
| } | |
| /* Path text color for Linked References and Zoom path view */ | |
| .parent-path-wrapper { | |
| color: var(--body-text); | |
| } | |
| .rm-zoom.zoom-path-view { | |
| margin: 0; | |
| } | |
| .rm-zoom-item-content { | |
| color: var(--page-links); | |
| } | |
| .rm-zoom-mask { | |
| background: transparent !important; | |
| /* !important needed */ | |
| } | |
| /* Unlinked References */ | |
| strong[style*='color: rgb(206, 217, 224);'] { | |
| color: var(--bold-color) !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* SEARCH BOX */ | |
| /* Search box background color */ | |
| .bp3-input, .rm-pages-toolbar .toolbar-search-group .search-input { | |
| background: var(--search-bar-background); | |
| color: var(--body-text); | |
| } | |
| /* Search box placeholder text color */ | |
| .bp3-input::placeholder { | |
| color: var(--search-bar-text); | |
| opacity: 0.5; | |
| } | |
| .bp3-input.bp3-active, .bp3-input:focus { | |
| box-shadow: 0 0 4px 1px var(--references-color); | |
| } | |
| /* Search box "Recent" color */ | |
| div[style*="padding: 6px; color: rgb(206, 217, 224);"] { | |
| padding: 6px; | |
| color: var(--page-links) !important; | |
| /* !important needed */ | |
| } | |
| /* Search box input text color */ | |
| .bp3-input-group input { | |
| color: var(--search-bar-text); | |
| } | |
| .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(--highlighter) !important; | |
| /* !important needed */ | |
| color: var(--highlight-text-color); | |
| } | |
| /* Dropdown page menu hover highlight */ | |
| .rm-menu-item:hover { | |
| background: var(--dropdown-menu-highlight); | |
| } | |
| /* New page text color */ | |
| .rm-new-page { | |
| color: var(--dropdown-newpage) !important; | |
| /* !important needed */ | |
| } | |
| .rm-search-list-item { | |
| color: var(--dropdown-menu-text) !important; | |
| /* !important needed */ | |
| } | |
| /* Ctrl-Shift-9 menu */ | |
| .bp3-dialog-container.bp3-overlay-content.bp3-overlay-enter-done>div>div>div>div:nth-child(n)>input { | |
| background-color: var(--background); | |
| color: var(--body-text); | |
| margin-top: 5px; | |
| padding: 5px; | |
| border-radius: 10px; | |
| } | |
| .bp3-menu-item { | |
| color: var(--body-text); | |
| } | |
| .bp3-menu-item.bp3-active, .bp3-menu-item:hover { | |
| background-color: var(--background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* ALL PAGES STYLING */ | |
| /* Top bar size fixes */ | |
| .rm-all-pages .table .rm-pages-row .rm-pages-checkbox-col { | |
| padding-right: 0; | |
| } | |
| /* Row background color */ | |
| .rm-pages-row.rm-pages-row-header { | |
| background-color: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| border-bottom: 1px solid var(--links-hover); | |
| } | |
| .title-children-text { | |
| color: var(--body-text); | |
| } | |
| .sorted-header-text { | |
| color: var(--icons-hover); | |
| } | |
| .bp3-icon.bp3-icon-chevron-down.sort-button.desc.focused { | |
| color: var(--icons-hover); | |
| } | |
| .bp3-icon.bp3-icon-chevron-up.sort-button.focused { | |
| color: var(--icons-hover); | |
| } | |
| .rm-zoom-chevron { | |
| color: var(--icons) !important; | |
| /* !important needed */ | |
| } | |
| /* Title Header */ | |
| .bp3-text-overflow-ellipsis, .rm-pages-col, .rm-pages-sort-header { | |
| font-size: 1em; | |
| color: var(--body-text); | |
| } | |
| /* Mentions Pill */ | |
| .rm-clickable-pill, .rm-clickable-pill.level1-pill, .rm-clickable-pill.level2-pill, .rm-clickable-pill.level3-pill, .rm-clickable-pill.level4-pill { | |
| color: var(--background); | |
| background: var(--all-pages-mentions); | |
| opacity: 1; | |
| padding: 2px 10px; | |
| width: 42px; | |
| border-radius: 2px; | |
| } | |
| .rm-clickable-pill.level1-pill { | |
| background: var(--all-pages-mentions); | |
| filter: hue-rotate(-10deg); | |
| } | |
| .rm-clickable-pill.level3-pill { | |
| background: var(--all-pages-mentions); | |
| filter: hue-rotate(-20deg); | |
| } | |
| .rm-clickable-pill.empty-pill { | |
| color: #F2F2F2; | |
| background: var(--background); | |
| } | |
| .rm-clickable-pill:hover { | |
| background: var(--links-hover); | |
| } | |
| /* Checkbox */ | |
| .bp3-control input:checked~.bp3-control-indicator { | |
| background: rgb(27, 159, 28); | |
| } | |
| .bp3-control input:checked~.bp3-control-indicator:hover { | |
| background: rgb(1, 122, 69); | |
| } | |
| .bp3-control.bp3-checkbox .bp3-control-indicator { | |
| border-radius: 25px; | |
| } | |
| /* Dropdown Menu Styling */ | |
| .bp3-elevation-3, .bp3-menu, .bp3-popover-content { | |
| background-color: var(--dropdown-menu-background) !important; | |
| /* !important needed */ | |
| color: var(--page-links) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-menu { | |
| border-radius: 10px; | |
| padding: 2px 8px 8px; | |
| } | |
| .bp3-popover-content { | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); | |
| border-radius: 10px; | |
| } | |
| .bp3-elevation-3 .dont-unfocus-block:hover, .bp3-menu a:hover { | |
| background: var(--dropdown-menu-highlight); | |
| } | |
| .bp3-elevation-3 .dont-unfocus-block:hover .bp3-text-overflow-ellipsis { | |
| color: var(--links-hover); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| } | |
| .bp3-menu-item-label { | |
| color: var(--body-text) !important; | |
| font-size: 1em; | |
| } | |
| .bp3-elevation-3 .dont-unfocus-block[style*="background-color: rgb(213, 218, 223);"], .bp3-popover-content .rm-menu-item[style*="background-color: rgb(213, 218, 223);"] { | |
| background-color: var(--dropdown-menu-highlight) !important; | |
| } | |
| .bp3-text-overflow-ellipsis { | |
| color: var(--page-links); | |
| } | |
| button[style*="padding: 4px 8px;"] { | |
| color: black; | |
| } | |
| .bp3-input.bp3-round.bp3-minimal.search-input { | |
| background: var(--sidebar-background); | |
| } | |
| .bp3-menu-divider { | |
| border-color: var(--references-color); | |
| } | |
| button[style*="background-color: white;"] { | |
| background: transparent !important; | |
| /* !important needed */ | |
| border: none !important; | |
| /* !important needed */ | |
| color: var(--references-color) !important; | |
| /* !important needed */ | |
| } | |
| button[style*="background-color: rgba(72, 176, 240, 0.5);"] { | |
| background: var(--background) !important; | |
| /* !important needed */ | |
| border: solid 1px var(--icons-hover) !important; | |
| /* !important needed */ | |
| color: var(--references-color) !important; | |
| /* !important needed */ | |
| } | |
| button[style*="background-color: rgba(72, 176, 240, 0.5);"]:hover, button[style*="background-color: white;"]:hover { | |
| color: var(--icons-hover) !important; | |
| } | |
| .bp3-icon-standard { | |
| color: var(--icons) !important; | |
| } | |
| .bp3-icon-standard:hover { | |
| color: var(--icons-hover) !important; | |
| transition: color 0.3s ease; | |
| } | |
| /* Button Styling */ | |
| .bp3-button { | |
| background-color: transparent; | |
| text-transform: initial; | |
| border: 0; | |
| } | |
| .bp3-button[class*="bp3-icon-"]::before, .bp3-icon-filter, .bp3-button.bp3-minimal.bp3-small, .bp3-icon.bp3-icon-calendar.filter-icon, .bp3-icon.filter-icon.bp3-icon-eye-open, .bp3-button.bp3-icon-calendar, .bp3-icon.bp3-icon-sort { | |
| color: var(--icons) !important; | |
| /* !important needed */ | |
| background: transparent !important; | |
| /* !important needed */ | |
| opacity: 1; | |
| } | |
| .bp3-button[class*="bp3-icon-"]:hover, .bp3-button[class*="bp3-icon-"]:hover::before, .bp3-icon-filter:hover, .bp3-button.bp3-minimal:hover, .bp3-icon.bp3-icon-calendar.filter-icon:hover, .bp3-icon.filter-icon.bp3-icon-eye-open:hover, .bp3-icon.bp3-icon-sort:hover, .bp3-button.bp3-minimal.bp3-icon-pin.bp3-small.pinned, .bp3-button.bp3-minimal.bp3-icon-pin.bp3-small.pinned:before { | |
| background: transparent !important; | |
| /* !important needed */ | |
| transition: background 0.1s ease, color 0.3s ease; | |
| color: var(--icons-hover) !important; | |
| /* !important needed */ | |
| opacity: 1; | |
| } | |
| .bp3-popover-content .bp3-button { | |
| background: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| font-weight: bold; | |
| } | |
| .bp3-icon>svg { | |
| fill: var(--icons); | |
| } | |
| .bp3-icon>svg:hover { | |
| fill: var(--icons-hover); | |
| } | |
| .bp3-icon, .icon { | |
| color: var(--icons) !important; | |
| } | |
| /* Remove shadow border around calendar icon */ | |
| .bp3-button:not([class*="bp3-intent-"]), .bp3-button:not([class*="bp3-intent-"]):hover { | |
| box-shadow: none; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* CODEBLOCK */ | |
| /* Dracula CodeMirror theme from https://github.com/codemirror/CodeMirror/blob/master/theme/dracula.css */ | |
| @media (prefers-color-scheme: dark) { | |
| .cm-s-default .CodeMirror-gutters, .cm-s-default.CodeMirror { | |
| background-color: #282a36; | |
| color: #f8f8f2; | |
| border: none; | |
| border-radius: 6px; | |
| } | |
| code { | |
| background-color: #282a36; | |
| color: #ff79c6; | |
| border: 1px solid var(--references-color); | |
| } | |
| .cm-s-default .CodeMirror-gutters { | |
| color: #282a36; | |
| } | |
| .cm-s-default .CodeMirror-cursor { | |
| border-left: solid thin #f8f8f0; | |
| } | |
| .cm-s-default .CodeMirror-linenumber { | |
| color: #6D8A88; | |
| } | |
| .cm-s-default .CodeMirror-selected { | |
| background: rgba(255, 255, 255, 0.10); | |
| } | |
| .cm-s-default .CodeMirror-line>span>span::selection, .cm-s-default .CodeMirror-line>span::selection, .cm-s-default .CodeMirror-line::selection { | |
| background: rgba(255, 255, 255, 0.10); | |
| } | |
| .cm-s-default .CodeMirror-line>span>span::-moz-selection, .cm-s-default .CodeMirror-line>span::-moz-selection, .cm-s-default .CodeMirror-line::-moz-selection { | |
| background: rgba(255, 255, 255, 0.10); | |
| } | |
| .cm-s-default span.cm-comment { | |
| color: #6272a4; | |
| } | |
| .cm-s-default span.cm-string, .cm-s-default span.cm-string-2 { | |
| color: #f1fa8c; | |
| } | |
| .cm-s-default span.cm-number { | |
| color: #bd93f9; | |
| } | |
| .cm-s-default span.cm-variable { | |
| color: #50fa7b; | |
| } | |
| .cm-s-default span.cm-variable-2 { | |
| color: white; | |
| } | |
| .cm-s-default span.cm-def { | |
| color: #50fa7b; | |
| } | |
| .cm-s-default span.cm-operator { | |
| color: #ff79c6; | |
| } | |
| .cm-s-default span.cm-keyword { | |
| color: #ff79c6; | |
| } | |
| .cm-s-default span.cm-atom { | |
| color: #bd93f9; | |
| } | |
| .cm-s-default span.cm-meta { | |
| color: #f8f8f2; | |
| } | |
| .cm-s-default span.cm-tag { | |
| color: #ff79c6; | |
| } | |
| .cm-s-default span.cm-attribute { | |
| color: #50fa7b; | |
| } | |
| .cm-s-default span.cm-qualifier { | |
| color: #50fa7b; | |
| } | |
| .cm-s-default span.cm-property { | |
| color: #66d9ef; | |
| } | |
| .cm-s-default span.cm-builtin { | |
| color: #50fa7b; | |
| } | |
| .cm-s-default span.cm-type, .cm-s-default span.cm-variable-3 { | |
| color: #ffb86c; | |
| } | |
| .cm-s-default .CodeMirror-activeline-background { | |
| background: rgba(255, 255, 255, 0.1); | |
| } | |
| .cm-s-default .CodeMirror-matchingbracket { | |
| text-decoration: underline; | |
| color: white; | |
| } | |
| .CodeMirror * { | |
| font-family: var(--monospace); | |
| } | |
| } | |
| /* ToDo Checkbox Fixes */ | |
| .check-container input:checked~.checkmark { | |
| background-color: #FFFFFF; | |
| background-color: rgb(27, 159, 28); | |
| } | |
| .check-container:hover input~.checkmark { | |
| background-color: var(--icons); | |
| } | |
| .check-container { | |
| position: relative; | |
| top: 2px; | |
| padding-right: 2px; | |
| } | |
| .checkmark { | |
| transform: scale(1.1); | |
| border-width: 1.5px; | |
| border-color: var(--references-color); | |
| } | |
| /* Scrollbar improvements | |
| HT: Palash Karia */ | |
| div::-webkit-scrollbar-track { | |
| background-color: transparent; | |
| border-radius: 20px; | |
| } | |
| div::-webkit-scrollbar-thumb { | |
| background-color: var(--closed-bullets)!important; | |
| /* !important needed */ | |
| } | |
| div::-webkit-scrollbar { | |
| width: 5px; | |
| height: 5px; | |
| border-radius: 8px; | |
| } | |
| div::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(0, 0, 0, 0.4); | |
| border: 5px var(--icons-hover) solid; | |
| } | |
| /* Compact borderless references and queries */ | |
| .rm-reference-item { | |
| padding: 0; | |
| margin: 0; | |
| border: 0; | |
| } | |
| .rm-ref-page-view { | |
| padding-bottom: 10px; | |
| } | |
| .flex-h-box.rm-title-arrow-wrapper { | |
| padding-bottom: 3px; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* MERMAID Customization */ | |
| .bp3-card.dont-focus-block, .rm-mermaid { | |
| background: var(--sidebar-background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* MISCELLANEOUS MENUS, BUTTONS, POP-UPS */ | |
| .bp3-dialog-container.bp3-overlay-content.bp3-overlay-appear-done.bp3-overlay-enter-done { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-button.bp3-intent-danger { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| background: #E91E63 !important; | |
| /* !important needed */ | |
| } | |
| .bp3-dialog-container.bp3-overlay-content.bp3-overlay-enter-done { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| .confirmation-content-dialog .confirmation-content { | |
| background-color: var(--background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* HELP MODAL (new Feb 2021) */ | |
| .rm-help-popup__drag-handle.bp3-card.bp3-elevation-2 { | |
| background: transparent !important; | |
| /* !important needed */ | |
| } | |
| .rm-help-title { | |
| color: var(--page-links); | |
| } | |
| .bp3-icon-search { | |
| color: var(--icons); | |
| } | |
| .rm-help-search__icon-container { | |
| border: none; | |
| padding-right: 10px; | |
| } | |
| .rm-help-search__input { | |
| border-radius: 10px; | |
| border: solid 1px var(--references-color); | |
| } | |
| .rm-help-categories, .rm-help-function__name, .rm-help-markdown-function__markdown { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| .rm-help-markdown-function .rm-strikethrough, .rm-help-markdown-function .mord, .rm-help-resource__description, .rm-help-markdown-function .rm-level1, .rm-help-markdown-function .rm-level2, .rm-help-markdown-function .rm-level3, .rm-help-component__description { | |
| color: var(--body-text); | |
| } | |
| .rm-help-resource__title, .rm-help-component__title { | |
| color: var(--attributes-color); | |
| } | |
| .rm-help-category__name { | |
| color: var(--bold-color) !important; | |
| /* !important needed */ | |
| } | |
| .rm-help-function__shortcut { | |
| color: var(--italics-color) !important; | |
| /* !important needed */ | |
| } | |
| .rm-help-popup { | |
| background-color: var(--sidebar-background); | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); | |
| border-radius: 10px; | |
| padding: 20px; | |
| } | |
| .rm-help-category-menu-item--selected, .rm-help-resource:hover { | |
| background-color: var(--background) !important; | |
| /* !important needed */ | |
| } | |
| .rm-help-category-menu-item:hover { | |
| background-color: unset !important; | |
| /* !important needed */ | |
| color: var(--links-hover); | |
| } | |
| .rm-help-category-menu-item--selected:hover { | |
| color: var(--links-hover) !important; | |
| /* !important needed */ | |
| background-color: var(--background) !important; | |
| /* !important needed */ | |
| } | |
| .rm-help-version { | |
| color: var(--body-text); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* GRAPH VIEW */ | |
| /* you can't actually style the graph view because it uses canvas elements, but we *can* apply CSS filters to it to slightly change the appearance */ | |
| canvas[data-id="layer2-node"] { | |
| /*filter: invert(1) drop-shadow(0px 3px 4px rgba(0,0,0,0.1));*/ | |
| filter: invert(1) hue-rotate(110deg) saturate(2.5); | |
| opacity: 0.3; | |
| transition: opacity 0.2s ease-out; | |
| } | |
| *[id*="cyto-wrapper"]:hover canvas[data-id="layer2-node"] { | |
| opacity: 1; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* DB DROPDOWN SELECTOR */ | |
| .bp3-menu-item.setting { | |
| background-color: transparent !important; | |
| /* !important needed */ | |
| } | |
| .bp3-menu-item.setting:hover { | |
| background-color: var(--dropdown-menu-highlight) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-icon.bp3-icon-cog.icon.settings { | |
| color: var(--icons); | |
| padding-bottom: 1px; | |
| } | |
| .flex-h-box.top-row .bp3-menu-item.setting>a { | |
| color: var(--body-text); | |
| } | |
| .flex-h-box.top-row .bp3-menu-item.setting>a:hover, .bp3-menu-item.menu-item:hover { | |
| background-color: var(--dropdown-menu-highlight); | |
| color: var(--body-text); | |
| } | |
| .menu-title { | |
| color: var(--page-links) !important; | |
| /* !important needed */ | |
| } | |
| .signout { | |
| color: var(--bold-color); | |
| } | |
| .bp3-menu.rm-graph-dropdown { | |
| opacity: 1 !important; | |
| /* !important needed */ | |
| box-shadow: none !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* UPDATE ALERTS AND VARIOUS SPECIAL MENUS */ | |
| body>div.bp3-portal>div>div>span>div>span>strong, body>div:nth-child(10)>div>div>span>div>span>strong { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| body>div.bp3-portal>div>div>div>button>span>svg>path, body>div:nth-child(10)>div>div>div>button>span>svg>path { | |
| color: var(--body-text) !important; | |
| /* !important needed */ | |
| } | |
| .rm-modal-dialog { | |
| background-color: var(--sidebar-background); | |
| } | |
| .bp3-heading { | |
| color: var(--page-links); | |
| } | |
| .bp3-dialog { | |
| background-color: var(--sidebar-background); | |
| } | |
| .bp3-dialog-header { | |
| background-color: var(--background); | |
| } | |
| /* Share menu */ | |
| #db-permissions-modal textarea { | |
| background-color: var(--background) !important; | |
| /* !important needed */ | |
| padding: 5px !important; | |
| /* !important needed */ | |
| border: transparent; | |
| border-radius: 5px; | |
| margin-top: 10px; | |
| } | |
| #db-permissions-modal>div>div:nth-child(3)>div>div.flex-v-box>span, #db-permissions-modal>div>div:nth-child(4)>div>div>span { | |
| display: none; | |
| } | |
| /* Various input boxes */ | |
| .rm-display-name-settings>input, .import-table input { | |
| background-color: var(--background) !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* FIX SELECTION COLOR AND BLOCK-HIGLIGHTS */ | |
| .block-highlight-blue, ::selection { | |
| background-color: var(--closed-bullets) !important; | |
| /* !important needed */ | |
| } | |
| /* {{or}} dropdown */ | |
| .rm-option { | |
| background-color: var(--sidebar-background); | |
| color: var(--italics-color); | |
| font-style: italic; | |
| border: var(--references-style) var(--references-color); | |
| border-radius: 4px; | |
| padding-right: 15px; | |
| margin: 0 2px 0 2px; | |
| } | |
| .rm-option::after { | |
| border-top-color: var(--body-text); | |
| } | |
| .rm-option:hover { | |
| cursor: default; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* ATTRIBUTE TABLE */ | |
| span[style*="background-color: rgb(14, 90, 138);"] { | |
| background-color: unset !important; | |
| /* !important needed */ | |
| border-radius: 5px; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Block quote styling */ | |
| .rm-bq { | |
| background-color: var(--sidebar-background); | |
| color: var(--italics-color); | |
| border-left-width: 5px; | |
| border-left-style: solid; | |
| border-left-color: var(--references-color); | |
| font-family: var(--header-font); | |
| width: 100%; | |
| margin: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| } | |
| .rm-bq::before { | |
| content: "❝\A"; | |
| white-space: pre; | |
| font-size: 100%; | |
| color: var(--references-color); | |
| } | |
| .rm-bq::after { | |
| content: "\A❞"; | |
| white-space: pre; | |
| color: var(--references-color); | |
| font-size: 100%; | |
| } | |
| .rm-alias-tooltip__content .rm-bq { | |
| color: var(--bold-color); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| .rm-bullet__tooltip { | |
| font-size: 1em; | |
| color: var(--body-text); | |
| } | |
| .bp3-popover-content { | |
| padding: 5px !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Better Quick Capture Sync Modal */ | |
| .rm-quick-capture-sync-modal { | |
| border-radius: 5px; | |
| background-color: var(--sidebar-background); | |
| } | |
| .bp3-button.bp3-intent-primary.bp3-large { | |
| color: var(--body-text); | |
| background-color: #D9822B !important; | |
| /* !important needed */ | |
| border: none; | |
| box-shadow: none; | |
| } | |
| .bp3-button.bp3-intent-primary.bp3-large:hover { | |
| color: var(--links-hover) !important; | |
| /* !important needed */ | |
| } | |
| #quick-capture-history { | |
| color: var(--bold-color); | |
| font-size: 16px; | |
| width: 90% !important; | |
| /* !important needed */ | |
| padding: 20px; | |
| border-radius: 5px; | |
| background-color: var(--background); | |
| } | |
| #quick-capture-history .level3 { | |
| color: var(--page-links); | |
| font-family: var(--header-font); | |
| font-size: 20px; | |
| } | |
| #quick-capture-history>div>li { | |
| color: var(--body-text); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* HR line styling */ | |
| .rm-hr { | |
| border-color: var(--references-color); | |
| margin: 8px 0px 0px 0px; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* In-line comments */ | |
| .rm-paren { | |
| color: var(--body-text); | |
| background-color: var(--kanban-column-background); | |
| border: none; | |
| border-radius: 8px; | |
| padding: 2px 5px 4px; | |
| transition: color 0.3s ease; | |
| } | |
| .rm-spacer { | |
| font-size: 1.1em; | |
| position: relative; | |
| top: 2px; | |
| color: var(--references-color); | |
| } | |
| .rm-spacer:hover { | |
| color: var(--links-hover); | |
| } | |
| .rm-paren__paren { | |
| color: var(--references-color); | |
| } | |
| .rm-paren__paren--left { | |
| padding-right: 3px; | |
| } | |
| .rm-paren__paren--right { | |
| padding-left: 3px; | |
| } | |
| .rm-paren__paren:hover { | |
| color: var(--links-hover); | |
| background-color: transparent; | |
| } | |
| .rm-paren:hover { | |
| cursor: crosshair; | |
| background-color: var(--kanban-column-background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Resize styling */ | |
| .rm-resize-handle:hover { | |
| border-left: dashed var(--icons-hover); | |
| transition: border 0.3s ease; | |
| } | |
| div::-webkit-resizer { | |
| border-style: solid; | |
| border-color: transparent var(--references-color); | |
| background-color: transparent; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Cloze styling */ | |
| .rm-block__part--equals { | |
| background-color: #A5494F; | |
| border: none; | |
| border-radius: 5px; | |
| padding: 3px 3px 3px 4px; | |
| cursor: help; | |
| } | |
| .rm-block__part--equals:hover { | |
| background-color: #48864D; | |
| } | |
| .bp3-card { | |
| background-color: var(--sidebar-background); | |
| border: none; | |
| color: var(--body-text); | |
| padding: 3px 5px 3px 5px; | |
| box-shadow: none; | |
| white-space: pre-wrap; | |
| white-space: -moz-pre-wrap; | |
| white-space: -pre-wrap; | |
| white-space: -o-pre-wrap; | |
| word-wrap: break-word; | |
| width: unset; | |
| max-width: 30vw; | |
| text-align: justify; | |
| text-justify: inter-word; | |
| max-height: 60vh; | |
| overflow-y: auto; | |
| } | |
| /* Cloze block embeds */ | |
| .bp3-card .rm-embed-container { | |
| margin-left: -2px !important; | |
| /* !important needed */ | |
| } | |
| .bp3-card .rm-hide-bullet { | |
| background-color: transparent; | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Mobile scrollable right sidebar in portrait mode */ | |
| @media only screen and (max-width: 390px) { | |
| .roam-body { | |
| overflow-x: scroll !important; | |
| /* !important needed */ | |
| display: flex; | |
| background-color: var(--sidebar-background); | |
| max-width: 100%; | |
| } | |
| .roam-main { | |
| min-width: 95vw; | |
| } | |
| #right-sidebar[style*="flex: 0 0 40%;"] { | |
| flex: 0 0 95% !important; | |
| /* !important needed */ | |
| } | |
| } | |
| /* Mobile compact view */ | |
| @media (max-device-width: 800px) { | |
| .roam-article { | |
| padding: 0px 15px 0px 25px !important; | |
| /* !important needed */ | |
| } | |
| .rm-find-or-create-wrapper:focus-within { | |
| flex: 1 1 auto !important; | |
| /* !important needed */ | |
| } | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Encrypted block */ | |
| .rm-encrypted-block { | |
| color: var(--italics-color); | |
| } | |
| .rm-encrypted-passphrase>form { | |
| color: var(--body-text); | |
| } | |
| .rm-encrypted-passphrase>form>input { | |
| background-color: var(--sidebar-background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Grey prompts e.g., click here to start a daily note */ | |
| span[style*="color: rgb(206, 217, 224);"], .rm-right-sidebar__helper-text { | |
| color: var(--bold-color) !important; | |
| /* !important needed */ | |
| font-style: italic !important; | |
| /* !important needed */ | |
| } | |
| .simple-bullet-inner { | |
| background-color: var(--bullets) !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* On hover level 0 multibar */ | |
| .rm-level-0>.rm-multibar:hover { | |
| border-right-color: var(--icons-hover) !important; | |
| /* !important needed */ | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* New Command Palette and Settings */ | |
| .rm-command-palette__scroll-container .bp3-menu .rm-menu-item--active, .rm-command-palette__scroll-container .bp3-menu .rm-menu-item--active:hover, .rm-settings input.rm-display-name-settings__input, .rm-settings input.rm-display-name-settings__input:focus, .rm-settings .bp3-tabs .bp3-tab-list, .rm-settings .select-wrapper { | |
| background-color: var(--background); | |
| } | |
| .rm-settings .bp3-tabs .bp3-tab[aria-selected="true"], .rm-settings .bp3-tabs .bp3-tab:hover, .rm-settings .bp3-tabs .bp3-tab-panel { | |
| background-color: var(--sidebar-background) !important; | |
| /* !important needed */ | |
| } | |
| .bp3-tab { | |
| color: var(--body-text); | |
| } | |
| .rm-settings .rm-settings-panel .rm-settings-panel__description { | |
| color: var(--italics-color); | |
| } | |
| .rm-settings__tab, .rm-settings-heading { | |
| color: var(--body-text) !important; | |
| /* important needed */ | |
| } | |
| .rm-settings .rm-settings-panel .rm-select-wrapper { | |
| background-color: var(--background); | |
| } | |
| .rm-settings input[type="text"], .rm-settings input[type="text"]:focus { | |
| background-color: var(--background); | |
| } | |
| .rm-command-palette__shortcut { | |
| background-color: var(--background); | |
| } | |
| /*---------------------------------------------------------------------------*/ | |
| /* Excalidraw adjustments */ | |
| .ex-header-wrapper-light { | |
| background-color: var(--sidebar-background); | |
| } | |
| .ex-header-title-light { | |
| background-color: var(--background); | |
| } | |
| @import url('https://fonts.googleapis.com/css?family=Commissioner|Crimson+Text|Fira+Code|Bitter|Work+Sans'); | |
| @media (prefers-color-scheme: light) { | |
| :root { | |
| /* FONTS */ | |
| --global-font: 'Work Sans', sans-serif; | |
| --monospace: 'Fira Code', monospace; | |
| --header-font: 'Bitter', serif; | |
| /* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */ | |
| --reduce-padding-right: 3400px; | |
| --reduce-padding-left: 3400px; | |
| /* COLORS - One light*/ | |
| --page-links: #283593; | |
| --attributes-color: #283593; | |
| --external-links: #50A14E; | |
| --links-hover: #E4564A; | |
| --hashtags: #A626A4; | |
| --body-text: #292D31; | |
| --italics-color: #292D31; | |
| --bold-color: #292D31; | |
| --highlight-text-color: #292D31; | |
| --highlighter: #FFFF80; | |
| --background: #FAFAFA; | |
| --sidebar-background: #EAEAEB; | |
| --sidebar-text: #292D31; | |
| --page-heading: #283593; | |
| --daily-heading: #283593; | |
| --heading: #292D31; | |
| --bullets: #3F51B5; | |
| --closed-bullets: #3F51B577; | |
| --references-color: #3F51B5; | |
| --references-style: 1px dashed; | |
| --namespaces: #E4564A; | |
| --all-pages-mentions: #0184BC; | |
| --cursor: #292D31; | |
| --icons: #3F51B5; | |
| --icons-hover: #E4564A; | |
| --filter-icon: #50A14E; | |
| /* DROPDOWN MENU */ | |
| --dropdown-menu-background: #EAEAEB; | |
| --dropdown-menu-highlight: #FAFAFA; | |
| --dropdown-menu-text: #292D31; | |
| --dropdown-newpage: #0184BC; | |
| /* SEARCH BAR */ | |
| --search-bar-background: #F7F8FA; | |
| --search-bar-text: #292D31; | |
| /* KANBAN CARD COLORS */ | |
| --kanban-main-background: #FAFAFA; | |
| --kanban-column-background: #EAEAEB; | |
| --kanban-card-background: #FAFAFA; | |
| --kanban-text-hover: #E4564A; | |
| } | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| /* FONTS */ | |
| --global-font: 'Work Sans', sans-serif; | |
| --monospace: 'Fira Code', monospace; | |
| --header-font: 'Bitter', serif; | |
| /* WIDTH FIXES - default 568px,1032px - increase to increase WIDTH */ | |
| --reduce-padding-right: 3400px; | |
| --reduce-padding-left: 3400px; | |
| /* COLORS (Material Dark theme) */ | |
| --page-links: #BB86FC; | |
| --attributes-color: #FFFF80; | |
| --external-links: #8AFF80; | |
| --links-hover: #03DAC6; | |
| --hashtags: #FE7FBF; | |
| --body-text: #A49C92; | |
| --italics-color: #03DAC6; | |
| --bold-color: #A49C92; | |
| --highlight-text-color: #000000; | |
| --highlighter: #FFFF80; | |
| --background: #000000; | |
| --sidebar-background: #121212; | |
| --sidebar-text: #A49C92; | |
| --page-heading: #A49C92; | |
| --daily-heading: #A49C92; | |
| --headings: #A49C92; | |
| --bullets: #A49C92; | |
| --closed-bullets: #A49C9291; | |
| --references-color: #A49C92; | |
| --references-style: 1px dashed; | |
| --block-reference-text: #A49C92; | |
| --namespaces: #03DAC6; | |
| --all-pages-mentions: #A49C92; | |
| --cursor: #A49C92; | |
| --icons: #A49C92; | |
| --icons-hover: #92FFFF; | |
| --filter-icon: #8AFF80; | |
| /* DROPDOWN MENU */ | |
| --dropdown-menu-background: #121212; | |
| --dropdown-menu-highlight: #000000; | |
| --dropdown-menu-text: #A49C92; | |
| --dropdown-newpage: #A49C92; | |
| /* SEARCH BAR */ | |
| --search-bar-background: #000000; | |
| --search-bar-text: #A49C92; | |
| /* KANBAN CARD COLORS */ | |
| --kanban-main-background: #000000; | |
| --kanban-column-background: #121212; | |
| --kanban-card-background: #000000; | |
| --kanban-text-hover: #03DAC6; | |
| } | |
| .rm-alias--external { | |
| color: var(--fg-link); | |
| } | |
| .rm-alias--external:after { | |
| content: ‘ ↗’; | |
| } | |
| .rm-alias--external:hover { | |
| text-decoration: none!important; | |
| border-bottom: 1px dashed; | |
| } | |
| .rm-alias--external { | |
| text-decoration: none!important; | |
| border-bottom: 1px solid; | |
| } | |
| div::-webkit-scrollbar { | |
| width: 10px; | |
| } | |
| div::-webkit-scrollbar-track { | |
| background-color: #9993 !important; | |
| } | |
| div::-webkit-scrollbar-thumb { | |
| background-color: #9999 !important; | |
| } | |
| /* Tag Decorations */ | |
| span.rm-page-ref[data-tag="text"]:before { | |
| content: '📄 '; | |
| } | |
| span.rm-page-ref[data-tag="comment"]:before { | |
| content: '💬 '; | |
| } | |
| span.rm-page-ref[data-tag="directive"]:before { | |
| content: '👉 '; | |
| } | |
| span.rm-page-ref[data-tag="idea"]:before { | |
| content: '💡 '; | |
| } | |
| span.rm-page-ref[data-tag="caution"]:before { | |
| content: '⚠️ '; | |
| } | |
| span.rm-page-ref[data-tag="question"]:before { | |
| content: '❓ '; | |
| } | |
| span.rm-page-ref[data-tag="event"]:before { | |
| content: '📅 '; | |
| } | |
| span.rm-page-ref[data-tag="note"]:before { | |
| content: '📎 '; | |
| } | |
| span.rm-page-ref[data-tag="setting"]:before { | |
| content: '📍 '; | |
| } | |
| span.rm-page-ref[data-attribute="Goal"]:before { | |
| content: '🏅 '; | |
| } | |
| span.rm-page-ref[data-attribute="Conflict"]:before { | |
| content: '💢 '; | |
| } | |
| span.rm-page-ref[data-attribute="Disaster"]:before { | |
| content: '🔥 '; | |
| } | |
| span.rm-page-ref[data-attribute="Reaction"]:before { | |
| content: '🔄 '; | |
| } | |
| span.rm-page-ref[data-attribute="Dilemma"]:before { | |
| content: '🔶 '; | |
| } | |
| span.rm-page-ref[data-attribute="Decision"]:before { | |
| content: '✅ '; | |
| } | |
| span[data-link-title="INCOMPLETE"] .rm-page-ref { | |
| color: #ee4f00 !important; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment