├── .gitignore ├── src ├── aqua.png ├── Aqua-blue.png ├── Aqua-green.png ├── Aqua-blue-CJK.png ├── Aqua-blue-code.png ├── Aqua-green-CJK.png └── Aqua-green-code.png ├── aqua ├── latin_fonts │ └── README.md └── CJK_fonts │ └── README.md ├── README.md ├── aqua-green.css └── aqua-blue.css /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /src/aqua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/aqua.png -------------------------------------------------------------------------------- /src/Aqua-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/Aqua-blue.png -------------------------------------------------------------------------------- /src/Aqua-green.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/Aqua-green.png -------------------------------------------------------------------------------- /src/Aqua-blue-CJK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/Aqua-blue-CJK.png -------------------------------------------------------------------------------- /src/Aqua-blue-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/Aqua-blue-code.png -------------------------------------------------------------------------------- /src/Aqua-green-CJK.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/Aqua-green-CJK.png -------------------------------------------------------------------------------- /src/Aqua-green-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/onemid/typora-aqua/HEAD/src/Aqua-green-code.png -------------------------------------------------------------------------------- /aqua/latin_fonts/README.md: -------------------------------------------------------------------------------- 1 | ## Adding Noto Serif Fonts to this folder 2 | 3 | 1. Download Noto Serif 4 | [https://noto-website-2.storage.googleapis.com/pkgs/NotoSerif-unhinted.zip](https://noto-website-2.storage.googleapis.com/pkgs/NotoSerif-unhinted.zip) 5 | 6 | 2. Unzip Noto Serif Fonts. 7 | 8 | 3. Copy all of Noto Serif fonts to `aqua/latin_fonts` (this folder). 9 | 10 | -------------------------------------------------------------------------------- /aqua/CJK_fonts/README.md: -------------------------------------------------------------------------------- 1 | ## Adding Noto Sans to this folder 2 | 3 | 1. Download Noto Sans CJK TC 4 | [https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKtc-hinted.zip](https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKtc-hinted.zip) 5 | 6 | > If you want to get the full support of Simplified Chinese characters, you may download Noto Sans CJK SC https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKsc-hinted.zip for extra. 7 | 8 | 2. Unzip Noto Sans CJK TC (or Noto Sans CJK SC) Fonts. 9 | 10 | 3. Copy all of Noto Sans CJK TC (or Noto Sans CJK SC) fonts to `aqua/CJK_fonts` (this folder). 11 | 12 | 13 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Aqua Theme 2 | 3 | > Aqua --- the whole new experience on Typora 4 | 5 | ![aqua.png](src/aqua.png) 6 | 7 | ![Aqua-blue.png](src/Aqua-blue.png) 8 | 9 | ![Aqua-green.png](src/Aqua-green.png) 10 | 11 | ![Aqua-blue-CJK.png](src/Aqua-blue-CJK.png) 12 | 13 | ![Aqua-green-CJK.png](src/Aqua-green-CJK.png) 14 | 15 | ![Aqua-blue-code.png](src/Aqua-blue-code.png) 16 | 17 | ![Aqua-green-code.png](src/Aqua-green-code.png) 18 | 19 | We recommended you to use "Noto Sans CJK TC" and "Noto Serif" to experience the power of Aqua theme. 20 | 21 | ## Adding Noto Sans and Noto Serif Fonts to Aqua 22 | 23 | 1. Download Noto Sans CJK TC 24 | [https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKtc-hinted.zip](https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKtc-hinted.zip) 25 | 26 | >If you want to get the full support of Simplified Chinese characters, you may download Noto Sans CJK SC https://noto-website-2.storage.googleapis.com/pkgs/NotoSansCJKsc-hinted.zip for extra. 27 | 28 | 2. Download Noto Serif 29 | [https://noto-website-2.storage.googleapis.com/pkgs/NotoSerif-unhinted.zip](https://noto-website-2.storage.googleapis.com/pkgs/NotoSerif-unhinted.zip) 30 | 31 | 3. Unzip Noto Sans CJK TC (or Noto Sans CJK SC) and Noto Serif Fonts. 32 | 33 | 4. Copy all of Noto Sans CJK TC (or Noto Sans CJK SC) fonts to `aqua/CJK_fonts` 34 | 35 | 5. Copy all of Noto Serif fonts to `aqua/latin_fonts` 36 | 37 | -------------------------------------------------------------------------------- /aqua-green.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #363B40; 3 | --text-color: #fff; 4 | --md-char-color: #C7C5C5; 5 | --meta-content-color: #5b808d; 6 | --blur-text-color: #6a6a6a; 7 | --drag-placeholder-color: #c7c5c5; 8 | --panel-border-color: #777777; 9 | --active-toggle-btn-color: #ddd; 10 | --table-border-color: #ccc; 11 | --primary-color: #428bca; 12 | --primary-btn-border-color: #285e8e; 13 | --primary-btn-text-color: #fff; 14 | --search-select-bg-color: #000; 15 | --search-select-text-color: #fff; 16 | --heading-char-color: #ddd; 17 | --color-popover-bg-color: #fafafa; 18 | --control-text-color: var(--text-color); 19 | --control-text-hover-color: var(--text-color); 20 | --window-border: 1px solid #eee; 21 | --active-file-bg-color: #eee; 22 | --active-file-text-color: inherit; 23 | --active-file-border-color: #777; 24 | --focus-ring-color: #6eace2; 25 | --side-bar-bg-color: var(--bg-color); 26 | --item-hover-bg-color: rgba(229, 229, 229, 0.59); 27 | --item-hover-text-color: inherit; 28 | --side-bar-menu-active-tint: var(--side-bar-menu-active-tint); 29 | --mac-title-bar-height: 20px; 30 | --sidebar-width: 270px; 31 | --monospace: monospace; 32 | } 33 | @font-face { 34 | font-family: 'Fira Code'; 35 | font-style: normal; 36 | font-weight: 400; 37 | src: url(aqua/latin_fonts/FiraCode-Regular.woff2) format('woff2'); 38 | } 39 | @font-face { 40 | font-family: 'Fira Code'; 41 | font-style: medium; 42 | font-weight: 600; 43 | src: url(aqua/latin_fonts/FiraCode-Medium.woff2) format('woff2'); 44 | } 45 | @font-face { 46 | font-family: 'CompositeFontsBody'; 47 | font-style: normal; 48 | font-weight: 400; 49 | src: url(aqua/CJK_fonts/NotoSansCJKtc-Regular.otf) format('opentype'); 50 | } 51 | @font-face { 52 | font-family: 'CompositeFontsBody'; 53 | font-style: medium; 54 | font-weight: 600; 55 | src: url(aqua/CJK_fonts/NotoSansCJKtc-Medium.otf) format('opentype'); 56 | } 57 | @font-face { 58 | font-family: 'CompositeFontsBody'; 59 | font-style: bold; 60 | font-weight: 800; 61 | src: url(aqua/CJK_fonts/NotoSansCJKtc-Bold.otf) format('opentype'); 62 | } 63 | @font-face { 64 | font-family: 'CompositeFontsBodySC'; 65 | font-style: normal; 66 | font-weight: 400; 67 | src: url(aqua/CJK_fonts/NotoSansCJKsc-Regular.otf) format('opentype'); 68 | } 69 | @font-face { 70 | font-family: 'CompositeFontsBodySC'; 71 | font-style: medium; 72 | font-weight: 600; 73 | src: url(aqua/CJK_fonts/NotoSansCJKsc-Medium.otf) format('opentype'); 74 | } 75 | @font-face { 76 | font-family: 'CompositeFontsBodySC'; 77 | font-style: bold; 78 | font-weight: 800; 79 | src: url(aqua/CJK_fonts/NotoSansCJKsc-Bold.otf) format('opentype'); 80 | } 81 | @font-face { 82 | font-family: 'CompositeFontsEm'; 83 | font-style: italic; 84 | font-weight: 600; 85 | src: url(aqua/latin_fonts/NotoSerif-MediumItalic.ttf) format('truetype'); 86 | } 87 | html { 88 | font-size: 16px; 89 | } 90 | html, 91 | body { 92 | font-family: 'CompositeFontsBody', 'CompositeFontsBodySC', 'Helvetica Neue', Helvetica, 'Microsoft JhengHei', Arial, sans-serif; 93 | color: #fff; 94 | } 95 | content { 96 | background-color: #363B40; 97 | } 98 | p, 99 | span { 100 | line-height: 1.9rem; 101 | } 102 | #write { 103 | max-width: 750px; 104 | } 105 | /** 106 | * --------------------- 107 | * Block Elements 108 | */ 109 | pre.md-meta-block { 110 | background-color: transparent; 111 | border-top-style: solid; 112 | border-top-width: .1rem; 113 | border-bottom-style: solid; 114 | border-bottom-width: .1rem; 115 | border-color: #ccc; 116 | padding: 10px; 117 | } 118 | .md-image > .md-meta { 119 | color: #a9bed4; 120 | } 121 | h1, 122 | h2, 123 | h3, 124 | h4, 125 | h5, 126 | h6 { 127 | font-style: unset; 128 | font-family: 'CompositeFontsBody', 'CompositeFontsBodySC', 'Helvetica Neue', Helvetica, 'Microsoft JhengHei', Arial, sans-serif; 129 | font-weight: 600; 130 | color: #9dbe7d !important; 131 | } 132 | h1 { 133 | margin-top: 2.7rem; 134 | margin-bottom: 1.1rem; 135 | font-size: 2.3rem; 136 | } 137 | h1:after, 138 | h2:after, 139 | h3:after, 140 | h4:after, 141 | h5:after, 142 | h6:after { 143 | background-color: transparent; 144 | color: #c8c8c8; 145 | padding: .2rem .25rem .2rem .25rem; 146 | margin-right: 5rem; 147 | font-size: .7rem; 148 | } 149 | h1:after { 150 | content: 'H1'; 151 | } 152 | h2:after { 153 | content: 'H2'; 154 | } 155 | h3:after { 156 | content: 'H3'; 157 | } 158 | h4:after { 159 | content: 'H4'; 160 | } 161 | h5:after { 162 | content: 'H5'; 163 | } 164 | h6:after { 165 | content: 'H6'; 166 | } 167 | h2 { 168 | margin-top: 2.5rem; 169 | margin-bottom: .9rem; 170 | font-size: 1.9rem; 171 | } 172 | h3 { 173 | margin-top: 2.3rem; 174 | margin-bottom: .9rem; 175 | font-size: 1.65rem; 176 | } 177 | h4 { 178 | margin-top: 2.1rem; 179 | margin-bottom: .9rem; 180 | font-size: 1.5rem; 181 | } 182 | h5 { 183 | margin-top: 1.9rem; 184 | margin-bottom: .9rem; 185 | font-size: 1.35rem; 186 | } 187 | h6 { 188 | margin-top: 1.8rem; 189 | margin-bottom: .9rem; 190 | font-size: 1.2rem; 191 | } 192 | table { 193 | margin: 1.75rem 0 1.75rem 0; 194 | vertical-align: top; 195 | } 196 | thead { 197 | display: table-header-group; 198 | vertical-align: middle; 199 | border-top: 0px; 200 | border-right: 0px; 201 | border-left: 0px; 202 | border-bottom: 3px solid #dee2e6; 203 | } 204 | tr { 205 | display: table-row; 206 | vertical-align: inherit; 207 | border-top: 0px; 208 | border-right: 0px; 209 | border-left: 0px; 210 | } 211 | td, 212 | th { 213 | padding: .75rem; 214 | vertical-align: top; 215 | border-right: 0px; 216 | border-left: 0px; 217 | } 218 | thead td, 219 | thead th { 220 | border-top: 0px; 221 | } 222 | tbody td, 223 | tbody th { 224 | border-top: 1px solid #dee2e6; 225 | } 226 | li { 227 | color: #fff; 228 | } 229 | blockquote { 230 | display: block; 231 | background: transparent; 232 | padding: .5rem .5rem 1rem 1.5rem; 233 | margin: 2rem 2rem 2.5rem 2rem; 234 | position: relative; 235 | /*Font*/ 236 | font-family: 'CompositeFontsBody', 'CompositeFontsBodySC', 'Helvetica Neue', Helvetica, 'Microsoft JhengHei', Arial, sans-serif; 237 | font-size: 14px; 238 | color: #fff; 239 | /*Box Shadow - (Optional)*/ 240 | /*Borders - (Optional)*/ 241 | border-left-style: solid; 242 | border-left-width: .5rem; 243 | border-color: #e98853; 244 | } 245 | blockquote p { 246 | line-height: 1.8 !important; 247 | } 248 | hr { 249 | background: #d9d9d9; 250 | border-width: 0; 251 | color: #d9d9d9; 252 | height: 1px; 253 | } 254 | p { 255 | margin-left: .5rem; 256 | } 257 | .md-line { 258 | line-height: 1.7rem; 259 | } 260 | .md-inline-math { 261 | margin: 0 .1rem 0 .2rem; 262 | } 263 | .md-emoji-span { 264 | margin: 0 .1rem 0 .1rem; 265 | } 266 | sup.md-footnote { 267 | background-color: transparent; 268 | border: 1px solid #ccc; 269 | border-radius: 4px; 270 | color: #fff; 271 | padding: 0 .25rem 0 .25rem; 272 | } 273 | /** 274 | * Code Fences 275 | * see http://support.typora.io/Code-Block-Styles 276 | */ 277 | /** 278 | * Mermaid Diagrams 279 | * see https://github.com/knsv/mermaid/blob/master/dist/mermaid.css 280 | */ 281 | /** 282 | * Inline Elements 283 | */ 284 | code, 285 | pre { 286 | font-family: Menlo, 'Fira Code', Monaco, 'Courier New', monospace; 287 | font-weight: 600; 288 | margin: -1px 0.1rem 0 0.25rem; 289 | } 290 | strong { 291 | margin: 0 .1rem 0 .2rem; 292 | font-weight: 800; 293 | } 294 | u { 295 | text-decoration: none; 296 | border-bottom: .18rem solid #e98853; 297 | margin: 0 .1rem 0 .2rem; 298 | padding: .01rem .25rem .05rem .25rem; 299 | } 300 | em { 301 | font-style: unset; 302 | font-family: 'CompositeFontsEm', Georgia, 'Times New Roman', Times, serif; 303 | font-style: italic; 304 | margin: 0 .1rem 0 .2rem; 305 | } 306 | a { 307 | text-decoration: none; 308 | border-bottom: thin; 309 | color: #c7dbf6; 310 | border-bottom: .1rem dotted #87b3ed; 311 | } 312 | img { 313 | padding: .25rem; 314 | background-color: #363B40; 315 | border: 1px solid #a1a1a1; 316 | border-radius: .25rem; 317 | max-width: 100%; 318 | } 319 | mark { 320 | background: #e98853; 321 | color: #fff; 322 | font-weight: 800; 323 | padding: 0 .32rem .1rem .36rem; 324 | margin: 0 .1rem 0 .2rem; 325 | border-radius: .25rem; 326 | } 327 | del { 328 | margin: 0 .1rem 0 .2rem; 329 | padding: .01rem .3rem .05rem .36rem; 330 | } 331 | /** 332 | * Source Code Mode 333 | * see http://support.typora.io/Code-Block-Styles 334 | */ 335 | /** 336 | * Control UI (optional) 337 | */ 338 | .modal-content span { 339 | line-height: normal; 340 | } 341 | .modal-title span { 342 | line-height: normal; 343 | } 344 | #typora-sidebar { 345 | background-color: #263238; 346 | } 347 | #typora-sidebar span { 348 | line-height: normal; 349 | } 350 | .sidebar-content { 351 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 352 | } 353 | .sidebar-content span { 354 | line-height: unset !important; 355 | } 356 | .dropdown-menu { 357 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 358 | } 359 | .sidebar-tabs { 360 | border-bottom: 3px solid #556370; 361 | } 362 | .sidebar-footer { 363 | border-top: 2px solid #556370; 364 | } 365 | .file-list-item { 366 | border-bottom: 1px solid #556370; 367 | } 368 | .file-list-item.active, 369 | .file-tree-node.active > .file-node-background { 370 | border-left: .4rem solid #ccc; 371 | background-color: #334147; 372 | } 373 | .file-node-content { 374 | color: #fff; 375 | } 376 | .file-node-content:hover { 377 | color: #fff; 378 | } 379 | #toc-dropmenu { 380 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 381 | background-color: #596169; 382 | } 383 | .dropdown-menu { 384 | color: #fff; 385 | } 386 | #write div.md-toc-tooltip { 387 | background-color: #596169; 388 | } 389 | /** 390 | * Control UI on Mac (optional) 391 | */ 392 | #md-searchpanel, 393 | .on-search-panel-open header, 394 | .modal-content, 395 | .popover, 396 | .context-menu { 397 | background-color: #fff; 398 | } 399 | .popover.bottom > .arrow:after { 400 | border-bottom-color: #fff; 401 | } 402 | /** 403 | * Control UI on Windows/Linux (optional) 404 | */ 405 | .megamenu-content span, 406 | .dropdown-menu span { 407 | line-height: normal; 408 | } 409 | .preference-item { 410 | color: #646464; 411 | } 412 | .megamenu-section span, 413 | .megamenu-section i, 414 | .megamenu-section table { 415 | color: #000; 416 | } 417 | .megamenu-menu a, 418 | .dropdown-menu a { 419 | border-bottom: 0px; 420 | } 421 | .dropdown-menu span { 422 | color: #c8c8c8; 423 | } 424 | .dropdown-menu .active span { 425 | color: #fff; 426 | } 427 | .preference-item-setting span { 428 | margin-left: .5rem; 429 | } 430 | .cm-s-inner .CodeMirror-guttermarker, 431 | .cm-s-inner .CodeMirror-guttermarker-subtle, 432 | .cm-s-inner .CodeMirror-linenumber { 433 | color: #537f7e; 434 | margin-top: 1.55px; 435 | } 436 | .cm-s-inner .CodeMirror-cursor { 437 | border-left: 1px solid #f8f8f0; 438 | } 439 | .cm-s-inner div.CodeMirror-selected { 440 | background: rgba(255, 255, 255, 0.15); 441 | } 442 | .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { 443 | background: rgba(255, 255, 255, 0.1); 444 | } 445 | .cm-s-inner .CodeMirror-line::selection, 446 | .cm-s-inner .CodeMirror-line > span::selection, 447 | .cm-s-inner .CodeMirror-line > span > span::selection { 448 | background: rgba(255, 255, 255, 0.1); 449 | } 450 | .cm-s-inner .CodeMirror-line::-moz-selection, 451 | .cm-s-inner .CodeMirror-line > span::-moz-selection, 452 | .cm-s-inner .CodeMirror-line > span > span::-moz-selection { 453 | background: rgba(255, 255, 255, 0.1); 454 | } 455 | .cm-s-inner .CodeMirror-activeline-background { 456 | background: rgba(0, 0, 0, 0); 457 | } 458 | .cm-s-inner .cm-keyword { 459 | color: #c792ea; 460 | } 461 | .cm-s-inner .cm-operator { 462 | color: #e9eded; 463 | } 464 | .cm-s-inner .cm-header { 465 | color: #FFA000; 466 | } 467 | .cm-s-inner .cm-link { 468 | color: #71a5ea; 469 | } 470 | .cm-s-inner .cm-variable-2 { 471 | color: #80CBC4; 472 | } 473 | .cm-s-inner .cm-variable-3 { 474 | color: #82B1FF; 475 | } 476 | .cm-s-inner .cm-builtin { 477 | color: #ff6d85; 478 | } 479 | .cm-s-inner .cm-atom { 480 | color: #FF7042; 481 | font-style: italic; 482 | } 483 | .cm-s-inner .cm-number { 484 | color: #FF7042; 485 | } 486 | .cm-s-inner .cm-def { 487 | color: #e9eded; 488 | } 489 | .cm-s-inner .cm-string { 490 | color: #C6FF00; 491 | } 492 | .cm-s-inner .cm-string-2 { 493 | color: #80CBC4; 494 | } 495 | .cm-s-inner .cm-comment { 496 | color: #a8bac3; 497 | } 498 | .cm-s-inner .cm-variable { 499 | color: #82B1FF; 500 | } 501 | .cm-s-inner .cm-tag { 502 | color: #80CBC4; 503 | } 504 | .cm-s-inner .cm-meta { 505 | color: #80CBC4; 506 | } 507 | .cm-s-inner .cm-attribute { 508 | color: #FFCB6B; 509 | } 510 | .cm-s-inner .cm-property { 511 | color: #00BCD4; 512 | } 513 | .cm-s-inner .cm-qualifier { 514 | color: #DECB6B; 515 | } 516 | .cm-s-inner .cm-variable-3 { 517 | color: #DECB6B; 518 | } 519 | .cm-s-inner .cm-tag { 520 | color: #ff5370; 521 | } 522 | .cm-s-inner .cm-error { 523 | color: #ffffff; 524 | background-color: #EC5F67; 525 | } 526 | .cm-s-inner .CodeMirror-matchingbracket { 527 | text-decoration: underline; 528 | color: white !important; 529 | } 530 | /**apply to code fences with plan text**/ 531 | .md-fences, 532 | .md-mathjax-input, 533 | .md-table-edit, 534 | .md-table-resize-popover { 535 | padding: .1rem .5rem .5rem .5rem; 536 | color: #e9eded; 537 | border: none; 538 | line-height: 1.8rem; 539 | border-radius: .25rem; 540 | } 541 | .md-fences { 542 | background-color: #424242; 543 | } 544 | .md-mathjax-input, 545 | .md-table-edit, 546 | .md-table-resize-popover { 547 | background-color: #424242; 548 | } 549 | .md-mathjax-midline { 550 | padding: 1rem 0 1rem 0; 551 | } 552 | .md-mathjax-midline button { 553 | margin-top: -0.5rem; 554 | } 555 | .md-mathjax-buffer { 556 | border-top: 0px !important; 557 | } 558 | .code-tooltip { 559 | background-color: #596169; 560 | color: #fff; 561 | } 562 | .code-tooltip span { 563 | line-height: unset; 564 | } 565 | .CodeMirror pre { 566 | padding: 0 1rem; 567 | } 568 | .show-fences-line-number .md-fences { 569 | padding-left: 1.2rem; 570 | padding-right: .5rem; 571 | } 572 | .task-list-item input { 573 | top: 2px; 574 | left: -18px; 575 | } 576 | @media print { 577 | .typora-export * { 578 | -webkit-print-color-adjust: exact; 579 | } 580 | .typora-export html, 581 | .typora-export body { 582 | font-size: 13px; 583 | } 584 | .typora-export table, 585 | .typora-export pre { 586 | page-break-inside: avoid !important; 587 | } 588 | .typora-export pre, 589 | .typora-export .md-def-footnote, 590 | .typora-export div { 591 | word-wrap: break-word !important; 592 | } 593 | .typora-export code, 594 | .typora-export pre { 595 | font-weight: 400 !important; 596 | } 597 | .typora-export h1:after, 598 | .typora-export h2:after, 599 | .typora-export h3:after, 600 | .typora-export h4:after, 601 | .typora-export h5:after, 602 | .typora-export h6:after { 603 | content: ''; 604 | } 605 | } 606 | -------------------------------------------------------------------------------- /aqua-blue.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --bg-color: #fff; 3 | --text-color: #000; 4 | --md-char-color: #C7C5C5; 5 | --meta-content-color: #5b808d; 6 | --blur-text-color: #d5d5d5; 7 | --drag-placeholder-color: #c7c5c5; 8 | --panel-border-color: #777777; 9 | --active-toggle-btn-color: #ddd; 10 | --table-border-color: #ccc; 11 | --primary-color: #428bca; 12 | --primary-btn-border-color: #285e8e; 13 | --primary-btn-text-color: #fff; 14 | --search-select-bg-color: #000; 15 | --search-select-text-color: #fff; 16 | --heading-char-color: #ddd; 17 | --color-popover-bg-color: #fafafa; 18 | --control-text-color: var(--text-color); 19 | --control-text-hover-color: var(--text-color); 20 | --window-border: 1px solid #eee; 21 | --active-file-bg-color: #eee; 22 | --active-file-text-color: inherit; 23 | --active-file-border-color: #777; 24 | --focus-ring-color: #6eace2; 25 | --side-bar-bg-color: var(--bg-color); 26 | --item-hover-bg-color: rgba(229, 229, 229, 0.59); 27 | --item-hover-text-color: inherit; 28 | --side-bar-menu-active-tint: var(--side-bar-menu-active-tint); 29 | --mac-title-bar-height: 20px; 30 | --sidebar-width: 270px; 31 | --monospace: monospace; 32 | } 33 | @font-face { 34 | font-family: 'Fira Code'; 35 | font-style: normal; 36 | font-weight: 400; 37 | src: url(aqua/latin_fonts/FiraCode-Regular.woff2) format('woff2'); 38 | } 39 | @font-face { 40 | font-family: 'Fira Code'; 41 | font-style: medium; 42 | font-weight: 600; 43 | src: url(aqua/latin_fonts/FiraCode-Medium.woff2) format('woff2'); 44 | } 45 | @font-face { 46 | font-family: 'CompositeFontsBody'; 47 | font-style: normal; 48 | font-weight: 400; 49 | src: url(aqua/CJK_fonts/NotoSansCJKtc-Regular.otf) format('opentype'); 50 | } 51 | @font-face { 52 | font-family: 'CompositeFontsBody'; 53 | font-style: medium; 54 | font-weight: 600; 55 | src: url(aqua/CJK_fonts/NotoSansCJKtc-Medium.otf) format('opentype'); 56 | } 57 | @font-face { 58 | font-family: 'CompositeFontsBody'; 59 | font-style: bold; 60 | font-weight: 800; 61 | src: url(aqua/CJK_fonts/NotoSansCJKtc-Bold.otf) format('opentype'); 62 | } 63 | @font-face { 64 | font-family: 'CompositeFontsBodySC'; 65 | font-style: normal; 66 | font-weight: 400; 67 | src: url(aqua/CJK_fonts/NotoSansCJKsc-Regular.otf) format('opentype'); 68 | } 69 | @font-face { 70 | font-family: 'CompositeFontsBodySC'; 71 | font-style: medium; 72 | font-weight: 600; 73 | src: url(aqua/CJK_fonts/NotoSansCJKsc-Medium.otf) format('opentype'); 74 | } 75 | @font-face { 76 | font-family: 'CompositeFontsBodySC'; 77 | font-style: bold; 78 | font-weight: 800; 79 | src: url(aqua/CJK_fonts/NotoSansCJKsc-Bold.otf) format('opentype'); 80 | } 81 | @font-face { 82 | font-family: 'CompositeFontsEm'; 83 | font-style: italic; 84 | font-weight: 600; 85 | src: url(aqua/latin_fonts/NotoSerif-MediumItalic.ttf) format('truetype'); 86 | } 87 | html { 88 | font-size: 16px; 89 | } 90 | html, 91 | body { 92 | font-family: 'CompositeFontsBody', 'CompositeFontsBodySC', 'Helvetica Neue', Helvetica, 'Microsoft JhengHei', Arial, sans-serif; 93 | } 94 | content, 95 | titlebar { 96 | background-color: #fcfcfc; 97 | } 98 | p, 99 | span { 100 | line-height: 1.9rem; 101 | } 102 | #write { 103 | max-width: 750px; 104 | } 105 | /** 106 | * --------------------- 107 | * Block Elements 108 | */ 109 | pre.md-meta-block { 110 | background-color: transparent; 111 | border-top-style: solid; 112 | border-top-width: .1rem; 113 | border-bottom-style: solid; 114 | border-bottom-width: .1rem; 115 | border-color: #ccc; 116 | padding: 10px; 117 | } 118 | h1, 119 | h2, 120 | h3, 121 | h4, 122 | h5, 123 | h6 { 124 | font-style: unset; 125 | font-family: 'CompositeFontsBody', 'CompositeFontsBodySC', 'Helvetica Neue', Helvetica, 'Microsoft JhengHei', Arial, sans-serif; 126 | font-weight: 600; 127 | color: #5B83AD; 128 | } 129 | h1:after, 130 | h2:after, 131 | h3:after, 132 | h4:after, 133 | h5:after, 134 | h6:after { 135 | background-color: transparent; 136 | color: #a1a1a1; 137 | padding: .2rem .25rem .2rem .25rem; 138 | margin-right: 5rem; 139 | font-size: .7rem; 140 | } 141 | h1:after { 142 | content: 'H1'; 143 | } 144 | h2:after { 145 | content: 'H2'; 146 | } 147 | h3:after { 148 | content: 'H3'; 149 | } 150 | h4:after { 151 | content: 'H4'; 152 | } 153 | h5:after { 154 | content: 'H5'; 155 | } 156 | h6:after { 157 | content: 'H6'; 158 | } 159 | h1 { 160 | margin-top: 2.7rem; 161 | margin-bottom: 1.1rem; 162 | font-size: 2.3rem; 163 | } 164 | h2 { 165 | margin-top: 2.5rem; 166 | margin-bottom: .9rem; 167 | font-size: 1.9rem; 168 | } 169 | h3 { 170 | margin-top: 2.3rem; 171 | margin-bottom: .9rem; 172 | font-size: 1.65rem; 173 | } 174 | h4 { 175 | margin-top: 2.1rem; 176 | margin-bottom: .9rem; 177 | font-size: 1.5rem; 178 | } 179 | h5 { 180 | margin-top: 1.9rem; 181 | margin-bottom: .9rem; 182 | font-size: 1.35rem; 183 | } 184 | h6 { 185 | margin-top: 1.8rem; 186 | margin-bottom: .9rem; 187 | font-size: 1.2rem; 188 | } 189 | table { 190 | margin: 1.75rem 0 1.75rem 0; 191 | vertical-align: top; 192 | } 193 | thead { 194 | display: table-header-group; 195 | vertical-align: middle; 196 | border-top: 0px; 197 | border-right: 0px; 198 | border-left: 0px; 199 | border-bottom: 3px solid #dee2e6; 200 | } 201 | tr { 202 | display: table-row; 203 | vertical-align: inherit; 204 | border-top: 0px; 205 | border-right: 0px; 206 | border-left: 0px; 207 | } 208 | td, 209 | th { 210 | padding: .75rem; 211 | vertical-align: top; 212 | border-right: 0px; 213 | border-left: 0px; 214 | } 215 | thead td, 216 | thead th { 217 | border-top: 0px; 218 | } 219 | tbody td, 220 | tbody th { 221 | border-top: 1px solid #dee2e6; 222 | } 223 | ol { 224 | color: #C95561; 225 | } 226 | li { 227 | color: #000; 228 | } 229 | blockquote { 230 | display: block; 231 | background: transparent; 232 | padding: .5rem .5rem 1rem 1.5rem; 233 | margin: 2rem 2rem 2.5rem 2rem; 234 | position: relative; 235 | /*Font*/ 236 | font-family: 'CompositeFontsBody', 'CompositeFontsBodySC', 'Helvetica Neue', Helvetica, 'Microsoft JhengHei', Arial, sans-serif; 237 | font-size: 14px; 238 | color: #5a5a5a; 239 | /*Box Shadow - (Optional)*/ 240 | /*Borders - (Optional)*/ 241 | border-left-style: solid; 242 | border-left-width: .5rem; 243 | border-color: #C95561; 244 | } 245 | blockquote p { 246 | line-height: 1.8 !important; 247 | } 248 | hr { 249 | background: #d9d9d9; 250 | border-width: 0; 251 | color: #d9d9d9; 252 | height: 1px; 253 | } 254 | p { 255 | margin-left: .5rem; 256 | } 257 | .md-line { 258 | line-height: 1.7rem; 259 | } 260 | .md-inline-math { 261 | margin: 0 .1rem 0 .2rem; 262 | } 263 | .md-emoji-span { 264 | margin: 0 .1rem 0 .1rem; 265 | } 266 | sup.md-footnote { 267 | background-color: transparent; 268 | border: 1px solid #a1a1a1; 269 | border-radius: 4px; 270 | color: #848484; 271 | padding: 0 .25rem 0 .25rem; 272 | } 273 | /** 274 | * Code Fences 275 | * see http://support.typora.io/Code-Block-Styles 276 | */ 277 | /** 278 | * Mermaid Diagrams 279 | * see https://github.com/knsv/mermaid/blob/master/dist/mermaid.css 280 | */ 281 | /** 282 | * Inline Elements 283 | */ 284 | code, 285 | pre { 286 | font-family: Menlo, 'Fira Code', Monaco, 'Courier New', monospace; 287 | font-weight: 600; 288 | margin: -1px 0.1rem 0 0.25rem; 289 | } 290 | strong { 291 | margin: 0 .1rem 0 .2rem; 292 | font-weight: 800; 293 | } 294 | u { 295 | text-decoration: none; 296 | border-bottom: .18rem solid #ef8b80; 297 | margin: 0 .1rem 0 .2rem; 298 | padding: .01rem .3rem .05rem .36rem; 299 | } 300 | em { 301 | font-style: unset; 302 | font-family: 'CompositeFontsEm', Georgia, 'Times New Roman', Times, serif; 303 | font-style: italic; 304 | margin: 0 .1rem 0 .2rem; 305 | } 306 | a { 307 | text-decoration: none; 308 | border-bottom: thin; 309 | color: #1955a5; 310 | border-bottom: .1rem dotted #71a5ea; 311 | } 312 | img { 313 | padding: .25rem; 314 | background-color: #fff; 315 | border: 1px solid #dee2e6; 316 | border-radius: .25rem; 317 | max-width: 100%; 318 | } 319 | mark { 320 | background: #e96253; 321 | color: #fff; 322 | font-weight: 800; 323 | padding: 0 .32rem .1rem .36rem; 324 | margin: 0 .1rem 0 .2rem; 325 | border-radius: .25rem; 326 | } 327 | del { 328 | margin: 0 .1rem 0 .2rem; 329 | padding: .01rem .3rem .05rem .36rem; 330 | } 331 | /** 332 | * Source Code Mode 333 | * see http://support.typora.io/Code-Block-Styles 334 | */ 335 | /** 336 | * Control UI (optional) 337 | */ 338 | .megamenu-content span, 339 | .dropdown-menu span { 340 | line-height: normal; 341 | } 342 | .preference-item { 343 | color: #646464; 344 | } 345 | .megamenu-menu a, 346 | .dropdown-menu a { 347 | border-bottom: 0px; 348 | } 349 | .dropdown-menu span { 350 | color: #c8c8c8; 351 | } 352 | .dropdown-menu .active span { 353 | color: #fff; 354 | } 355 | .preference-item-setting span { 356 | margin-left: .5rem; 357 | } 358 | .modal-content span { 359 | line-height: normal; 360 | } 361 | .modal-title span { 362 | line-height: normal; 363 | } 364 | #typora-sidebar span { 365 | line-height: normal; 366 | } 367 | .sidebar-content { 368 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 369 | } 370 | .sidebar-content span { 371 | line-height: normal; 372 | } 373 | .dropdown-menu { 374 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; 375 | } 376 | #write div.md-toc-tooltip { 377 | background-color: #fcfcfc; 378 | } 379 | /** 380 | * Control UI on Mac (optional) 381 | */ 382 | /** 383 | * Control UI on Windows/Linux (optional) 384 | */ 385 | .cm-s-inner { 386 | color: #536a7f; 387 | } 388 | .cm-s-inner .CodeMirror-gutters { 389 | color: #536a7f; 390 | } 391 | .cm-s-inner .CodeMirror-guttermarker, 392 | .cm-s-inner .CodeMirror-guttermarker-subtle, 393 | .cm-s-inner .CodeMirror-linenumber { 394 | color: #537f7e; 395 | margin-top: 1.55px; 396 | } 397 | .cm-s-inner .CodeMirror-cursor { 398 | border-left: 1px solid #f8f8f0; 399 | } 400 | .cm-s-inner div.CodeMirror-selected { 401 | background: rgba(255, 255, 255, 0.15); 402 | } 403 | .cm-s-inner.CodeMirror-focused div.CodeMirror-selected { 404 | background: rgba(255, 255, 255, 0.1); 405 | } 406 | .cm-s-inner .CodeMirror-line::selection, 407 | .cm-s-inner .CodeMirror-line > span::selection, 408 | .cm-s-inner .CodeMirror-line > span > span::selection { 409 | background: rgba(255, 255, 255, 0.1); 410 | } 411 | .cm-s-inner .CodeMirror-line::-moz-selection, 412 | .cm-s-inner .CodeMirror-line > span::-moz-selection, 413 | .cm-s-inner .CodeMirror-line > span > span::-moz-selection { 414 | background: rgba(255, 255, 255, 0.1); 415 | } 416 | .cm-s-inner .CodeMirror-activeline-background { 417 | background: rgba(0, 0, 0, 0); 418 | } 419 | .cm-s-inner .cm-keyword { 420 | color: #0E6EB8; 421 | } 422 | .cm-s-inner .cm-operator { 423 | color: #7d9595; 424 | } 425 | .cm-s-inner .cm-header { 426 | color: #FFA000; 427 | } 428 | .cm-s-inner .cm-link { 429 | color: #71a5ea; 430 | } 431 | .cm-s-inner .cm-variable-2 { 432 | color: #3b9189; 433 | } 434 | .cm-s-inner .cm-variable-3 { 435 | color: #4f91ff; 436 | } 437 | .cm-s-inner .cm-builtin { 438 | color: #ff5370; 439 | } 440 | .cm-s-inner .cm-atom { 441 | color: #B03060; 442 | } 443 | .cm-s-inner .cm-number { 444 | color: #B03060; 445 | } 446 | .cm-s-inner .cm-def { 447 | color: #957d7d; 448 | } 449 | .cm-s-inner .cm-string { 450 | color: #ff6d00; 451 | } 452 | .cm-s-inner .cm-string-2 { 453 | color: #008080; 454 | } 455 | .cm-s-inner .cm-comment { 456 | color: #859fab; 457 | font-style: italic; 458 | } 459 | .cm-s-inner .cm-variable { 460 | color: #4f91ff; 461 | } 462 | .cm-s-inner .cm-tag { 463 | color: #4ab5ab; 464 | } 465 | .cm-s-inner .cm-meta { 466 | color: #398b83; 467 | } 468 | .cm-s-inner .cm-attribute { 469 | color: #FE9A76; 470 | } 471 | .cm-s-inner .cm-property { 472 | color: #318200; 473 | } 474 | .cm-s-inner .cm-qualifier { 475 | color: #ff5370; 476 | } 477 | .cm-s-inner .cm-variable-3 { 478 | color: #ff5370; 479 | } 480 | .cm-s-inner .cm-tag { 481 | color: #A52A2A; 482 | } 483 | .cm-s-inner .cm-error { 484 | color: #ffffff; 485 | background-color: #EC5F67; 486 | } 487 | .cm-s-inner .CodeMirror-matchingbracket { 488 | text-decoration: underline; 489 | color: white !important; 490 | } 491 | /**apply to code fences with plan text**/ 492 | .md-fences, 493 | .md-mathjax-input, 494 | .md-table-edit, 495 | .md-table-resize-popover { 496 | padding: .1rem .5rem .5rem .5rem; 497 | background-color: #fdfdfd; 498 | border-style: solid; 499 | border-width: .1rem; 500 | border-color: #e6ebed; 501 | line-height: 1.8rem; 502 | border-radius: .1rem; 503 | } 504 | .md-mathjax-midline { 505 | padding: 1rem 0 1rem 0; 506 | } 507 | .md-mathjax-midline button { 508 | margin-top: -0.5rem; 509 | } 510 | .md-mathjax-buffer { 511 | border-top: 0px !important; 512 | } 513 | .code-tooltip { 514 | background-color: #263238; 515 | color: #fff; 516 | } 517 | .code-tooltip span { 518 | line-height: unset; 519 | } 520 | .CodeMirror pre { 521 | padding: 0 1rem; 522 | } 523 | .show-fences-line-number .md-fences { 524 | padding-left: 1.2rem; 525 | padding-right: .5rem; 526 | } 527 | .task-list-item input { 528 | width: 1.25rem; 529 | height: 1.25rem; 530 | display: block; 531 | -webkit-appearance: initial; 532 | top: 0px; 533 | left: -18px; 534 | } 535 | .task-list-item input:focus { 536 | outline: none; 537 | box-shadow: none; 538 | } 539 | .task-list-item input:before { 540 | border: 3px solid #9bd4ff; 541 | border-radius: .2rem; 542 | width: 1.3rem; 543 | height: 1.3rem; 544 | background: #fff; 545 | content: ''; 546 | transition: background-color 200ms ease-in-out; 547 | display: block; 548 | } 549 | .task-list-item input:checked:before, 550 | .task-list-item input[checked]:before { 551 | border: 0px; 552 | background: #2185d0; 553 | display: inline-block; 554 | transition: background-color 200ms ease-in-out; 555 | } 556 | .task-list-item input:checked:after, 557 | .task-list-item input[checked]:after { 558 | opacity: 1; 559 | } 560 | .task-list-item input:after { 561 | opacity: 1; 562 | -webkit-transition: opacity 0.1s ease-in-out; 563 | -moz-transition: opacity 0.1s ease-in-out; 564 | transition: opacity 0.1s ease-in-out; 565 | border-top: 0; 566 | border-right: 0; 567 | content: ' '; 568 | opacity: 0; 569 | } 570 | .task-list-done { 571 | color: #a8a8a8; 572 | } 573 | @media print { 574 | .typora-export * { 575 | -webkit-print-color-adjust: exact; 576 | } 577 | .typora-export html, 578 | .typora-export body { 579 | font-size: 13px; 580 | } 581 | .typora-export table, 582 | .typora-export pre { 583 | page-break-inside: avoid !important; 584 | } 585 | .typora-export pre, 586 | .typora-export .md-def-footnote, 587 | .typora-export div { 588 | word-wrap: break-word !important; 589 | } 590 | .typora-export code, 591 | .typora-export pre { 592 | font-weight: 400 !important; 593 | } 594 | .typora-export h1:after, 595 | .typora-export h2:after, 596 | .typora-export h3:after, 597 | .typora-export h4:after, 598 | .typora-export h5:after, 599 | .typora-export h6:after { 600 | content: ''; 601 | } 602 | } 603 | --------------------------------------------------------------------------------