├── .gitignore ├── .stylelintrc.yaml ├── LICENSE ├── README.md ├── custom.css ├── icon.png ├── package.json └── preview.png /.gitignore: -------------------------------------------------------------------------------- 1 | TODO.md 2 | .history 3 | -------------------------------------------------------------------------------- /.stylelintrc.yaml: -------------------------------------------------------------------------------- 1 | rules: 2 | comment-whitespace-inside: "always" 3 | indentation: "tab" 4 | max-line-length: 120 5 | no-eol-whitespace: true 6 | number-max-precision: 4 7 | property-no-vendor-prefix: true 8 | selector-pseudo-element-colon-notation: "double" 9 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Turiiya 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [All Day Theme for logseq](https://github.com/tobealive/logseq-allday-theme) 2 | 3 | A Theme that concentrates on providing the best workflow experience, high readability and minimal eye strain. 4 | 5 | It attempts to accomplish this through styling decisions in typography, colors and spacing.
6 | Which results in an initially good overview of the note content section and reduces the need for manual line-breaks. 7 | 8 | ## Preview 9 | 10 | ![Preview](https://raw.githubusercontent.com/tobealive/logseq-allday-theme/main/preview.png) 11 | 12 | ## Instructions 13 | 14 | Switching between dark / light mode is possible under `Settings → General → Theme modes`. 15 | 16 | The theme's implemented bullet threading may be impaired when using the additional 17 | _Bullet Threading_ plugin on top of it. If you have installed the plugin, I'll recommend turning it off while using the theme. 18 | 19 | > **INFO:** New versions often Logseq might introduce changes that require adaptation of styles. If you experience an issue, we might have missed out on implementing it for a new version. Please feel free to open an issue and help to keep the theme even better up to date ❤️. 20 | 21 | ## Credits 22 | 23 | Shout out to [dev theme](https://github.com/pengx17/logseq-dev-theme). The integration of the bullet threading feature was based on their implementation of it. Great work! 24 | -------------------------------------------------------------------------------- /custom.css: -------------------------------------------------------------------------------- 1 | /* Table of Contents 2 | {{{ ==> 3 | 1. Global 4 | 1.1. Color Palette & Variables 5 | 1.2. Layout Corrections 6 | 1.3. Typography 7 | 1.4. Links & Buttons 8 | 2. Page Components 9 | 2.1. Content Blocks 10 | 2.2. Tasks 11 | 2.3. Code 12 | 2.4. PDF Viewer 13 | 3. Bullet threading 14 | 4. Plugin specific 15 | 4.1. Tabs 16 | 4.2. Table of Contents 17 | <== }}} */ 18 | 19 | /* { == 1. Global ==> */ 20 | @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); 21 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap"); 22 | :root { 23 | font-size: 1.0375rem; 24 | } 25 | 26 | /* {{ 1.1.Color Palette & Variables */ 27 | /* Styles that apply to both dark & light mode */ 28 | html[data-theme="dark"], 29 | .dark-theme, 30 | html[data-theme="light"], 31 | .white-theme { 32 | --ls-font-family: "Roboto", sans-serif; 33 | --ls-main-content-max-width: 860px; 34 | --ls-page-text-size: 1em; 35 | --ls-page-title-size: 2rem; 36 | --ls-link-ref-text-color: var(--ls-link-text-color); 37 | --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); 38 | --ls-head-text-color: var(--ls-link-text-color); 39 | --ls-title-text-color: var(--ls-primary-text-color); 40 | --ls-tag-text-color: var(--ls-link-text-color); 41 | --ls-tag-text-hover-color: var(--ls-link-text-hover-color); 42 | --ls-search-background-color: var(--ls-secondary-background-color); 43 | --ls-border-color: var(--ls-quaternary-background-color); 44 | --ls-secondary-border-color: var(--ls-secondary-text-color); 45 | --ls-page-properties-background-color: var(--ls-secondary-background-color); 46 | --ls-block-properties-background-color: var(--ls-secondary-background-color); 47 | --ls-block-ref-link-text-color: var(--ls-link-text-color); 48 | --ls-page-blockquote-color: var(--ls-primary-text-color); 49 | --ls-page-blockquote-bg-color: var(--ls-secondary-background-color); 50 | --ls-page-blockquote-border-color: var(--ls-border-color); 51 | --ls-icon-color: var(--ls-link-text-color); 52 | --ls-search-icon-color: var(--ls-link-text-color); 53 | --color-level-1: var(--ls-secondary-background-color); 54 | --color-level-2: var(--ls-tertiary-background-color); 55 | --color-level-3: var(--ls-quaternary-background-color); 56 | --ls-scrollbar-background-color: var(--ls-primary-background-color); 57 | --ls-page-inline-code-color: var(--ls-primary-text-color); 58 | --ls-block-bullet-color: var(--ls-quaternary-background-color); 59 | --ls-block-bullet-active-color: var(--ls-link-text-color); 60 | --ls-block-bullet-threading-width: 1px; 61 | --ls-bullet-closed-color: var(--ls-secondary-text-color); 62 | } 63 | /* Dark theme & Light themes left sidebar */ 64 | html[data-theme="dark"], 65 | .dark-theme, 66 | html[data-theme="light"] .left-sidebar-inner, 67 | html[data-theme="light"] .ls-left-sidebar-open .cp__header > .l { 68 | --ls-accent-rgb: 178, 219, 219; 69 | --ls-primary-background-color: #1f2428; 70 | --ls-secondary-background-color: #24292e; 71 | --ls-tertiary-background-color: #282e34; 72 | --ls-quaternary-background-color: #292e33; 73 | --ls-selection-background-color: rgba(246, 246, 246, 0.1); 74 | --ls-table-tr-even-background-color: rgba(246, 246, 246, 0.065); 75 | --ls-active-primary-color: #8ec2c2; 76 | --ls-active-secondary-color: #eeffff; 77 | --ls-guideline-color: rgba(246, 246, 246, 0.2); 78 | --primary-text-opacity: 0.98; 79 | --ls-primary-text-color: rgba(195, 200, 205, var(--primary-text-opacity)); 80 | --ls-secondary-text-color: rgba(195, 200, 205, 0.66); 81 | --ls-link-text-color: rgba(var(--ls-accent-rgb), var(--primary-text-opacity)); 82 | --ls-link-text-hover-color: rgba(244, 244, 244, var(--primary-text-opacity)); 83 | --ls-slide-background-color: var(--ls-primary-background-color); 84 | --ls-block-highlight-color: rgba(246, 246, 246, 0.1); 85 | --ls-page-inline-code-bg-color: rgba(246, 246, 246, 0.2); 86 | --ls-scrollbar-foreground-color: rgba(246, 246, 246, 0.15); 87 | --ls-scrollbar-thumb-hover-color: rgba(246, 246, 246, 0.3); 88 | --ls-right-sidebar-code-bg-color: var(--ls-page-inline-code-bg-color); 89 | --ls-block-bullet-border-color: rgba(246, 246, 246, 0.15); 90 | } 91 | /* Light theme */ 92 | html[data-theme="light"], 93 | .white-theme { 94 | --ls-accent-rgb: 30, 125, 124; 95 | --ls-primary-background-color: #f0f0f1; 96 | --ls-secondary-background-color: #e8e9ea; 97 | --ls-tertiary-background-color: rgba(225, 225, 225, 0.9); 98 | --ls-quaternary-background-color: #e0e1e1; 99 | --ls-selection-background-color: rgba(0, 0, 0, 0.1); 100 | --ls-active-primary-color: #8ec2c2; 101 | --ls-secondary-text-color: rgba(33, 33, 33, 0.8); 102 | --ls-link-text-color: rgba(var(--ls-accent-rgb), 0.9); 103 | --ls-link-text-hover-color: rgba(var(--ls-accent-rgb), 1); 104 | --ls-page-inline-code-bg-color: rgba(0, 0, 0, 0.1); 105 | --ls-page-blockquote-border-color: rgba(var(--ls-accent-rgb), 0.25); 106 | --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.2); 107 | --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.3); 108 | --ls-block-bullet-active-color: #86b6b6; 109 | --ls-block-bullet-border-color: rgba(128, 128, 128, 0.1); 110 | } 111 | /* }} */ 112 | 113 | /* {{ 1.2. Layout corrections */ 114 | /* Helps to not overlap content with tabs plugin */ 115 | #main-content-container { 116 | margin-top: 1.9em; 117 | padding-top: 1.9em !important; 118 | } 119 | /* Add some white space to the right. 120 | (This is because the actual start of the content on the left side is offset if we include the bullets and spacing.) */ 121 | .cp__sidebar-main-content { 122 | margin-right: 24px; 123 | } 124 | /* }} */ 125 | 126 | /* {{ 1.3. Typography */ 127 | /* Headings */ 128 | .editor-inner .uniline-block:is(.h1, .h2, .h3, .h4, .h5, .h6), 129 | .editor-inner :is(.h1, .h2, .h3, .h4, .h5, .h6), 130 | .ls-block :is(h1, h2, h3, h4, h5, h6) { 131 | position: relative; 132 | margin: 0; 133 | } 134 | .editor-inner .uniline-block:is(.h1), 135 | .editor-inner :is(.h1), 136 | .ls-block :is(h1) { 137 | top: 0.15em; 138 | margin: -0.15em 0 0.15em; 139 | } 140 | .editor-inner .uniline-block:is(.h2), 141 | .editor-inner :is(.h2), 142 | .ls-block :is(h2) { 143 | top: -0.1em; 144 | /* positive margin leaves a gap between bullet and indentation lines */ 145 | /* margin: 0.25em 0 0; */ 146 | } 147 | .editor-inner .uniline-block:is(.h3, .h4, .h5, .h6), 148 | .editor-inner :is(.h3, .h4, .h5, .h6), 149 | .ls-block :is(h3, h4) { 150 | top: -0.25em; 151 | margin: 0.25em 0 -0.25em; 152 | } 153 | .editor-inner .uniline-block:is(.h3), 154 | .editor-inner :is(.h3), 155 | .ls-block :is(h3) { 156 | font-size: 1.2em; 157 | } 158 | .editor-inner .uniline-block:is(.h4), 159 | .editor-inner :is(.h4), 160 | .ls-block :is(h4) { 161 | font-size: 1.1em; 162 | } 163 | .editor-inner .uniline-block:is(.h5), 164 | .editor-inner :is(.h5), 165 | .ls-block :is(h5) { 166 | font-size: 1.05em; 167 | } 168 | .editor-inner .uniline-block:is(.h6), 169 | .editor-inner :is(.h6), 170 | .ls-block :is(h6) { 171 | font-size: 1em; 172 | } 173 | .cp__themes-installed > .it > section > strong { 174 | font-size: 0.875em; 175 | } 176 | /* }} */ 177 | 178 | /* {{ 1.4. Links & Buttons */ 179 | html[data-theme="light"] .cp__header a, 180 | html[data-theme="light"] .cp__header button, 181 | html[data-theme="light"] .extensions__pdf-toolbar > .inner > .r a, 182 | html[data-theme="light"] a svg { 183 | color: #6d7272; 184 | } 185 | .cp__header .add-graph-btn { 186 | border: none; 187 | } 188 | .cp__header .add-graph-btn span { 189 | margin-top: 0 !important; 190 | } 191 | html[data-theme="light"] .cp__sidebar-left-layout a { 192 | color: var(--ls-secondary-text-color); 193 | } 194 | html[data-theme="light"] h1 a { 195 | color: var(--ls-title-text-color); 196 | } 197 | html[data-theme="light"] a:hover { 198 | background-color: var(--ls-quaternary-background-color); 199 | color: var(--ls-primary-text-color); 200 | } 201 | /* External Links */ 202 | a.external-link { 203 | border-bottom: 1px dashed; 204 | } 205 | a.external-link::after { 206 | position: relative; 207 | bottom: -2px; 208 | left: -1px; 209 | display: inline-block; 210 | margin: 0 1px 0 5px; 211 | width: 14px; 212 | height: 14px; 213 | background-color: var(--ls-link-text-color); 214 | content: ""; 215 | transition: 0.3s; 216 | 217 | mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGDSURBVHgBtZaNcYMwDIUfGzgbqBuUDcwkaTdoJ4AN0gmaTNJu0GyQdILSCUjRIa6yMT+x4d29O7CNPmMLmQzryYhZ39hIDChbX1vflPn+2JqwoigA8t20fsEKogCslrZ6C6iG/UhAo/qLwBhCpCzc2T+OjNu1PquxB0TqpIK8e33k3Rdw3zJKnyqIVe2VtF1UW4b/PW0QuawaaDyYH5iBVyQCSQA2ALvJPRRQT8QgUdUEjPWs+r6QqHIGlsPdv/1UMIuuNJ3Fh4UwI8+WcAvAZQxEcJNCm2ZgOYZVpodRCPaAYblqxP0MK4wv42sA9oGJzPRLEQez8oDBfILwhHl1eAuOcL/RgZ48mF+uqhnY3dI1b781zHgBl8AKuSZEiOCe1KF2P/V1UiQBa6+Ps7OBu4w2FQi4308RmJDWCePH02K9qSCcQLuRcTncZbaIFKH7HPRe8ptmYp4A/0bUCO93lDhgg2U/RqPlag3o4toYK0JXmvoM1fW0QuIhmmEezvoVJ+sPourrpWEel2gAAAAASUVORK5CYII="); 218 | -webkit-mask-box-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGDSURBVHgBtZaNcYMwDIUfGzgbqBuUDcwkaTdoJ4AN0gmaTNJu0GyQdILSCUjRIa6yMT+x4d29O7CNPmMLmQzryYhZ39hIDChbX1vflPn+2JqwoigA8t20fsEKogCslrZ6C6iG/UhAo/qLwBhCpCzc2T+OjNu1PquxB0TqpIK8e33k3Rdw3zJKnyqIVe2VtF1UW4b/PW0QuawaaDyYH5iBVyQCSQA2ALvJPRRQT8QgUdUEjPWs+r6QqHIGlsPdv/1UMIuuNJ3Fh4UwI8+WcAvAZQxEcJNCm2ZgOYZVpodRCPaAYblqxP0MK4wv42sA9oGJzPRLEQez8oDBfILwhHl1eAuOcL/RgZ48mF+uqhnY3dI1b781zHgBl8AKuSZEiOCe1KF2P/V1UiQBa6+Ps7OBu4w2FQi4308RmJDWCePH02K9qSCcQLuRcTncZbaIFKH7HPRe8ptmYp4A/0bUCO93lDhgg2U/RqPlag3o4toYK0JXmvoM1fW0QuIhmmEezvoVJ+sPourrpWEel2gAAAAASUVORK5CYII="); 219 | mask-position: center; 220 | -webkit-mask-box-position: center; 221 | mask-repeat: no-repeat; 222 | -webkit-mask-box-repeat: no-repeat; 223 | mask-size: 14px 14px; 224 | -webkit-mask-box-size: 14px 14px; 225 | object-fit: cover; 226 | } 227 | a.external-link:hover::after { 228 | background-color: var(--ls-link-text-hover-color); 229 | } 230 | /* custom colors in buttons, hints etc */ 231 | .bg-indigo-600 { 232 | color: var(--ls-primary-background-color); 233 | transition: 0.3s; 234 | } 235 | .dark-theme .bg-indigo-600 { 236 | background-color: rgba(var(--ls-accent-rgb), 0.8); 237 | } 238 | .dark-theme .hover\:bg-indigo-700:hover, 239 | .hover\:bg-indigo-500:hover { 240 | background-color: rgb(var(--ls-accent-rgb)); 241 | opacity: 1; 242 | } 243 | .dark-theme button.bg-white { 244 | border-color: var(--ls-block-bullet-border-color); 245 | background-color: var(--ls-secondary-background-color); 246 | color: var(--ls-secondary-text-color); 247 | } 248 | .dark-theme button.bg-white:hover { 249 | background-color: var(--ls-tertiary-background-color); 250 | color: var(--ls-primary-text-color); 251 | } 252 | .white-theme .bg-indigo-600 { 253 | background-color: rgba(var(--ls-accent-rgb), 0.66); 254 | } 255 | .white-theme .hover\:bg-indigo-700:hover { 256 | background-color: rgba(var(--ls-accent-rgb), 0.8); 257 | opacity: 1; 258 | } 259 | /* pre */ 260 | .hljs { 261 | background: transparent; 262 | } 263 | /* hints */ 264 | .dark-theme .Tooltip__label { 265 | width: 11ch; 266 | border: 1px solid var(--ls-primary-text-color); 267 | background: var(--ls-secondary-background-color); 268 | } 269 | .dark-theme .Tooltip__label::after { 270 | border-bottom-color: var(--ls-primary-text-color); 271 | } 272 | /* block references link count mark */ 273 | a.open-block-ref-link { 274 | background-color: var(--ls-link-text-color); 275 | color: var(--ls-primary-background-color); 276 | } 277 | /* brackets in links */ 278 | .page-reference .bracket { 279 | color: var(--ls-link-text-color); 280 | opacity: 0.5; 281 | } 282 | /* Tags */ 283 | a.tag[data-ref] { 284 | padding: 0.2rem 0.3rem; 285 | border-radius: 0.5rem 0rem; 286 | background: var(--ls-link-text-color); 287 | color: var(--ls-primary-background-color); 288 | white-space: nowrap; 289 | letter-spacing: 0.05em; 290 | font-weight: bold; 291 | font-size: 0.75rem; 292 | line-height: 0.75rem; 293 | transition: 0.3s; 294 | } 295 | html[data-theme="light"] a.tag[data-ref] { 296 | background-color: rgba(var(--ls-accent-rgb), 0.66); 297 | } 298 | a.tag[data-ref]:hover { 299 | border-radius: 0rem 0.5rem; 300 | opacity: 1; 301 | } 302 | html[data-theme="light"] a.tag[data-ref]:hover { 303 | color: var(--ls-primary-background-color); 304 | } 305 | /* Highlights */ 306 | mark { 307 | padding: 2px 4px; 308 | border-radius: 3px; 309 | background: rgba(246, 246, 246, 0.8); 310 | color: var(--ls-primary-background-color); 311 | font-size: 14px; 312 | } 313 | html[data-theme="light"] mark { 314 | background: rgba(0, 0, 0, 0.5); 315 | } 316 | /* fix color page-reference when mark text */ 317 | mark .page-ref, 318 | mark .page-reference .bracket { 319 | color: var(--ls-primary-background-color); 320 | font-weight: bold; 321 | } 322 | /* Search results */ 323 | html[data-theme="light"] .search-results-wrap a .rounded.border { 324 | border-color: var(--ls-tertiary-background-color); 325 | background-color: var(--ls-primary-background-color); 326 | } 327 | /* <== }}} */ 328 | 329 | /* { == 2. Page Components ==> */ 330 | /* {{ 2.1. Content Blocks */ 331 | .block-body ul > li { 332 | margin: 0.5em 0; 333 | } 334 | .block-body ul > li:first-child { 335 | margin-top: 0; 336 | } 337 | .block-body ul > li:last-child { 338 | margin-bottom: 0; 339 | } 340 | .ls-block { 341 | padding: 0.3em 0; 342 | } 343 | .ls-block[level="1"] { 344 | padding-top: 0.6em; 345 | } 346 | .block-children { 347 | padding: 0.16em 0; 348 | } 349 | #lazy-blocks > div .ls-block[haschild] > div > .block-content-wrapper::before { 350 | top: 0.9rem; 351 | } 352 | /* }} */ 353 | 354 | /* {{ 2.2. Tasks */ 355 | /* Checkboxes */ 356 | .form-checkbox { 357 | margin-top: 0 !important; 358 | margin-right: 0.5em !important; 359 | width: 0.9em; 360 | height: 0.9em; 361 | border: 0.1em solid var(--ls-secondary-text-color); 362 | background-color: var(--ls-primary-background-color); 363 | opacity: 0.75; 364 | } 365 | /* Status switcher */ 366 | .marker-switch { 367 | position: relative; 368 | display: inline-block; 369 | margin: 0 0.6em 0 0; 370 | padding: 0.175em 0.15em 0; 371 | border-radius: 0; 372 | color: var(--ls-secondary-text-color); 373 | text-align: center; 374 | font-weight: 500; 375 | font-size: 0.8em; 376 | line-height: 1; 377 | opacity: 0.66; 378 | cursor: pointer; 379 | } 380 | .form-checkbox:hover { 381 | background-color: var(--ls-secondary-background-color); 382 | border-color: var(--ls-link-text-color); 383 | opacity: 0.9; 384 | transform: none; 385 | } 386 | .form-checkbox:checked { 387 | border-color: var(--ls-secondary-text-color); 388 | background-color: var(--ls-secondary-background-color); 389 | } 390 | html[data-theme="light"] .form-checkbox:checked { 391 | background-color: var(--ls-active-primary-color); 392 | } 393 | /* Status switcher */ 394 | /* Status switcher - bordered variant */ 395 | /* .form-checkbox { 396 | margin-top: 0 !important; 397 | margin-right: 0.5em !important; 398 | width: 0.95em; 399 | height: 0.95em; 400 | border: 0.1em solid var(--ls-secondary-text-color); 401 | background-color: var(--ls-primary-background-color); 402 | opacity: 0.75; 403 | } 404 | .marker-switch { 405 | position: relative; 406 | top: -0.1em; 407 | display: inline-block; 408 | margin: 0 0.6em 0 0; 409 | padding: 0.175em 0.33em 0.033em; 410 | border: 0.1em solid var(--ls-border-color); 411 | border-radius: 0; 412 | color: var(--ls-secondary-text-color); 413 | text-align: center; 414 | font-weight: 500; 415 | font-size: 0.7em; 416 | line-height: 1; 417 | opacity: 1; 418 | opacity: 0.75; 419 | cursor: pointer; 420 | } */ 421 | .dark-theme .marker-switch:hover { 422 | border-color: var(--ls-link-text-color); 423 | color: var(--ls-link-text-color); 424 | } 425 | .canceled, 426 | .done { 427 | opacity: 0.5; 428 | } 429 | .done { 430 | text-decoration: none; 431 | } 432 | /* }} */ 433 | 434 | /* {{ 2.3. Code */ 435 | /* Inline code */ 436 | :not(pre) > code { 437 | padding: 2px 5px !important; 438 | } 439 | .extensions__code .code-editor { 440 | margin-top: 0; 441 | } 442 | /* Code Calc result position fix */ 443 | .extensions__code-calc { 444 | top: 11px; 445 | padding: 0 0.75em; 446 | } 447 | .extensions__code-lang { 448 | background: var(--ls-secondary-background-color); 449 | } 450 | /* CodeMirror */ 451 | .extensions__code > .CodeMirror { 452 | border-radius: 0.25rem; 453 | background: var(--ls-secondary-background-color); 454 | font-family: "Fira Code", monospace; 455 | line-height: 1.2; 456 | } 457 | .CodeMirror-hscrollbar { 458 | cursor: default; 459 | } 460 | .cm-s-solarized.cm-s-dark, 461 | .cm-s-solarized.cm-s-white, 462 | .cm-s-solarized.cm-s-light { 463 | border: 7px solid var(--ls-secondary-background-color); 464 | background-color: var(--ls-primary-background-color); 465 | color: var(--ls-primary-text-color); 466 | text-shadow: none; 467 | } 468 | .CodeMirror-gutters { 469 | background-color: #f7f7f7; 470 | } 471 | .cm-s-solarized.cm-s-dark .CodeMirror-gutters { 472 | background-color: rgba(40, 42, 51, 0.5); 473 | } 474 | html[data-theme="light"] .cm-s-solarized.cm-s-dark .CodeMirror-gutters { 475 | background-color: rgba(40, 42, 51, 0.1); 476 | } 477 | .cm-s-solarized.cm-s-light .CodeMirror-gutters { 478 | background-color: rgba(40, 42, 51, 0.033); 479 | } 480 | .CodeMirror-linenumber { 481 | color: var(--ls-primary-text-color); 482 | text-shadow: none; 483 | opacity: 0.5; 484 | } 485 | .cm-s-solarized.cm-s-dark .CodeMirror-linenumber { 486 | color: var(--ls-primary-text-color); 487 | text-shadow: none; 488 | opacity: 0.5; 489 | } 490 | .cm-s-solarized.cm-s-dark div.CodeMirror-selected { 491 | background: var(--ls-selection-background-color); 492 | } 493 | .cm-s-solarized.cm-s-light div.CodeMirror-selected { 494 | background: var(--ls-selection-background-color); 495 | } 496 | .CodeMirror-selected { 497 | background: var(--ls-selection-background-color); 498 | } 499 | .CodeMirror-focused .CodeMirror-selected { 500 | background: var(--ls-selection-background-color); 501 | } 502 | .CodeMirror-lines { 503 | padding-right: 1em; 504 | } 505 | /* }} */ 506 | 507 | /* {{ 2.4. PDF Viewer */ 508 | #pdf-layout-container[data-theme="dark"], 509 | #pdf-layout-container[data-theme="light"] { 510 | background-color: var(--ls-quaternary-background-color); 511 | } 512 | #pdf-layout-container[data-theme="dark"] .textLayer { 513 | background-color: #282e34; 514 | } 515 | #pdf-layout-container[data-theme="light"] .textLayer { 516 | background-color: var(--ls-primary-background-color); 517 | opacity: 0.125; 518 | } 519 | #pdf-layout-container[data-theme="dark"] .extensions__pdf-toolbar, 520 | #pdf-layout-container[data-theme="light"] .extensions__pdf-toolbar { 521 | right: 0; 522 | width: 100%; 523 | } 524 | #pdf-layout-container[data-theme="dark"] .extensions__pdf-toolbar .inner, 525 | #pdf-layout-container[data-theme="light"] .extensions__pdf-toolbar .inner { 526 | margin-right: 1em; 527 | } 528 | #pdf-layout-container[data-theme="dark"] .extensions__pdf-toolbar .inner .buttons, 529 | #pdf-layout-container[data-theme="light"] .extensions__pdf-toolbar .inner .buttons { 530 | border-radius: 0.25rem; 531 | } 532 | #pdf-layout-container[data-theme="dark"] .extensions__pdf-toolbar { 533 | background: linear-gradient(0deg, rgba(246, 246, 246, 0) 10%, var(--ls-secondary-background-color) 100%); 534 | } 535 | #pdf-layout-container[data-theme="light"] .extensions__pdf-toolbar { 536 | background: linear-gradient(0deg, rgba(246, 246, 246, 0) 10%, rgb(31, 36, 40, 0.3) 100%); 537 | } 538 | /* <== }}} */ 539 | 540 | /* { == 3. Bullet Threading ==> */ 541 | :not(:dsl-query) .block-control { 542 | min-width: 0; 543 | width: 1.55em; 544 | } 545 | .block-children { 546 | border-color: var(--ls-quaternary-background-color); 547 | border-left-width: var(--ls-block-bullet-threading-width); 548 | border-radius: 0; 549 | } 550 | .block-children-left-border:hover { 551 | background-color: var(--ls-block-bullet-border-color); 552 | } 553 | .block-content-wrapper { 554 | position: relative; 555 | } 556 | .bullet-container { 557 | position: relative; 558 | width: 14px !important; 559 | height: 14px !important; 560 | transform: translate(1px, -1px); 561 | /* align-items: end; */ 562 | } 563 | /* Block bullet path in nested block only */ 564 | .ls-block .bullet { 565 | background-color: var(--ls-block-bullet-active-color); 566 | box-shadow: 0 0 0 1px var(--ls-block-bullet-active-color); 567 | } 568 | .ls-block div.items-center { 569 | position: relative; 570 | } 571 | .ls-block > .items-baseline { 572 | align-items: center; 573 | } 574 | .ls-block:not(:focus-within) .bullet { 575 | background-color: var(--ls-block-bullet-color); 576 | box-shadow: none; 577 | transform: scale(1); 578 | } 579 | .ls-block:not(:focus-within) > .items-baseline { 580 | align-items: center; 581 | } 582 | .ls-block .ls-block > div > div.items-center::before { 583 | position: absolute; 584 | top: calc(-100% + var(--ls-block-bullet-threading-width) * 0.5 - 0.1em); 585 | right: 10px; 586 | bottom: 50%; 587 | left: calc(-0.5 * var(--ls-block-bullet-threading-width)); 588 | border-bottom: var(--ls-block-bullet-threading-width) solid transparent; 589 | border-left: var(--ls-block-bullet-threading-width) solid transparent; 590 | border-bottom-left-radius: 6px; 591 | content: ""; 592 | pointer-events: none; 593 | } 594 | .ls-block .ls-block:focus-within > div > div.items-center::before { 595 | border-color: var(--ls-block-bullet-active-color); 596 | } 597 | .ls-block .block-children > .ls-block::before { 598 | position: absolute; 599 | top: -1.19em; 600 | bottom: 0; 601 | left: calc(-0.5 * var(--ls-block-bullet-threading-width)); 602 | border-left: var(--ls-block-bullet-threading-width) solid transparent; 603 | content: ""; 604 | pointer-events: none; 605 | } 606 | .ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before { 607 | border-color: var(--ls-block-bullet-active-color); 608 | } 609 | .ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before { 610 | border-color: transparent; 611 | } 612 | .ls-block[haschild] > div > .block-content-wrapper::before { 613 | position: absolute; 614 | top: 0.9em; 615 | bottom: 0; 616 | left: -1em; 617 | border-left: var(--ls-block-bullet-threading-width) solid transparent; 618 | content: ""; 619 | pointer-events: none; 620 | } 621 | .ls-block[haschild]:focus-within > div > .block-content-wrapper .block-content::before { 622 | border-color: var(--ls-block-bullet-active-color); 623 | } 624 | /* disable first fracking level for embedded content */ 625 | .embed > div > div > div > div > div > div::before, 626 | .embed-block > div > div > div > div > div > div > div::before, 627 | .custom-query .blocks-container > div > div > .ls-block > div > .items-center::before { 628 | border-color: transparent !important; 629 | } 630 | /* algin embeded pages to content width */ 631 | .block-content .flex-1 { 632 | overflow: hidden; 633 | } 634 | /* disable for doc mode */ 635 | .doc-mode div.items-center::before, 636 | .doc-mode div.items-center::after, 637 | .doc-mode .ls-block::before, 638 | .doc-mode .ls-block::after { 639 | display: none; 640 | } 641 | /* <== }}} */ 642 | 643 | /* { == 4. Plugin specific ==> */ 644 | /* {{ 4.1. Tabs Plugin */ 645 | #main-content-container { 646 | margin-top: 1.9em; 647 | padding-top: 1.9em !important; 648 | } 649 | html[data-theme="dark"] #logseq-tabs_lsp_main { 650 | filter: sepia(0) saturate(0.8) opacity(0.85) hue-rotate(360deg) grayscale(0.05) brightness(0.85) invert(0.04); 651 | /* border-bottom: 1px solid var(--ls-quaternary-background-color); */ 652 | } 653 | /* }} */ 654 | 655 | /* {{ 4.2. Table of Contents Plugin */ 656 | [id*="logseq-tocgen--toc-slot"] { 657 | padding-left: 0.5em; 658 | } 659 | .kef-tocgen-page span { 660 | position: relative; 661 | top: -0.1em; 662 | } 663 | .kef-tocgen-block-collapse { 664 | border-color: var(--ls-quaternary-background-color) !important; 665 | } 666 | .kef-tocgen-page::before, 667 | .kef-tocgen-block::before { 668 | position: relative; 669 | top: 0.7em; 670 | left: 0.5em; 671 | z-index: 1; 672 | display: inline-block; 673 | width: 0.375em; 674 | height: 0.4em; 675 | border-radius: 50%; 676 | background-color: var(--ls-block-bullet-color); 677 | content: " "; 678 | pointer-events: none; 679 | } 680 | [data-ref="logseq-tocgen"] .kef-tocgen-block-children { 681 | margin-left: 1.2em; 682 | } 683 | button.kef-tocgen-arrow { 684 | position: relative; 685 | margin: 0; 686 | margin-left: -0.75em; 687 | padding: 0; 688 | padding-left: 1.2em; 689 | } 690 | button.kef-tocgen-arrow svg { 691 | position: relative; 692 | top: 0.05em; 693 | left: -0.53em; 694 | width: 0.8em; 695 | height: 0.8em; 696 | border-radius: 50%; 697 | background-color: var(--ls-block-bullet-border-color); 698 | color: transparent; 699 | } 700 | .kef-tocgen-page button.kef-tocgen-arrow svg { 701 | top: -0.095em; 702 | left: -0.54em; 703 | } 704 | button.kef-tocgen-arrow svg[style*="transform"] { 705 | left: -1.2em; 706 | margin-right: 0.3em; 707 | width: 0.5em; 708 | height: 0.5em; 709 | background-color: transparent; 710 | filter: none; 711 | } 712 | button.kef-tocgen-arrow:hover svg[style*="transform"] { 713 | color: var(--ls-link-text-color); 714 | } 715 | /* <== }}} */ 716 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttytm/logseq-allday-theme/44542cdbe899af9fcb88147ce26787d4eb0df972/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "logseq-allday-theme", 3 | "author": "Turiiya", 4 | "version": "1.1.19", 5 | "description": "A clean productivity theme. Styled for high readability and minimal eye strain.", 6 | "logseq": { 7 | "themes": [ 8 | { 9 | "name": "All Day Theme", 10 | "url": "./custom.css" 11 | } 12 | ], 13 | "id": "logseq-allday-theme", 14 | "icon": "./icon.png" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ttytm/logseq-allday-theme/44542cdbe899af9fcb88147ce26787d4eb0df972/preview.png --------------------------------------------------------------------------------