├── .gitignore ├── LICENSE ├── README.md ├── assets ├── images │ ├── collapsed-dark.png │ ├── collapsed-darker.png │ ├── collapsed-light.png │ ├── enhanced-showcase.png │ ├── header-accordion.png │ ├── header-horizontal.jpg │ ├── original-readme-header.jpg │ ├── original-showcase.png │ ├── others-view.png │ ├── search-view.png │ ├── sidebar-dark.png │ ├── sidebar-darker.png │ └── sidebar-light.png └── thumbnail │ ├── thumbnail-low-res.jpg │ └── thumbnail.jpg └── themes ├── classic ├── notion-dark-classic.css ├── notion-darker-classic.css └── notion-light-classic.css └── enhanced ├── notion-dark-enhanced.css ├── notion-darker-enhanced.css └── notion-light-enhanced.css /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 adrian-fuertes 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 | ![header](assets/images/header-horizontal.jpg) 2 | 3 | # Notion for Typora 4 | A faithful reproduction of the original Notion theme, available in both dark mode and light mode. 5 | 6 | ## Styles 7 | 8 | The theme is available in two styles: `original` and `enhanced`. The original style features simpler quotations and tables, mimicking the Notion app. The enhanced style darkens quotation backgrounds and adds alternating colors to the table backgrounds, improving visibility. 9 | 10 | Additionally, in the original style, code fences more closely resemble those in Notion, having bright red text and a gray background. Inline code is more muted in the enhanced version. 11 | 12 | 13 | Original style | Enhanced style 14 | :-------------------------:|:-------------------------: 15 | ![](assets/images/original-showcase.png) | ![](assets/images/enhanced-showcase.png) 16 | 17 | ## Install 18 | 19 | - Download the latest [zipped themes package](https://github.com/adrian-fuertes/typora-notion-theme/releases). 20 | - Copy the chosen `.css` file(s) to your Typora theme library (you can open the folder in ` preferences > appearance > themes`). 21 | - Launch or restart Typora and choose the theme from the menu. 22 | 23 | > Note: This theme has been created and tested in macOS 12, though it should work on Windows too. 24 | > 25 | > Having `SF Mono` or `Fira Code` installed is highly recommended for appropriate code display. 26 | 27 | ## Screenshots 28 | 29 | ![others-view](assets/images/others-view.png) 30 | ![search-view](assets/images/search-view.png) 31 | ![light-view](assets/images/sidebar-light.png) 32 | ![dark-view](assets/images/sidebar-dark.png) 33 | ![darker-view](assets/images/sidebar-darker.png) 34 | 35 | 36 | -------------------------------------------------------------------------------- /assets/images/collapsed-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/collapsed-dark.png -------------------------------------------------------------------------------- /assets/images/collapsed-darker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/collapsed-darker.png -------------------------------------------------------------------------------- /assets/images/collapsed-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/collapsed-light.png -------------------------------------------------------------------------------- /assets/images/enhanced-showcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/enhanced-showcase.png -------------------------------------------------------------------------------- /assets/images/header-accordion.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/header-accordion.png -------------------------------------------------------------------------------- /assets/images/header-horizontal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/header-horizontal.jpg -------------------------------------------------------------------------------- /assets/images/original-readme-header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/original-readme-header.jpg -------------------------------------------------------------------------------- /assets/images/original-showcase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/original-showcase.png -------------------------------------------------------------------------------- /assets/images/others-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/others-view.png -------------------------------------------------------------------------------- /assets/images/search-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/search-view.png -------------------------------------------------------------------------------- /assets/images/sidebar-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/sidebar-dark.png -------------------------------------------------------------------------------- /assets/images/sidebar-darker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/sidebar-darker.png -------------------------------------------------------------------------------- /assets/images/sidebar-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/images/sidebar-light.png -------------------------------------------------------------------------------- /assets/thumbnail/thumbnail-low-res.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/thumbnail/thumbnail-low-res.jpg -------------------------------------------------------------------------------- /assets/thumbnail/thumbnail.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrian-fuertes/typora-notion-theme/e3d9a50524378a401df7bde792773e71f2a90cd6/assets/thumbnail/thumbnail.jpg -------------------------------------------------------------------------------- /themes/classic/notion-dark-classic.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Text editor */ 3 | --bg-color: #2f3437; 4 | --text-color: #ebebeb; 5 | --body-text-color: #ebebeb; 6 | --text-cursor-color: var(--text-color); 7 | 8 | --secondary-text-color: #73726e; 9 | --text-accent-color: #393c3f; 10 | --bg-color-dark: #3f4447; 11 | 12 | --text-highlight-color: #fff; 13 | --text-highlight-bg: #4f4029; 14 | 15 | --code-fence-text-color: #ec5757; 16 | --code-fence-bg-color: #3f4447; 17 | 18 | --blockquote-bg-color: var(--bg-color); 19 | --blockquote-accent-color: var(--text-color); 20 | --blockquote-text-color: var(--text-color); 21 | 22 | --light-trait-100: #ebebeb; 23 | --light-trait-200: #ebebeb; 24 | --light-trait-300: #ebebeb; 25 | --light-trait-400: #ebebeb; 26 | 27 | --todo-bg-color: #2eaadc; 28 | --todo-tick-color: #fff; 29 | 30 | --search-select-bg-color: #2e443a; 31 | --search-select-text-color: #eaedec; 32 | 33 | --search-hit-text-color: #eceded; 34 | --search-hit-bg-color: #5e3436; 35 | 36 | --url-text-color: var(--text-color); 37 | --url-underline-color: var(--text-color); 38 | 39 | --footnote-text-color: #b1b3b4; 40 | --footnote-bg-color: #393c3f; 41 | 42 | --table-primary-color: var(--bg-color); 43 | --table-secondary-color: var(--bg-color); 44 | 45 | --select-text-bg-color: #2e5767; 46 | 47 | --code-color: #9a6e3a; 48 | --code-cursor-color: var(--text-color); 49 | 50 | --kbd-text-color: #acaeaf; 51 | --kbd-bg-color: var(--bg-color-dark); 52 | 53 | /* Menu system */ 54 | --side-bar-bg-color: var(--bg-color-dark); 55 | --side-bar-text-color: var(--text-color); 56 | --item-hover-bg-color: #4b5053; 57 | --window-border: 1px solid var(--bg-color); 58 | 59 | --active-file-bg-color: #4b5053; 60 | --active-file-border-color: var(--active-file-bg-color); 61 | --active-file-text-color: var(--text-color); 62 | 63 | --footer-bg-color: var(--side-bar-bg-color); 64 | 65 | --control-text-color: #afb1b2; 66 | 67 | /* General */ 68 | --font-size: 16px; 69 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 70 | --monospace: 'SF Mono Medium', 'Fira Code', 'Cousine', 'Consolas', monospace; 71 | --heading-char-color: var(--light-trait-400); 72 | --color-popover-bg-color: var(--text-color); 73 | --rawblock-edit-panel-bd: var(--bg-color-dark); 74 | --meta-content-color: var(--body-text-color); 75 | --primary-btn-border-color: var(--body-text-color); 76 | --border-radius: 4px; 77 | 78 | 79 | /* Code variables */ 80 | --cm-line: #b8babb; 81 | --cm-variable: var(--text-color); 82 | --cm-keyword: #d1949e; 83 | --cm-tag: #d1949e; 84 | --cm-bracket: #d1949e; 85 | --cm-error: #ff5a5a; 86 | --cm-attribute: #d1949e; 87 | --cm-def: #eceded; 88 | --cm-comment: #998066; 89 | --cm-string: #bde052; 90 | --cm-operator: #f5b83d; 91 | --cm-number: #d1949e; 92 | --cm-meta: var(--text-color); 93 | --cm-atom: #845dc4; 94 | --cm-builtin: #bde052; 95 | --cm-property: var(--text-color); 96 | --cm-variable-2: var(--text-color); 97 | --cm-variable-3: #bde052; 98 | --cm-gutter: #f1f3f450; 99 | } 100 | 101 | html { 102 | font-size: var(--font-size); 103 | } 104 | 105 | body { 106 | font-family: var(--font-family); 107 | -webkit-font-smoothing: antialiased; 108 | color: var(--body-text-color); 109 | line-height: 1.6; 110 | } 111 | 112 | code { 113 | 114 | background-color: var(--code-fence-bg-color); 115 | padding: 2px 2px 2px 2px; 116 | } 117 | 118 | #write { 119 | max-width: 860px; 120 | margin: 0 auto; 121 | padding: 30px; 122 | padding-bottom: 100px; 123 | } 124 | 125 | @media only screen and (min-width: 1400px) { 126 | #write { 127 | max-width: 1024px; 128 | } 129 | } 130 | 131 | @media only screen and (min-width: 1800px) { 132 | #write { 133 | max-width: 1200px; 134 | } 135 | } 136 | 137 | #write>ul:first-child, 138 | #write>ol:first-child { 139 | margin-top: 30px; 140 | } 141 | 142 | a { 143 | color: var(--text-color); 144 | } 145 | 146 | h1, 147 | h2, 148 | h3, 149 | h4, 150 | h5, 151 | h6 { 152 | position: relative; 153 | margin-top: 2rem; 154 | margin-bottom: 1rem; 155 | font-weight: 700; 156 | line-height: 1.4; 157 | cursor: text; 158 | } 159 | 160 | cursor { 161 | color: var(--text-cursor-color) 162 | } 163 | 164 | h1:hover a.anchor, 165 | h2:hover a.anchor, 166 | h3:hover a.anchor, 167 | h4:hover a.anchor, 168 | h5:hover a.anchor, 169 | h6:hover a.anchor { 170 | text-decoration: none; 171 | } 172 | 173 | h1 tt, 174 | h1 code, 175 | h2 tt, 176 | h2 code, 177 | h3 tt, 178 | h3 code, 179 | h4 tt, 180 | h4 code, 181 | h5 tt, 182 | h5 code, 183 | h6 tt, 184 | h6 code { 185 | font-size: inherit; 186 | } 187 | 188 | h1 { 189 | padding-bottom: 0.3em; 190 | font-size: 2.2em; 191 | line-height: 1.3; 192 | color: var(--light-trait-100); 193 | } 194 | 195 | h2 { 196 | padding-bottom: 0.3em; 197 | font-size: 1.75em; 198 | line-height: 1.225; 199 | color: var(--light-trait-200); 200 | } 201 | 202 | h3 { 203 | font-size: 1.4em; 204 | line-height: 1.43; 205 | color: var(--light-trait-300); 206 | } 207 | 208 | h4 { 209 | font-size: 1.2em; 210 | color: var(--light-trait-400); 211 | } 212 | 213 | h5 { 214 | font-size: 1em; 215 | color: var(--light-trait-400); 216 | } 217 | 218 | h6 { 219 | font-size: 1em; 220 | color: var(--light-trait-400); 221 | } 222 | 223 | p, 224 | blockquote, 225 | ul, 226 | ol, 227 | dl, 228 | table { 229 | margin: 0.8em 0; 230 | } 231 | 232 | li>ol, 233 | li>ul { 234 | margin: 0 0; 235 | } 236 | 237 | hr { 238 | background-color: var(--light-trait-100); 239 | height: 1.5px; 240 | border: none 241 | } 242 | 243 | a, 244 | .md-def-url { 245 | color: var(--url-text-color); 246 | text-decoration: none; 247 | border-bottom: 0.05em solid; 248 | border-color: var(--url-underline-color); 249 | transition: all .1s ease-in; 250 | } 251 | 252 | a:hover { 253 | text-decoration: none; 254 | opacity: 1; 255 | } 256 | 257 | sup.md-footnote { 258 | background-color: var(--footnote-bg-color); 259 | color: var(--footnote-text-color); 260 | } 261 | 262 | li p.first { 263 | display: inline-block; 264 | } 265 | 266 | ul, 267 | ol { 268 | padding-left: 30px; 269 | } 270 | 271 | ul:first-child, 272 | ol:first-child { 273 | margin-top: 0.35%; 274 | } 275 | 276 | ul:last-child, 277 | ol:last-child { 278 | margin-bottom: 0; 279 | } 280 | 281 | mark, 282 | .ty-file-search-match-text, 283 | .md-search-hit { 284 | background: var(--search-hit-bg-color); 285 | color: var(--search-hit-text-color); 286 | } 287 | 288 | mark { 289 | border-radius: 4px; 290 | color: var(--text-highlight-color); 291 | font-weight: inherit; 292 | background-color: var(--text-highlight-bg); 293 | padding-left: 4px; 294 | padding-right: 4px; 295 | padding-top: 2px; 296 | padding-bottom: 2px; 297 | margin-left: 2px; 298 | margin-right: 2px; 299 | } 300 | 301 | .md-search-hit * { 302 | background: var(--search-select-bg-color); 303 | color: var(--search-select-text-color); 304 | } 305 | 306 | /* Search highlight */ 307 | .cm-search-hit.CodeMirror-selectedtext, 308 | .md-search-hit.md-search-select, 309 | .md-search-select { 310 | outline: 0px solid var(--search-select-text-color); 311 | } 312 | 313 | .outline-item.select, 314 | .ty-search-item-line.select, 315 | .ty-search-item.select { 316 | outline-width: 2px; 317 | } 318 | 319 | .outline-item.select { 320 | outline-offset: 0px; 321 | } 322 | 323 | blockquote { 324 | color: var(--blockquote-text-color); 325 | margin-left: 1.75px; 326 | margin-right: 0px; 327 | border-left: 4px solid var(--blockquote-accent-color); 328 | padding: 10px 14px 7px 22px; 329 | /* change the quote highlight */ 330 | background-color: var(--blockquote-bg-color); 331 | } 332 | 333 | blockquote blockquote { 334 | padding-right: 0; 335 | } 336 | 337 | /* Alternating color rows in table*/ 338 | table tr:nth-child(2n) { 339 | background-color: var(--table-primary-color); 340 | } 341 | 342 | table tr:nth-child(2n + 1) { 343 | background-color: var(--table-secondary-color); 344 | } 345 | 346 | /* Alternating color rows in table*/ 347 | 348 | table { 349 | padding: 0; 350 | word-break: initial; 351 | } 352 | 353 | table tr { 354 | border-top: 1px solid var(--text-accent-color); 355 | margin: 0; 356 | padding: 0; 357 | } 358 | 359 | table tr th { 360 | font-weight: bold; 361 | border: 1px solid var(--text-accent-color); 362 | border-bottom: 0; 363 | margin: 0; 364 | padding: 6px 13px; 365 | } 366 | 367 | table tr td { 368 | border: 1px solid var(--text-accent-color); 369 | margin: 0; 370 | padding: 6px 13px; 371 | } 372 | 373 | table tr th:first-child, 374 | table tr td:first-child { 375 | margin-top: 0; 376 | } 377 | 378 | table tr th:last-child, 379 | table tr td:last-child { 380 | margin-bottom: 0; 381 | } 382 | 383 | kbd { 384 | font-size: 0.875rem; 385 | background: var(--kbd-bg-color); 386 | border: 1px solid var(--text-accent-color); 387 | box-shadow: 0 2px 0 var(--text-accent-color); 388 | color: var(--kbd-text-color); 389 | } 390 | 391 | .md-fences, 392 | code, 393 | tt { 394 | border: none; 395 | color: var(--code-fence-text-color); 396 | background-color: var(--code-fence-bg-color); 397 | border-radius: var(--border-radius); 398 | padding: 2px 4px 0px 4px; 399 | font-size: 0.975em; 400 | font-weight: medium; 401 | font-family: var(--monospace) 402 | } 403 | 404 | .md-fences { 405 | margin-bottom: 15px; 406 | margin-top: 15px; 407 | padding-top: 8px; 408 | padding-bottom: 6px; 409 | } 410 | 411 | #write pre.md-meta-block { 412 | padding: 1rem; 413 | font-size: 85%; 414 | line-height: 1.45; 415 | background-color: var(--bg-color-dark); 416 | border: 0; 417 | border-radius: var(--border-radius); 418 | color: var(--secondary-text-color); 419 | margin-top: 0 !important; 420 | } 421 | 422 | #write .mathjax-block .md-rawblock-tooltip { 423 | border-top-left-radius: var(--border-radius); 424 | border-top-right-radius: var(--border-radius); 425 | } 426 | 427 | 428 | #write .mathjax-block .md-math-container { 429 | border-top-left-radius: var(--border-radius); 430 | border-bottom-right-radius: var(--border-radius); 431 | border-bottom-left-radius: var(--border-radius); 432 | } 433 | 434 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 435 | border-top-left-radius: var(--border-radius); 436 | } 437 | 438 | .md-mathjax-midline { 439 | background-color: var(--bg-color); 440 | color: var(--text-color); 441 | } 442 | 443 | .md-inline-math script { 444 | color: var(--code-color); 445 | } 446 | 447 | .CodeMirror-lines { 448 | padding-left: 4px; 449 | } 450 | 451 | .code-tooltip { 452 | box-shadow: none; 453 | border-radius: var(--border-radius); 454 | } 455 | 456 | #write .code-tooltip { 457 | bottom: initial; 458 | top: 100%; 459 | left: initial; 460 | right: -1px; 461 | background: var(--bg-color-dark); 462 | border: 1px solid var(--text-accent-color); 463 | border-top-left-radius: 0; 464 | border-top-right-radius: 0; 465 | border-top: 0; 466 | font-family: var(--monospace); 467 | } 468 | 469 | #write .md-mathblock-panel .code-tooltip { 470 | right: 0; 471 | border: none; 472 | } 473 | 474 | /* TODO */ 475 | #write .md-task-list-item>input { 476 | -webkit-appearance: initial; 477 | display: inline-block; 478 | text-align: center; 479 | vertical-align: middle; 480 | position: absolute; 481 | border: 1px solid var(--text-color); 482 | /* border-radius: 100%; */ 483 | margin-left: -1.45rem; 484 | height: 0.95rem; 485 | width: 0.95rem; 486 | transition: all 0.35s; 487 | } 488 | 489 | #write .md-task-list-item>input:focus { 490 | outline: none; 491 | box-shadow: none; 492 | } 493 | 494 | #write .md-task-list-item>input[checked] { 495 | background: var(--todo-bg-color); 496 | border: 1px solid var(--todo-bg-color); 497 | text-decoration: line-through; 498 | } 499 | 500 | #write .md-task-list-item>input[checked]::before { 501 | display: flex; 502 | align-items: center; 503 | justify-content: center; 504 | content: '✓'; 505 | position: absolute; 506 | margin-top: 0.05rem; 507 | top: 0; 508 | left: 0; 509 | height: 100%; 510 | width: 100%; 511 | color: var(--todo-tick-color); 512 | font-size: 0.75em; 513 | font-weight: 600; 514 | } 515 | 516 | #write .md-task-list-item>input[checked]::after { 517 | text-decoration: line-through; 518 | } 519 | 520 | /* TODO */ 521 | .md-image>.md-meta { 522 | border-radius: var(--border-radius); 523 | padding: 2px 0px 0px 4px; 524 | font-size: 0.9em; 525 | color: inherit; 526 | } 527 | 528 | .md-toc { 529 | margin-top: 20px; 530 | padding-bottom: 20px; 531 | } 532 | 533 | /* Source mode */ 534 | .CodeMirror.cm-s-typora-default *, 535 | .cm-s-typora-default * { 536 | background: inherit; 537 | color: var(--body-text-color); 538 | font-family: var(--monospace); 539 | font-size: var(--font-size) !important; 540 | font-style: normal; 541 | font-weight: medium; 542 | } 543 | 544 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 545 | border-left: 2.35px solid var(--code-cursor-color); 546 | } 547 | 548 | .CodeMirror div.CodeMirror-cursor { 549 | border-left: 2.35px solid var(--code-cursor-color); 550 | } 551 | 552 | 553 | .sidebar-tabs { 554 | border-bottom: none; 555 | } 556 | 557 | .outline-expander { 558 | width: 1.5rem; 559 | vertical-align: initial; 560 | } 561 | 562 | .outline-expander:before, 563 | .outline-expander:hover:before, 564 | .outline-item-open>.outline-item>.outline-expander:before, 565 | .outline-item-open>.outline-item>.outline-expander:hover:before { 566 | content: "\f125"; 567 | transition: transform 125ms ease-in-out; 568 | } 569 | 570 | .outline-item-open>.outline-item>.outline-expander:hover:before, 571 | .outline-item-open>.outline-item>.outline-expander:before { 572 | transform: rotate(90deg); 573 | } 574 | 575 | .outline-label:hover { 576 | text-decoration: none; 577 | } 578 | 579 | #toc-dropmenu { 580 | background: var(--bg-color-dark); 581 | } 582 | 583 | #toc-dropmenu .outline-title { 584 | font-size: 1rem; 585 | text-transform: uppercase; 586 | } 587 | 588 | .dropdown-menu .divider { 589 | display: none; 590 | } 591 | 592 | .context-menu { 593 | border: none !important; 594 | backdrop-filter: saturate(180%) blur(20px) brightness(1.1); 595 | background-color: var(--bg-color-dark); 596 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 var(--text-accent-color) !important; 597 | } 598 | 599 | .file-node-background { 600 | height: 31px; 601 | } 602 | 603 | .file-node-content:hover .file-node-icon, 604 | .file-node-content:hover .file-node-open-state { 605 | visibility: visible; 606 | } 607 | 608 | .file-node-icon { 609 | margin-right: 8px; 610 | } 611 | 612 | .file-library-node:not(.file-node-root):focus>.file-node-content { 613 | outline: none; 614 | } 615 | 616 | /* New file animation */ 617 | .blink-area { 618 | animation: none; 619 | } 620 | 621 | .file-list-item-summary { 622 | font-size: var(--font-size); 623 | font-family: var(--font-family); 624 | } 625 | 626 | #md-searchpanel input { 627 | border-radius: var(--border-radius); 628 | box-shadow: none; 629 | } 630 | 631 | #md-searchpanel input:focus { 632 | box-shadow: none; 633 | border-color: var(--meta-content-color); 634 | } 635 | 636 | #md-searchpanel .search-type-selection { 637 | width: auto; 638 | } 639 | 640 | #md-searchpanel .btn:not(.close-btn):hover { 641 | box-shadow: none; 642 | } 643 | 644 | .mac-seamless-mode #typora-sidebar { 645 | color: var(--sidebar-text-color); 646 | background-color: var(--side-bar-bg-color); 647 | } 648 | 649 | #md-notification .btn { 650 | border: 0; 651 | } 652 | 653 | /* CODE HIGHLIGHT */ 654 | pre.CodeMirror-line { 655 | color: var(--cm-line) !important 656 | } 657 | 658 | .cm-variable { 659 | color: var(--cm-variable) !important 660 | } 661 | 662 | .cm-keyword { 663 | color: var(--cm-keyword) !important 664 | } 665 | 666 | .cm-tag { 667 | color: var(--cm-tag) !important 668 | } 669 | 670 | .cm-variable-3 { 671 | color: var(--cm-variable-3) !important 672 | } 673 | 674 | .cm-bracket { 675 | color: var(--cm-bracket); 676 | } 677 | 678 | .cm-error { 679 | color: var(--cm-error) !important; 680 | } 681 | 682 | .cm-attribute { 683 | color: var(--cm-attribute) !important 684 | } 685 | 686 | .cm-def { 687 | color: var(--cm-def) !important 688 | } 689 | 690 | .cm-comment { 691 | color: var(--cm-comment) !important 692 | } 693 | 694 | .cm-string { 695 | color: var(--cm-string) !important; 696 | font-variant-ligatures: common-ligatures !important; 697 | } 698 | 699 | .cm-tag:not() { 700 | font-weight: 700; 701 | } 702 | 703 | .cm-operator { 704 | color: var(--cm-operator) !important 705 | } 706 | 707 | .cm-number { 708 | color: var(--cm-number) !important 709 | } 710 | 711 | .cm-meta { 712 | color: var(--cm-meta) !important; 713 | font-weight: 700 !important; 714 | } 715 | 716 | .cm-atom { 717 | color: var(--cm-atom) !important 718 | } 719 | 720 | .cm-builtin { 721 | color: var(--cm-builtin) !important 722 | } 723 | 724 | .cm-property { 725 | color: var(--cm-property) !important 726 | } 727 | 728 | .cm-variable-2 { 729 | color: var(--cm-variable-2) !important 730 | } 731 | 732 | 733 | /* CODE HIGHLIGHT */ 734 | 735 | .file-tree-node.active>.file-node-background { 736 | color: var(--active-file-text-color); 737 | background-color: var(--active-file-bg-color); 738 | border-left: 0px solid var(--active-file-border-color) !important; 739 | border-color: var(--active-file-border-color) !important; 740 | } 741 | 742 | .CodeMirror-gutters { 743 | border-right: 1px solid var(--cm-gutter); 744 | background: inherit; 745 | white-space: nowrap; 746 | } 747 | 748 | .ty-footer, 749 | .sidebar-footer, 750 | footer { 751 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85); 752 | border: none !important; 753 | background: none; 754 | background-color: var(--footer-bg-color); 755 | } 756 | 757 | .code-tooltip { 758 | border-radius: 4px; 759 | background-color: var(--dark-trait); 760 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 761 | } 762 | 763 | #sidebar-files-menu { 764 | color: var(--side-bar-text-color); 765 | border-radius: 4px; 766 | border: none !important; 767 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 768 | } 769 | 770 | .code-tooltip.md-tooltip-hide.md-hover-tip { 771 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 772 | } 773 | 774 | #typora-sidebar { 775 | border: none !important; 776 | } 777 | 778 | #footer-word-count-info, 779 | #spell-check-panel { 780 | border: none !important; 781 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85) !important; 782 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .32), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 783 | } 784 | 785 | /* Windows/Linux unibody mode */ 786 | .megamenu-content, 787 | .megamenu-opened header { 788 | color: var(--body-text-color); 789 | background: var(--bg-color-dark); 790 | } 791 | 792 | #recent-file-panel-action-btn { 793 | background: inherit; 794 | border: 1px var(--light-trait-300) solid; 795 | } 796 | 797 | .megamenu-menu-panel table td:nth-child(1) { 798 | color: var(--text-color); 799 | background: var(--bg-color-dark); 800 | } 801 | 802 | .megamenu-menu-panel table td:nth-child(2) { 803 | color: var(--text-color); 804 | background: var(--bg-color-dark); 805 | } 806 | 807 | .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 808 | color: var(--text-color); 809 | background: var(--active-file-bg-color); 810 | } 811 | 812 | .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 813 | color: var(--text-color); 814 | background: var(--active-file-bg-color); 815 | } 816 | 817 | .megamenu-menu-panel input[type='text'] { 818 | background: inherit; 819 | border: 1px var(--control-text-color) solid; 820 | } 821 | 822 | #recent-file-panel-action-btn { 823 | background: inherit; 824 | } 825 | 826 | .megamenu-menu, 827 | .megamenu-content { 828 | background: var(--side-bar-bg-color); 829 | color: var(--text-color); 830 | } 831 | 832 | #top-titlebar, 833 | #top-titlebar * { 834 | background: inherit; 835 | color: var(--text-color); 836 | } 837 | 838 | .megamenu-menu-header #megamenu-menu-header-title:before { 839 | color: var(--text-color); 840 | } 841 | 842 | megamenu-back-btn { 843 | color: var(--text-color); 844 | border-color: var(--text-color); 845 | } 846 | 847 | .megamenu-menu-header #megamenu-menu-header-title, 848 | .megamenu-menu-header:hover, 849 | .megamenu-menu-header:focus { 850 | color: inherit; 851 | } 852 | 853 | .megamenu-menu-panel table tr:nth-child(2n + 1) { 854 | background-color: var(--side-bar-bg-color); 855 | } -------------------------------------------------------------------------------- /themes/classic/notion-darker-classic.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Text editor */ 3 | --bg-color: #191919; 4 | --text-color: #c1c1c1; 5 | --body-text-color: #c1c1c1; 6 | --text-cursor-color: var(--text-color); 7 | 8 | --secondary-text-color: #73726e; 9 | --text-accent-color: #393c3f; 10 | --bg-color-dark: #202020; 11 | 12 | --text-highlight-color: #fff; 13 | --text-highlight-bg: #413324; 14 | 15 | --code-fence-text-color: #ec5757; 16 | --code-fence-bg-color: #252525; 17 | 18 | --blockquote-bg-color: var(--bg-color); 19 | --blockquote-accent-color: var(--text-color); 20 | --blockquote-text-color: var(--text-color); 21 | 22 | --light-trait-100: #c1c1c1; 23 | --light-trait-200: #c1c1c1; 24 | --light-trait-300: #c1c1c1; 25 | --light-trait-400: #c1c1c1; 26 | 27 | --todo-bg-color: #2eaadc; 28 | --todo-tick-color: #fff; 29 | 30 | --search-select-text-color: #d6dbd8; 31 | --search-select-bg-color: #253d30; 32 | 33 | --search-hit-text-color: #ded8d7; 34 | --search-hit-bg-color: #522e2a; 35 | 36 | --url-text-color: var(--text-color); 37 | --url-underline-color: var(--text-color); 38 | 39 | --footnote-text-color: #6b696a; 40 | --footnote-bg-color: #272626; 41 | 42 | --table-primary-color: var(--bg-color); 43 | --table-secondary-color: var(--bg-color); 44 | 45 | --select-text-bg-color: #2e5767; 46 | 47 | --code-color: #202020; 48 | --code-cursor-color: var(--text-color); 49 | 50 | --kbd-text-color: #acaeaf; 51 | --kbd-bg-color: var(--bg-color-dark); 52 | 53 | --control-text-color: #838383; 54 | 55 | /* Menu system */ 56 | --side-bar-bg-color: var(--bg-color-dark); 57 | --side-bar-text-color: var(--text-color); 58 | --item-hover-bg-color: #2c2c2c; 59 | --window-border: 1px solid var(--bg-color); 60 | 61 | --active-file-bg-color: #2c2c2c; 62 | --active-file-border-color: var(--active-file-bg-color); 63 | --active-file-text-color: var(--text-color); 64 | 65 | --footer-bg-color: var(--side-bar-bg-color); 66 | 67 | --control-text-color: #afb1b2; 68 | 69 | /* General */ 70 | --font-size: 16px; 71 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 72 | --monospace: 'SF Mono Medium', 'Fira Code', 'Cousine', 'Consolas', monospace; 73 | --heading-char-color: var(--light-trait-400); 74 | --color-popover-bg-color: var(--text-color); 75 | --rawblock-edit-panel-bd: var(--bg-color-dark); 76 | --meta-content-color: var(--body-text-color); 77 | --primary-btn-border-color: var(--body-text-color); 78 | --border-radius: 4px; 79 | 80 | 81 | /* Code variables */ 82 | --cm-line: #b8babb; 83 | --cm-variable: var(--text-color); 84 | --cm-keyword: #d1949e; 85 | --cm-tag: #d1949e; 86 | --cm-bracket: #d1949e; 87 | --cm-error: #ff5a5a; 88 | --cm-attribute: #d1949e; 89 | --cm-def: #c2c0c1; 90 | --cm-comment: #998066; 91 | --cm-string: #bde052; 92 | --cm-operator: #f5b83d; 93 | --cm-number: #d1949e; 94 | --cm-meta: var(--text-color); 95 | --cm-atom: #845dc4; 96 | --cm-builtin: #bde052; 97 | --cm-property: var(--text-color); 98 | --cm-variable-2: var(--text-color); 99 | --cm-variable-3: #bde052; 100 | --cm-gutter: #f1f3f450; 101 | } 102 | 103 | html { 104 | font-size: var(--font-size); 105 | } 106 | 107 | body { 108 | font-family: var(--font-family); 109 | -webkit-font-smoothing: antialiased; 110 | color: var(--body-text-color); 111 | line-height: 1.6; 112 | } 113 | 114 | code { 115 | background-color: var(--code-fence-bg-color); 116 | padding: 2px 2px 2px 2px; 117 | } 118 | 119 | #write { 120 | max-width: 860px; 121 | margin: 0 auto; 122 | padding: 30px; 123 | padding-bottom: 100px; 124 | } 125 | 126 | @media only screen and (min-width: 1400px) { 127 | #write { 128 | max-width: 1024px; 129 | } 130 | } 131 | 132 | @media only screen and (min-width: 1800px) { 133 | #write { 134 | max-width: 1200px; 135 | } 136 | } 137 | 138 | #write>ul:first-child, 139 | #write>ol:first-child { 140 | margin-top: 30px; 141 | } 142 | 143 | a { 144 | color: var(--text-color); 145 | } 146 | 147 | h1, 148 | h2, 149 | h3, 150 | h4, 151 | h5, 152 | h6 { 153 | position: relative; 154 | margin-top: 2rem; 155 | margin-bottom: 1rem; 156 | font-weight: 700; 157 | line-height: 1.4; 158 | cursor: text; 159 | } 160 | 161 | cursor { 162 | color: var(--text-cursor-color) 163 | } 164 | 165 | h1:hover a.anchor, 166 | h2:hover a.anchor, 167 | h3:hover a.anchor, 168 | h4:hover a.anchor, 169 | h5:hover a.anchor, 170 | h6:hover a.anchor { 171 | text-decoration: none; 172 | } 173 | 174 | h1 tt, 175 | h1 code, 176 | h2 tt, 177 | h2 code, 178 | h3 tt, 179 | h3 code, 180 | h4 tt, 181 | h4 code, 182 | h5 tt, 183 | h5 code, 184 | h6 tt, 185 | h6 code { 186 | font-size: inherit; 187 | } 188 | 189 | h1 { 190 | padding-bottom: 0.3em; 191 | font-size: 2.2em; 192 | line-height: 1.3; 193 | color: var(--light-trait-100); 194 | } 195 | 196 | h2 { 197 | padding-bottom: 0.3em; 198 | font-size: 1.75em; 199 | line-height: 1.225; 200 | color: var(--light-trait-200); 201 | } 202 | 203 | h3 { 204 | font-size: 1.4em; 205 | line-height: 1.43; 206 | color: var(--light-trait-300); 207 | } 208 | 209 | h4 { 210 | font-size: 1.2em; 211 | color: var(--light-trait-400); 212 | } 213 | 214 | h5 { 215 | font-size: 1em; 216 | color: var(--light-trait-400); 217 | } 218 | 219 | h6 { 220 | font-size: 1em; 221 | color: var(--light-trait-400); 222 | } 223 | 224 | p, 225 | blockquote, 226 | ul, 227 | ol, 228 | dl, 229 | table { 230 | margin: 0.8em 0; 231 | } 232 | 233 | li>ol, 234 | li>ul { 235 | margin: 0 0; 236 | } 237 | 238 | hr { 239 | background-color: var(--light-trait-100); 240 | height: 1.5px; 241 | border: none 242 | } 243 | 244 | a, 245 | .md-def-url { 246 | color: var(--url-text-color); 247 | text-decoration: none; 248 | border-bottom: 0.05em solid; 249 | border-color: var(--url-underline-color); 250 | transition: all .1s ease-in; 251 | } 252 | 253 | a:hover { 254 | text-decoration: none; 255 | opacity: 1; 256 | } 257 | 258 | sup.md-footnote { 259 | color: var(--footnote-text-color); 260 | background-color: var(--footnote-bg-color); 261 | } 262 | 263 | li p.first { 264 | display: inline-block; 265 | } 266 | 267 | ul, 268 | ol { 269 | padding-left: 30px; 270 | } 271 | 272 | ul:first-child, 273 | ol:first-child { 274 | margin-top: 0.35%; 275 | } 276 | 277 | ul:last-child, 278 | ol:last-child { 279 | margin-bottom: 0; 280 | } 281 | 282 | mark, 283 | .ty-file-search-match-text, 284 | .md-search-hit { 285 | background: var(--search-hit-bg-color); 286 | color: var(--search-hit-text-color); 287 | } 288 | 289 | mark { 290 | border-radius: 4px; 291 | color: var(--text-highlight-color); 292 | font-weight: inherit; 293 | background-color: var(--text-highlight-bg); 294 | padding-left: 4px; 295 | padding-right: 4px; 296 | padding-top: 2px; 297 | padding-bottom: 2px; 298 | margin-left: 2px; 299 | margin-right: 2px; 300 | } 301 | 302 | .md-search-hit * { 303 | background: var(--search-select-bg-color); 304 | color: var(--search-select-text-color); 305 | } 306 | 307 | /* Search highlight */ 308 | .cm-search-hit.CodeMirror-selectedtext, 309 | .md-search-hit.md-search-select, 310 | .md-search-select { 311 | outline: 0px solid var(--search-select-text-color); 312 | } 313 | 314 | .outline-item.select, 315 | .ty-search-item-line.select, 316 | .ty-search-item.select { 317 | outline-width: 2px; 318 | } 319 | 320 | .outline-item.select { 321 | outline-offset: 0px; 322 | } 323 | 324 | blockquote { 325 | color: var(--blockquote-text-color); 326 | margin-left: 1.75px; 327 | margin-right: 0px; 328 | border-left: 4px solid var(--blockquote-accent-color); 329 | padding: 10px 14px 7px 22px; 330 | /* change the quote highlight */ 331 | background-color: var(--blockquote-bg-color); 332 | } 333 | 334 | blockquote blockquote { 335 | padding-right: 0; 336 | } 337 | 338 | /* Alternating color rows in table*/ 339 | table tr:nth-child(2n) { 340 | background-color: var(--table-primary-color); 341 | } 342 | 343 | table tr:nth-child(2n + 1) { 344 | background-color: var(--table-secondary-color); 345 | } 346 | 347 | /* Alternating color rows in table*/ 348 | 349 | table { 350 | padding: 0; 351 | word-break: initial; 352 | } 353 | 354 | table tr { 355 | border-top: 1px solid var(--text-accent-color); 356 | margin: 0; 357 | padding: 0; 358 | } 359 | 360 | table tr th { 361 | font-weight: bold; 362 | border: 1px solid var(--text-accent-color); 363 | border-bottom: 0; 364 | margin: 0; 365 | padding: 6px 13px; 366 | } 367 | 368 | table tr td { 369 | border: 1px solid var(--text-accent-color); 370 | margin: 0; 371 | padding: 6px 13px; 372 | } 373 | 374 | table tr th:first-child, 375 | table tr td:first-child { 376 | margin-top: 0; 377 | } 378 | 379 | table tr th:last-child, 380 | table tr td:last-child { 381 | margin-bottom: 0; 382 | } 383 | 384 | kbd { 385 | font-size: 0.875rem; 386 | background: var(--kbd-bg-color); 387 | border: 1px solid var(--text-accent-color); 388 | box-shadow: 0 2px 0 var(--text-accent-color); 389 | color: var(--kbd-text-color); 390 | } 391 | 392 | .md-fences, 393 | code, 394 | tt { 395 | border: none; 396 | color: var(--code-fence-text-color); 397 | background-color: var(--code-fence-bg-color); 398 | border-radius: var(--border-radius); 399 | padding: 2px 4px 0px 4px; 400 | font-size: 0.975em; 401 | font-weight: medium; 402 | font-family: var(--monospace) 403 | } 404 | 405 | .md-fences { 406 | margin-bottom: 15px; 407 | margin-top: 15px; 408 | padding-top: 8px; 409 | padding-bottom: 6px; 410 | } 411 | 412 | #write pre.md-meta-block { 413 | padding: 1rem; 414 | font-size: 85%; 415 | line-height: 1.45; 416 | background-color: var(--bg-color-dark); 417 | border: 0; 418 | border-radius: var(--border-radius); 419 | color: var(--secondary-text-color); 420 | margin-top: 0 !important; 421 | } 422 | 423 | #write .mathjax-block .md-rawblock-tooltip { 424 | border-top-left-radius: var(--border-radius); 425 | border-top-right-radius: var(--border-radius); 426 | } 427 | 428 | 429 | #write .mathjax-block .md-math-container { 430 | border-top-left-radius: var(--border-radius); 431 | border-bottom-right-radius: var(--border-radius); 432 | border-bottom-left-radius: var(--border-radius); 433 | } 434 | 435 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 436 | border-top-left-radius: var(--border-radius); 437 | } 438 | 439 | .md-mathjax-midline { 440 | background-color: var(--bg-color); 441 | color: var(--text-color); 442 | } 443 | 444 | .md-inline-math script { 445 | color: var(--code-color); 446 | } 447 | 448 | .CodeMirror-lines { 449 | padding-left: 4px; 450 | } 451 | 452 | .code-tooltip { 453 | box-shadow: none; 454 | border-radius: var(--border-radius); 455 | } 456 | 457 | #write .code-tooltip { 458 | bottom: initial; 459 | top: 100%; 460 | left: initial; 461 | right: -1px; 462 | background: var(--bg-color-dark); 463 | border: 1px solid var(--text-accent-color); 464 | border-top-left-radius: 0; 465 | border-top-right-radius: 0; 466 | border-top: 0; 467 | font-family: var(--monospace); 468 | } 469 | 470 | #write .md-mathblock-panel .code-tooltip { 471 | right: 0; 472 | border: none; 473 | } 474 | 475 | /* TODO */ 476 | #write .md-task-list-item>input { 477 | -webkit-appearance: initial; 478 | display: inline-block; 479 | text-align: center; 480 | vertical-align: middle; 481 | position: absolute; 482 | border: 1px solid var(--text-color); 483 | /* border-radius: 100%; */ 484 | margin-left: -1.45rem; 485 | height: 0.95rem; 486 | width: 0.95rem; 487 | transition: all 0.35s; 488 | } 489 | 490 | #write .md-task-list-item>input:focus { 491 | outline: none; 492 | box-shadow: none; 493 | } 494 | 495 | #write .md-task-list-item>input[checked] { 496 | background: var(--todo-bg-color); 497 | border: 1px solid var(--todo-bg-color); 498 | text-decoration: line-through; 499 | } 500 | 501 | #write .md-task-list-item>input[checked]::before { 502 | display: flex; 503 | align-items: center; 504 | justify-content: center; 505 | content: '✓'; 506 | position: absolute; 507 | margin-top: 0.05rem; 508 | top: 0; 509 | left: 0; 510 | height: 100%; 511 | width: 100%; 512 | color: var(--todo-tick-color); 513 | font-size: 0.75em; 514 | font-weight: 600; 515 | } 516 | 517 | #write .md-task-list-item>input[checked]::after { 518 | text-decoration: line-through; 519 | } 520 | 521 | /* TODO */ 522 | .md-image>.md-meta { 523 | border-radius: var(--border-radius); 524 | padding: 2px 0px 0px 4px; 525 | font-size: 0.9em; 526 | color: inherit; 527 | } 528 | 529 | .md-toc { 530 | margin-top: 20px; 531 | padding-bottom: 20px; 532 | } 533 | 534 | /* Source mode */ 535 | .CodeMirror.cm-s-typora-default *, 536 | .cm-s-typora-default * { 537 | background: inherit; 538 | color: var(--body-text-color); 539 | font-family: var(--monospace); 540 | font-size: var(--font-size) !important; 541 | font-style: normal; 542 | font-weight: medium; 543 | } 544 | 545 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 546 | border-left: 2.75px solid var(--code-cursor-color); 547 | } 548 | 549 | .CodeMirror div.CodeMirror-cursor { 550 | border-left: 2.75px solid var(--code-cursor-color); 551 | } 552 | 553 | 554 | .sidebar-tabs { 555 | border-bottom: none; 556 | } 557 | 558 | .outline-expander { 559 | width: 1.5rem; 560 | vertical-align: initial; 561 | } 562 | 563 | .outline-expander:before, 564 | .outline-expander:hover:before, 565 | .outline-item-open>.outline-item>.outline-expander:before, 566 | .outline-item-open>.outline-item>.outline-expander:hover:before { 567 | content: "\f125"; 568 | transition: transform 125ms ease-in-out; 569 | } 570 | 571 | .outline-item-open>.outline-item>.outline-expander:hover:before, 572 | .outline-item-open>.outline-item>.outline-expander:before { 573 | transform: rotate(90deg); 574 | } 575 | 576 | .outline-label:hover { 577 | text-decoration: none; 578 | } 579 | 580 | #toc-dropmenu { 581 | background: var(--bg-color-dark); 582 | } 583 | 584 | #toc-dropmenu .outline-title { 585 | font-size: 1rem; 586 | text-transform: uppercase; 587 | } 588 | 589 | .dropdown-menu .divider { 590 | display: none; 591 | } 592 | 593 | .context-menu { 594 | border: none !important; 595 | backdrop-filter: saturate(180%) blur(20px) brightness(1.1); 596 | background-color: var(--bg-color-dark); 597 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 var(--text-accent-color) !important; 598 | } 599 | 600 | .file-node-background { 601 | height: 31px; 602 | } 603 | 604 | .file-node-content:hover .file-node-icon, 605 | .file-node-content:hover .file-node-open-state { 606 | visibility: visible; 607 | } 608 | 609 | .file-node-icon { 610 | margin-right: 8px; 611 | } 612 | 613 | .file-library-node:not(.file-node-root):focus>.file-node-content { 614 | outline: none; 615 | } 616 | 617 | /* New file animation */ 618 | .blink-area { 619 | animation: none; 620 | } 621 | 622 | .file-list-item-summary { 623 | font-size: var(--font-size); 624 | font-family: var(--font-family); 625 | } 626 | 627 | #md-searchpanel input { 628 | border-radius: var(--border-radius); 629 | box-shadow: none; 630 | } 631 | 632 | #md-searchpanel input:focus { 633 | box-shadow: none; 634 | border-color: var(--meta-content-color); 635 | } 636 | 637 | #md-searchpanel .search-type-selection { 638 | width: auto; 639 | } 640 | 641 | #md-searchpanel .btn:not(.close-btn):hover { 642 | box-shadow: none; 643 | } 644 | 645 | .mac-seamless-mode #typora-sidebar { 646 | color: var(--sidebar-text-color); 647 | background-color: var(--side-bar-bg-color); 648 | } 649 | 650 | #md-notification .btn { 651 | border: 0; 652 | } 653 | 654 | /* CODE HIGHLIGHT */ 655 | pre.CodeMirror-line { 656 | color: var(--cm-line) !important 657 | } 658 | 659 | .cm-variable { 660 | color: var(--cm-variable) !important 661 | } 662 | 663 | .cm-keyword { 664 | color: var(--cm-keyword) !important 665 | } 666 | 667 | .cm-tag { 668 | color: var(--cm-tag) !important 669 | } 670 | 671 | .cm-variable-3 { 672 | color: var(--cm-variable-3) !important 673 | } 674 | 675 | .cm-bracket { 676 | color: var(--cm-bracket); 677 | } 678 | 679 | .cm-error { 680 | color: var(--cm-error) !important; 681 | } 682 | 683 | .cm-attribute { 684 | color: var(--cm-attribute) !important 685 | } 686 | 687 | .cm-def { 688 | color: var(--cm-def) !important 689 | } 690 | 691 | .cm-comment { 692 | color: var(--cm-comment) !important 693 | } 694 | 695 | .cm-string { 696 | color: var(--cm-string) !important; 697 | font-variant-ligatures: common-ligatures !important; 698 | } 699 | 700 | .cm-tag:not() { 701 | font-weight: 700; 702 | } 703 | 704 | .cm-operator { 705 | color: var(--cm-operator) !important 706 | } 707 | 708 | .cm-number { 709 | color: var(--cm-number) !important 710 | } 711 | 712 | .cm-meta { 713 | color: var(--cm-meta) !important; 714 | font-weight: 700 !important; 715 | } 716 | 717 | .cm-atom { 718 | color: var(--cm-atom) !important 719 | } 720 | 721 | .cm-builtin { 722 | color: var(--cm-builtin) !important 723 | } 724 | 725 | .cm-property { 726 | color: var(--cm-property) !important 727 | } 728 | 729 | .cm-variable-2 { 730 | color: var(--cm-variable-2) !important 731 | } 732 | 733 | 734 | /* CODE HIGHLIGHT */ 735 | 736 | .file-tree-node.active>.file-node-background { 737 | color: var(--active-file-text-color); 738 | background-color: var(--active-file-bg-color); 739 | border-left: 0px solid var(--active-file-border-color) !important; 740 | border-color: var(--active-file-border-color) !important; 741 | } 742 | 743 | .CodeMirror-gutters { 744 | border-right: 1px solid var(--cm-gutter); 745 | background: inherit; 746 | white-space: nowrap; 747 | } 748 | 749 | .ty-footer, 750 | .sidebar-footer, 751 | footer { 752 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85); 753 | border: none !important; 754 | background: none; 755 | background-color: var(--footer-bg-color); 756 | } 757 | 758 | .code-tooltip { 759 | border-radius: 4px; 760 | background-color: var(--dark-trait); 761 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 762 | } 763 | 764 | #sidebar-files-menu { 765 | color: var(--side-bar-text-color); 766 | border-radius: 4px; 767 | border: none !important; 768 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 769 | } 770 | 771 | .code-tooltip.md-tooltip-hide.md-hover-tip { 772 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 773 | } 774 | 775 | #typora-sidebar { 776 | border: none !important; 777 | } 778 | 779 | #footer-word-count-info, 780 | #spell-check-panel { 781 | border: none !important; 782 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85) !important; 783 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .32), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 784 | } 785 | 786 | /* Windows/Linux unibody mode */ 787 | .megamenu-content, 788 | .megamenu-opened header { 789 | color: var(--body-text-color); 790 | background: var(--bg-color-dark); 791 | } 792 | 793 | #recent-file-panel-action-btn { 794 | background: inherit; 795 | border: 1px var(--light-trait-300) solid; 796 | } 797 | 798 | .megamenu-menu-panel table td:nth-child(1) { 799 | color: var(--text-color); 800 | background: var(--bg-color-dark); 801 | } 802 | 803 | .megamenu-menu-panel table td:nth-child(2) { 804 | color: var(--text-color); 805 | background: var(--bg-color-dark); 806 | } 807 | 808 | .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 809 | color: var(--text-color); 810 | background: var(--active-file-bg-color); 811 | } 812 | 813 | .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 814 | color: var(--text-color); 815 | background: var(--active-file-bg-color); 816 | } 817 | 818 | .megamenu-menu-panel input[type='text'] { 819 | background: inherit; 820 | border: 1px var(--control-text-color) solid; 821 | } 822 | 823 | #recent-file-panel-action-btn { 824 | background: inherit; 825 | } 826 | 827 | .megamenu-menu, 828 | .megamenu-content { 829 | background: var(--side-bar-bg-color); 830 | color: var(--text-color); 831 | } 832 | 833 | #top-titlebar, 834 | #top-titlebar * { 835 | background: inherit; 836 | color: var(--text-color); 837 | } 838 | 839 | .megamenu-menu-header #megamenu-menu-header-title:before { 840 | color: var(--text-color); 841 | } 842 | 843 | megamenu-back-btn { 844 | color: var(--text-color); 845 | border-color: var(--text-color); 846 | } 847 | 848 | .megamenu-menu-header #megamenu-menu-header-title, 849 | .megamenu-menu-header:hover, 850 | .megamenu-menu-header:focus { 851 | color: inherit; 852 | } 853 | 854 | .megamenu-menu-panel table tr:nth-child(2n + 1) { 855 | background-color: var(--side-bar-bg-color); 856 | } -------------------------------------------------------------------------------- /themes/classic/notion-light-classic.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Text editor */ 3 | --bg-color: #ffffff; 4 | --text-color: #37352f; 5 | --body-text-color: #37352f; 6 | --text-cursor-color: var(--text-color); 7 | 8 | --secondary-text-color: #73726e; 9 | --text-accent-color: #e9e9e7; 10 | --bg-color-dark: #f7f6f3; 11 | 12 | --text-highlight-color: #4f3b2a; 13 | --text-highlight-bg: #feecc8; 14 | 15 | --code-fence-text-color: #ec5757; 16 | --code-fence-bg-color: #f7f6f3; 17 | 18 | --blockquote-bg-color: var(--bg-color); 19 | --blockquote-accent-color: var(--text-color); 20 | --blockquote-text-color: var(--text-color); 21 | 22 | --light-trait-100: #38352f; 23 | --light-trait-200: #37352f; 24 | --light-trait-300: #37352f; 25 | --light-trait-400: #37352f; 26 | 27 | --todo-bg-color: #2eaadc; 28 | --todo-tick-color: #fff; 29 | 30 | --search-select-bg-color: #edf3ec; 31 | --search-select-text-color: #448361; 32 | 33 | --search-hit-text-color: #d44c47; 34 | --search-hit-bg-color: #fdebec; 35 | 36 | --url-text-color: black; 37 | --url-underline-color: #37352f; 38 | 39 | --footnote-text-color: #f7f6f3; 40 | --footnote-bg-color: #888884; 41 | 42 | --table-primary-color: var(--bg-color); 43 | --table-secondary-color: var(--bg-color); 44 | 45 | --select-text-bg-color: #c0e5f4; 46 | 47 | --code-color: #9a6e3a; 48 | --code-cursor-color: var(--text-color); 49 | 50 | --kbd-text-color: #73726e; 51 | --kbd-bg-color: var(--bg-color-dark); 52 | 53 | /* Menu system */ 54 | --side-bar-bg-color: var(--bg-color-dark); 55 | --side-bar-text-color: var(--text-color); 56 | --item-hover-bg-color: #e8e7e4; 57 | --window-border: 1px solid var(--bg-color); 58 | 59 | --active-file-bg-color: #e9e7e4; 60 | --active-file-border-color: var(--active-file-bg-color); 61 | --active-file-text-color: var(--text-color); 62 | 63 | --footer-bg-color: var(--side-bar-bg-color); 64 | 65 | --control-text-color: #72706b; 66 | 67 | /* General */ 68 | --font-size: 16px; 69 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 70 | --monospace: 'SF Mono Medium', 'Fira Code', 'Cousine', 'Consolas', monospace; 71 | --heading-char-color: var(--light-trait-400); 72 | --color-popover-bg-color: var(--text-color); 73 | --rawblock-edit-panel-bd: var(--bg-color-dark); 74 | --meta-content-color: var(--body-text-color); 75 | --primary-btn-border-color: var(--body-text-color); 76 | --border-radius: 4px; 77 | 78 | 79 | /* Code variables */ 80 | --cm-line: #999999; 81 | --cm-variable: #37352f; 82 | --cm-keyword: #0277aa; 83 | --cm-tag: #ff5a5a; 84 | --cm-bracket: #ff5a5a; 85 | --cm-error: #ff5a5a; 86 | --cm-attribute: #0277aa; 87 | --cm-def: #dc4a68; 88 | --cm-comment: #708090; 89 | --cm-string: #669900; 90 | --cm-operator: #9a6e3b; 91 | --cm-number: #990055; 92 | --cm-meta: var(--text-color); 93 | --cm-atom: #845dc4; 94 | --cm-builtin: #669900; 95 | --cm-property: var(--text-color); 96 | --cm-variable-2: var(--text-color); 97 | --cm-variable-3: #0277aa; 98 | --cm-gutter: #f1f3f450; 99 | } 100 | 101 | html { 102 | font-size: var(--font-size); 103 | } 104 | 105 | body { 106 | font-family: var(--font-family); 107 | -webkit-font-smoothing: antialiased; 108 | color: var(--body-text-color); 109 | line-height: 1.6; 110 | } 111 | 112 | code { 113 | background-color: var(--code-fence-bg-color); 114 | padding: 2px 2px 2px 2px; 115 | } 116 | 117 | #write { 118 | max-width: 860px; 119 | margin: 0 auto; 120 | padding: 30px; 121 | padding-bottom: 100px; 122 | } 123 | 124 | @media only screen and (min-width: 1400px) { 125 | #write { 126 | max-width: 1024px; 127 | } 128 | } 129 | 130 | @media only screen and (min-width: 1800px) { 131 | #write { 132 | max-width: 1200px; 133 | } 134 | } 135 | 136 | #write>ul:first-child, 137 | #write>ol:first-child { 138 | margin-top: 30px; 139 | } 140 | 141 | a { 142 | color: var(--text-color); 143 | } 144 | 145 | h1, 146 | h2, 147 | h3, 148 | h4, 149 | h5, 150 | h6 { 151 | position: relative; 152 | margin-top: 2rem; 153 | margin-bottom: 1rem; 154 | font-weight: 700; 155 | line-height: 1.4; 156 | cursor: text; 157 | } 158 | 159 | cursor { 160 | color: var(--text-cursor-color) 161 | } 162 | 163 | h1:hover a.anchor, 164 | h2:hover a.anchor, 165 | h3:hover a.anchor, 166 | h4:hover a.anchor, 167 | h5:hover a.anchor, 168 | h6:hover a.anchor { 169 | text-decoration: none; 170 | } 171 | 172 | h1 tt, 173 | h1 code, 174 | h2 tt, 175 | h2 code, 176 | h3 tt, 177 | h3 code, 178 | h4 tt, 179 | h4 code, 180 | h5 tt, 181 | h5 code, 182 | h6 tt, 183 | h6 code { 184 | font-size: inherit; 185 | } 186 | 187 | h1 { 188 | padding-bottom: 0.3em; 189 | font-size: 2.2em; 190 | line-height: 1.3; 191 | color: var(--light-trait-100); 192 | } 193 | 194 | h2 { 195 | padding-bottom: 0.3em; 196 | font-size: 1.75em; 197 | line-height: 1.225; 198 | color: var(--light-trait-200); 199 | } 200 | 201 | h3 { 202 | font-size: 1.4em; 203 | line-height: 1.43; 204 | color: var(--light-trait-300); 205 | } 206 | 207 | h4 { 208 | font-size: 1.2em; 209 | color: var(--light-trait-400); 210 | } 211 | 212 | h5 { 213 | font-size: 1em; 214 | color: var(--light-trait-400); 215 | } 216 | 217 | h6 { 218 | font-size: 1em; 219 | color: var(--light-trait-400); 220 | } 221 | 222 | p, 223 | blockquote, 224 | ul, 225 | ol, 226 | dl, 227 | table { 228 | margin: 0.8em 0; 229 | } 230 | 231 | li>ol, 232 | li>ul { 233 | margin: 0 0; 234 | } 235 | 236 | hr { 237 | background-color: var(--light-trait-100); 238 | height: 1.5px; 239 | border: none 240 | } 241 | 242 | a, 243 | .md-def-url { 244 | color: var(--url-text-color); 245 | text-decoration: none; 246 | border-bottom: 0.05em solid; 247 | border-color: var(--url-underline-color); 248 | transition: all .1s ease-in; 249 | } 250 | 251 | a:hover { 252 | text-decoration: none; 253 | opacity: 1; 254 | } 255 | 256 | sup.md-footnote { 257 | background-color: var(--footnote-text-color); 258 | color: var(--footnote-bg-color); 259 | } 260 | 261 | li p.first { 262 | display: inline-block; 263 | } 264 | 265 | ul, 266 | ol { 267 | padding-left: 30px; 268 | } 269 | 270 | ul:first-child, 271 | ol:first-child { 272 | margin-top: 0.35%; 273 | } 274 | 275 | ul:last-child, 276 | ol:last-child { 277 | margin-bottom: 0; 278 | } 279 | 280 | mark, 281 | .ty-file-search-match-text, 282 | .md-search-hit { 283 | background: var(--search-hit-bg-color); 284 | color: var(--search-hit-text-color); 285 | } 286 | 287 | mark { 288 | border-radius: 4px; 289 | color: var(--text-highlight-color); 290 | font-weight: inherit; 291 | background-color: var(--text-highlight-bg); 292 | padding-left: 4px; 293 | padding-right: 4px; 294 | padding-top: 2px; 295 | padding-bottom: 2px; 296 | margin-left: 2px; 297 | margin-right: 2px; 298 | } 299 | 300 | .md-search-hit * { 301 | background: var(--search-select-bg-color); 302 | color: var(--search-select-text-color); 303 | } 304 | 305 | /* Search highlight */ 306 | .cm-search-hit.CodeMirror-selectedtext, 307 | .md-search-hit.md-search-select, 308 | .md-search-select { 309 | outline: 0px solid var(--search-select-text-color); 310 | } 311 | 312 | .outline-item.select, 313 | .ty-search-item-line.select, 314 | .ty-search-item.select { 315 | outline-width: 2px; 316 | } 317 | 318 | .outline-item.select { 319 | outline-offset: 0px; 320 | } 321 | 322 | blockquote { 323 | color: var(--blockquote-text-color); 324 | margin-left: 1.75px; 325 | margin-right: 0px; 326 | border-left: 4px solid var(--blockquote-accent-color); 327 | padding: 10px 14px 7px 22px; 328 | /* change the quote highlight */ 329 | background-color: var(--blockquote-bg-color); 330 | } 331 | 332 | blockquote blockquote { 333 | padding-right: 0; 334 | } 335 | 336 | /* Alternating color rows in table*/ 337 | table tr:nth-child(2n) { 338 | background-color: var(--table-primary-color); 339 | } 340 | 341 | table tr:nth-child(2n + 1) { 342 | background-color: var(--table-secondary-color); 343 | } 344 | 345 | /* Alternating color rows in table*/ 346 | 347 | table { 348 | padding: 0; 349 | word-break: initial; 350 | } 351 | 352 | table tr { 353 | border-top: 1px solid var(--text-accent-color); 354 | margin: 0; 355 | padding: 0; 356 | } 357 | 358 | table tr th { 359 | font-weight: bold; 360 | border: 1px solid var(--text-accent-color); 361 | border-bottom: 0; 362 | margin: 0; 363 | padding: 6px 13px; 364 | } 365 | 366 | table tr td { 367 | border: 1px solid var(--text-accent-color); 368 | margin: 0; 369 | padding: 6px 13px; 370 | } 371 | 372 | table tr th:first-child, 373 | table tr td:first-child { 374 | margin-top: 0; 375 | } 376 | 377 | table tr th:last-child, 378 | table tr td:last-child { 379 | margin-bottom: 0; 380 | } 381 | 382 | kbd { 383 | font-size: 0.875rem; 384 | background: var(--kbd-bg-color); 385 | border: 1px solid var(--text-accent-color); 386 | box-shadow: 0 2px 0 var(--text-accent-color); 387 | color: var(--kbd-text-color); 388 | } 389 | 390 | .md-fences, 391 | code, 392 | tt { 393 | border: none; 394 | color: var(--code-fence-text-color); 395 | background-color: var(--code-fence-bg-color); 396 | border-radius: var(--border-radius); 397 | padding: 2px 4px 0px 4px; 398 | font-size: 0.975em; 399 | font-weight: medium; 400 | font-family: var(--monospace) 401 | } 402 | 403 | .md-fences { 404 | margin-bottom: 15px; 405 | margin-top: 15px; 406 | padding-top: 8px; 407 | padding-bottom: 6px; 408 | } 409 | 410 | #write pre.md-meta-block { 411 | padding: 1rem; 412 | font-size: 85%; 413 | line-height: 1.45; 414 | background-color: var(--bg-color-dark); 415 | border: 0; 416 | border-radius: var(--border-radius); 417 | color: var(--secondary-text-color); 418 | margin-top: 0 !important; 419 | } 420 | 421 | #write .mathjax-block .md-rawblock-tooltip { 422 | border-top-left-radius: var(--border-radius); 423 | border-top-right-radius: var(--border-radius); 424 | } 425 | 426 | 427 | #write .mathjax-block .md-math-container { 428 | border-top-left-radius: var(--border-radius); 429 | border-bottom-right-radius: var(--border-radius); 430 | border-bottom-left-radius: var(--border-radius); 431 | } 432 | 433 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 434 | border-top-left-radius: var(--border-radius); 435 | } 436 | 437 | .md-mathjax-midline { 438 | background-color: var(--bg-color); 439 | color: var(--text-color); 440 | } 441 | 442 | .md-inline-math script { 443 | color: var(--code-color); 444 | } 445 | 446 | .CodeMirror-lines { 447 | padding-left: 4px; 448 | } 449 | 450 | .code-tooltip { 451 | box-shadow: none; 452 | border-radius: var(--border-radius); 453 | } 454 | 455 | #write .code-tooltip { 456 | bottom: initial; 457 | top: 100%; 458 | left: initial; 459 | right: -1px; 460 | background: var(--bg-color-dark); 461 | border: 1px solid var(--text-accent-color); 462 | border-top-left-radius: 0; 463 | border-top-right-radius: 0; 464 | border-top: 0; 465 | font-family: var(--monospace); 466 | } 467 | 468 | #write .md-mathblock-panel .code-tooltip { 469 | right: 0; 470 | border: none; 471 | } 472 | 473 | /* TODO */ 474 | #write .md-task-list-item>input { 475 | -webkit-appearance: initial; 476 | display: inline-block; 477 | text-align: center; 478 | vertical-align: middle; 479 | position: absolute; 480 | border: 1px solid var(--text-color); 481 | margin-top: 0.3rem; 482 | margin-left: -1.45rem; 483 | height: 0.95rem; 484 | width: 0.95rem; 485 | transition: all 0.35s; 486 | } 487 | 488 | #write .md-task-list-item>input:focus { 489 | outline: none; 490 | box-shadow: none; 491 | } 492 | 493 | #write .md-task-list-item>input[checked] { 494 | background: var(--todo-bg-color); 495 | border: 1px solid var(--todo-bg-color); 496 | text-decoration: line-through; 497 | } 498 | 499 | #write .md-task-list-item>input[checked]::before { 500 | display: flex; 501 | align-items: center; 502 | justify-content: center; 503 | content: '✓'; 504 | position: absolute; 505 | margin-top: 0.05rem; 506 | top: 0; 507 | left: 0; 508 | height: 100%; 509 | width: 100%; 510 | color: var(--todo-tick-color); 511 | font-size: 0.75em; 512 | font-weight: 600; 513 | } 514 | 515 | #write .md-task-list-item>input[checked]::after { 516 | text-decoration: line-through; 517 | } 518 | 519 | /* TODO */ 520 | .md-image>.md-meta { 521 | border-radius: var(--border-radius); 522 | padding: 2px 0px 0px 4px; 523 | font-size: 0.9em; 524 | color: inherit; 525 | } 526 | 527 | .md-toc { 528 | margin-top: 20px; 529 | padding-bottom: 20px; 530 | } 531 | 532 | /* Source mode */ 533 | .CodeMirror.cm-s-typora-default *, 534 | .cm-s-typora-default * { 535 | background: inherit; 536 | color: var(--body-text-color); 537 | font-family: var(--monospace); 538 | font-size: var(--font-size) !important; 539 | font-style: normal; 540 | font-weight: medium; 541 | } 542 | 543 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 544 | border-left: 2.75px solid var(--code-cursor-color); 545 | } 546 | 547 | .CodeMirror div.CodeMirror-cursor { 548 | border-left: 2.75px solid var(--code-cursor-color); 549 | } 550 | 551 | 552 | .sidebar-tabs { 553 | border-bottom: none; 554 | } 555 | 556 | .outline-expander { 557 | width: 1.5rem; 558 | vertical-align: initial; 559 | } 560 | 561 | .outline-expander:before, 562 | .outline-expander:hover:before, 563 | .outline-item-open>.outline-item>.outline-expander:before, 564 | .outline-item-open>.outline-item>.outline-expander:hover:before { 565 | content: "\f125"; 566 | transition: transform 125ms ease-in-out; 567 | } 568 | 569 | .outline-item-open>.outline-item>.outline-expander:hover:before, 570 | .outline-item-open>.outline-item>.outline-expander:before { 571 | transform: rotate(90deg); 572 | } 573 | 574 | .outline-label:hover { 575 | text-decoration: none; 576 | } 577 | 578 | #toc-dropmenu { 579 | background: var(--bg-color-dark); 580 | } 581 | 582 | #toc-dropmenu .outline-title { 583 | font-size: 1rem; 584 | text-transform: uppercase; 585 | } 586 | 587 | .dropdown-menu .divider { 588 | display: none; 589 | } 590 | 591 | .context-menu { 592 | border: none !important; 593 | backdrop-filter: saturate(180%) blur(20px) brightness(1.1); 594 | background-color: var(--bg-color-dark); 595 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .22), 0 4.8px 14.4px 0 rgba(0, 0, 0, .18) !important; 596 | } 597 | 598 | .file-node-background { 599 | height: 31px; 600 | } 601 | 602 | .file-node-content:hover .file-node-icon, 603 | .file-node-content:hover .file-node-open-state { 604 | visibility: visible; 605 | } 606 | 607 | .file-node-icon { 608 | margin-right: 8px; 609 | } 610 | 611 | .file-library-node:not(.file-node-root):focus>.file-node-content { 612 | outline: none; 613 | } 614 | 615 | /* New file animation */ 616 | .blink-area { 617 | animation: none; 618 | } 619 | 620 | .file-list-item-summary { 621 | font-size: var(--font-size); 622 | font-family: var(--font-family); 623 | } 624 | 625 | #md-searchpanel input { 626 | border-radius: var(--border-radius); 627 | box-shadow: none; 628 | } 629 | 630 | #md-searchpanel input:focus { 631 | box-shadow: none; 632 | border-color: var(--meta-content-color); 633 | } 634 | 635 | #md-searchpanel .search-type-selection { 636 | width: auto; 637 | } 638 | 639 | #md-searchpanel .btn:not(.close-btn):hover { 640 | box-shadow: none; 641 | } 642 | 643 | .mac-seamless-mode #typora-sidebar { 644 | color: var(--sidebar-text-color); 645 | background-color: var(--side-bar-bg-color); 646 | } 647 | 648 | #md-notification .btn { 649 | border: 0; 650 | } 651 | 652 | /* CODE HIGHLIGHT */ 653 | pre.CodeMirror-line { 654 | color: var(--cm-line) !important 655 | } 656 | 657 | .cm-variable { 658 | color: var(--cm-variable) !important 659 | } 660 | 661 | .cm-keyword { 662 | color: var(--cm-keyword) !important 663 | } 664 | 665 | .cm-tag { 666 | color: var(--cm-tag) !important 667 | } 668 | 669 | .cm-variable-3 { 670 | color: var(--cm-variable-3) !important 671 | } 672 | 673 | .cm-bracket { 674 | color: var(--cm-bracket); 675 | } 676 | 677 | .cm-error { 678 | color: var(--cm-error) !important; 679 | } 680 | 681 | .cm-attribute { 682 | color: var(--cm-attribute) !important 683 | } 684 | 685 | .cm-def { 686 | color: var(--cm-def) !important 687 | } 688 | 689 | .cm-comment { 690 | color: var(--cm-comment) !important 691 | } 692 | 693 | .cm-string { 694 | color: var(--cm-string) !important; 695 | font-variant-ligatures: common-ligatures !important; 696 | } 697 | 698 | .cm-tag:not() { 699 | font-weight: 700; 700 | } 701 | 702 | .cm-operator { 703 | color: var(--cm-operator) !important 704 | } 705 | 706 | .cm-number { 707 | color: var(--cm-number) !important 708 | } 709 | 710 | .cm-meta { 711 | color: var(--cm-meta) !important; 712 | font-weight: 700 !important; 713 | } 714 | 715 | .cm-atom { 716 | color: var(--cm-atom) !important 717 | } 718 | 719 | .cm-builtin { 720 | color: var(--cm-builtin) !important 721 | } 722 | 723 | .cm-property { 724 | color: var(--cm-property) !important 725 | } 726 | 727 | .cm-variable-2 { 728 | color: var(--cm-variable-2) !important 729 | } 730 | 731 | 732 | /* CODE HIGHLIGHT */ 733 | 734 | .file-tree-node.active>.file-node-background { 735 | color: var(--active-file-text-color); 736 | background-color: var(--active-file-bg-color); 737 | border-left: 0px solid var(--active-file-border-color) !important; 738 | border-color: var(--active-file-border-color) !important; 739 | } 740 | 741 | .CodeMirror-gutters { 742 | border-right: 1px solid var(--cm-gutter); 743 | background: inherit; 744 | white-space: nowrap; 745 | } 746 | 747 | .ty-footer, 748 | .sidebar-footer, 749 | footer { 750 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85); 751 | border: none !important; 752 | background: none; 753 | background-color: var(--footer-bg-color); 754 | } 755 | 756 | .code-tooltip { 757 | border-radius: 4px; 758 | background-color: var(--dark-trait); 759 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 760 | } 761 | 762 | #sidebar-files-menu { 763 | color: var(--side-bar-text-color); 764 | border-radius: 4px; 765 | border: none !important; 766 | box-shadow: 0 25.6px 57.6px 0 #f7f6f3, 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 767 | } 768 | 769 | .code-tooltip.md-tooltip-hide.md-hover-tip { 770 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 771 | } 772 | 773 | #typora-sidebar { 774 | border: none !important; 775 | } 776 | 777 | #footer-word-count-info, 778 | #spell-check-panel { 779 | border: none !important; 780 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85) !important; 781 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .32), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 782 | } 783 | 784 | /* Windows/Linux unibody mode */ 785 | .megamenu-content, 786 | .megamenu-opened header { 787 | color: var(--body-text-color); 788 | background: var(--bg-color-dark); 789 | } 790 | 791 | #recent-file-panel-action-btn { 792 | background: inherit; 793 | border: 1px var(--light-trait-300) solid; 794 | } 795 | 796 | .megamenu-menu-panel table td:nth-child(1) { 797 | color: var(--text-color); 798 | background: var(--bg-color-dark); 799 | } 800 | 801 | .megamenu-menu-panel table td:nth-child(2) { 802 | color: var(--text-color); 803 | background: var(--bg-color-dark); 804 | } 805 | 806 | .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 807 | color: var(--text-color); 808 | background: var(--active-file-bg-color); 809 | } 810 | 811 | .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 812 | color: var(--text-color); 813 | background: var(--active-file-bg-color); 814 | } 815 | 816 | .megamenu-menu-panel input[type='text'] { 817 | background: inherit; 818 | border: 1px var(--text-color-secondary) solid; 819 | } 820 | 821 | #recent-file-panel-action-btn { 822 | background: inherit; 823 | } 824 | 825 | .megamenu-menu, 826 | .megamenu-content { 827 | background: var(--side-bar-bg-color); 828 | color: var(--text-color); 829 | } 830 | 831 | #top-titlebar, 832 | #top-titlebar * { 833 | background: inherit; 834 | color: var(--text-color); 835 | } 836 | 837 | .megamenu-menu-header #megamenu-menu-header-title:before { 838 | color: var(--text-color); 839 | } 840 | 841 | megamenu-back-btn { 842 | color: var(--text-color); 843 | border-color: var(--text-color); 844 | } 845 | 846 | .megamenu-menu-header #megamenu-menu-header-title, 847 | .megamenu-menu-header:hover, 848 | .megamenu-menu-header:focus { 849 | color: inherit; 850 | } 851 | 852 | .megamenu-menu-panel table tr:nth-child(2n + 1) { 853 | background-color: var(--side-bar-bg-color); 854 | } -------------------------------------------------------------------------------- /themes/enhanced/notion-dark-enhanced.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Text editor */ 3 | --bg-color: #2f3437; 4 | --text-color: #ebebeb; 5 | --body-text-color: #ebebeb; 6 | --text-cursor-color: var(--text-color); 7 | 8 | --secondary-text-color: #73726e; 9 | --text-accent-color: #393c3f; 10 | --bg-color-dark: #3f4447; 11 | 12 | --text-highlight-color: #fff; 13 | --text-highlight-bg: #4f4029; 14 | 15 | --code-fence-text-color: #ecebeb; 16 | --code-fence-bg-color: #3f4447; 17 | 18 | --blockquote-bg-color: #3c4144; 19 | --blockquote-accent-color: var(--text-color); 20 | --blockquote-text-color: var(--text-color); 21 | 22 | --light-trait-100: #ebebeb; 23 | --light-trait-200: #ebebeb; 24 | --light-trait-300: #ebebeb; 25 | --light-trait-400: #ebebeb; 26 | 27 | --todo-bg-color: #2eaadc; 28 | --todo-tick-color: #fff; 29 | 30 | --search-select-bg-color: #2e443a; 31 | --search-select-text-color: #eaedec; 32 | 33 | --search-hit-text-color: #eceded; 34 | --search-hit-bg-color: #5e3436; 35 | 36 | --url-text-color: var(--text-color); 37 | --url-underline-color: var(--text-color); 38 | 39 | --footnote-text-color: #b1b3b4; 40 | --footnote-bg-color: #393c3f; 41 | 42 | --table-primary-color: var(--bg-color); 43 | --table-secondary-color: var(--bg-color); 44 | 45 | --select-text-bg-color: #2e5767; 46 | 47 | --code-color: #9a6e3a; 48 | --code-cursor-color: var(--text-color); 49 | 50 | --kbd-text-color: #acaeaf; 51 | --kbd-bg-color: var(--bg-color-dark); 52 | 53 | /* Menu system */ 54 | --side-bar-bg-color: var(--bg-color-dark); 55 | --side-bar-text-color: var(--text-color); 56 | --item-hover-bg-color: #4b5053; 57 | --window-border: 1px solid var(--bg-color); 58 | 59 | --active-file-bg-color: #4b5053; 60 | --active-file-border-color: var(--active-file-bg-color); 61 | --active-file-text-color: var(--text-color); 62 | 63 | --footer-bg-color: var(--side-bar-bg-color); 64 | 65 | --control-text-color: #afb1b2; 66 | 67 | /* General */ 68 | --font-size: 16px; 69 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 70 | --monospace: 'SF Mono Medium', 'Fira Code', 'Cousine', 'Consolas', monospace; 71 | --heading-char-color: var(--light-trait-400); 72 | --color-popover-bg-color: var(--text-color); 73 | --rawblock-edit-panel-bd: var(--bg-color-dark); 74 | --meta-content-color: var(--body-text-color); 75 | --primary-btn-border-color: var(--body-text-color); 76 | --border-radius: 4px; 77 | 78 | 79 | /* Code variables */ 80 | --cm-line: #b8babb; 81 | --cm-variable: var(--text-color); 82 | --cm-keyword: #d1949e; 83 | --cm-tag: #d1949e; 84 | --cm-bracket: #d1949e; 85 | --cm-error: #ff5a5a; 86 | --cm-attribute: #d1949e; 87 | --cm-def: #eceded; 88 | --cm-comment: #998066; 89 | --cm-string: #bde052; 90 | --cm-operator: #f5b83d; 91 | --cm-number: #d1949e; 92 | --cm-meta: var(--text-color); 93 | --cm-atom: #845dc4; 94 | --cm-builtin: #bde052; 95 | --cm-property: var(--text-color); 96 | --cm-variable-2: var(--text-color); 97 | --cm-variable-3: #bde052; 98 | --cm-gutter: #f1f3f450; 99 | } 100 | 101 | html { 102 | font-size: var(--font-size); 103 | } 104 | 105 | body { 106 | font-family: var(--font-family); 107 | -webkit-font-smoothing: antialiased; 108 | color: var(--body-text-color); 109 | line-height: 1.6; 110 | } 111 | 112 | code { 113 | 114 | background-color: var(--code-fence-bg-color); 115 | padding: 2px 2px 2px 2px; 116 | } 117 | 118 | #write { 119 | max-width: 860px; 120 | margin: 0 auto; 121 | padding: 30px; 122 | padding-bottom: 100px; 123 | } 124 | 125 | @media only screen and (min-width: 1400px) { 126 | #write { 127 | max-width: 1024px; 128 | } 129 | } 130 | 131 | @media only screen and (min-width: 1800px) { 132 | #write { 133 | max-width: 1200px; 134 | } 135 | } 136 | 137 | #write>ul:first-child, 138 | #write>ol:first-child { 139 | margin-top: 30px; 140 | } 141 | 142 | a { 143 | color: var(--text-color); 144 | } 145 | 146 | h1, 147 | h2, 148 | h3, 149 | h4, 150 | h5, 151 | h6 { 152 | position: relative; 153 | margin-top: 2rem; 154 | margin-bottom: 1rem; 155 | font-weight: 700; 156 | line-height: 1.4; 157 | cursor: text; 158 | } 159 | 160 | cursor { 161 | color: var(--text-cursor-color) 162 | } 163 | 164 | h1:hover a.anchor, 165 | h2:hover a.anchor, 166 | h3:hover a.anchor, 167 | h4:hover a.anchor, 168 | h5:hover a.anchor, 169 | h6:hover a.anchor { 170 | text-decoration: none; 171 | } 172 | 173 | h1 tt, 174 | h1 code, 175 | h2 tt, 176 | h2 code, 177 | h3 tt, 178 | h3 code, 179 | h4 tt, 180 | h4 code, 181 | h5 tt, 182 | h5 code, 183 | h6 tt, 184 | h6 code { 185 | font-size: inherit; 186 | } 187 | 188 | h1 { 189 | padding-bottom: 0.3em; 190 | font-size: 2.2em; 191 | line-height: 1.3; 192 | color: var(--light-trait-100); 193 | } 194 | 195 | h2 { 196 | padding-bottom: 0.3em; 197 | font-size: 1.75em; 198 | line-height: 1.225; 199 | color: var(--light-trait-200); 200 | } 201 | 202 | h3 { 203 | font-size: 1.4em; 204 | line-height: 1.43; 205 | color: var(--light-trait-300); 206 | } 207 | 208 | h4 { 209 | font-size: 1.2em; 210 | color: var(--light-trait-400); 211 | } 212 | 213 | h5 { 214 | font-size: 1em; 215 | color: var(--light-trait-400); 216 | } 217 | 218 | h6 { 219 | font-size: 1em; 220 | color: var(--light-trait-400); 221 | } 222 | 223 | p, 224 | blockquote, 225 | ul, 226 | ol, 227 | dl, 228 | table { 229 | margin: 0.8em 0; 230 | } 231 | 232 | li>ol, 233 | li>ul { 234 | margin: 0 0; 235 | } 236 | 237 | hr { 238 | background-color: var(--light-trait-100); 239 | height: 1.5px; 240 | border: none 241 | } 242 | 243 | a, 244 | .md-def-url { 245 | color: var(--url-text-color); 246 | text-decoration: none; 247 | border-bottom: 0.05em solid; 248 | border-color: var(--url-underline-color); 249 | transition: all .1s ease-in; 250 | } 251 | 252 | a:hover { 253 | text-decoration: none; 254 | opacity: 1; 255 | } 256 | 257 | sup.md-footnote { 258 | background-color: var(--footnote-bg-color); 259 | color: var(--footnote-text-color); 260 | } 261 | 262 | li p.first { 263 | display: inline-block; 264 | } 265 | 266 | ul, 267 | ol { 268 | padding-left: 30px; 269 | } 270 | 271 | ul:first-child, 272 | ol:first-child { 273 | margin-top: 0.35%; 274 | } 275 | 276 | ul:last-child, 277 | ol:last-child { 278 | margin-bottom: 0; 279 | } 280 | 281 | mark, 282 | .ty-file-search-match-text, 283 | .md-search-hit { 284 | background: var(--search-hit-bg-color); 285 | color: var(--search-hit-text-color); 286 | } 287 | 288 | mark { 289 | border-radius: 4px; 290 | color: var(--text-highlight-color); 291 | font-weight: inherit; 292 | background-color: var(--text-highlight-bg); 293 | padding-left: 4px; 294 | padding-right: 4px; 295 | padding-top: 2px; 296 | padding-bottom: 2px; 297 | margin-left: 2px; 298 | margin-right: 2px; 299 | } 300 | 301 | .md-search-hit * { 302 | background: var(--search-select-bg-color); 303 | color: var(--search-select-text-color); 304 | } 305 | 306 | /* Search highlight */ 307 | .cm-search-hit.CodeMirror-selectedtext, 308 | .md-search-hit.md-search-select, 309 | .md-search-select { 310 | outline: 0px solid var(--search-select-text-color); 311 | } 312 | 313 | .outline-item.select, 314 | .ty-search-item-line.select, 315 | .ty-search-item.select { 316 | outline-width: 2px; 317 | } 318 | 319 | .outline-item.select { 320 | outline-offset: 0px; 321 | } 322 | 323 | blockquote { 324 | color: var(--blockquote-text-color); 325 | margin-left: 1.75px; 326 | margin-right: 0px; 327 | border-left: 4px solid var(--blockquote-accent-color); 328 | padding: 10px 14px 7px 22px; 329 | /* change the quote highlight */ 330 | background-color: var(--blockquote-bg-color); 331 | } 332 | 333 | blockquote blockquote { 334 | padding-right: 0; 335 | } 336 | 337 | /* Alternating color rows in table*/ 338 | table tr:nth-child(2n) { 339 | background-color: var(--table-primary-color); 340 | } 341 | 342 | table tr:nth-child(2n + 1) { 343 | background-color: var(--table-secondary-color); 344 | } 345 | 346 | /* Alternating color rows in table*/ 347 | 348 | table { 349 | padding: 0; 350 | word-break: initial; 351 | } 352 | 353 | table tr { 354 | border-top: 1px solid var(--text-accent-color); 355 | margin: 0; 356 | padding: 0; 357 | } 358 | 359 | table tr th { 360 | font-weight: bold; 361 | border: 1px solid var(--text-accent-color); 362 | border-bottom: 0; 363 | margin: 0; 364 | padding: 6px 13px; 365 | } 366 | 367 | table tr td { 368 | border: 1px solid var(--text-accent-color); 369 | margin: 0; 370 | padding: 6px 13px; 371 | } 372 | 373 | table tr th:first-child, 374 | table tr td:first-child { 375 | margin-top: 0; 376 | } 377 | 378 | table tr th:last-child, 379 | table tr td:last-child { 380 | margin-bottom: 0; 381 | } 382 | 383 | kbd { 384 | font-size: 0.875rem; 385 | background: var(--kbd-bg-color); 386 | border: 1px solid var(--text-accent-color); 387 | box-shadow: 0 2px 0 var(--text-accent-color); 388 | color: var(--kbd-text-color); 389 | } 390 | 391 | .md-fences, 392 | code, 393 | tt { 394 | border: none; 395 | color: var(--code-fence-text-color); 396 | background-color: var(--code-fence-bg-color); 397 | border-radius: var(--border-radius); 398 | padding: 2px 4px 0px 4px; 399 | font-size: 0.975em; 400 | font-weight: medium; 401 | font-family: var(--monospace) 402 | } 403 | 404 | .md-fences { 405 | margin-bottom: 15px; 406 | margin-top: 15px; 407 | padding-top: 8px; 408 | padding-bottom: 6px; 409 | } 410 | 411 | #write pre.md-meta-block { 412 | padding: 1rem; 413 | font-size: 85%; 414 | line-height: 1.45; 415 | background-color: var(--bg-color-dark); 416 | border: 0; 417 | border-radius: var(--border-radius); 418 | color: var(--secondary-text-color); 419 | margin-top: 0 !important; 420 | } 421 | 422 | #write .mathjax-block .md-rawblock-tooltip { 423 | border-top-left-radius: var(--border-radius); 424 | border-top-right-radius: var(--border-radius); 425 | } 426 | 427 | 428 | #write .mathjax-block .md-math-container { 429 | border-top-left-radius: var(--border-radius); 430 | border-bottom-right-radius: var(--border-radius); 431 | border-bottom-left-radius: var(--border-radius); 432 | } 433 | 434 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 435 | border-top-left-radius: var(--border-radius); 436 | } 437 | 438 | .md-mathjax-midline { 439 | background-color: var(--bg-color); 440 | color: var(--text-color); 441 | } 442 | 443 | .md-inline-math script { 444 | color: var(--code-color); 445 | } 446 | 447 | .CodeMirror-lines { 448 | padding-left: 4px; 449 | } 450 | 451 | .code-tooltip { 452 | box-shadow: none; 453 | border-radius: var(--border-radius); 454 | } 455 | 456 | #write .code-tooltip { 457 | bottom: initial; 458 | top: 100%; 459 | left: initial; 460 | right: -1px; 461 | background: var(--bg-color-dark); 462 | border: 1px solid var(--text-accent-color); 463 | border-top-left-radius: 0; 464 | border-top-right-radius: 0; 465 | border-top: 0; 466 | font-family: var(--monospace); 467 | } 468 | 469 | #write .md-mathblock-panel .code-tooltip { 470 | right: 0; 471 | border: none; 472 | } 473 | 474 | /* TODO */ 475 | #write .md-task-list-item>input { 476 | -webkit-appearance: initial; 477 | display: inline-block; 478 | text-align: center; 479 | vertical-align: middle; 480 | position: absolute; 481 | border: 1px solid var(--text-color); 482 | /* border-radius: 100%; */ 483 | margin-left: -1.45rem; 484 | height: 0.95rem; 485 | width: 0.95rem; 486 | transition: all 0.35s; 487 | } 488 | 489 | #write .md-task-list-item>input:focus { 490 | outline: none; 491 | box-shadow: none; 492 | } 493 | 494 | #write .md-task-list-item>input[checked] { 495 | background: var(--todo-bg-color); 496 | border: 1px solid var(--todo-bg-color); 497 | text-decoration: line-through; 498 | } 499 | 500 | #write .md-task-list-item>input[checked]::before { 501 | display: flex; 502 | align-items: center; 503 | justify-content: center; 504 | content: '✓'; 505 | position: absolute; 506 | margin-top: 0.05rem; 507 | top: 0; 508 | left: 0; 509 | height: 100%; 510 | width: 100%; 511 | color: var(--todo-tick-color); 512 | font-size: 0.75em; 513 | font-weight: 600; 514 | } 515 | 516 | #write .md-task-list-item>input[checked]::after { 517 | text-decoration: line-through; 518 | } 519 | 520 | /* TODO */ 521 | .md-image>.md-meta { 522 | border-radius: var(--border-radius); 523 | padding: 2px 0px 0px 4px; 524 | font-size: 0.9em; 525 | color: inherit; 526 | } 527 | 528 | .md-toc { 529 | margin-top: 20px; 530 | padding-bottom: 20px; 531 | } 532 | 533 | /* Source mode */ 534 | .CodeMirror.cm-s-typora-default *, 535 | .cm-s-typora-default * { 536 | background: inherit; 537 | color: var(--body-text-color); 538 | font-family: var(--monospace); 539 | font-size: var(--font-size) !important; 540 | font-style: normal; 541 | font-weight: medium; 542 | } 543 | 544 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 545 | border-left: 2.35px solid var(--code-cursor-color); 546 | } 547 | 548 | .CodeMirror div.CodeMirror-cursor { 549 | border-left: 2.35px solid var(--code-cursor-color); 550 | } 551 | 552 | 553 | .sidebar-tabs { 554 | border-bottom: none; 555 | } 556 | 557 | .outline-expander { 558 | width: 1.5rem; 559 | vertical-align: initial; 560 | } 561 | 562 | .outline-expander:before, 563 | .outline-expander:hover:before, 564 | .outline-item-open>.outline-item>.outline-expander:before, 565 | .outline-item-open>.outline-item>.outline-expander:hover:before { 566 | content: "\f125"; 567 | transition: transform 125ms ease-in-out; 568 | } 569 | 570 | .outline-item-open>.outline-item>.outline-expander:hover:before, 571 | .outline-item-open>.outline-item>.outline-expander:before { 572 | transform: rotate(90deg); 573 | } 574 | 575 | .outline-label:hover { 576 | text-decoration: none; 577 | } 578 | 579 | #toc-dropmenu { 580 | background: var(--bg-color-dark); 581 | } 582 | 583 | #toc-dropmenu .outline-title { 584 | font-size: 1rem; 585 | text-transform: uppercase; 586 | } 587 | 588 | .dropdown-menu .divider { 589 | display: none; 590 | } 591 | 592 | .context-menu { 593 | border: none !important; 594 | backdrop-filter: saturate(180%) blur(20px) brightness(1.1); 595 | background-color: var(--bg-color-dark); 596 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 var(--text-accent-color) !important; 597 | } 598 | 599 | .file-node-background { 600 | height: 31px; 601 | } 602 | 603 | .file-node-content:hover .file-node-icon, 604 | .file-node-content:hover .file-node-open-state { 605 | visibility: visible; 606 | } 607 | 608 | .file-node-icon { 609 | margin-right: 8px; 610 | } 611 | 612 | .file-library-node:not(.file-node-root):focus>.file-node-content { 613 | outline: none; 614 | } 615 | 616 | /* New file animation */ 617 | .blink-area { 618 | animation: none; 619 | } 620 | 621 | .file-list-item-summary { 622 | font-size: var(--font-size); 623 | font-family: var(--font-family); 624 | } 625 | 626 | #md-searchpanel input { 627 | border-radius: var(--border-radius); 628 | box-shadow: none; 629 | } 630 | 631 | #md-searchpanel input:focus { 632 | box-shadow: none; 633 | border-color: var(--meta-content-color); 634 | } 635 | 636 | #md-searchpanel .search-type-selection { 637 | width: auto; 638 | } 639 | 640 | #md-searchpanel .btn:not(.close-btn):hover { 641 | box-shadow: none; 642 | } 643 | 644 | .mac-seamless-mode #typora-sidebar { 645 | color: var(--sidebar-text-color); 646 | background-color: var(--side-bar-bg-color); 647 | } 648 | 649 | #md-notification .btn { 650 | border: 0; 651 | } 652 | 653 | /* CODE HIGHLIGHT */ 654 | pre.CodeMirror-line { 655 | color: var(--cm-line) !important 656 | } 657 | 658 | .cm-variable { 659 | color: var(--cm-variable) !important 660 | } 661 | 662 | .cm-keyword { 663 | color: var(--cm-keyword) !important 664 | } 665 | 666 | .cm-tag { 667 | color: var(--cm-tag) !important 668 | } 669 | 670 | .cm-variable-3 { 671 | color: var(--cm-variable-3) !important 672 | } 673 | 674 | .cm-bracket { 675 | color: var(--cm-bracket); 676 | } 677 | 678 | .cm-error { 679 | color: var(--cm-error) !important; 680 | } 681 | 682 | .cm-attribute { 683 | color: var(--cm-attribute) !important 684 | } 685 | 686 | .cm-def { 687 | color: var(--cm-def) !important 688 | } 689 | 690 | .cm-comment { 691 | color: var(--cm-comment) !important 692 | } 693 | 694 | .cm-string { 695 | color: var(--cm-string) !important; 696 | font-variant-ligatures: common-ligatures !important; 697 | } 698 | 699 | .cm-tag:not() { 700 | font-weight: 700; 701 | } 702 | 703 | .cm-operator { 704 | color: var(--cm-operator) !important 705 | } 706 | 707 | .cm-number { 708 | color: var(--cm-number) !important 709 | } 710 | 711 | .cm-meta { 712 | color: var(--cm-meta) !important; 713 | font-weight: 700 !important; 714 | } 715 | 716 | .cm-atom { 717 | color: var(--cm-atom) !important 718 | } 719 | 720 | .cm-builtin { 721 | color: var(--cm-builtin) !important 722 | } 723 | 724 | .cm-property { 725 | color: var(--cm-property) !important 726 | } 727 | 728 | .cm-variable-2 { 729 | color: var(--cm-variable-2) !important 730 | } 731 | 732 | 733 | /* CODE HIGHLIGHT */ 734 | 735 | .file-tree-node.active>.file-node-background { 736 | color: var(--active-file-text-color); 737 | background-color: var(--active-file-bg-color); 738 | border-left: 0px solid var(--active-file-border-color) !important; 739 | border-color: var(--active-file-border-color) !important; 740 | } 741 | 742 | .CodeMirror-gutters { 743 | border-right: 1px solid var(--cm-gutter); 744 | background: inherit; 745 | white-space: nowrap; 746 | } 747 | 748 | .ty-footer, 749 | .sidebar-footer, 750 | footer { 751 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85); 752 | border: none !important; 753 | background: none; 754 | background-color: var(--footer-bg-color); 755 | } 756 | 757 | .code-tooltip { 758 | border-radius: 4px; 759 | background-color: var(--dark-trait); 760 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 761 | } 762 | 763 | #sidebar-files-menu { 764 | color: var(--side-bar-text-color); 765 | border-radius: 4px; 766 | border: none !important; 767 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 768 | } 769 | 770 | .code-tooltip.md-tooltip-hide.md-hover-tip { 771 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 772 | } 773 | 774 | #typora-sidebar { 775 | border: none !important; 776 | } 777 | 778 | #footer-word-count-info, 779 | #spell-check-panel { 780 | border: none !important; 781 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85) !important; 782 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .32), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 783 | } 784 | 785 | /* Windows/Linux unibody mode */ 786 | .megamenu-content, 787 | .megamenu-opened header { 788 | color: var(--body-text-color); 789 | background: var(--bg-color-dark); 790 | } 791 | 792 | #recent-file-panel-action-btn { 793 | background: inherit; 794 | border: 1px var(--light-trait-300) solid; 795 | } 796 | 797 | .megamenu-menu-panel table td:nth-child(1) { 798 | color: var(--text-color); 799 | background: var(--bg-color-dark); 800 | } 801 | 802 | .megamenu-menu-panel table td:nth-child(2) { 803 | color: var(--text-color); 804 | background: var(--bg-color-dark); 805 | } 806 | 807 | .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 808 | color: var(--text-color); 809 | background: var(--active-file-bg-color); 810 | } 811 | 812 | .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 813 | color: var(--text-color); 814 | background: var(--active-file-bg-color); 815 | } 816 | 817 | .megamenu-menu-panel input[type='text'] { 818 | background: inherit; 819 | border: 1px var(--control-text-color) solid; 820 | } 821 | 822 | #recent-file-panel-action-btn { 823 | background: inherit; 824 | } 825 | 826 | .megamenu-menu, 827 | .megamenu-content { 828 | background: var(--side-bar-bg-color); 829 | color: var(--text-color); 830 | } 831 | 832 | #top-titlebar, 833 | #top-titlebar * { 834 | background: inherit; 835 | color: var(--text-color); 836 | } 837 | 838 | .megamenu-menu-header #megamenu-menu-header-title:before { 839 | color: var(--text-color); 840 | } 841 | 842 | megamenu-back-btn { 843 | color: var(--text-color); 844 | border-color: var(--text-color); 845 | } 846 | 847 | .megamenu-menu-header #megamenu-menu-header-title, 848 | .megamenu-menu-header:hover, 849 | .megamenu-menu-header:focus { 850 | color: inherit; 851 | } 852 | 853 | .megamenu-menu-panel table tr:nth-child(2n + 1) { 854 | background-color: var(--side-bar-bg-color); 855 | } -------------------------------------------------------------------------------- /themes/enhanced/notion-darker-enhanced.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Text editor */ 3 | --bg-color: #191919; 4 | --text-color: #c1c1c1; 5 | --body-text-color: #c1c1c1; 6 | --text-cursor-color: var(--text-color); 7 | 8 | --secondary-text-color: #73726e; 9 | --text-accent-color: #393c3f; 10 | --bg-color-dark: #202020; 11 | 12 | --text-highlight-color: #fff; 13 | --text-highlight-bg: #413324; 14 | 15 | --code-fence-text-color: var(--text-color); 16 | --code-fence-bg-color: #252525; 17 | 18 | --blockquote-bg-color: #252525; 19 | --blockquote-accent-color: var(--text-color); 20 | --blockquote-text-color: var(--text-color); 21 | 22 | --light-trait-100: #c1c1c1; 23 | --light-trait-200: #c1c1c1; 24 | --light-trait-300: #c1c1c1; 25 | --light-trait-400: #c1c1c1; 26 | 27 | --todo-bg-color: #2eaadc; 28 | --todo-tick-color: #fff; 29 | 30 | --search-select-text-color: #d6dbd8; 31 | --search-select-bg-color: #253d30; 32 | 33 | --search-hit-text-color: #ded8d7; 34 | --search-hit-bg-color: #522e2a; 35 | 36 | --url-text-color: var(--text-color); 37 | --url-underline-color: var(--text-color); 38 | 39 | --footnote-text-color: #6b696a; 40 | --footnote-bg-color: #272626; 41 | 42 | --table-primary-color: var(--bg-color); 43 | --table-secondary-color: var(--bg-color); 44 | 45 | --select-text-bg-color: #2e5767; 46 | 47 | --code-color: #202020; 48 | --code-cursor-color: var(--text-color); 49 | 50 | --kbd-text-color: #acaeaf; 51 | --kbd-bg-color: var(--bg-color-dark); 52 | 53 | --control-text-color: #838383; 54 | 55 | /* Menu system */ 56 | --side-bar-bg-color: var(--bg-color-dark); 57 | --side-bar-text-color: var(--text-color); 58 | --item-hover-bg-color: #2c2c2c; 59 | --window-border: 1px solid var(--bg-color); 60 | 61 | --active-file-bg-color: #2c2c2c; 62 | --active-file-border-color: var(--active-file-bg-color); 63 | --active-file-text-color: var(--text-color); 64 | 65 | --footer-bg-color: var(--side-bar-bg-color); 66 | 67 | --control-text-color: #afb1b2; 68 | 69 | /* General */ 70 | --font-size: 16px; 71 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 72 | --monospace: 'SF Mono Medium', 'Fira Code', 'Cousine', 'Consolas', monospace; 73 | --heading-char-color: var(--light-trait-400); 74 | --color-popover-bg-color: var(--text-color); 75 | --rawblock-edit-panel-bd: var(--bg-color-dark); 76 | --meta-content-color: var(--body-text-color); 77 | --primary-btn-border-color: var(--body-text-color); 78 | --border-radius: 4px; 79 | 80 | 81 | /* Code variables */ 82 | --cm-line: #b8babb; 83 | --cm-variable: var(--text-color); 84 | --cm-keyword: #d1949e; 85 | --cm-tag: #d1949e; 86 | --cm-bracket: #d1949e; 87 | --cm-error: #ff5a5a; 88 | --cm-attribute: #d1949e; 89 | --cm-def: #c2c0c1; 90 | --cm-comment: #998066; 91 | --cm-string: #bde052; 92 | --cm-operator: #f5b83d; 93 | --cm-number: #d1949e; 94 | --cm-meta: var(--text-color); 95 | --cm-atom: #845dc4; 96 | --cm-builtin: #bde052; 97 | --cm-property: var(--text-color); 98 | --cm-variable-2: var(--text-color); 99 | --cm-variable-3: #bde052; 100 | --cm-gutter: #f1f3f450; 101 | } 102 | 103 | html { 104 | font-size: var(--font-size); 105 | } 106 | 107 | body { 108 | font-family: var(--font-family); 109 | -webkit-font-smoothing: antialiased; 110 | color: var(--body-text-color); 111 | line-height: 1.6; 112 | } 113 | 114 | code { 115 | background-color: var(--code-fence-bg-color); 116 | padding: 2px 2px 2px 2px; 117 | } 118 | 119 | #write { 120 | max-width: 860px; 121 | margin: 0 auto; 122 | padding: 30px; 123 | padding-bottom: 100px; 124 | } 125 | 126 | @media only screen and (min-width: 1400px) { 127 | #write { 128 | max-width: 1024px; 129 | } 130 | } 131 | 132 | @media only screen and (min-width: 1800px) { 133 | #write { 134 | max-width: 1200px; 135 | } 136 | } 137 | 138 | #write>ul:first-child, 139 | #write>ol:first-child { 140 | margin-top: 30px; 141 | } 142 | 143 | a { 144 | color: var(--text-color); 145 | } 146 | 147 | h1, 148 | h2, 149 | h3, 150 | h4, 151 | h5, 152 | h6 { 153 | position: relative; 154 | margin-top: 2rem; 155 | margin-bottom: 1rem; 156 | font-weight: 700; 157 | line-height: 1.4; 158 | cursor: text; 159 | } 160 | 161 | cursor { 162 | color: var(--text-cursor-color) 163 | } 164 | 165 | h1:hover a.anchor, 166 | h2:hover a.anchor, 167 | h3:hover a.anchor, 168 | h4:hover a.anchor, 169 | h5:hover a.anchor, 170 | h6:hover a.anchor { 171 | text-decoration: none; 172 | } 173 | 174 | h1 tt, 175 | h1 code, 176 | h2 tt, 177 | h2 code, 178 | h3 tt, 179 | h3 code, 180 | h4 tt, 181 | h4 code, 182 | h5 tt, 183 | h5 code, 184 | h6 tt, 185 | h6 code { 186 | font-size: inherit; 187 | } 188 | 189 | h1 { 190 | padding-bottom: 0.3em; 191 | font-size: 2.2em; 192 | line-height: 1.3; 193 | color: var(--light-trait-100); 194 | } 195 | 196 | h2 { 197 | padding-bottom: 0.3em; 198 | font-size: 1.75em; 199 | line-height: 1.225; 200 | color: var(--light-trait-200); 201 | } 202 | 203 | h3 { 204 | font-size: 1.4em; 205 | line-height: 1.43; 206 | color: var(--light-trait-300); 207 | } 208 | 209 | h4 { 210 | font-size: 1.2em; 211 | color: var(--light-trait-400); 212 | } 213 | 214 | h5 { 215 | font-size: 1em; 216 | color: var(--light-trait-400); 217 | } 218 | 219 | h6 { 220 | font-size: 1em; 221 | color: var(--light-trait-400); 222 | } 223 | 224 | p, 225 | blockquote, 226 | ul, 227 | ol, 228 | dl, 229 | table { 230 | margin: 0.8em 0; 231 | } 232 | 233 | li>ol, 234 | li>ul { 235 | margin: 0 0; 236 | } 237 | 238 | hr { 239 | background-color: var(--light-trait-100); 240 | height: 1.5px; 241 | border: none 242 | } 243 | 244 | a, 245 | .md-def-url { 246 | color: var(--url-text-color); 247 | text-decoration: none; 248 | border-bottom: 0.05em solid; 249 | border-color: var(--url-underline-color); 250 | transition: all .1s ease-in; 251 | } 252 | 253 | a:hover { 254 | text-decoration: none; 255 | opacity: 1; 256 | } 257 | 258 | sup.md-footnote { 259 | color: var(--footnote-text-color); 260 | background-color: var(--footnote-bg-color); 261 | } 262 | 263 | li p.first { 264 | display: inline-block; 265 | } 266 | 267 | ul, 268 | ol { 269 | padding-left: 30px; 270 | } 271 | 272 | ul:first-child, 273 | ol:first-child { 274 | margin-top: 0.35%; 275 | } 276 | 277 | ul:last-child, 278 | ol:last-child { 279 | margin-bottom: 0; 280 | } 281 | 282 | mark, 283 | .ty-file-search-match-text, 284 | .md-search-hit { 285 | background: var(--search-hit-bg-color); 286 | color: var(--search-hit-text-color); 287 | } 288 | 289 | mark { 290 | border-radius: 4px; 291 | color: var(--text-highlight-color); 292 | font-weight: inherit; 293 | background-color: var(--text-highlight-bg); 294 | padding-left: 4px; 295 | padding-right: 4px; 296 | padding-top: 2px; 297 | padding-bottom: 2px; 298 | margin-left: 2px; 299 | margin-right: 2px; 300 | } 301 | 302 | .md-search-hit * { 303 | background: var(--search-select-bg-color); 304 | color: var(--search-select-text-color); 305 | } 306 | 307 | /* Search highlight */ 308 | .cm-search-hit.CodeMirror-selectedtext, 309 | .md-search-hit.md-search-select, 310 | .md-search-select { 311 | outline: 0px solid var(--search-select-text-color); 312 | } 313 | 314 | .outline-item.select, 315 | .ty-search-item-line.select, 316 | .ty-search-item.select { 317 | outline-width: 2px; 318 | } 319 | 320 | .outline-item.select { 321 | outline-offset: 0px; 322 | } 323 | 324 | blockquote { 325 | color: var(--blockquote-text-color); 326 | margin-left: 1.75px; 327 | margin-right: 0px; 328 | border-left: 4px solid var(--blockquote-accent-color); 329 | padding: 10px 14px 7px 22px; 330 | /* change the quote highlight */ 331 | background-color: var(--blockquote-bg-color); 332 | } 333 | 334 | blockquote blockquote { 335 | padding-right: 0; 336 | } 337 | 338 | /* Alternating color rows in table*/ 339 | table tr:nth-child(2n) { 340 | background-color: var(--table-primary-color); 341 | } 342 | 343 | table tr:nth-child(2n + 1) { 344 | background-color: var(--table-secondary-color); 345 | } 346 | 347 | /* Alternating color rows in table*/ 348 | 349 | table { 350 | padding: 0; 351 | word-break: initial; 352 | } 353 | 354 | table tr { 355 | border-top: 1px solid var(--text-accent-color); 356 | margin: 0; 357 | padding: 0; 358 | } 359 | 360 | table tr th { 361 | font-weight: bold; 362 | border: 1px solid var(--text-accent-color); 363 | border-bottom: 0; 364 | margin: 0; 365 | padding: 6px 13px; 366 | } 367 | 368 | table tr td { 369 | border: 1px solid var(--text-accent-color); 370 | margin: 0; 371 | padding: 6px 13px; 372 | } 373 | 374 | table tr th:first-child, 375 | table tr td:first-child { 376 | margin-top: 0; 377 | } 378 | 379 | table tr th:last-child, 380 | table tr td:last-child { 381 | margin-bottom: 0; 382 | } 383 | 384 | kbd { 385 | font-size: 0.875rem; 386 | background: var(--kbd-bg-color); 387 | border: 1px solid var(--text-accent-color); 388 | box-shadow: 0 2px 0 var(--text-accent-color); 389 | color: var(--kbd-text-color); 390 | } 391 | 392 | .md-fences, 393 | code, 394 | tt { 395 | border: none; 396 | color: var(--code-fence-text-color); 397 | background-color: var(--code-fence-bg-color); 398 | border-radius: var(--border-radius); 399 | padding: 2px 4px 0px 4px; 400 | font-size: 0.975em; 401 | font-weight: medium; 402 | font-family: var(--monospace) 403 | } 404 | 405 | .md-fences { 406 | margin-bottom: 15px; 407 | margin-top: 15px; 408 | padding-top: 8px; 409 | padding-bottom: 6px; 410 | } 411 | 412 | #write pre.md-meta-block { 413 | padding: 1rem; 414 | font-size: 85%; 415 | line-height: 1.45; 416 | background-color: var(--bg-color-dark); 417 | border: 0; 418 | border-radius: var(--border-radius); 419 | color: var(--secondary-text-color); 420 | margin-top: 0 !important; 421 | } 422 | 423 | #write .mathjax-block .md-rawblock-tooltip { 424 | border-top-left-radius: var(--border-radius); 425 | border-top-right-radius: var(--border-radius); 426 | } 427 | 428 | 429 | #write .mathjax-block .md-math-container { 430 | border-top-left-radius: var(--border-radius); 431 | border-bottom-right-radius: var(--border-radius); 432 | border-bottom-left-radius: var(--border-radius); 433 | } 434 | 435 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 436 | border-top-left-radius: var(--border-radius); 437 | } 438 | 439 | .md-mathjax-midline { 440 | background-color: var(--bg-color); 441 | color: var(--text-color); 442 | } 443 | 444 | .md-inline-math script { 445 | color: var(--code-color); 446 | } 447 | 448 | .CodeMirror-lines { 449 | padding-left: 4px; 450 | } 451 | 452 | .code-tooltip { 453 | box-shadow: none; 454 | border-radius: var(--border-radius); 455 | } 456 | 457 | #write .code-tooltip { 458 | bottom: initial; 459 | top: 100%; 460 | left: initial; 461 | right: -1px; 462 | background: var(--bg-color-dark); 463 | border: 1px solid var(--text-accent-color); 464 | border-top-left-radius: 0; 465 | border-top-right-radius: 0; 466 | border-top: 0; 467 | font-family: var(--monospace); 468 | } 469 | 470 | #write .md-mathblock-panel .code-tooltip { 471 | right: 0; 472 | border: none; 473 | } 474 | 475 | /* TODO */ 476 | #write .md-task-list-item>input { 477 | -webkit-appearance: initial; 478 | display: inline-block; 479 | text-align: center; 480 | vertical-align: middle; 481 | position: absolute; 482 | border: 1px solid var(--text-color); 483 | /* border-radius: 100%; */ 484 | margin-left: -1.45rem; 485 | height: 0.95rem; 486 | width: 0.95rem; 487 | transition: all 0.35s; 488 | } 489 | 490 | #write .md-task-list-item>input:focus { 491 | outline: none; 492 | box-shadow: none; 493 | } 494 | 495 | #write .md-task-list-item>input[checked] { 496 | background: var(--todo-bg-color); 497 | border: 1px solid var(--todo-bg-color); 498 | text-decoration: line-through; 499 | } 500 | 501 | #write .md-task-list-item>input[checked]::before { 502 | display: flex; 503 | align-items: center; 504 | justify-content: center; 505 | content: '✓'; 506 | position: absolute; 507 | margin-top: 0.05rem; 508 | top: 0; 509 | left: 0; 510 | height: 100%; 511 | width: 100%; 512 | color: var(--todo-tick-color); 513 | font-size: 0.75em; 514 | font-weight: 600; 515 | } 516 | 517 | #write .md-task-list-item>input[checked]::after { 518 | text-decoration: line-through; 519 | } 520 | 521 | /* TODO */ 522 | .md-image>.md-meta { 523 | border-radius: var(--border-radius); 524 | padding: 2px 0px 0px 4px; 525 | font-size: 0.9em; 526 | color: inherit; 527 | } 528 | 529 | .md-toc { 530 | margin-top: 20px; 531 | padding-bottom: 20px; 532 | } 533 | 534 | /* Source mode */ 535 | .CodeMirror.cm-s-typora-default *, 536 | .cm-s-typora-default * { 537 | background: inherit; 538 | color: var(--body-text-color); 539 | font-family: var(--monospace); 540 | font-size: var(--font-size) !important; 541 | font-style: normal; 542 | font-weight: medium; 543 | } 544 | 545 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 546 | border-left: 2.75px solid var(--code-cursor-color); 547 | } 548 | 549 | .CodeMirror div.CodeMirror-cursor { 550 | border-left: 2.75px solid var(--code-cursor-color); 551 | } 552 | 553 | 554 | .sidebar-tabs { 555 | border-bottom: none; 556 | } 557 | 558 | .outline-expander { 559 | width: 1.5rem; 560 | vertical-align: initial; 561 | } 562 | 563 | .outline-expander:before, 564 | .outline-expander:hover:before, 565 | .outline-item-open>.outline-item>.outline-expander:before, 566 | .outline-item-open>.outline-item>.outline-expander:hover:before { 567 | content: "\f125"; 568 | transition: transform 125ms ease-in-out; 569 | } 570 | 571 | .outline-item-open>.outline-item>.outline-expander:hover:before, 572 | .outline-item-open>.outline-item>.outline-expander:before { 573 | transform: rotate(90deg); 574 | } 575 | 576 | .outline-label:hover { 577 | text-decoration: none; 578 | } 579 | 580 | #toc-dropmenu { 581 | background: var(--bg-color-dark); 582 | } 583 | 584 | #toc-dropmenu .outline-title { 585 | font-size: 1rem; 586 | text-transform: uppercase; 587 | } 588 | 589 | .dropdown-menu .divider { 590 | display: none; 591 | } 592 | 593 | .context-menu { 594 | border: none !important; 595 | backdrop-filter: saturate(180%) blur(20px) brightness(1.1); 596 | background-color: var(--bg-color-dark); 597 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 var(--text-accent-color) !important; 598 | } 599 | 600 | .file-node-background { 601 | height: 31px; 602 | } 603 | 604 | .file-node-content:hover .file-node-icon, 605 | .file-node-content:hover .file-node-open-state { 606 | visibility: visible; 607 | } 608 | 609 | .file-node-icon { 610 | margin-right: 8px; 611 | } 612 | 613 | .file-library-node:not(.file-node-root):focus>.file-node-content { 614 | outline: none; 615 | } 616 | 617 | /* New file animation */ 618 | .blink-area { 619 | animation: none; 620 | } 621 | 622 | .file-list-item-summary { 623 | font-size: var(--font-size); 624 | font-family: var(--font-family); 625 | } 626 | 627 | #md-searchpanel input { 628 | border-radius: var(--border-radius); 629 | box-shadow: none; 630 | } 631 | 632 | #md-searchpanel input:focus { 633 | box-shadow: none; 634 | border-color: var(--meta-content-color); 635 | } 636 | 637 | #md-searchpanel .search-type-selection { 638 | width: auto; 639 | } 640 | 641 | #md-searchpanel .btn:not(.close-btn):hover { 642 | box-shadow: none; 643 | } 644 | 645 | .mac-seamless-mode #typora-sidebar { 646 | color: var(--sidebar-text-color); 647 | background-color: var(--side-bar-bg-color); 648 | } 649 | 650 | #md-notification .btn { 651 | border: 0; 652 | } 653 | 654 | /* CODE HIGHLIGHT */ 655 | pre.CodeMirror-line { 656 | color: var(--cm-line) !important 657 | } 658 | 659 | .cm-variable { 660 | color: var(--cm-variable) !important 661 | } 662 | 663 | .cm-keyword { 664 | color: var(--cm-keyword) !important 665 | } 666 | 667 | .cm-tag { 668 | color: var(--cm-tag) !important 669 | } 670 | 671 | .cm-variable-3 { 672 | color: var(--cm-variable-3) !important 673 | } 674 | 675 | .cm-bracket { 676 | color: var(--cm-bracket); 677 | } 678 | 679 | .cm-error { 680 | color: var(--cm-error) !important; 681 | } 682 | 683 | .cm-attribute { 684 | color: var(--cm-attribute) !important 685 | } 686 | 687 | .cm-def { 688 | color: var(--cm-def) !important 689 | } 690 | 691 | .cm-comment { 692 | color: var(--cm-comment) !important 693 | } 694 | 695 | .cm-string { 696 | color: var(--cm-string) !important; 697 | font-variant-ligatures: common-ligatures !important; 698 | } 699 | 700 | .cm-tag:not() { 701 | font-weight: 700; 702 | } 703 | 704 | .cm-operator { 705 | color: var(--cm-operator) !important 706 | } 707 | 708 | .cm-number { 709 | color: var(--cm-number) !important 710 | } 711 | 712 | .cm-meta { 713 | color: var(--cm-meta) !important; 714 | font-weight: 700 !important; 715 | } 716 | 717 | .cm-atom { 718 | color: var(--cm-atom) !important 719 | } 720 | 721 | .cm-builtin { 722 | color: var(--cm-builtin) !important 723 | } 724 | 725 | .cm-property { 726 | color: var(--cm-property) !important 727 | } 728 | 729 | .cm-variable-2 { 730 | color: var(--cm-variable-2) !important 731 | } 732 | 733 | 734 | /* CODE HIGHLIGHT */ 735 | 736 | .file-tree-node.active>.file-node-background { 737 | color: var(--active-file-text-color); 738 | background-color: var(--active-file-bg-color); 739 | border-left: 0px solid var(--active-file-border-color) !important; 740 | border-color: var(--active-file-border-color) !important; 741 | } 742 | 743 | .CodeMirror-gutters { 744 | border-right: 1px solid var(--cm-gutter); 745 | background: inherit; 746 | white-space: nowrap; 747 | } 748 | 749 | .ty-footer, 750 | .sidebar-footer, 751 | footer { 752 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85); 753 | border: none !important; 754 | background: none; 755 | background-color: var(--footer-bg-color); 756 | } 757 | 758 | .code-tooltip { 759 | border-radius: 4px; 760 | background-color: var(--dark-trait); 761 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 762 | } 763 | 764 | #sidebar-files-menu { 765 | color: var(--side-bar-text-color); 766 | border-radius: 4px; 767 | border: none !important; 768 | box-shadow: 0 25.6px 57.6px 0 var(--text-accent-color), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 769 | } 770 | 771 | .code-tooltip.md-tooltip-hide.md-hover-tip { 772 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 773 | } 774 | 775 | #typora-sidebar { 776 | border: none !important; 777 | } 778 | 779 | #footer-word-count-info, 780 | #spell-check-panel { 781 | border: none !important; 782 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85) !important; 783 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .32), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 784 | } 785 | 786 | /* Windows/Linux unibody mode */ 787 | .megamenu-content, 788 | .megamenu-opened header { 789 | color: var(--body-text-color); 790 | background: var(--bg-color-dark); 791 | } 792 | 793 | #recent-file-panel-action-btn { 794 | background: inherit; 795 | border: 1px var(--light-trait-300) solid; 796 | } 797 | 798 | .megamenu-menu-panel table td:nth-child(1) { 799 | color: var(--text-color); 800 | background: var(--bg-color-dark); 801 | } 802 | 803 | .megamenu-menu-panel table td:nth-child(2) { 804 | color: var(--text-color); 805 | background: var(--bg-color-dark); 806 | } 807 | 808 | .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 809 | color: var(--text-color); 810 | background: var(--active-file-bg-color); 811 | } 812 | 813 | .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 814 | color: var(--text-color); 815 | background: var(--active-file-bg-color); 816 | } 817 | 818 | .megamenu-menu-panel input[type='text'] { 819 | background: inherit; 820 | border: 1px var(--control-text-color) solid; 821 | } 822 | 823 | #recent-file-panel-action-btn { 824 | background: inherit; 825 | } 826 | 827 | .megamenu-menu, 828 | .megamenu-content { 829 | background: var(--side-bar-bg-color); 830 | color: var(--text-color); 831 | } 832 | 833 | #top-titlebar, 834 | #top-titlebar * { 835 | background: inherit; 836 | color: var(--text-color); 837 | } 838 | 839 | .megamenu-menu-header #megamenu-menu-header-title:before { 840 | color: var(--text-color); 841 | } 842 | 843 | megamenu-back-btn { 844 | color: var(--text-color); 845 | border-color: var(--text-color); 846 | } 847 | 848 | .megamenu-menu-header #megamenu-menu-header-title, 849 | .megamenu-menu-header:hover, 850 | .megamenu-menu-header:focus { 851 | color: inherit; 852 | } 853 | 854 | .megamenu-menu-panel table tr:nth-child(2n + 1) { 855 | background-color: var(--side-bar-bg-color); 856 | } -------------------------------------------------------------------------------- /themes/enhanced/notion-light-enhanced.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Text editor */ 3 | --bg-color: #ffffff; 4 | --text-color: #37352f; 5 | --body-text-color: #37352f; 6 | --text-cursor-color: var(--text-color); 7 | 8 | --secondary-text-color: #73726e; 9 | --text-accent-color: #e9e9e7; 10 | --bg-color-dark: #f7f6f3; 11 | 12 | --text-highlight-color: #4f3b2a; 13 | --text-highlight-bg: #feecc8; 14 | 15 | --code-fence-text-color: #37352f; 16 | --code-fence-bg-color: #f7f6f3; 17 | 18 | --blockquote-bg-color: #f7f7f7; 19 | --blockquote-accent-color: var(--text-color); 20 | --blockquote-text-color: var(--text-color); 21 | 22 | --light-trait-100: #38352f; 23 | --light-trait-200: #37352f; 24 | --light-trait-300: #37352f; 25 | --light-trait-400: #37352f; 26 | 27 | --todo-bg-color: #2eaadc; 28 | --todo-tick-color: #fff; 29 | 30 | --search-select-bg-color: #edf3ec; 31 | --search-select-text-color: #448361; 32 | 33 | --search-hit-text-color: #d44c47; 34 | --search-hit-bg-color: #fdebec; 35 | 36 | --url-text-color: black; 37 | --url-underline-color: #37352f; 38 | 39 | --footnote-text-color: #f7f6f3; 40 | --footnote-bg-color: #888884; 41 | 42 | --table-primary-color: #f7f7f7; 43 | --table-secondary-color: #fdfdfd; 44 | 45 | --select-text-bg-color: #c0e5f4; 46 | 47 | --code-color: #9a6e3a; 48 | --code-cursor-color: var(--text-color); 49 | 50 | --kbd-text-color: #73726e; 51 | --kbd-bg-color: var(--bg-color-dark); 52 | 53 | /* Menu system */ 54 | --side-bar-bg-color: var(--bg-color-dark); 55 | --side-bar-text-color: var(--text-color); 56 | --item-hover-bg-color: #e8e7e4; 57 | --window-border: 1px solid var(--bg-color); 58 | 59 | --active-file-bg-color: #e9e7e4; 60 | --active-file-border-color: var(--active-file-bg-color); 61 | --active-file-text-color: var(--text-color); 62 | 63 | --footer-bg-color: var(--side-bar-bg-color); 64 | 65 | --control-text-color: #72706b; 66 | 67 | /* General */ 68 | --font-size: 16px; 69 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 70 | --monospace: 'SF Mono Medium', 'Fira Code', 'Cousine', 'Consolas', monospace; 71 | --heading-char-color: var(--light-trait-400); 72 | --color-popover-bg-color: var(--text-color); 73 | --rawblock-edit-panel-bd: var(--bg-color-dark); 74 | --meta-content-color: var(--body-text-color); 75 | --primary-btn-border-color: var(--body-text-color); 76 | --border-radius: 4px; 77 | 78 | 79 | /* Code variables */ 80 | --cm-line: #999999; 81 | --cm-variable: #37352f; 82 | --cm-keyword: #0277aa; 83 | --cm-tag: #ff5a5a; 84 | --cm-bracket: #ff5a5a; 85 | --cm-error: #ff5a5a; 86 | --cm-attribute: #0277aa; 87 | --cm-def: #dc4a68; 88 | --cm-comment: #708090; 89 | --cm-string: #669900; 90 | --cm-operator: #9a6e3b; 91 | --cm-number: #990055; 92 | --cm-meta: var(--text-color); 93 | --cm-atom: #845dc4; 94 | --cm-builtin: #669900; 95 | --cm-property: var(--text-color); 96 | --cm-variable-2: var(--text-color); 97 | --cm-variable-3: #0277aa; 98 | --cm-gutter: #f1f3f450; 99 | } 100 | 101 | html { 102 | font-size: var(--font-size); 103 | } 104 | 105 | body { 106 | font-family: var(--font-family); 107 | -webkit-font-smoothing: antialiased; 108 | color: var(--body-text-color); 109 | line-height: 1.6; 110 | } 111 | 112 | code { 113 | background-color: var(--code-fence-bg-color); 114 | padding: 2px 2px 2px 2px; 115 | } 116 | 117 | #write { 118 | max-width: 860px; 119 | margin: 0 auto; 120 | padding: 30px; 121 | padding-bottom: 100px; 122 | } 123 | 124 | @media only screen and (min-width: 1400px) { 125 | #write { 126 | max-width: 1024px; 127 | } 128 | } 129 | 130 | @media only screen and (min-width: 1800px) { 131 | #write { 132 | max-width: 1200px; 133 | } 134 | } 135 | 136 | #write>ul:first-child, 137 | #write>ol:first-child { 138 | margin-top: 30px; 139 | } 140 | 141 | a { 142 | color: var(--text-color); 143 | } 144 | 145 | h1, 146 | h2, 147 | h3, 148 | h4, 149 | h5, 150 | h6 { 151 | position: relative; 152 | margin-top: 2rem; 153 | margin-bottom: 1rem; 154 | font-weight: 700; 155 | line-height: 1.4; 156 | cursor: text; 157 | } 158 | 159 | cursor { 160 | color: var(--text-cursor-color) 161 | } 162 | 163 | h1:hover a.anchor, 164 | h2:hover a.anchor, 165 | h3:hover a.anchor, 166 | h4:hover a.anchor, 167 | h5:hover a.anchor, 168 | h6:hover a.anchor { 169 | text-decoration: none; 170 | } 171 | 172 | h1 tt, 173 | h1 code, 174 | h2 tt, 175 | h2 code, 176 | h3 tt, 177 | h3 code, 178 | h4 tt, 179 | h4 code, 180 | h5 tt, 181 | h5 code, 182 | h6 tt, 183 | h6 code { 184 | font-size: inherit; 185 | } 186 | 187 | h1 { 188 | padding-bottom: 0.3em; 189 | font-size: 2.2em; 190 | line-height: 1.3; 191 | color: var(--light-trait-100); 192 | } 193 | 194 | h2 { 195 | padding-bottom: 0.3em; 196 | font-size: 1.75em; 197 | line-height: 1.225; 198 | color: var(--light-trait-200); 199 | } 200 | 201 | h3 { 202 | font-size: 1.4em; 203 | line-height: 1.43; 204 | color: var(--light-trait-300); 205 | } 206 | 207 | h4 { 208 | font-size: 1.2em; 209 | color: var(--light-trait-400); 210 | } 211 | 212 | h5 { 213 | font-size: 1em; 214 | color: var(--light-trait-400); 215 | } 216 | 217 | h6 { 218 | font-size: 1em; 219 | color: var(--light-trait-400); 220 | } 221 | 222 | p, 223 | blockquote, 224 | ul, 225 | ol, 226 | dl, 227 | table { 228 | margin: 0.8em 0; 229 | } 230 | 231 | li>ol, 232 | li>ul { 233 | margin: 0 0; 234 | } 235 | 236 | hr { 237 | background-color: var(--light-trait-100); 238 | height: 1.5px; 239 | border: none 240 | } 241 | 242 | a, 243 | .md-def-url { 244 | color: var(--url-text-color); 245 | text-decoration: none; 246 | border-bottom: 0.05em solid; 247 | border-color: var(--url-underline-color); 248 | transition: all .1s ease-in; 249 | } 250 | 251 | a:hover { 252 | text-decoration: none; 253 | opacity: 1; 254 | } 255 | 256 | sup.md-footnote { 257 | background-color: var(--footnote-text-color); 258 | color: var(--footnote-bg-color); 259 | } 260 | 261 | li p.first { 262 | display: inline-block; 263 | } 264 | 265 | ul, 266 | ol { 267 | padding-left: 30px; 268 | } 269 | 270 | ul:first-child, 271 | ol:first-child { 272 | margin-top: 0.35%; 273 | } 274 | 275 | ul:last-child, 276 | ol:last-child { 277 | margin-bottom: 0; 278 | } 279 | 280 | mark, 281 | .ty-file-search-match-text, 282 | .md-search-hit { 283 | background: var(--search-hit-bg-color); 284 | color: var(--search-hit-text-color); 285 | } 286 | 287 | mark { 288 | border-radius: 4px; 289 | color: var(--text-highlight-color); 290 | font-weight: inherit; 291 | background-color: var(--text-highlight-bg); 292 | padding-left: 4px; 293 | padding-right: 4px; 294 | padding-top: 2px; 295 | padding-bottom: 2px; 296 | margin-left: 2px; 297 | margin-right: 2px; 298 | } 299 | 300 | .md-search-hit * { 301 | background: var(--search-select-bg-color); 302 | color: var(--search-select-text-color); 303 | } 304 | 305 | /* Search highlight */ 306 | .cm-search-hit.CodeMirror-selectedtext, 307 | .md-search-hit.md-search-select, 308 | .md-search-select { 309 | outline: 0px solid var(--search-select-text-color); 310 | } 311 | 312 | .outline-item.select, 313 | .ty-search-item-line.select, 314 | .ty-search-item.select { 315 | outline-width: 2px; 316 | } 317 | 318 | .outline-item.select { 319 | outline-offset: 0px; 320 | } 321 | 322 | blockquote { 323 | color: var(--blockquote-text-color); 324 | margin-left: 1.75px; 325 | margin-right: 0px; 326 | border-left: 4px solid var(--blockquote-accent-color); 327 | padding: 10px 14px 7px 22px; 328 | /* change the quote highlight */ 329 | background-color: var(--blockquote-bg-color); 330 | } 331 | 332 | blockquote blockquote { 333 | padding-right: 0; 334 | } 335 | 336 | /* Alternating color rows in table*/ 337 | table tr:nth-child(2n) { 338 | background-color: var(--table-primary-color); 339 | } 340 | 341 | table tr:nth-child(2n + 1) { 342 | background-color: var(--table-secondary-color); 343 | } 344 | 345 | /* Alternating color rows in table*/ 346 | 347 | table { 348 | padding: 0; 349 | word-break: initial; 350 | } 351 | 352 | table tr { 353 | border-top: 1px solid var(--text-accent-color); 354 | margin: 0; 355 | padding: 0; 356 | } 357 | 358 | table tr th { 359 | font-weight: bold; 360 | border: 1px solid var(--text-accent-color); 361 | border-bottom: 0; 362 | margin: 0; 363 | padding: 6px 13px; 364 | } 365 | 366 | table tr td { 367 | border: 1px solid var(--text-accent-color); 368 | margin: 0; 369 | padding: 6px 13px; 370 | } 371 | 372 | table tr th:first-child, 373 | table tr td:first-child { 374 | margin-top: 0; 375 | } 376 | 377 | table tr th:last-child, 378 | table tr td:last-child { 379 | margin-bottom: 0; 380 | } 381 | 382 | kbd { 383 | font-size: 0.875rem; 384 | background: var(--kbd-bg-color); 385 | border: 1px solid var(--text-accent-color); 386 | box-shadow: 0 2px 0 var(--text-accent-color); 387 | color: var(--kbd-text-color); 388 | } 389 | 390 | .md-fences, 391 | code, 392 | tt { 393 | border: none; 394 | color: var(--code-fence-text-color); 395 | background-color: var(--code-fence-bg-color); 396 | border-radius: var(--border-radius); 397 | padding: 2px 4px 0px 4px; 398 | font-size: 0.975em; 399 | font-weight: medium; 400 | font-family: var(--monospace) 401 | } 402 | 403 | .md-fences { 404 | margin-bottom: 15px; 405 | margin-top: 15px; 406 | padding-top: 8px; 407 | padding-bottom: 6px; 408 | } 409 | 410 | #write pre.md-meta-block { 411 | padding: 1rem; 412 | font-size: 85%; 413 | line-height: 1.45; 414 | background-color: var(--bg-color-dark); 415 | border: 0; 416 | border-radius: var(--border-radius); 417 | color: var(--secondary-text-color); 418 | margin-top: 0 !important; 419 | } 420 | 421 | #write .mathjax-block .md-rawblock-tooltip { 422 | border-top-left-radius: var(--border-radius); 423 | border-top-right-radius: var(--border-radius); 424 | } 425 | 426 | 427 | #write .mathjax-block .md-math-container { 428 | border-top-left-radius: var(--border-radius); 429 | border-bottom-right-radius: var(--border-radius); 430 | border-bottom-left-radius: var(--border-radius); 431 | } 432 | 433 | #write .md-mathblock-panel .md-rawblock-control:first-of-type { 434 | border-top-left-radius: var(--border-radius); 435 | } 436 | 437 | .md-mathjax-midline { 438 | background-color: var(--bg-color); 439 | color: var(--text-color); 440 | } 441 | 442 | .md-inline-math script { 443 | color: var(--code-color); 444 | } 445 | 446 | .CodeMirror-lines { 447 | padding-left: 4px; 448 | } 449 | 450 | .code-tooltip { 451 | box-shadow: none; 452 | border-radius: var(--border-radius); 453 | } 454 | 455 | #write .code-tooltip { 456 | bottom: initial; 457 | top: 100%; 458 | left: initial; 459 | right: -1px; 460 | background: var(--bg-color-dark); 461 | border: 1px solid var(--text-accent-color); 462 | border-top-left-radius: 0; 463 | border-top-right-radius: 0; 464 | border-top: 0; 465 | font-family: var(--monospace); 466 | } 467 | 468 | #write .md-mathblock-panel .code-tooltip { 469 | right: 0; 470 | border: none; 471 | } 472 | 473 | /* TODO */ 474 | #write .md-task-list-item>input { 475 | -webkit-appearance: initial; 476 | display: inline-block; 477 | text-align: center; 478 | vertical-align: middle; 479 | position: absolute; 480 | border: 1px solid var(--text-color); 481 | margin-top: 0.3rem; 482 | margin-left: -1.45rem; 483 | height: 0.95rem; 484 | width: 0.95rem; 485 | transition: all 0.35s; 486 | } 487 | 488 | #write .md-task-list-item>input:focus { 489 | outline: none; 490 | box-shadow: none; 491 | } 492 | 493 | #write .md-task-list-item>input[checked] { 494 | background: var(--todo-bg-color); 495 | border: 1px solid var(--todo-bg-color); 496 | text-decoration: line-through; 497 | } 498 | 499 | #write .md-task-list-item>input[checked]::before { 500 | display: flex; 501 | align-items: center; 502 | justify-content: center; 503 | content: '✓'; 504 | position: absolute; 505 | margin-top: 0.05rem; 506 | top: 0; 507 | left: 0; 508 | height: 100%; 509 | width: 100%; 510 | color: var(--todo-tick-color); 511 | font-size: 0.75em; 512 | font-weight: 600; 513 | } 514 | 515 | #write .md-task-list-item>input[checked]::after { 516 | text-decoration: line-through; 517 | } 518 | 519 | /* TODO */ 520 | .md-image>.md-meta { 521 | border-radius: var(--border-radius); 522 | padding: 2px 0px 0px 4px; 523 | font-size: 0.9em; 524 | color: inherit; 525 | } 526 | 527 | .md-toc { 528 | margin-top: 20px; 529 | padding-bottom: 20px; 530 | } 531 | 532 | /* Source mode */ 533 | .CodeMirror.cm-s-typora-default *, 534 | .cm-s-typora-default * { 535 | background: inherit; 536 | color: var(--body-text-color); 537 | font-family: var(--monospace); 538 | font-size: var(--font-size) !important; 539 | font-style: normal; 540 | font-weight: medium; 541 | } 542 | 543 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor { 544 | border-left: 2.75px solid var(--code-cursor-color); 545 | } 546 | 547 | .CodeMirror div.CodeMirror-cursor { 548 | border-left: 2.75px solid var(--code-cursor-color); 549 | } 550 | 551 | 552 | .sidebar-tabs { 553 | border-bottom: none; 554 | } 555 | 556 | .outline-expander { 557 | width: 1.5rem; 558 | vertical-align: initial; 559 | } 560 | 561 | .outline-expander:before, 562 | .outline-expander:hover:before, 563 | .outline-item-open>.outline-item>.outline-expander:before, 564 | .outline-item-open>.outline-item>.outline-expander:hover:before { 565 | content: "\f125"; 566 | transition: transform 125ms ease-in-out; 567 | } 568 | 569 | .outline-item-open>.outline-item>.outline-expander:hover:before, 570 | .outline-item-open>.outline-item>.outline-expander:before { 571 | transform: rotate(90deg); 572 | } 573 | 574 | .outline-label:hover { 575 | text-decoration: none; 576 | } 577 | 578 | #toc-dropmenu { 579 | background: var(--bg-color-dark); 580 | } 581 | 582 | #toc-dropmenu .outline-title { 583 | font-size: 1rem; 584 | text-transform: uppercase; 585 | } 586 | 587 | .dropdown-menu .divider { 588 | display: none; 589 | } 590 | 591 | .context-menu { 592 | border: none !important; 593 | backdrop-filter: saturate(180%) blur(20px) brightness(1.1); 594 | background-color: var(--bg-color-dark); 595 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .22), 0 4.8px 14.4px 0 rgba(0, 0, 0, .18) !important; 596 | } 597 | 598 | .file-node-background { 599 | height: 31px; 600 | } 601 | 602 | .file-node-content:hover .file-node-icon, 603 | .file-node-content:hover .file-node-open-state { 604 | visibility: visible; 605 | } 606 | 607 | .file-node-icon { 608 | margin-right: 8px; 609 | } 610 | 611 | .file-library-node:not(.file-node-root):focus>.file-node-content { 612 | outline: none; 613 | } 614 | 615 | /* New file animation */ 616 | .blink-area { 617 | animation: none; 618 | } 619 | 620 | .file-list-item-summary { 621 | font-size: var(--font-size); 622 | font-family: var(--font-family); 623 | } 624 | 625 | #md-searchpanel input { 626 | border-radius: var(--border-radius); 627 | box-shadow: none; 628 | } 629 | 630 | #md-searchpanel input:focus { 631 | box-shadow: none; 632 | border-color: var(--meta-content-color); 633 | } 634 | 635 | #md-searchpanel .search-type-selection { 636 | width: auto; 637 | } 638 | 639 | #md-searchpanel .btn:not(.close-btn):hover { 640 | box-shadow: none; 641 | } 642 | 643 | .mac-seamless-mode #typora-sidebar { 644 | color: var(--sidebar-text-color); 645 | background-color: var(--side-bar-bg-color); 646 | } 647 | 648 | #md-notification .btn { 649 | border: 0; 650 | } 651 | 652 | /* CODE HIGHLIGHT */ 653 | pre.CodeMirror-line { 654 | color: var(--cm-line) !important 655 | } 656 | 657 | .cm-variable { 658 | color: var(--cm-variable) !important 659 | } 660 | 661 | .cm-keyword { 662 | color: var(--cm-keyword) !important 663 | } 664 | 665 | .cm-tag { 666 | color: var(--cm-tag) !important 667 | } 668 | 669 | .cm-variable-3 { 670 | color: var(--cm-variable-3) !important 671 | } 672 | 673 | .cm-bracket { 674 | color: var(--cm-bracket); 675 | } 676 | 677 | .cm-error { 678 | color: var(--cm-error) !important; 679 | } 680 | 681 | .cm-attribute { 682 | color: var(--cm-attribute) !important 683 | } 684 | 685 | .cm-def { 686 | color: var(--cm-def) !important 687 | } 688 | 689 | .cm-comment { 690 | color: var(--cm-comment) !important 691 | } 692 | 693 | .cm-string { 694 | color: var(--cm-string) !important; 695 | font-variant-ligatures: common-ligatures !important; 696 | } 697 | 698 | .cm-tag:not() { 699 | font-weight: 700; 700 | } 701 | 702 | .cm-operator { 703 | color: var(--cm-operator) !important 704 | } 705 | 706 | .cm-number { 707 | color: var(--cm-number) !important 708 | } 709 | 710 | .cm-meta { 711 | color: var(--cm-meta) !important; 712 | font-weight: 700 !important; 713 | } 714 | 715 | .cm-atom { 716 | color: var(--cm-atom) !important 717 | } 718 | 719 | .cm-builtin { 720 | color: var(--cm-builtin) !important 721 | } 722 | 723 | .cm-property { 724 | color: var(--cm-property) !important 725 | } 726 | 727 | .cm-variable-2 { 728 | color: var(--cm-variable-2) !important 729 | } 730 | 731 | 732 | /* CODE HIGHLIGHT */ 733 | 734 | .file-tree-node.active>.file-node-background { 735 | color: var(--active-file-text-color); 736 | background-color: var(--active-file-bg-color); 737 | border-left: 0px solid var(--active-file-border-color) !important; 738 | border-color: var(--active-file-border-color) !important; 739 | } 740 | 741 | .CodeMirror-gutters { 742 | border-right: 1px solid var(--cm-gutter); 743 | background: inherit; 744 | white-space: nowrap; 745 | } 746 | 747 | .ty-footer, 748 | .sidebar-footer, 749 | footer { 750 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85); 751 | border: none !important; 752 | background: none; 753 | background-color: var(--footer-bg-color); 754 | } 755 | 756 | .code-tooltip { 757 | border-radius: 4px; 758 | background-color: var(--dark-trait); 759 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 760 | } 761 | 762 | #sidebar-files-menu { 763 | color: var(--side-bar-text-color); 764 | border-radius: 4px; 765 | border: none !important; 766 | box-shadow: 0 25.6px 57.6px 0 #f7f6f3, 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 767 | } 768 | 769 | .code-tooltip.md-tooltip-hide.md-hover-tip { 770 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .52), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28); 771 | } 772 | 773 | #typora-sidebar { 774 | border: none !important; 775 | } 776 | 777 | #footer-word-count-info, 778 | #spell-check-panel { 779 | border: none !important; 780 | backdrop-filter: saturate(120%) blur(20px) brightness(0.85) !important; 781 | box-shadow: 0 25.6px 57.6px 0 rgba(0, 0, 0, .32), 0 4.8px 14.4px 0 rgba(0, 0, 0, .28) !important; 782 | } 783 | 784 | /* Windows/Linux unibody mode */ 785 | .megamenu-content, 786 | .megamenu-opened header { 787 | color: var(--body-text-color); 788 | background: var(--bg-color-dark); 789 | } 790 | 791 | #recent-file-panel-action-btn { 792 | background: inherit; 793 | border: 1px var(--light-trait-300) solid; 794 | } 795 | 796 | .megamenu-menu-panel table td:nth-child(1) { 797 | color: var(--text-color); 798 | background: var(--bg-color-dark); 799 | } 800 | 801 | .megamenu-menu-panel table td:nth-child(2) { 802 | color: var(--text-color); 803 | background: var(--bg-color-dark); 804 | } 805 | 806 | .megamenu-menu-panel tbody tr:hover td:nth-child(1) { 807 | color: var(--text-color); 808 | background: var(--active-file-bg-color); 809 | } 810 | 811 | .megamenu-menu-panel tbody tr:hover td:nth-child(2) { 812 | color: var(--text-color); 813 | background: var(--active-file-bg-color); 814 | } 815 | 816 | .megamenu-menu-panel input[type='text'] { 817 | background: inherit; 818 | border: 1px var(--text-color-secondary) solid; 819 | } 820 | 821 | #recent-file-panel-action-btn { 822 | background: inherit; 823 | } 824 | 825 | .megamenu-menu, 826 | .megamenu-content { 827 | background: var(--side-bar-bg-color); 828 | color: var(--text-color); 829 | } 830 | 831 | #top-titlebar, 832 | #top-titlebar * { 833 | background: inherit; 834 | color: var(--text-color); 835 | } 836 | 837 | .megamenu-menu-header #megamenu-menu-header-title:before { 838 | color: var(--text-color); 839 | } 840 | 841 | megamenu-back-btn { 842 | color: var(--text-color); 843 | border-color: var(--text-color); 844 | } 845 | 846 | .megamenu-menu-header #megamenu-menu-header-title, 847 | .megamenu-menu-header:hover, 848 | .megamenu-menu-header:focus { 849 | color: inherit; 850 | } 851 | 852 | .megamenu-menu-panel table tr:nth-child(2n + 1) { 853 | background-color: var(--side-bar-bg-color); 854 | } --------------------------------------------------------------------------------