├── .DS_Store ├── .gitignore ├── Aquae.css ├── Images ├── Aquae 2 Screenshot2.png ├── Aquae2 Screenshot.png ├── Lux Screenshot.png ├── Nox Screenshot.png └── Nox2 Screenshot.png ├── Nox.css ├── README.md ├── core.css └── lux.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calrobertlee/roam-css-styles/870af25c25fd1ecbc064c11fa5355828b5a5b752/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | Images/.DS_Store 2 | -------------------------------------------------------------------------------- /Aquae.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: Roam Aquae Theme 3 | Version: 3.0.3 4 | Edits by: Cal Robert Lee (https://www.calrobert.com/) 5 | Colors by: Cal Robert Lee 6 | 7 | Quickfix: - multibar and some other stuff 8 | 9 | Notes: - Thanks to the supportive people on r/RoamResearch, GitHub and Twitter! 10 | - I have been changing a lot of thing in my professional career! Which is the reason for some of the delays 11 | - Super excited to have been selected to be on RoamResearch's Official theme's page! 12 | - To install copy "@import url('https://calrobertlee.github.io/roam-themes/aquae.css');" to roam/css page (without the quotes) 13 | */ 14 | 15 | 16 | /* IMPORT CORE THEME */ 17 | @import url('https://calrobertlee.github.io/roam-themes/core.css'); 18 | 19 | :root { 20 | /* THEME COLORS */ 21 | --theme-blue-1: #0073f9; 22 | --theme-gray-1: #282828; 23 | --theme-white-1: #ffffff; 24 | 25 | /* PRIMARY FONTS */ 26 | --main-font: 'Inter', sans-serif; 27 | --main-font-color: var(--theme-gray-1); 28 | --main-font-size: 1.0em; 29 | 30 | /* FONT COLORS */ 31 | 32 | --page-link-color: var(--theme-blue-1); 33 | --page-bracket-color: #bfbfbf; 34 | --external-link-color: var(--theme-blue-1); 35 | --external-link-hover-color: #0073f9ba; 36 | --alias-hover-color: #0015f9cf; 37 | --daily-notes-link-color: none; 38 | --sidebar-link-color: none; 39 | --title-color: #3b3f42; 40 | --ref-title-color: #278afc; 41 | --header-color: #1c1c1c; 42 | --strong: var(--theme-gray-1); 43 | --emphasis: var(--theme-gray-1); 44 | --highlight-font-color: var(--theme-gray-1); 45 | --highlight-background-color: #fff1a4; 46 | --highlight-link-color: var(--theme-blue-1); 47 | --highlight-padding: 4px 5px 4px 5px; 48 | --reference-header-color: #c1cad4; 49 | --reference-header-underline-color: #c5ccd46e; 50 | --sidebar-font-color: #717171; 51 | --sidebar-font-color-hover: #969696; 52 | --sidebar-hover-bg: none; 53 | --sidebar-font-hover-color: #f5f8fa; 54 | --sidebar-shorcut-color: #545454; 55 | 56 | --tag-font-color: #bebebe; 57 | --tag-bg-color: #f9f9f9cf; 58 | --tag-border-radius: 10px; 59 | --tag-border: 1px solid #e6e6e682; 60 | --tag-padding: 1px 5px 2px; 61 | --tagHover-font-color: #b8b8b8; 62 | --tagHover-bg-color: #e8e8e8; 63 | --tagHover-border: 1px solid #dddddd82; 64 | 65 | --bullet-color: #0069e3; 66 | --bullet-closed-color: #bcdbffb5; 67 | --bullet-closed-border-color: #0069e345; 68 | --multibar: hsl(220, 9%, 85%); 69 | --bullet-position: ; /* UPDATE*/ 70 | 71 | --checkmark-top: -1px; 72 | --checkmark-left: -2px; 73 | --checkmark-height: 14px; 74 | --checkmark-width: 14px; 75 | --checkmark-border-radius: 4px; 76 | --checkmark-color: 1px solid var(--theme-white-1); 77 | --checkmark-border: 1px solid hsl(0, 0%, 84%); 78 | --checkmark-bg-color: var(--theme-white-1); 79 | --checkedmark-border: 1px solid var(--theme-blue-1); 80 | --checkedmark-bg-color: #3c96ff; 81 | 82 | --code-bg: #f1f6fb; 83 | --code-font: 'Source Code Pro', 'Courier New', Courier, monospace; 84 | --code-font-color: #333333; 85 | --code-font-size: 1.0em; 86 | --code-border: 1px solid #d5d8db; 87 | 88 | --codemirror-bg: hsl(210, 53%, 98%); 89 | --codemirror-border-color: #dadde1; 90 | --codemirror-border-radius: 3px; 91 | --codemirror-linenumber: #aaaeb5; 92 | --code-matchingbracket-color: #f90; 93 | 94 | --cm-comment: hsl(230, 0%, 44%); 95 | --cm-def: hsl(41, 99%, 40%); 96 | --cm-keyword: hsl(301, 66%, 43%); 97 | --cm-callee: hsl(177, 72%, 47%); 98 | --cm-operator: hsl(177, 72%, 47%); 99 | --cm-builtin: hsl(177, 72%, 47%); 100 | --cm-string: hsl(119, 37%, 50%); 101 | --cm-variable-3: hsl(177, 72%, 47%); 102 | --cm-variable-2: hsl( 5, 74%, 59%); 103 | --cm-variable: hsl(53, 99%, 40%); 104 | --cm-tag: hsl( 5, 74%, 59%); 105 | --cm-property: hsl(221, 87%, 60%); 106 | --cm-number: hsl(41, 94%, 48%); 107 | --cm-atom: hsl(41, 94%, 48%); 108 | --cm-qualifier: hsl(41, 94%, 48%); 109 | 110 | --new-page-color: none; 111 | 112 | --ref-count-font-size: 12px; 113 | 114 | /* BACKGROUNDS & OUTLINES */ 115 | 116 | --body-bg: var(--theme-white-1); 117 | --topbar-bg: none; 118 | --topbar-border-bottom: none; 119 | --left-sidebar-bg: #2e3234; 120 | --left-sidebar-border-right: none; 121 | --left-sidebar-divider-color: none; 122 | --right-sidebar-bg: var(--theme-white-1); 123 | --right-sidebar-border-left: 1px solid #e3e5e8; 124 | --divider-color: #c2c7cb; 125 | --allpage-bottom-border-color: #ececec; 126 | --reference-item-bg: #fdfdfd; 127 | --reference-item-border-radius: 6px; 128 | --reference-item-border: 1px solid #e6e6e68a; 129 | 130 | --block-highlight: #d8ecff; 131 | --block-highlight-bg: #d3ffa4; 132 | 133 | --popover-bg: var(--theme-white-1); 134 | --popover-font-color: var(--theme-gray-1); 135 | --popover-border: 0.5px solid red; /* #UPDATE */ 136 | 137 | --inline-search-bg: var(--theme-white-1); 138 | --inline-search-border-radius: 6px; 139 | --inline-search-border: 1px solid #d1d1d1; 140 | --inline-search-button-bg-color: var(--theme-white-1); 141 | 142 | --datepicker-bg: var(--inline-search-bg); 143 | --datepicker-day-wrapper: none; 144 | --datepicker-altfont-color: #dadde0; /* #UPDATE */ 145 | 146 | --search-font-color: var(--theme-gray-1); 147 | --search-body-font-color: #e8e8e8; 148 | --search-outline: hsl(212, 100%, 62%); 149 | --search-bg: var(--theme-white-1); 150 | --search-border-radius: 4px; 151 | --search-selected-row: #f5f5f5; 152 | 153 | --block-ref-bg: none; 154 | --block-ref-hover: none; 155 | --block-ref-hover-bg: #f6f9fb; 156 | --block-ref-border-bottom: #d2dae3; 157 | 158 | --pages-row-highlight: ; /* NEEDS LOVE */ 159 | --pages-header-row: var(--theme-white-1); 160 | --pages-mentions-level-bg: #3c96ff; 161 | --pages-mentions-level1-bg: #3d71ff; 162 | --pages-mentions-level2-bg: #3c50ff; 163 | --pages-mentions-font-color: var(--theme-white-1); 164 | 165 | --icon-color: #5c636b; 166 | --icon-bg-hover: #ebebeb; 167 | --icon-color-hover: #5c636b; 168 | --minirightbar-icon-color: #cfcfcf; 169 | --pin-color: #EE6F2D; 170 | 171 | /* MISC */ 172 | 173 | --kanban-board-bg: #fafcfd; 174 | --kanban-board-border: 1px solid #e6e6e6; 175 | --kanban-board-border-radius: 10px; 176 | --kanban-column-bg: #ecececdb; 177 | --kanban-column-font-color: var(--main-font-color); 178 | --kanban-column-margin: 4px 8px 0px 4px; 179 | --kanban-card-bg: var(--theme-white-1); 180 | --kanban-card-font-color: var(--main-font-color); 181 | --kanban-card-border-radius: 4px; 182 | --kanban-card-border: 1px solid #dbdbdb; 183 | 184 | --table-border: 1px solid #cacaca; 185 | 186 | --embed-container-bg: #ecf2f8; 187 | 188 | --astrolabe-bg-color: #f2f2f2; 189 | 190 | --hr-color: #ccc; 191 | 192 | --blockquote-font-color: #111111; 193 | --blockquote-border-color: #07f; 194 | --blockquote-bg: var(--theme-white-1); 195 | --blockquote-cite: #000000; 196 | 197 | --encrypted-font-color: #0077ffc4; 198 | --encrypted-bg: hsl(212, 39%, 98%); 199 | --encrypted-font-size: 13px; 200 | --encrypted-font-weight: 300; 201 | --encrypted-border-radius: 4px; 202 | --encrypted-padding: 2px 4px; 203 | 204 | --select-bg-color: var(--theme-white-1); 205 | --select-border-color: #d5d5d5; 206 | 207 | --emoji-bg: #f0f7fd; 208 | --emoji-border: 0px solid none; 209 | --emoji-color: none; 210 | 211 | --pomo-bg: #fff6f6; 212 | --pomo-border: var(--divider-color); 213 | --pomo-running-border: #BD453F; 214 | --pomo-running-font-color: #BD453F; 215 | --pomo-break-bg: #E4FBF1; 216 | --pomo-break-border: #469765; 217 | --pomo-break-font-color: #469765; 218 | 219 | --query-results-border: none; 220 | --query-border: 1px solid #f8f1d2; 221 | --query-border-radius: 6px; 222 | --query-padding-bottom: 16px; 223 | --query-title-font-color: #d0b944; 224 | --query-title-bg: #fffced; 225 | 226 | 227 | /* Scrollbar settings - to disable set values to none */ 228 | --scrollbar-track: true; 229 | --scrollbar-thumb: ; 230 | } -------------------------------------------------------------------------------- /Images/Aquae 2 Screenshot2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calrobertlee/roam-css-styles/870af25c25fd1ecbc064c11fa5355828b5a5b752/Images/Aquae 2 Screenshot2.png -------------------------------------------------------------------------------- /Images/Aquae2 Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calrobertlee/roam-css-styles/870af25c25fd1ecbc064c11fa5355828b5a5b752/Images/Aquae2 Screenshot.png -------------------------------------------------------------------------------- /Images/Lux Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calrobertlee/roam-css-styles/870af25c25fd1ecbc064c11fa5355828b5a5b752/Images/Lux Screenshot.png -------------------------------------------------------------------------------- /Images/Nox Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calrobertlee/roam-css-styles/870af25c25fd1ecbc064c11fa5355828b5a5b752/Images/Nox Screenshot.png -------------------------------------------------------------------------------- /Images/Nox2 Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/calrobertlee/roam-css-styles/870af25c25fd1ecbc064c11fa5355828b5a5b752/Images/Nox2 Screenshot.png -------------------------------------------------------------------------------- /Nox.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: Roam Nox Theme 3 | Version: 3.0.3 4 | Edits by: Cal Robert Lee (https://www.calrobert.com/) 5 | Colors by: Cal Robert Lee 6 | 7 | Hotfix: - embed temporary patch 8 | - nested ref temp patch 9 | 10 | Notes: - Thanks to the supportive people on r/RoamResearch, GitHub and Twitter! 11 | - I have been changing a lot of thing in my professional career! Which is the reason for some of the delays 12 | - Super excited to have been selected to be on RoamResearch's Official theme's page! 13 | - To install copy "@import url('https://calrobertlee.github.io/roam-themes/nox.css');" to roam/css page (without the quotes) 14 | */ 15 | 16 | 17 | /* IMPORT CORE THEME */ 18 | @import url('https://calrobertlee.github.io/roam-themes/core.css'); 19 | 20 | :root { 21 | /* THEME COLORS */ 22 | --theme-blue-1: #81C6F3; 23 | --theme-gray-1: #DCDEDD; 24 | --theme-white-1: #1E2022; 25 | 26 | /* PRIMARY FONTS */ 27 | --main-font: 'Inter', sans-serif; 28 | --main-font-color: var(--theme-gray-1); 29 | --main-font-size: 1.0em; 30 | 31 | /* FONT COLORS */ 32 | 33 | --page-link-color: var(--theme-blue-1); 34 | --page-bracket-color: #5B5B5B; 35 | --external-link-color: var(--theme-blue-1); 36 | --external-link-hover-color: rgba(129, 198, 243, .73); 37 | --alias-hover-color: hsl(230, 83%, 73%); 38 | --daily-notes-link-color: none; 39 | --sidebar-link-color: none; 40 | --title-color: #c9d1d9; 41 | --ref-title-color: #c9d1d9; 42 | --header-color: var(--theme-gray-1); 43 | --strong: var(--theme-gray-1); 44 | --emphasis: var(--theme-gray-1); 45 | --highlight-font-color: var(--theme-gray-1); 46 | --highlight-background-color: #213784; 47 | --highlight-link-color: var(--theme-blue-1); 48 | --highlight-padding: 4px 5px 4px 5px; 49 | --reference-header-color: #313b45; 50 | --reference-header-underline-color: #313b4582; 51 | --sidebar-font-color: #696969; 52 | --sidebar-font-color-hover: #8f8f8f; 53 | --sidebar-hover-bg: none; 54 | --sidebar-font-hover-color: #8f8f8f; 55 | --sidebar-shorcut-color: #9f9f9f52; 56 | 57 | --tag-font-color: #515355; 58 | --tag-bg-color: #24272a; 59 | --tag-border-radius: 10px; 60 | --tag-border: 1px solid #35373996; 61 | --tag-padding: 1px 5px 2px; 62 | --tagHover-font-color: #484a4c; 63 | --tagHover-bg-color: #2d3033; 64 | --tagHover-border: 1px solid #44464887; 65 | 66 | --bullet-color: #62A7F5; 67 | --bullet-closed-color: #528ed24d; 68 | --bullet-closed-border-color: rgba(98, 167, 245, .3); 69 | --multibar: hsl(210, 7%, 25%); 70 | /*--bullet-position: ;*/ 71 | 72 | --checkmark-top: -1px; 73 | --checkmark-left: -2px; 74 | --checkmark-height: 14px; 75 | --checkmark-width: 14px; 76 | --checkmark-border-radius: 4px; 77 | --checkmark-color: 1px solid var(--theme-white-1); 78 | --checkmark-border: 1px solid hsl(207, 6%, 34%); 79 | --checkmark-bg-color: var(--theme-white-1); 80 | --checkedmark-border: 1px solid var(--theme-blue-1); 81 | --checkedmark-bg-color: #5ba6fb; 82 | 83 | --code-bg: #222629; 84 | --code-font: 'Source Code Pro', 'Courier New', Courier, monospace; 85 | --code-font-color: #DCDEDD; 86 | --code-font-size: 1.0em; 87 | --code-border: 1px solid #34373b; 88 | 89 | --codemirror-bg: #222629; 90 | --codemirror-border-color: #323438; 91 | --codemirror-border-radius: 3px; 92 | --codemirror-linenumber: #515355; 93 | --code-matchingbracket-color: #ead64c; 94 | 95 | --cm-comment: #7f848e; 96 | --cm-def: #d19a66; 97 | --cm-keyword: #c678dd; 98 | --cm-callee: #56b6c2; 99 | --cm-operator: #56b6c2; 100 | --cm-builtin: #56b6c2; 101 | --cm-string: #98c379; 102 | --cm-variable-3: #56b6c2; 103 | --cm-variable-2: #e06c75; 104 | --cm-variable: #e5c07b; 105 | --cm-tag: #e06c75; 106 | --cm-property: #61afef; 107 | --cm-number: #d19a66; 108 | --cm-atom: #d19a66; 109 | --cm-qualifier: #d19a66; 110 | 111 | --new-page-color: none; 112 | 113 | --ref-count-font-size: 12px; 114 | 115 | /* BACKGROUNDS & OUTLINES */ 116 | 117 | --body-bg: var(--theme-white-1); 118 | --topbar-bg: rgba(30, 32, 34, 0); 119 | --topbar-border-bottom: 0px solid #32343880; 120 | --left-sidebar-bg: #242629; 121 | --left-sidebar-border-right: 0px solid rgb(54, 56, 60); 122 | --left-sidebar-divider-color: #45474a00; 123 | --right-sidebar-bg: var(--theme-white-1); 124 | --right-sidebar-border-left: 2px solid hsla(220, 6%, 5%, .31); 125 | --divider-color: #43474a; 126 | --allpage-bottom-border-color: #2d3133; 127 | --reference-item-bg: #212325; 128 | --reference-item-border-radius: 6px; 129 | --reference-item-border: 1px solid rgb(39, 42, 45); 130 | 131 | --block-highlight: #353a40; 132 | --block-highlight-bg: #34641F; 133 | 134 | --popover-bg: #2c2e31; 135 | --popover-font-color: #DCDEDD; 136 | --popover-border: 0.5px solid rgb(70, 73, 77); 137 | 138 | --inline-search-bg: var(--theme-white-1); 139 | --inline-search-border-radius: 6px; 140 | --inline-search-border: 1px solid #46494d; 141 | --inline-search-button-bg-color: var(--theme-white-1); 142 | 143 | --datepicker-bg: var(--inline-search-bg); 144 | --datepicker-day-wrapper: #36393c; 145 | --datepicker-altfont-color: #545d63; 146 | 147 | --search-font-color: var(--theme-gray-1); 148 | --search-body-font-color: #DCDEDD; 149 | --search-outline: #1e6897; 150 | --search-bg: var(--theme-white-1); 151 | --search-border-radius: 3px; 152 | --search-selected-row: #2c2d30; 153 | 154 | --block-ref-bg: none; 155 | --block-ref-hover: none; 156 | --block-ref-hover-bg: #353a40; 157 | --block-ref-border-bottom: #393d42; 158 | 159 | /*--pages-row-highlight: ;*/ 160 | --pages-header-row: var(--theme-white-1); 161 | --pages-mentions-level-bg: #3c96ff; 162 | --pages-mentions-level1-bg: #3d71ff; 163 | --pages-mentions-level2-bg: #3c50ff; 164 | --pages-mentions-font-color: var(--theme-white-1); 165 | 166 | --icon-color: #7d8386; 167 | --icon-bg-hover: #dadfe61c; 168 | --icon-color-hover: #dae0e4; 169 | --minirightbar-icon-color: #454d52; 170 | --pin-color: #ff6312; 171 | 172 | /* MISC */ 173 | 174 | --kanban-board-bg: #212326; 175 | --kanban-board-border: 1px solid #32343880; 176 | --kanban-board-border-radius: 10px; 177 | --kanban-column-bg: #272a2d; 178 | --kanban-column-font-color: var(--main-font-color); 179 | --kanban-column-margin: 4px 8px 0px 4px; 180 | --kanban-card-bg: var(--theme-white-1); 181 | --kanban-card-font-color: var(--main-font-color); 182 | --kanban-card-border-radius: 4px; 183 | --kanban-card-border: 1px solid #323539; 184 | 185 | --table-border: 1px solid #565656; 186 | 187 | --embed-container-bg: hsl(213, 9%, 20%); 188 | 189 | --astrolabe-bg-color: hsl(210, 6%, 20%); 190 | 191 | --hr-color: #434547; 192 | 193 | --blockquote-font-color: #ebebeb; 194 | --blockquote-border-color: #62A7F5; 195 | --blockquote-bg: #1E2022; 196 | --blockquote-cite: #ebebeb; 197 | 198 | --encrypted-font-color: #034b9e; 199 | --encrypted-bg: hsl(212, 14%, 15%); 200 | --encrypted-font-size: 13px; 201 | --encrypted-font-weight: 300; 202 | --encrypted-border-radius: 4px; 203 | --encrypted-padding: 2px 4px; 204 | 205 | --select-bg-color: var(--theme-white-1); 206 | --select-border-color: #3a3f44; 207 | 208 | --emoji-bg: #1f2830; 209 | --emoji-border: 0px solid none; 210 | --emoji-color: none; 211 | 212 | --pomo-bg: #312625; 213 | --pomo-border: var(--divider-color); 214 | --pomo-running-border: #862C26; 215 | --pomo-running-font-color: #E5493E; 216 | --pomo-break-bg: #20372D; 217 | --pomo-break-border: #10764C; 218 | --pomo-break-font-color: #0D7A4D; 219 | 220 | --query-results-border: none; 221 | --query-border: 1px solid #3e3b28a8; 222 | --query-border-radius: 6px; 223 | --query-padding-bottom: 16px; 224 | --query-title-font-color: #d0b94482; 225 | --query-title-bg: #3d381e8f; 226 | 227 | /* Scrollbar settings - to disable set values to none */ 228 | --scrollbar-track: true; 229 | /*--scrollbar-thumb: ;*/ 230 | } 231 | 232 | /* TEMP PATCH FOR EMBED */ 233 | .rm-embed-container { 234 | background-color: hsl(204, 10%, 18%); 235 | } 236 | 237 | .rm-embed-container .rm-embed-container { 238 | background-color: hsl(204, 10%, 13%); 239 | } 240 | 241 | .rm-embed-container .rm-embed-container .rm-embed-container{ 242 | background-color: hsl(204, 10%, 18%); 243 | } 244 | 245 | .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container{ 246 | background-color: hsl(204, 10%, 13%); 247 | } 248 | 249 | /* TEMP PATCH FOR INLINE & NESTED REFS, THANKS b1uegh0st!!! */ 250 | .rm-nested-refs { 251 | background-color: hsl(227, 70%, 40%); 252 | color: hsl(0, 0%, 91%); 253 | } 254 | .rm-inline-references { 255 | background-color: hsl(204, 10%, 15%); 256 | } 257 | .rm-block__self .rm-block__ref-count.rm-active { 258 | background-color: #1f2022; 259 | } 260 | .rm-zoom-path .rm-zoom-item { 261 | color: hsl(0, 0%, 91%); 262 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cal Robert's Roam Themes 2 | 3 | - Update: This Repository and its contents are not maintained. I may return to work on this projet when the Roam team makes things a bit easier. 4 | 5 | 6 | ## Aqaue 7 | `@import url('https://calrobertlee.github.io/roam-themes/aquae.css');` 8 | ![](https://raw.githubusercontent.com/garlicagreement/roam-css-styles/master/Images/Aquae%202%20Screenshot2.png) 9 | 10 | ## Nox 11 | `@import url('https://calrobertlee.github.io/roam-themes/nox.css');` 12 | ![](https://raw.githubusercontent.com/garlicagreement/roam-css-styles/master/Images/Nox2%20Screenshot.png) 13 | 14 | ## Lux 15 | `@import url('https://calrobertlee.github.io/roam-themes/lux.css');` 16 | ![](https://raw.githubusercontent.com/garlicagreement/roam-css-styles/master/Images/Lux%20Screenshot.png) 17 | -------------------------------------------------------------------------------- /core.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: Core Theme for Aquae, Nox, & Lux Roam themes 3 | Version: 1.2.3 4 | By: Cal Robert Lee (https://www.calrobert.com/) 5 | 6 | Fixes: - fixed left dropdown colors (thanks Morgan @zyigo!) 7 | 8 | Notes: - Thanks to the supportive people on r/RoamResearch, GitHub and Twitter! 9 | - I have been changing a lot of thing in my professional career! Which is the reason for some of the delays 10 | - Super excited to have been selected to be on RoamResearch's Official theme's page! 11 | - To install visit: https://github.com/calrobertlee/roam-css-styles 12 | */ 13 | 14 | 15 | /*---------------------------------- 16 | #BASIC FONTS 17 | ------------------------------------*/ 18 | .rm-title-textarea, 19 | .roam-body .roam-app h1.rm-title-display { /* page title */ 20 | font-weight: 500; 21 | font-size: 40px; 22 | font-family: var(--main-font); 23 | color: var(--title-color) !important; 24 | } 25 | .flex-h-box.window-headers .level2 a { /* right sidebar page title */ 26 | font-weight: 300; 27 | font-size: 1em; 28 | font-family: var(--main-font); 29 | color: var(--ref-title-color) !important; 30 | } 31 | .roam-body .roam-app h1 { /* h1 */ 32 | font-family: var(--main-font); 33 | color: var(--header-color) !important; 34 | } 35 | .rm-level2 { /* h2 */ 36 | font-weight: 500; 37 | font-size: 1.4em; 38 | font-family: var(--main-font); 39 | color: var(--header-color); 40 | } 41 | .rm-level3 { /* h3 */ 42 | font-weight: 500; 43 | font-size: 1.15em; 44 | font-family: var(--main-font); 45 | color: var(--header-color); 46 | } 47 | .roam-app { /* main body */ 48 | font-weight: 400; 49 | font-size: 1em; 50 | font-family: var(--main-font); 51 | color: var(--main-font-color) !important; 52 | } 53 | 54 | /*---------------------------------- 55 | #LINKS 56 | ------------------------------------*/ 57 | .rm-page-ref--link { /* internal link color */ 58 | color: var(--page-link-color); 59 | } 60 | .rm-page-ref--link strong{ /* bold link color */ 61 | color: var(--page-link-color); 62 | } 63 | .rm-page-ref--link:focus, 64 | .rm-page-ref--link:hover { /* internal link hover state */ 65 | color: var(--page-link-color); 66 | text-decoration: none; 67 | } 68 | .rm-page-ref__brackets { /* brackets */ 69 | color: var(--page-bracket-color); 70 | } 71 | .roam-app a { /* external link */ 72 | color: var(--external-link-color); 73 | text-decoration: none; 74 | } 75 | .roam-app a:focus, 76 | .roam-app a:hover { /* external link hover */ 77 | color: var(--external-link-hover-color); 78 | } 79 | 80 | /*---------------------------------- 81 | #ALIAS LINKS 82 | ------------------------------------*/ 83 | span [style*="background-color: rgb(235, 241, 245);"] { 84 | background-color: #00000000 !important; 85 | } 86 | span [style*="color: rgb(245, 86, 86);"] { 87 | color: var(--page-link-color) !important; 88 | } 89 | span:hover [style*="color: rgb(245, 86, 86);"] { 90 | color: var(--alias-hover-color) !important; 91 | } 92 | span [style*="padding: 4px 6px;"] { /* alias padding to match body text */ 93 | padding: 0px 0px !important; 94 | } 95 | 96 | /*---------------------------------- 97 | #TAGS 98 | ------------------------------------*/ 99 | .rm-page-ref--tag { 100 | color: var(--tag-font-color )!important; 101 | font-weight: 400; 102 | background-color: var(--tag-bg-color); 103 | border-radius: var(--tag-border-radius); 104 | border: var(--tag-border); 105 | padding: var(--tag-padding); 106 | text-decoration: none; 107 | } 108 | .rm-page-ref--tag:hover { 109 | color: var(--tagHover-font-color) !important; 110 | font-weight: 400; 111 | background-color: var(--tagHover-bg-color); 112 | border-radius: var(--tag-border-radius); 113 | border: var(--tagHover-border); 114 | padding: var(--tag-padding); 115 | text-decoration: none; 116 | } 117 | 118 | /*---------------------------------- 119 | #HIGHLIGHTS 120 | ------------------------------------*/ 121 | .rm-highlight { /* text highlighting */ 122 | background-color: var(--highlight-background-color); 123 | color: var(--highlight-font-color); 124 | border-radius: 0px; 125 | padding: var(--highlight-padding); 126 | } 127 | .rm-highlight .rm-page-ref--link { /* highlighted link color */ 128 | color: var(--highlight-link-color); 129 | } 130 | .block-highlight-blue { /* block selection */ 131 | background-color: var(--block-highlight); 132 | } 133 | .block-highlight-yellow { /* block highlight */ 134 | background-color: var(--block-highlight-bg); 135 | } 136 | .rm-embed-container { /* embed block highlight */ 137 | background-color: var(--embed-container-bg); 138 | } 139 | 140 | /*---------------------------------- 141 | #BULLETS & NEST LINE 142 | ------------------------------------*/ 143 | .rm-bullet__inner { /* bullet */ 144 | border-radius: 50%; 145 | width: 5px; 146 | height: 5px; 147 | background-color: var(--bullet-color); 148 | } 149 | .rm-bullet.rm-bullet--closed .rm-bullet__inner { /* collapsed bullet */ 150 | background-color: var(--bullet-color); 151 | border: 4px solid var(--bullet-closed-border-color); 152 | } 153 | #right-sidebar .rm-bullet.rm-bullet--closed .rm-bullet__inner { /* collapsed bullet */ 154 | background-color: var(--bullet-color); 155 | border: 4px solid var(--bullet-closed-border-color); 156 | } 157 | /* nest diagram line */ 158 | .rm-multibar { 159 | border-color: var(--multibar); 160 | } 161 | .rm-multibar:hover { 162 | border-right: 1px solid var(--theme-blue-1); 163 | width: calc(1px + calc(1px - -5px)); 164 | } 165 | 166 | /*---------------------------------- 167 | #TODO 168 | ------------------------------------*/ 169 | .checkmark { /* todo */ 170 | position: absolute; 171 | top: var(--checkmark-top); 172 | left: var(--checkmark-left); 173 | height: var(--checkmark-height); 174 | border-radius: var(--checkmark-border-radius); 175 | width: var(--checkmark-width); 176 | border: var(--checkmark-border); 177 | background-color: var(--checkmark-bg-color); 178 | } 179 | .check-container input:checked ~ .checkmark { /* done */ 180 | position: absolute; 181 | top: var(--checkmark-top); 182 | left: var(--checkmark-left); 183 | height: var(--checkmark-height); 184 | border-radius: var(--checkmark-border-radius); 185 | width: var(--checkmark-width); 186 | border: var(--checkedmark-border); 187 | background-color: var(--checkedmark-bg-color); 188 | } 189 | .check-container .checkmark:after { /* done check symbol */ 190 | left: 3.5px; 191 | top: 0.25px; 192 | width: 6px; 193 | height: 10px; 194 | border: var(--checkmark-color); 195 | border-width: 0 2px 2px 0; 196 | -webkit-transform: rotate(45deg); 197 | -ms-transform: rotate(45deg); 198 | transform: rotate(40deg) scale(0.8); 199 | } 200 | 201 | /*---------------------------------- 202 | #CODE 203 | ------------------------------------*/ 204 | code { /* inline code */ 205 | background: var(--code-bg); 206 | color: var(--code-font-color); 207 | border: var(--code-border); 208 | border-radius: var(--codemirror-border-radius); 209 | } 210 | .CodeMirror { /* code block */ 211 | border: 1px solid var(--codemirror-border-color); 212 | border-radius: var(--codemirror-border-radius); 213 | background: var(--codemirror-bg) !important; 214 | color: var(--main-font-color) !important; 215 | } 216 | .Codemirror-code { 217 | padding-left: 12px !important; 218 | } 219 | div.CodeMirror-selected { /* selected color */ 220 | background: var(--block-highlight) !important; 221 | } 222 | .CodeMirror-gutters { 223 | background: var(--bg-color); 224 | padding-right: 12px; 225 | border-right: 1px solid var(--bg-color); 226 | } 227 | .CodeMirror-cursor { 228 | border-left: 2px solid var(--bullet-color) !important; 229 | } 230 | /*_TOGGLE-- Matching bracket like Atom --*/ 231 | .CodeMirror-matchingbracket { 232 | color: var(--main-font-color) !important; 233 | border-bottom: 1px solid var(--code-matchingbracket-color); 234 | } 235 | /*_TOGGLE-- Matching bracket like Visual Studio Code --*/ 236 | /* 237 | .CodeMirror-matchingbracket { 238 | color: var(--main-font-color) !important; 239 | border: 1px solid var(--icon-color-hover); 240 | background: #3c3c3c; 241 | } 242 | */ 243 | .CodeMirror-linenumber { 244 | color: var(--codemirror-linenumber) !important; 245 | font-family: monospace !important; 246 | left: 0px !important; 247 | } 248 | span.cm-comment { 249 | color: var(--cm-comment) !important;} 250 | span.cm-def { 251 | color: var(--cm-def) !important;} 252 | span.cm-keyword { 253 | color: var(--cm-keyword) !important;} 254 | span.cm-variable.cm-callee { 255 | color: var(--cm-callee) !important;} 256 | span.cm-operator { 257 | color: var(--cm-operator) !important;} 258 | span.cm-builtin { 259 | color: var(--cm-builtin) !important;} 260 | span.cm-string { 261 | color: var(--cm-string) !important;} 262 | span.cm-variable-3 { 263 | color: var(--cm-variable-3) !important;} 264 | span.cm-variable-2 { 265 | color: var(--cm-variable-2) !important;} 266 | span.cm-variable { 267 | color: var(--cm-variable) !important;} 268 | span.cm-tag { 269 | color: var(--cm-tag) !important;} 270 | span.cm-property { 271 | color: var(--cm-property) !important;} 272 | span.cm-number { 273 | color: var(--cm-number) !important;} 274 | span.cm-atom { 275 | color: var(--cm-atom) !important;} 276 | span.cm-qualifier { 277 | color: var(--cm-qualifier) !important;} 278 | 279 | /*---------------------------------- 280 | #ENCRYPTED BLOCK 281 | ------------------------------------*/ 282 | .rm-encrypted-block { 283 | color: var(--encrypted-font-color); 284 | background-color: var(--encrypted-bg); 285 | font-size: var(--encrypted-font-size); 286 | border-radius: var(--encrypted-border-radius); 287 | padding: var(--encrypted-padding); 288 | font-weight: var(--encrypted-font-weight); 289 | } 290 | .rm-encrypted-block .rm-encrypted-passphrase { 291 | display: inline; 292 | cursor: pointer; 293 | } 294 | /*---------------------------------- 295 | #REFERENCES 296 | ------------------------------------*/ 297 | .rm-reference-container .flex-h-box > div:nth-child(3) strong { /* "Linked/Unlinked References" reference block header */ 298 | color: var(--reference-header-color); 299 | border-bottom: 1px solid var(--reference-header-underline-color); 300 | } 301 | .flex-h-box strong[style*="color: rgb(206, 217, 224);"] { /* "Linked/Unlinked References" reference block header */ 302 | color: var(--reference-header-color) !important; 303 | border-bottom: 1px solid var(--reference-header-underline-color); 304 | } 305 | #right-sidebar .flex-h-box > div:nth-child(2) strong { /* Right sidebar bold links color */ 306 | color: var(--main-font-color); 307 | } 308 | .rm-reference-item { /* footer reference box apperance */ 309 | 310 | background-color: var(--reference-item-bg); 311 | border-radius: var(--reference-item-border-radius); 312 | border: var(--reference-item-border) 313 | } 314 | 315 | /*---------------------------------- 316 | #APP MAIN 317 | ------------------------------------*/ 318 | body { /* main bg color */ 319 | background-color: var(--body-bg); 320 | } 321 | .roam-log-container .roam-log-page { /* divider color in daily notes */ 322 | border-top: 1px solid var(--divider-color); 323 | } 324 | 325 | /*---------------------------------- 326 | #APP WIDTH & PADDING 327 | ------------------------------------*/ 328 | .roam-block-container { /* increases width of text containers */ 329 | max-width: 100% !important; 330 | } 331 | .rm-block-text { /* increases width of body text */ 332 | max-width: 85%; 333 | } 334 | div.roam-center > div:first-child[style*="padding-right: calc((100% - 568px) / 2);"] { 335 | padding-right: calc((100% - 900px) / 2) !important; 336 | } 337 | div.roam-center > div:first-child[style*="padding-left: calc((100% - 1032px) / 2);"] { 338 | padding-left: calc((100% - 900px) / 2) !important; 339 | } 340 | .roam-body .roam-app .roam-body-main { 341 | flex: 0 0 calc(100% - 0px) !important; 342 | } 343 | .roam-body .roam-app .roam-main .roam-article { 344 | position: relative; 345 | padding: 55px 42px 120px; 346 | } 347 | 348 | /*---------------------------------- 349 | #LEFT SIDEBAR 350 | ------------------------------------*/ 351 | /* left sidebar color */ 352 | .roam-body .roam-app .roam-sidebar-container { 353 | background-color: var(--left-sidebar-bg); 354 | border-right: var(--left-sidebar-border-right); 355 | z-index: 0; /* added to prevent from blocking search input */ 356 | } 357 | /* adds padding to left sidebar contents */ 358 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content > div:nth-child(2) { 359 | padding-top: 10px; 360 | } 361 | /* edits top left main 3 buttons */ 362 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 363 | font-weight: 500; 364 | font-size: 13px; 365 | padding: 6px 20px; 366 | color: var(--sidebar-font-color); 367 | cursor:default; 368 | } 369 | /* edits top left main 3 buttons — HOVER STATE */ 370 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button:hover { 371 | background-color: var(--left-sidebar-bg); 372 | color: var(--sidebar-font-color-hover); 373 | cursor:default; 374 | } 375 | /* hide left sidebar divider */ 376 | .flex-v-box.starred-pages-wrapper > div:nth-child(1) { 377 | background-color: var(--left-sidebar-divider-color) !important; 378 | } 379 | /* edits "SHORTCUTS" subheader color */ 380 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 381 | color: var(--sidebar-shorcut-color); 382 | } 383 | /* hides star icon */ 384 | span.bp3-icon-small.bp3-icon-star { 385 | visibility: hidden; 386 | } 387 | /* "SHORTCUTS" dimension edits */ 388 | .flex-v-box.starred-pages-wrapper span{ 389 | font-size: 12px !important; 390 | font-weight: bold; 391 | margin-bottom: 8px; 392 | margin-left: -10px; 393 | } 394 | /* edits apperance of starred pages */ 395 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 396 | color: var(--sidebar-font-color); 397 | padding: 4px 0px 8px 0px; 398 | cursor:default; 399 | } 400 | /* edits apperance of starred pages — HOVER STATE */ 401 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 402 | background-color: #0000; 403 | color: var(--sidebar-font-color-hover); 404 | cursor:default; 405 | } 406 | /* edits sidebar ICON SIZE and positioning for Daily Notes, Graph Ov. and All Pages icons */ 407 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .icon { 408 | font-size: inherit; 409 | } 410 | 411 | /*---------------------------------- 412 | #RIGHT SIDEBAR 413 | ------------------------------------*/ 414 | #right-sidebar { /* right sidebar color */ 415 | background-color: var(--right-sidebar-bg) !important; 416 | border-left: var(--right-sidebar-border-left); 417 | padding-right: 55px; 418 | } 419 | #roam-right-sidebar-content { /* sidebar spacing */ 420 | margin-top: -50px; 421 | padding: 40px 0px 0px 30px; 422 | } 423 | #right-sidebar > div:nth-child(2) { /* hides close sidebard button */ 424 | visibility: hidden; 425 | } 426 | #roam-right-sidebar-content > * { /* right sidebar divider padding and margin */ 427 | margin: 0px 0px 0 20px !important; 428 | padding: 10px 0px 10px 0px !important; 429 | } 430 | /* right sidebar divider color */ 431 | #roam-right-sidebar-content [style*="border-bottom: 1px solid rgb(138, 155, 168);"] { 432 | border-bottom: 1px solid var(--divider-color) !important; 433 | } 434 | /* right sidebar divider padding */ 435 | #roam-right-sidebar-content [style*="margin-left: 16px; margin-right: 16px;"] { 436 | padding: 5px 0px; /* padding around divider */ 437 | margin-left: 0px !important; 438 | margin-right: 0px !important; 439 | } 440 | /* header for sidebar page OPENED — moves it left 35px */ 441 | #roam-right-sidebar-content .flex-h-box .bp3-button.bp3-minimal.bp3-icon-minus.bp3-small { 442 | margin-left: -35px; 443 | margin-right: 10px; 444 | } 445 | /* header for sidebar page COLLAPSED — moves it right */ 446 | #roam-right-sidebar-content .flex-h-box .bp3-button.bp3-minimal.bp3-icon-plus.bp3-small { 447 | margin-left: -35px; 448 | margin-right: 20px; 449 | } 450 | 451 | /*---------------------------------- 452 | #SEARCH & ICONS 453 | ------------------------------------*/ 454 | .bp3-input, 455 | .bp3-input[readonly] { /*SEARCH INPUT */ 456 | color: var(--search-font-color); 457 | outline: 0; 458 | border: 0; 459 | border-radius: var(--search-border-radius); 460 | background: var(--search-bg); 461 | } 462 | .bp3-input:focus, .bp3-input.bp3-active { /*SEARCH INPUT ACTIVE*/ 463 | box-shadow: 0 0 0 1px var(--search-outline); 464 | } 465 | .bp3-popover { /* SEARCH RESULT SHADOW */ 466 | box-shadow:0px 4px 22px #00000035 !important; 467 | border-radius: var(--search-border-radius); 468 | border: var(--inline-search-border); 469 | } 470 | .bp3-input-group>.bp3-input-left-container>.bp3-icon, .bp3-input-group>.bp3-icon { /* search icon */ 471 | color: var(--minirightbar-icon-color); 472 | } 473 | .bp3-button.bp3-minimal { /* sidebar filter count */ 474 | color: var(--icon-color); 475 | } 476 | .bp3-button.bp3-minimal:hover { /* button hover */ 477 | color: var(--icon-color-hover); 478 | background-color: var(--icon-bg-hover); 479 | } 480 | .bp3-button[class*="bp3-icon-"]::before { /* top right icon color */ 481 | color: var(--icon-color); 482 | } 483 | .bp3-button .bp3-icon, .bp3-button .bp3-icon-standard, .bp3-button .bp3-icon-large { /* filter icon color */ 484 | color: var(--icon-color); 485 | } 486 | 487 | /* top right icon color */ 488 | .rm-topbar .bp3-button[class*="bp3-icon-"]::before { 489 | color: var(--minirightbar-icon-color); 490 | } 491 | /* top right toolbar filter icon color */ 492 | .rm-topbar .bp3-button .bp3-icon, .bp3-button .bp3-icon-standard, .bp3-button .bp3-icon-large { /* filter icon color */ 493 | color: var(--minirightbar-icon-color); 494 | } 495 | /* fix sync/saving position */ 496 | .rm-saving-icon { 497 | margin-left: -1px; 498 | } 499 | /* pin color */ 500 | .bp3-button.bp3-minimal.bp3-icon-pin.bp3-small.pinned:before { 501 | color: var(--pin-color) !important; 502 | } 503 | 504 | /*--- Block References ---*/ 505 | .rm-block-ref { /* linked refs */ 506 | cursor: alias; 507 | border-bottom: 1px solid var(--block-ref-border-bottom); 508 | } 509 | .rm-block-ref:hover { 510 | background-color: var(--block-ref-hover-bg); 511 | } 512 | 513 | /*---------------------------------- 514 | #DATEPICKER 515 | ------------------------------------*/ 516 | .bp3-icon-calendar { 517 | border: none; 518 | } 519 | .bp3-datepicker { /* modal padding */ 520 | background: var(--datepicker-bg); 521 | padding: 6px; 522 | } 523 | .bp3-html-select .bp3-icon { /* month and year double carrots */ 524 | color: var(--datepicker-bg); 525 | } 526 | /* month back and forth bg color */ 527 | button.bp3-button.bp3-minimal.DayPicker-NavButton.DayPicker-NavButton--next, 528 | button.bp3-button.bp3-minimal.DayPicker-NavButton.DayPicker-NavButton--prev { 529 | background: var(--datepicker-bg) !important; 530 | } 531 | /* month back and forth carrot color / outside month date color */ 532 | span.bp3-icon.bp3-icon-chevron-left, 533 | span.bp3-icon.bp3-icon-chevron-right, 534 | .bp3-datepicker .DayPicker-Day.DayPicker-Day--outside { 535 | color: var(--datepicker-altfont-color); 536 | } 537 | /* month and year hover state */ 538 | .bp3-html-select.bp3-minimal select:hover, .bp3-select.bp3-minimal select:hover { 539 | background: #0073f9; 540 | color: white; 541 | } 542 | .bp3-datepicker .DayPicker-Weekday abbr[title]{ /* abbreviated day titles */ 543 | border-bottom: none; 544 | font-size: 13px; 545 | color: var(--datepicker-altfont-color); 546 | cursor: default; 547 | } 548 | .bp3-datepicker-caption+.bp3-divider { /* divider */ 549 | border-bottom: none; 550 | } 551 | .bp3-datepicker .DayPicker-Day > div:first-child { /* date appearances */ 552 | line-height: 1.15em; 553 | font-size: 14px; 554 | font-weight: 600; 555 | } 556 | .bp3-datepicker .DayPicker-Day:hover { /* hover background color */ 557 | background: #0073f9; 558 | color: white; 559 | } 560 | /* today bg color */ 561 | .bp3-datepicker .DayPicker-Day.DayPicker-Day--isToday .bp3-datepicker-day-wrapper { 562 | background: var(--datepicker-day-wrapper); 563 | } 564 | .bp3-html-select select, .bp3-select select { 565 | color: var(--main-font-color); 566 | } 567 | 568 | /*---------------------------------- 569 | #POPUP MENUS 570 | ------------------------------------*/ 571 | /* right/top toolbar popover menu */ 572 | .bp3-popover .bp3-popover-content, 573 | .bp3-menu { 574 | background: var(--inline-search-bg); 575 | color: var(--popover-font-color); 576 | border-radius: 4px; 577 | } 578 | /* right/top toolbad popover hover */ 579 | .bp3-menu-item:hover, .bp3-submenu .bp3-popover-target.bp3-popover-open >.bp3-menu-item{ 580 | background-color: var(--search-selected-row) !important; 581 | } 582 | .bp3-popover .bp3-popover-arrow-fill { 583 | fill: var(--inline-search-bg) !important; 584 | } 585 | .bp3-popover .bp3-popover-arrow-border { 586 | fill:white !important; 587 | } 588 | .bp3-elevation-3 { /* forward slash popup */ 589 | background-color: var(--inline-search-bg) !important; 590 | border-radius: var(--inline-search-border-radius); 591 | border: var(--inline-search-border); 592 | box-shadow:0px 4px 22px #00000035; 593 | } 594 | .bp3-elevation-3 .dont-unfocus-block[style*="background-color: rgb(213, 218, 223);"], 595 | .bp3-popover-content .flex-v-box.rm-menu-item[style*="background-color: rgb(213, 218, 223);"] { /* selected row color */ 596 | background-color: var(--search-selected-row) !important; 597 | } 598 | .bp3-elevation-3 .dont-unfocus-block span[style*="color: rgb(129, 145, 157);"] { /* June 2020 added icons in popover menu */ 599 | color: var(--icon-color) !important; 600 | } 601 | .bp3-popover .bp3-popover-content button.bp3-button { /* popover buttons */ 602 | background: var(--inline-search-button-bg-color)!important; 603 | color: var(--main-font-color); 604 | } 605 | .bp3-text-overflow-ellipsis { /* foward slash popup text color */ 606 | color: var(--popover-font-color); 607 | } 608 | .bp3-popover-content .flex-h-box strong{ /* bold text color in popovers for "Includes" & "Removes" */ 609 | color: #DCDEDD !important; 610 | border-bottom: none !important; 611 | } 612 | 613 | /*---------------------------------- 614 | #ALL PAGES 615 | ------------------------------------*/ 616 | /* all page search input bg color */ 617 | .bp3-input.bp3-round.bp3-minimal.search-input { 618 | background-color: hsl(0, 0%, 98%) !important; 619 | } 620 | /* row dividers */ 621 | .rm-all-pages .table .rm-pages-row { 622 | border-bottom: 1px solid var(--allpage-bottom-border-color); 623 | } 624 | /* unchecked checkbox bg color */ 625 | .bp3-control.bp3-checkbox .bp3-control-indicator { 626 | background: var(--checkmark-bg-color); 627 | border: none; 628 | } 629 | 630 | /* checked appearance */ 631 | .bp3-control input:checked ~ .bp3-control-indicator { 632 | background: var(--checkedmark-bg-color); 633 | box-shadow: inset 0 0 0 1px rgba(253, 5, 5, 0.0), inset 0 -1px 0 rgba(222, 78, 5, 0.0); 634 | } 635 | .sorted-header-text { 636 | color: var(--main-font-color); 637 | } 638 | /* current sort carrot color */ 639 | .sorting-button-group .sort-button.focused { 640 | color: #3d71ff; 641 | } 642 | .rm-clickable-pill { 643 | opacity: 1; 644 | background-color: var(--pages-mentions-level-bg); 645 | color: var(--pages-mentions-font-color); /*text color */ 646 | } 647 | .rm-clickable-pill.level1-pill { /* newly added—in June 2020—all pages mentions counter */ 648 | opacity: 1; 649 | background-color: var(--pages-mentions-level1-bg); 650 | color: var(--pages-mentions-font-color); /*text color */ 651 | } 652 | .rm-clickable-pill.level2-pill { /* newly added—in June 2020—all pages mentions counter */ 653 | opacity: 1; 654 | background-color: var(--pages-mentions-level2-bg); 655 | color: var(--pages-mentions-font-color); /*text color */ 656 | } 657 | .rm-all-pages .table .rm-pages-row .rm-pages-col { 658 | color: var(--main-font-color); 659 | } 660 | .rm-pages-row:first-child { /* styles color of all pages header */ 661 | background-color: var(--pages-header-row) !important; 662 | } 663 | 664 | /*---------------------------------- 665 | #KANBAN & TABLES 666 | ------------------------------------*/ 667 | .kanban-board { 668 | padding: 12px; 669 | border: var(--kanban-board-border); 670 | border-radius: var(--kanban-board-border-radius); 671 | background-color: var(--kanban-board-bg); 672 | } 673 | .kanban-board .kanban-column-container { 674 | display: flex; 675 | overflow-x: scroll; 676 | } 677 | .kanban-column { 678 | cursor: pointer; 679 | flex: 1 0 200px; 680 | flex-wrap: nowrap; 681 | margin: var(--kanban-column-margin); 682 | padding: 4px; 683 | min-width: 200px; 684 | background-color: var(--kanban-column-bg); 685 | } 686 | .kanban-card { 687 | margin: 6px; 688 | padding: 8px; 689 | background-color: var(--kanban-card-bg); 690 | color: var(--kanban-card-font-color); 691 | border-radius: var(--kanban-card-border-radius); 692 | border: var(--kanban-card-border); 693 | } 694 | 695 | /*--- Table ---*/ 696 | .roam-table th, .roam-table td, .roam-table tr { 697 | border: var(--table-border); 698 | } 699 | 700 | /*----------------------------------------------------------------------- 701 | #LOADING ANIMATION —— https://codepen.io/ivillamil/pen/dokmG 702 | -------------------------------------------------------------------------*/ 703 | .loading-astrolabe { 704 | height: 50px; 705 | width: 50px; 706 | } 707 | .loading-astrolabe { 708 | animation-name: rotate; 709 | animation-duration: 1s; 710 | animation-delay: 0s; 711 | animation-iteration-count: infinite; 712 | animation-timing-function: linear; 713 | animation-direction: normal; 714 | } 715 | .loading-astrolabe:before, 716 | .loading-astrolabe:after { 717 | border-radius: 50%; 718 | content: ''; 719 | display: block; 720 | height: 20px; 721 | width: 20px; 722 | } 723 | .loading-astrolabe:before { 724 | animation: ball1 1s infinite; 725 | background-color: var(--astrolabe-bg-color); 726 | box-shadow: 30px 0 0 var(--astrolabe-bg-color); 727 | margin-bottom: 10px; 728 | } 729 | .loading-astrolabe:after { 730 | animation: ball2 1s infinite; 731 | background-color: var(--astrolabe-bg-color); 732 | box-shadow: 30px 0 0 var(--astrolabe-bg-color); 733 | } 734 | 735 | @keyframes rotate { 736 | 0% { 737 | -webkit-transform: rotate(0deg) scale(0.8); 738 | -moz-transform: rotate(0deg) scale(0.8); 739 | } 740 | 50% { 741 | -webkit-transform: rotate(360deg) scale(1.2); 742 | -moz-transform: rotate(360deg) scale(1.2); 743 | } 744 | 100% { 745 | -webkit-transform: rotate(720deg) scale(0.8); 746 | -moz-transform: rotate(720deg) scale(0.8); 747 | } 748 | } 749 | @keyframes ball1 { 750 | 0% { 751 | box-shadow: 30px 0 0 var(--astrolabe-bg-color); 752 | } 753 | 50% { 754 | box-shadow: 0 0 0 var(--astrolabe-bg-color); 755 | margin-bottom: 0; 756 | -webkit-transform: translate(15px,15px); 757 | -moz-transform: translate(15px, 15px); 758 | } 759 | 100% { 760 | box-shadow: 30px 0 0 var(--astrolabe-bg-color); 761 | margin-bottom: 10px; 762 | } 763 | } 764 | @keyframes ball2 { 765 | 0% { 766 | box-shadow: 30px 0 0 var(--astrolabe-bg-color); 767 | } 768 | 50% { 769 | box-shadow: 0 0 0 var(--astrolabe-bg-color); 770 | margin-top: -20px; 771 | -webkit-transform: translate(15px,15px); 772 | -moz-transform: translate(15px, 15px); 773 | } 774 | 100% { 775 | box-shadow: 30px 0 0 var(--astrolabe-bg-color); 776 | margin-top: 0; 777 | } 778 | } 779 | 780 | /*--- hides original ---*/ 781 | .loading-astrolabe img, 782 | .loading-astrolabe svg { 783 | display: none; 784 | } 785 | .bp3-spinner { 786 | visibility: hidden; 787 | } 788 | .bp3-spinner > * { 789 | visibility: visible; 790 | } 791 | .bp3-spinner-head { 792 | stroke: rgb(var(--color-primary)) !important; 793 | } 794 | 795 | /*---------------------------------- 796 | #LOAD FADE IN ANIMATION 797 | ------------------------------------*/ 798 | .roam-body { 799 | animation: fadein .3s; 800 | -moz-animation: fadein .3s; /* Firefox */ 801 | -webkit-animation: fadein .3s; /* Safari and Chrome */ 802 | -o-animation: fadein .3s; /* Opera */ 803 | } 804 | @keyframes fadein { 805 | from { 806 | opacity:0; 807 | } 808 | to { 809 | opacity:1; 810 | } 811 | } 812 | @-moz-keyframes fadein { /* Firefox */ 813 | from { 814 | opacity:0; 815 | } 816 | to { 817 | opacity:1; 818 | } 819 | } 820 | @-webkit-keyframes fadein { /* Safari and Chrome */ 821 | from { 822 | opacity:0; 823 | } 824 | to { 825 | opacity:1; 826 | } 827 | } 828 | @-o-keyframes fadein { /* Opera */ 829 | from { 830 | opacity:0; 831 | } 832 | to { 833 | opacity: 1; 834 | } 835 | } 836 | 837 | /*---------------------------------- 838 | #OTHER 839 | ------------------------------------*/ 840 | 841 | #roam-sidebar-logo img, 842 | #roam-sidebar-logo span { /* more subtle logo */ 843 | opacity: 0.0; 844 | } 845 | 846 | hr { /*DONE*/ 847 | margin-top: 20px; 848 | margin-bottom: 20px; 849 | border: 0; 850 | border-top: 1px solid var(--hr-color); 851 | } 852 | 853 | blockquote { 854 | font-size: 1.2em; 855 | border-left: 3px solid var(--blockquote-border-color); 856 | box-sizing: border-box; 857 | color: var(--blockquote-font-color); 858 | margin: 0px 0px 20px; 859 | min-height: 0px; 860 | min-width: 0px; 861 | padding: 10px 20px; 862 | background-color: var(--blockquote-bg); 863 | text-align: justify; 864 | text-justify: inter-word; 865 | } 866 | blockquote .small, blockquote footer, blockquote small { 867 | display: block; 868 | font-size: 80%; 869 | line-height: 1.42857143; 870 | color: var(--blockquote-cite); 871 | } 872 | .rm-bq { /* MD blockquote color, thanks alok and d9ifxw3yev */ 873 | background-color: var(--codemirror-bg); 874 | } 875 | 876 | #buffer { /* HIDES BOTTOM RIGHT HELP ICON */ 877 | visibility: hidden; 878 | } 879 | 880 | /* Inline Select, thanks eatondpe for spotting this! */ 881 | select { 882 | background-color: var(--select-bg-color) !important; 883 | border: 1px solid var(--select-border-color)!important; 884 | border-radius: 4px; 885 | padding: 1px 1px 2px 2px; 886 | font-size: 0.95em; 887 | } 888 | 889 | .rm-emoji-button { 890 | background-color: var(--emoji-bg) !important; 891 | border: var(--emoji-border) !important; 892 | } 893 | 894 | .rm-query { 895 | border: var(--query-border); 896 | border-radius: var(--query-border-radius); 897 | padding-bottom: var(--query-padding-bottom); 898 | } 899 | .rm-query .rm-query-title { 900 | color: var(--query-title-font-color); 901 | background-color: var(--query-title-bg); 902 | padding: var(--s1); 903 | } 904 | 905 | 906 | /* ------------------------*/ 907 | /* HOTFIXES */ 908 | /* ------------------------*/ 909 | 910 | /* breadcrumb bg */ 911 | .zoom-path-view .rm-zoom-mask { 912 | background-color: #fff0 !important; 913 | } 914 | 915 | .rm-pomodoro { 916 | background: transparent !important; 917 | border: 1px solid var(--pomo-border); 918 | color: var(--main-font-color) !important; 919 | } 920 | .rm-pomodoro.running { 921 | background: var(--pomo-bg) !important; 922 | border: 1px solid var(--pomo-running-border); 923 | color: var(--pomo-running-font-color) !important; 924 | } 925 | .rm-pomodoro.break { 926 | background: var(--pomo-break-bg) !important; 927 | border: 1px solid var(--pomo-break-border); 928 | color: var(--pomo-break-font-color) !important; 929 | } 930 | 931 | .rm-topbar { 932 | opacity: 1 !important; 933 | background-color: rgba(238, 0, 0, 0) !important; 934 | height: 10px; 935 | width: 10px; 936 | display: inline-block; 937 | padding-left: calc(100vw - 35px) !important; 938 | padding-top: 10px !important; 939 | position: fixed !important; 940 | left: 0px; 941 | transition: none !important; 942 | z-index: 99999; 943 | } 944 | 945 | /* TOP RIGHT TOOLBAR ICONS */ 946 | .rm-topbar > .bp3-popover-wrapper { 947 | width: 490px; /* CRL EDIT */ 948 | flex-direction: column; /* CRL EDIT */ 949 | height: 1px !important; 950 | align-items: start !important; 951 | /*text-align: center;*/ 952 | 953 | position: -webkit-sticky !important; 954 | position: sticky !important; 955 | left: 0px; 956 | } 957 | .rm-topbar > .bp3-popover-wrapper > * { 958 | flex: 0 0 15px !important; /* CRL EDIT */ 959 | margin: auto !important; 960 | } 961 | .rm-topbar > div >.bp3-button:first-child { 962 | align-self: start !important; 963 | position: fixed !important; 964 | left: 16px; 965 | top: 16px; /* CRL EDIT */ 966 | z-index: 9999999 !important; 967 | } 968 | .rm-topbar > div > *:nth-child(2) { 969 | margin-top:0px !important; /* CRL EDIT */ 970 | } 971 | /*#return*/ 972 | .rm-topbar .bp3-icon-calendar { 973 | background: var(--body-bg) !important; 974 | border: none; 975 | } 976 | .rm-topbar .bp3-icon-calendar:hover { 977 | background: var(--icon-bg-hover) !important; 978 | } 979 | 980 | /* SOME BLACKMAGIC TO GET SEARCH ICON TO FUNCTION LIKE OTHER BUTTONS —AZLEN ELZA */ 981 | 982 | .rm-topbar .bp3-icon-search { 983 | padding: 4px; 984 | border-radius: 3px; 985 | margin: 0 !important; 986 | cursor: pointer; 987 | } 988 | 989 | /* style contains `200px` if search bar is NOT selected */ 990 | /* hovering search bar in this mode == hovering icon itself */ 991 | /* we must however have the search bar in front of the icon (but invisible) so that it can focus on click */ 992 | /* very hacky :P */ 993 | 994 | .rm-find-or-create-wrapper[style*="200px"]:hover .bp3-icon-search, .rm-topbar .bp3-icon-search:hover { 995 | background-color: var(--icon-bg-hover); 996 | color: var(--minirightbar-icon-color) !important; 997 | } 998 | .rm-topbar .bp3-icon-search svg { 999 | padding: 1px; 1000 | color: var(--minirightbar-icon-color) !important; 1001 | 1002 | } 1003 | /* fix centering on calendar icon */ 1004 | .rm-topbar .bp3-icon-calendar { margin: 0 !important } 1005 | 1006 | .rm-find-or-create-wrapper { 1007 | width: 20px !important; 1008 | } 1009 | .rm-find-or-create-wrapper .bp3-overlay { 1010 | position: fixed; 1011 | top: 50px; 1012 | left: calc(50% - 325px); 1013 | width: 650px; 1014 | } 1015 | 1016 | /*---------------------------------- 1017 | #SEARCH BAR 1018 | ------------------------------------*/ 1019 | 1020 | #find-or-create-input { /* search form*/ 1021 | opacity: 0; 1022 | z-index: 10000; /* bring in front of icon to keep clickable */ 1023 | cursor: pointer; 1024 | box-shadow: 0 0 0 100VW rgba(15, 15, 15, 0.0); /* CRL EDIT */ 1025 | } 1026 | /* change search button size CRL EDIT*/ 1027 | #find-or-create-input.bp3-input { 1028 | padding: 0px 14px; 1029 | } 1030 | /*#find-or-create-input:active, */#find-or-create-input:focus { 1031 | opacity: 1; 1032 | position: fixed; 1033 | width: 600px; 1034 | top: 100px; 1035 | left: calc(50% - 600px / 2); 1036 | cursor: text; 1037 | } 1038 | 1039 | 1040 | #find-or-create-input { 1041 | border-radius: 3px 3px 0px 0px; /* CRL EDIT */ 1042 | border: 1px solid var(--divider-color); /* CRL EDIT */ 1043 | box-shadow: 0 0 0 200VH rgba(0, 0, 0, .07); 1044 | font-size: 18px; 1045 | padding: 20px 20px; 1046 | z-index: 10000; 1047 | } 1048 | /* if input is empty (no menu) then use all-around border-radius*/ 1049 | #find-or-create-input[value=""] { 1050 | border-radius: 3px; 1051 | } 1052 | 1053 | /* highlight around search box */ 1054 | #find-or-create-input:focus { 1055 | padding: 25.5px; /* CRL EDIT */ 1056 | } 1057 | 1058 | /* styling dropdown menu*/ 1059 | .rm-find-or-create-wrapper .bp3-popover { 1060 | z-index: 10000; 1061 | border-radius: 0px 0px 3px 3px; 1062 | border: 1px solid var(--divider-color); 1063 | overflow: hidden; 1064 | background: var(--body-bg); 1065 | box-shadow:0px 4px 22px #00000015 !important; 1066 | } 1067 | 1068 | /* prevent coloured menu */ 1069 | .rm-find-or-create-wrapper .bp3-popover-content, .rm-find-or-create-wrapper .bp3-menu { 1070 | background-color: transparent !important; 1071 | } 1072 | 1073 | /* properly position search menu overlay */ 1074 | .rm-find-or-create-wrapper .bp3-overlay { 1075 | top: 180px; 1076 | width: 600px; 1077 | left: calc(50% + 300px); 1078 | z-index: 999999; 1079 | } 1080 | 1081 | /* new page text */ 1082 | .rm-find-or-create-wrapper .rm-new-page { 1083 | color: rgb(var(--left-sidebar-bg)) !important; 1084 | } 1085 | 1086 | /* selected search result */ 1087 | .rm-find-or-create-wrapper .rm-menu-item[style*="background"] { 1088 | background-color: var(--search-selected-row) !important; 1089 | } 1090 | 1091 | /* search results highlighted words */ 1092 | .rm-find-or-create-wrapper .rm-menu-item .rm-search-list-item span[style*="yellow"], 1093 | .rm-pages-title-col span[style*="yellow"]{ 1094 | background-color: var(--highlight-background-color) !important; 1095 | color: var(--main-font-color); 1096 | } 1097 | .bp3-input { 1098 | background-color: var(--body-bg) !important; 1099 | color: var(--main-font-color) !important; 1100 | } 1101 | .bp3-input::placeholder { 1102 | background-color: var(--body-bg) !important; 1103 | color: var(--main-font-color) !important; 1104 | opacity: 0.3; 1105 | } 1106 | .rm-search-list-item { 1107 | color: var(--main-font-color) !important; 1108 | opacity: 0.6; 1109 | } 1110 | 1111 | /* HOT FIXES */ 1112 | .zoom-path-view .rm-zoom-mask { 1113 | background-color: #fff0; 1114 | } 1115 | 1116 | /* HOT FIX 2 JAN 3 2021, thanks Morgan Sutherland! */ 1117 | .roam-topbar { 1118 | z-index: 9999999 !important; 1119 | } 1120 | .roam-sidebar-container { 1121 | z-index: 999 !important; 1122 | } 1123 | 1124 | /* HOT FIX 3 JUNE 25 2021, thanks Morgan @zyigo! */ 1125 | .bp3-menu-item.menu-item { 1126 | color: var(--sidebar-font-color)!important; 1127 | } 1128 | .bp3-menu-item.menu-item:hover { 1129 | color: var(--sidebar-font-color-hover)!important; 1130 | } 1131 | .bp3-menu-item.setting { 1132 | background-color: var(--theme-white-1)!important; 1133 | } 1134 | .bp3-menu-item.setting:hover { 1135 | background-color: var(--search-selected-row)!important; 1136 | } 1137 | .roam-body .roam-app .roam-sidebar-container .rm-graph-dropdown a { 1138 | color: var(--sidebar-font-color)!important; 1139 | } 1140 | 1141 | /*------------------------------------------------------ 1142 | #MOBILE — TESTING THIS SECTION, MAY NOT WORK WELL 1143 | --------------------------------------------------------*/ 1144 | @media only screen and (max-width: 600px) { 1145 | 1146 | #right-sidebar { /* right sidebar color */ 1147 | background-color: var(--right-sidebar-bg) !important; 1148 | border-left: var(--right-sidebar-border-left); 1149 | padding-right: 0px; 1150 | } 1151 | #rm-mobile-bar { 1152 | background-color: var(--theme-white-1) !important; 1153 | border-top: 1px solid var(--divider-color); 1154 | height: 30px !important; 1155 | } 1156 | .bp3-button.bp3-minimal.rm-mobile-button.dont-unfocus-block { 1157 | padding: 2px 2px !important; 1158 | } 1159 | .bp3-button.bp3-minimal.bp3-icon-media.rm-mobile-button.dont-unfocus-block, 1160 | .bp3-button.bp3-minimal.bp3-icon-draw.rm-mobile-button.dont-unfocus-block, 1161 | .bp3-button.bp3-minimal.bp3-icon-arrow-down.rm-mobile-button.dont-unfocus-block, 1162 | .bp3-button.bp3-minimal.bp3-icon-arrow-up.rm-mobile-button.dont-unfocus-block { 1163 | margin: 4px 0px !important; 1164 | } 1165 | #find-or-create-input { 1166 | max-width: calc(100% - 20px); 1167 | left: 10px !important; 1168 | } 1169 | .rm-find-or-create-wrapper .bp3-transition-container { 1170 | position: fixed !important; 1171 | max-width: calc(100vw - 20px); 1172 | top: 152px !important; 1173 | left: 10px !important; 1174 | } 1175 | .rm-find-or-create-wrapper .bp3-transition-container { 1176 | transform: none !important; 1177 | } 1178 | } 1179 | -------------------------------------------------------------------------------- /lux.css: -------------------------------------------------------------------------------- 1 | /* 2 | Theme: Roam Lux Theme 3 | Version: 2.0.3 4 | Edits by: Cal Robert Lee (https://www.calrobert.com/) 5 | Colors by: Cal Robert Lee 6 | 7 | Hotfix: - embed temporary patch 8 | - nested ref temp patch 9 | 10 | Notes: - Thanks to the supportive people on r/RoamResearch, GitHub and Twitter! 11 | - I have been changing a lot of thing in my professional career! Which is the reason for some of the delays 12 | - Super excited to have been selected to be on RoamResearch's Official theme's page! 13 | - To install copy "@import url('https://calrobertlee.github.io/roam-themes/lux.css');" to roam/css page (without the quotes) 14 | */ 15 | 16 | 17 | /* IMPORT CORE THEME */ 18 | @import url('https://calrobertlee.github.io/roam-themes/core.css'); 19 | 20 | :root { 21 | /* THEME COLORS */ 22 | --theme-blue-1: #87ddf7; 23 | --theme-gray-1: #d9d9d9; 24 | --theme-white-1: #1c1c1c; 25 | 26 | /* PRIMARY FONTS */ 27 | --main-font: 'Inter', sans-serif; 28 | --main-font-color: var(--theme-gray-1); 29 | --main-font-size: 1.0em; 30 | 31 | /* FONT COLORS */ 32 | 33 | --page-link-color: var(--theme-blue-1); 34 | --page-bracket-color: #5B5B5B; 35 | --external-link-color: var(--theme-blue-1); 36 | --external-link-hover-color: hsla(194, 88%, 75%, .73); 37 | --alias-hover-color: hsl(230, 83%, 73%); 38 | --daily-notes-link-color: none; 39 | --sidebar-link-color: none; 40 | --title-color: #c9d1d9; 41 | --ref-title-color: #c9d1d9; 42 | --header-color: var(--theme-gray-1); 43 | --strong: var(--theme-gray-1); 44 | --emphasis: var(--theme-gray-1); 45 | --highlight-font-color: var(--theme-gray-1); 46 | --highlight-background-color: #7a5e23; 47 | --highlight-link-color: var(--theme-blue-1); 48 | --highlight-padding: 4px 5px 4px 5px; 49 | --reference-header-color: #2d3c41; 50 | --reference-header-underline-color: #2d3c417d; 51 | --sidebar-font-color: #696969; 52 | --sidebar-font-color-hover: #8f8f8f; 53 | --sidebar-hover-bg: none; 54 | --sidebar-font-hover-color: #8f8f8f; 55 | --sidebar-shorcut-color: #9f9f9f52; 56 | 57 | --tag-font-color: #5a5d5e; 58 | --tag-bg-color: #222526; 59 | --tag-border-radius: 10px; 60 | --tag-border: 1px solid #383c3d96; 61 | --tag-padding: 1px 5px 2px; 62 | --tagHover-font-color: #595d5f; 63 | --tagHover-bg-color: #2e3233; 64 | --tagHover-border: 1px solid #43464787; 65 | 66 | --bullet-color: #dedede; 67 | --bullet-closed-color: #9de4fa4a; 68 | --bullet-closed-border-color: #9de4fa4a; 69 | --multibar: hsl(210, 7%, 25%); 70 | /*--bullet-position: ;*/ 71 | 72 | --checkmark-top: -1px; 73 | --checkmark-left: -2px; 74 | --checkmark-height: 14px; 75 | --checkmark-width: 14px; 76 | --checkmark-border-radius: 4px; 77 | --checkmark-color: 1px solid var(--theme-white-1); 78 | --checkmark-border: 1px solid hsl(207, 6%, 34%); 79 | --checkmark-bg-color: var(--theme-white-1); 80 | --checkedmark-border: 1px solid var(--theme-blue-1); 81 | --checkedmark-bg-color: #9ee4fa; 82 | 83 | --code-bg: #272b2f; 84 | --code-font: 'Source Code Pro', 'Courier New', Courier, monospace; 85 | --code-font-color: #DCDEDD; 86 | --code-font-size: 1.0em; 87 | --code-border: 1px solid #3c3f44; 88 | 89 | --codemirror-bg: #222629; 90 | --codemirror-border-color: #323438; 91 | --codemirror-border-radius: 3px; 92 | --codemirror-linenumber: #515355; 93 | --code-matchingbracket-color: #ead64c; 94 | 95 | --cm-comment: #7f848e; 96 | --cm-def: #d19a66; 97 | --cm-keyword: #c678dd; 98 | --cm-callee: #56b6c2; 99 | --cm-operator: #56b6c2; 100 | --cm-builtin: #56b6c2; 101 | --cm-string: #98c379; 102 | --cm-variable-3: #56b6c2; 103 | --cm-variable-2: #e06c75; 104 | --cm-variable: #e5c07b; 105 | --cm-tag: #e06c75; 106 | --cm-property: #61afef; 107 | --cm-number: #d19a66; 108 | --cm-atom: #d19a66; 109 | --cm-qualifier: #d19a66; 110 | 111 | --new-page-color: none; 112 | 113 | --ref-count-font-size: 12px; 114 | 115 | /* BACKGROUNDS & OUTLINES */ 116 | 117 | --body-bg: var(--theme-white-1); 118 | --topbar-bg: #1e202200; 119 | --topbar-border-bottom: 0px solid #32343880; 120 | --left-sidebar-bg: #161616; 121 | --left-sidebar-border-right: 0px solid #36383c; 122 | --left-sidebar-divider-color: #45474a00; 123 | --right-sidebar-bg: var(--theme-white-1); 124 | --right-sidebar-border-left: 2px solid hsla(220, 6%, 5%, .31); 125 | --divider-color: #43474a; 126 | --allpage-bottom-border-color: #2d3133; 127 | --reference-item-bg: #1e1f20; 128 | --reference-item-border-radius: 6px; 129 | --reference-item-border: 1px solid hsl(194, 0%, 18%); 130 | --block-highlight: #2c3035; 131 | --block-highlight-bg: #34641F; 132 | 133 | --popover-bg: #2c2e31; 134 | --popover-font-color: #DCDEDD; 135 | --popover-border: 0.5px solid rgb(70, 73, 77); 136 | 137 | --inline-search-bg: var(--theme-white-1); 138 | --inline-search-border-radius: 6px; 139 | --inline-search-border: 1px solid #46494d; 140 | --inline-search-button-bg-color: var(--theme-white-1); 141 | 142 | --datepicker-bg: var(--inline-search-bg); 143 | --datepicker-day-wrapper: #36393c; 144 | --datepicker-altfont-color: #545d63; 145 | 146 | --search-font-color: var(--theme-gray-1); 147 | --search-body-font-color: #DCDEDD; 148 | --search-outline: #1e6897; 149 | --search-bg: var(--theme-white-1); 150 | --search-border-radius: 3px; 151 | --search-selected-row: #2c2d30; 152 | 153 | --block-ref-bg: none; 154 | --block-ref-hover: none; 155 | --block-ref-hover-bg: #353a40; 156 | --block-ref-border-bottom: #393d42; 157 | 158 | /*--pages-row-highlight: ;*/ 159 | --pages-header-row: var(--theme-white-1); 160 | --pages-mentions-level-bg: #3c96ff; 161 | --pages-mentions-level1-bg: #3d71ff; 162 | --pages-mentions-level2-bg: #3c50ff; 163 | --pages-mentions-font-color: var(--theme-white-1); 164 | 165 | --icon-color: #7d8386; 166 | --icon-bg-hover: #dadfe61c; 167 | --icon-color-hover: #dae0e4; 168 | --minirightbar-icon-color: #454d52; 169 | --pin-color: #ff6312; 170 | 171 | /* MISC */ 172 | 173 | --kanban-board-bg: #212326; 174 | --kanban-board-border: 1px solid #32343880; 175 | --kanban-board-border-radius: 10px; 176 | --kanban-column-bg: #272a2d; 177 | --kanban-column-font-color: var(--main-font-color); 178 | --kanban-column-margin: 4px 8px 0px 4px; 179 | --kanban-card-bg: var(--theme-white-1); 180 | --kanban-card-font-color: var(--main-font-color); 181 | --kanban-card-border-radius: 4px; 182 | --kanban-card-border: 1px solid #323539; 183 | 184 | --table-border: 1px solid #565656; 185 | 186 | --embed-container-bg: #2c3035; 187 | 188 | --astrolabe-bg-color: #242729; 189 | 190 | --hr-color: #434547; 191 | 192 | --blockquote-font-color: #ebebeb; 193 | --blockquote-border-color: #5bd8ff; 194 | --blockquote-bg: #1E2022; 195 | --blockquote-cite: #ebebeb; 196 | 197 | --encrypted-font-color: #5a9baf; 198 | --encrypted-bg: hsl(212, 14%, 15%); 199 | --encrypted-font-size: 13px; 200 | --encrypted-font-weight: 300; 201 | --encrypted-border-radius: 4px; 202 | --encrypted-padding: 2px 4px; 203 | 204 | --select-bg-color: var(--theme-white-1); 205 | --select-border-color: #3a3f44; 206 | 207 | --emoji-bg: #1f2830; 208 | --emoji-border: 0px solid none; 209 | --emoji-color: none; 210 | 211 | --pomo-bg: #312625; 212 | --pomo-border: var(--divider-color); 213 | --pomo-running-border: #862C26; 214 | --pomo-running-font-color: #E5493E; 215 | --pomo-break-bg: #20372D; 216 | --pomo-break-border: #10764C; 217 | --pomo-break-font-color: #0D7A4D; 218 | 219 | --query-results-border: none; 220 | --query-border: 1px solid #3e3b28a8; 221 | --query-border-radius: 6px; 222 | --query-padding-bottom: 16px; 223 | --query-title-font-color: #d0b94482; 224 | --query-title-bg: #3d381e8f; 225 | } 226 | 227 | /* TEMP PATCH FOR EMBED */ 228 | .rm-embed-container { 229 | background-color: hsl(213, 10%, 18%); 230 | } 231 | 232 | .rm-embed-container .rm-embed-container { 233 | background-color: hsl(213, 10%, 13%); 234 | } 235 | 236 | .rm-embed-container .rm-embed-container .rm-embed-container{ 237 | background-color: hsl(213, 10%, 18%); 238 | } 239 | 240 | .rm-embed-container .rm-embed-container .rm-embed-container .rm-embed-container{ 241 | background-color: hsl(213, 10%, 13%); 242 | } 243 | 244 | /* TEMP PATCH FOR INLINE & NESTED REFS, THANKS b1uegh0st!!! */ 245 | .rm-nested-refs { 246 | background-color: hsl(49, 95%, 30%); 247 | color: hsl(0, 0%, 91%); 248 | } 249 | .rm-inline-references { 250 | background-color: hsl(213, 10%, 14%); 251 | } 252 | .rm-block__self .rm-block__ref-count.rm-active { 253 | background-color: #1f2022; 254 | } 255 | .rm-zoom-path .rm-zoom-item { 256 | color: hsl(0, 0%, 91%); 257 | } --------------------------------------------------------------------------------