.config/Typora/themes/night.css

   1 @import "night/mermaid.dark.css";
   2 @import "night/codeblock.dark.css";
   3 @import "night/sourcemode.dark.css";
   4
   5 :root {
   6     --bg-color:  #363B40;
   7     --side-bar-bg-color: #2E3033;
   8     --text-color: #b8bfc6;
   9
  10     --select-text-bg-color:#4a89dc;
  11
  12     --item-hover-bg-color: #0a0d16;
  13     --control-text-color: #b7b7b7;
  14     --control-text-hover-color: #eee;
  15     --window-border: 1px solid #555;
  16
  17     --active-file-bg-color: rgb(34, 34, 34);
  18     --active-file-border-color: #8d8df0;
  19
  20     --primary-color: #a3d5fe;
  21
  22     --active-file-text-color: white;
  23     --item-hover-bg-color: #70717d;
  24     --item-hover-text-color: white;
  25     --primary-color: #6dc1e7;
  26
  27     --rawblock-edit-panel-bd: #333;
  28
  29     --search-select-bg-color: #428bca;
  30 }
  31
  32 html {
  33     font-size: 16px;
  34 }
  35
  36 html,
  37 body {
  38     -webkit-text-size-adjust: 100%;
  39     -ms-text-size-adjust: 100%;
  40     background: #363B40;
  41     background: var(--bg-color);
  42     fill: currentColor;
  43     line-height: 1.625rem;
  44 }
  45
  46 #write {
  47     max-width: 914px;
  48 }
  49
  50 html,
  51 body,
  52 button,
  53 input,
  54 select,
  55 textarea,
  56 div.code-tooltip-content {
  57     color: #b8bfc6;
  58     border-color: transparent;
  59 }
  60
  61 div.code-tooltip,
  62 .md-hover-tip .md-arrow:after {
  63     background: #333;
  64 }
  65
  66 .popover.bottom > .arrow:after {
  67     border-bottom-color: #333;
  68 }
  69
  70 html,
  71 body,
  72 button,
  73 input,
  74 select,
  75 textarea {
  76     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  77 }
  78
  79 hr {
  80     height: 2px;
  81     border: 0;
  82     margin: 24px 0 !important;
  83 }
  84
  85 h1,
  86 h2,
  87 h3,
  88 h4,
  89 h5,
  90 h6 {
  91     font-family: "Lucida Grande", "Corbel", sans-serif;
  92     font-weight: normal;
  93     clear: both;
  94     -ms-word-wrap: break-word;
  95     word-wrap: break-word;
  96     margin: 0;
  97     padding: 0;
  98     color: #DEDEDE
  99 }
 100
 101 h1 {
 102     font-size: 2.5rem;
 103     /* 36px */
 104     line-height: 2.75rem;
 105     /* 40px */
 106     margin-bottom: 1.5rem;
 107     /* 24px */
 108     letter-spacing: -1.5px;
 109 }
 110
 111 h2 {
 112     font-size: 1.63rem;
 113     /* 24px */
 114     line-height: 1.875rem;
 115     /* 30px */
 116     margin-bottom: 1.5rem;
 117     /* 24px */
 118     letter-spacing: -1px;
 119     font-weight: bold;
 120 }
 121
 122 h3 {
 123     font-size: 1.17rem;
 124     /* 18px */
 125     line-height: 1.5rem;
 126     /* 24px */
 127     margin-bottom: 1.5rem;
 128     /* 24px */
 129     letter-spacing: -1px;
 130     font-weight: bold;
 131 }
 132
 133 h4 {
 134     font-size: 1.12rem;
 135     /* 16px */
 136     line-height: 1.375rem;
 137     /* 22px */
 138     margin-bottom: 1.5rem;
 139     /* 24px */
 140     color: white;
 141 }
 142
 143 h5 {
 144     font-size: 0.97rem;
 145     /* 16px */
 146     line-height: 1.25rem;
 147     /* 22px */
 148     margin-bottom: 1.5rem;
 149     /* 24px */
 150     font-weight: bold;
 151 }
 152
 153 h6 {
 154     font-size: 0.93rem;
 155     /* 16px */
 156     line-height: 1rem;
 157     /* 16px */
 158     margin-bottom: 0.75rem;
 159     color: white;
 160 }
 161
 162 @media (min-width: 980px) {
 163     h3.md-focus:before,
 164     h4.md-focus:before,
 165     h5.md-focus:before,
 166     h6.md-focus:before {
 167         color: #ddd;
 168         border: 1px solid #ddd;
 169         border-radius: 3px;
 170         position: absolute;
 171         left: -1.642857143rem;
 172         top: .357142857rem;
 173         float: left;
 174         font-size: 9px;
 175         padding-left: 2px;
 176         padding-right: 2px;
 177         vertical-align: bottom;
 178         font-weight: normal;
 179         line-height: normal;
 180     }
 181
 182     h3.md-focus:before {
 183         content: 'h3';
 184     }
 185
 186     h4.md-focus:before {
 187         content: 'h4';
 188     }
 189
 190     h5.md-focus:before {
 191         content: 'h5';
 192         top: 0px;
 193     }
 194
 195     h6.md-focus:before {
 196         content: 'h6';
 197         top: 0px;
 198     }
 199 }
 200
 201 a {
 202     text-decoration: none;
 203     outline: 0;
 204 }
 205
 206 a:hover {
 207     outline: 0;
 208 }
 209
 210 a:focus {
 211     outline: thin dotted;
 212 }
 213
 214 sup.md-footnote {
 215     background-color: #555;
 216     color: #ddd;
 217 }
 218
 219 p {
 220     -ms-word-wrap: break-word;
 221     word-wrap: break-word;
 222 }
 223
 224 p,
 225 ul,
 226 dd,
 227 ol,
 228 hr,
 229 address,
 230 pre,
 231 table,
 232 iframe,
 233 .wp-caption,
 234 .wp-audio-shortcode,
 235 .wp-video-shortcode {
 236     margin-top: 0;
 237     margin-bottom: 1.5rem;
 238     /* 24px */
 239 }
 240
 241 li > blockquote {
 242         margin-bottom: 0;
 243 }
 244
 245 audio:not([controls]) {
 246     display: none;
 247 }
 248
 249 [hidden] {
 250     display: none;
 251 }
 252
 253 ::-moz-selection {
 254     background: #4a89dc;
 255     color: #fff;
 256     text-shadow: none;
 257 }
 258
 259 *.in-text-selection,
 260 ::selection {
 261     background: #4a89dc;
 262     color: #fff;
 263     text-shadow: none;
 264 }
 265
 266 ul,
 267 ol {
 268     padding: 0 0 0 1.875rem;
 269     /* 30px */
 270 }
 271
 272 ul {
 273     list-style: square;
 274 }
 275
 276 ol {
 277     list-style: decimal;
 278 }
 279
 280 ul ul,
 281 ol ol,
 282 ul ol,
 283 ol ul {
 284     margin: 0;
 285 }
 286
 287 b,
 288 th,
 289 dt,
 290 strong {
 291     font-weight: bold;
 292 }
 293
 294 i,
 295 em,
 296 dfn,
 297 cite {
 298     font-style: italic;
 299 }
 300
 301 blockquote {
 302     padding-left: 1.875rem;
 303     margin: 0 0 1.875rem 1.875rem;
 304     border-left: solid 2px #474d54;
 305     padding-left: 30px;
 306     margin-top: 35px;
 307 }
 308
 309 pre,
 310 code,
 311 kbd,
 312 tt,
 313 var {
 314     background: rgba(0, 0, 0, 0.05);
 315     font-size: 0.875rem;
 316     font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 317 }
 318
 319 kbd {
 320     padding: 2px 4px;
 321     font-size: 90%;
 322     color: #fff;
 323     background-color: #333;
 324     border-radius: 3px;
 325     box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
 326 }
 327
 328 pre.md-fences {
 329     padding: 10px 10px 10px 30px;
 330     margin-bottom: 20px;
 331     background: #333;
 332 }
 333
 334 .CodeMirror-gutters {
 335     background: #333;
 336     border-right: 1px solid transparent;
 337 }
 338
 339 .enable-diagrams pre.md-fences[lang="sequence"] .code-tooltip,
 340 .enable-diagrams pre.md-fences[lang="flow"] .code-tooltip,
 341 .enable-diagrams pre.md-fences[lang="mermaid"] .code-tooltip {
 342     bottom: -2.2em;
 343     right: 4px;
 344 }
 345
 346 code,
 347 kbd,
 348 tt,
 349 var {
 350     padding: 2px 5px;
 351 }
 352
 353 table {
 354     max-width: 100%;
 355     width: 100%;
 356     border-collapse: collapse;
 357     border-spacing: 0;
 358 }
 359
 360 th,
 361 td {
 362     padding: 5px 10px;
 363     vertical-align: top;
 364 }
 365
 366 a {
 367     -webkit-transition: all .2s ease-in-out;
 368     transition: all .2s ease-in-out;
 369 }
 370
 371 hr {
 372     background: #474d54;
 373     /* variable */
 374 }
 375
 376 h1 {
 377     margin-top: 2em;
 378 }
 379
 380 a {
 381     color: #e0e0e0;
 382     text-decoration: underline;
 383 }
 384
 385 a:hover {
 386     color: #fff;
 387 }
 388
 389 .md-inline-math script {
 390     color: #81b1db;
 391 }
 392
 393 b,
 394 th,
 395 dt,
 396 strong {
 397     color: #DEDEDE;
 398     /* variable */
 399 }
 400
 401 mark {
 402     background: #D3D40E;
 403 }
 404
 405 blockquote {
 406     color: #9DA2A6;
 407 }
 408
 409 table a {
 410     color: #DEDEDE;
 411     /* variable */
 412 }
 413
 414 th,
 415 td {
 416     border: solid 1px #474d54;
 417     /* variable */
 418 }
 419
 420 .task-list {
 421     padding-left: 0;
 422 }
 423
 424 .md-task-list-item {
 425     padding-left: 1.25rem;
 426 }
 427
 428 .md-task-list-item > input {
 429     top: auto;
 430 }
 431
 432 .md-task-list-item > input:before {
 433     content: "";
 434     display: inline-block;
 435     width: 0.875rem;
 436     height: 0.875rem;
 437     vertical-align: middle;
 438     text-align: center;
 439     border: 1px solid #b8bfc6;
 440     background-color: #363B40;
 441     margin-top: -0.4rem;
 442 }
 443
 444 .md-task-list-item > input:checked:before,
 445 .md-task-list-item > input[checked]:before {
 446     content: '\221A';
 447     /*◘*/
 448     font-size: 0.625rem;
 449     line-height: 0.625rem;
 450     color: #DEDEDE;
 451 }
 452
 453 /** quick open **/
 454 .auto-suggest-container {
 455     border: 0px;
 456     background-color: #525C65;
 457 }
 458
 459 #typora-quick-open {
 460     background-color: #525C65;
 461 }
 462
 463 #typora-quick-open input{
 464     background-color: #525C65;
 465     border: 0;
 466     border-bottom: 1px solid grey;
 467 }
 468
 469 .typora-quick-open-item {
 470     background-color: inherit;
 471     color: inherit;
 472 }
 473
 474 .typora-quick-open-item.active,
 475 .typora-quick-open-item:hover {
 476     background-color: #4D8BDB;
 477     color: white;
 478 }
 479
 480 .typora-quick-open-item:hover {
 481     background-color: rgba(77, 139, 219, 0.8);
 482 }
 483
 484 .typora-search-spinner > div {
 485   background-color: #fff;
 486 }
 487
 488 #write pre.md-meta-block {
 489     border-bottom: 1px dashed #ccc;
 490     background: transparent;
 491     padding-bottom: 0.6em;
 492     line-height: 1.6em;
 493 }
 494
 495 .btn,
 496 .btn .btn-default {
 497     background: transparent;
 498     color: #b8bfc6;
 499 }
 500
 501 .ty-table-edit {
 502     border-top: 1px solid gray;
 503     background-color: #363B40;
 504 }
 505
 506 .popover-title {
 507     background: transparent;
 508 }
 509
 510 .md-image>.md-meta {
 511     color: #BBBBBB;
 512     background: transparent;
 513 }
 514
 515 .md-expand.md-image>.md-meta {
 516     color: #DDD;
 517 }
 518
 519 #write>h3:before,
 520 #write>h4:before,
 521 #write>h5:before,
 522 #write>h6:before {
 523     border: none;
 524     border-radius: 0px;
 525     color: #888;
 526     text-decoration: underline;
 527     left: -1.4rem;
 528     top: 0.2rem;
 529 }
 530
 531 #write>h3.md-focus:before {
 532     top: 2px;
 533 }
 534
 535 #write>h4.md-focus:before {
 536     top: 2px;
 537 }
 538
 539 .md-toc-item {
 540     color: #A8C2DC;
 541 }
 542
 543 #write div.md-toc-tooltip {
 544     background-color: #363B40;
 545 }
 546
 547 .dropdown-menu .btn:hover,
 548 .dropdown-menu .btn:focus,
 549 .md-toc .btn:hover,
 550 .md-toc .btn:focus {
 551     color: white;
 552     background: black;
 553 }
 554
 555 #toc-dropmenu {
 556     background: rgba(50, 54, 59, 0.93);
 557     border: 1px solid rgba(253, 253, 253, 0.15);
 558 }
 559
 560 #toc-dropmenu .divider {
 561     background-color: #9b9b9b;
 562 }
 563
 564 .outline-expander:before {
 565     top: 2px;
 566 }
 567
 568 #typora-sidebar {
 569     box-shadow: none;
 570     border-right: 1px dashed;
 571     border-right: none;
 572 }
 573
 574 .sidebar-tabs {
 575     border-bottom:0;
 576 }
 577
 578 #typora-sidebar:hover .outline-title-wrapper {
 579     border-left: 1px dashed;
 580 }
 581
 582 .outline-title-wrapper .btn {
 583     color: inherit;
 584 }
 585
 586 .outline-item:hover {
 587     border-color: #363B40;
 588     background-color: #363B40;
 589     color: white;
 590 }
 591
 592 h1.md-focus .md-attr,
 593 h2.md-focus .md-attr,
 594 h3.md-focus .md-attr,
 595 h4.md-focus .md-attr,
 596 h5.md-focus .md-attr,
 597 h6.md-focus .md-attr,
 598 .md-header-span .md-attr {
 599     color: #8C8E92;
 600     display: inline;
 601 }
 602
 603 .md-comment {
 604     color: #5a95e3;
 605     opacity: 1;
 606 }
 607
 608 .md-inline-math svg {
 609     color: #b8bfc6;
 610 }
 611
 612 #math-inline-preview .md-arrow:after {
 613     background: black;
 614 }
 615
 616 .modal-content {
 617     background: var(--bg-color);
 618     border: 0;
 619 }
 620
 621 .modal-title {
 622     font-size: 1.5em;
 623 }
 624
 625 .modal-content input {
 626     background-color: rgba(26, 21, 21, 0.51);
 627     color: white;
 628 }
 629
 630 .modal-content .input-group-addon {
 631     color: white;
 632 }
 633
 634 .modal-backdrop {
 635     background-color: rgba(174, 174, 174, 0.7);
 636 }
 637
 638 .modal-content .btn-primary {
 639     border-color: var(--primary-color);
 640 }
 641
 642 .md-table-resize-popover {
 643     background-color: #333;
 644 }
 645
 646 .form-inline .input-group .input-group-addon {
 647     color: white;
 648 }
 649
 650 #md-searchpanel {
 651     border-bottom: 1px dashed grey;
 652 }
 653
 654 /** UI for electron */
 655
 656 .context-menu,
 657 #spell-check-panel,
 658 #footer-word-count-info {
 659     background-color: #42464A;
 660 }
 661
 662 .context-menu.dropdown-menu .divider,
 663 .dropdown-menu .divider {
 664     background-color: #777777;
 665 }
 666
 667 footer {
 668     color: inherit;
 669 }
 670
 671 @media (max-width: 1000px) {
 672     footer {
 673         border-top: none;
 674     }
 675     footer:hover {
 676         color: inherit;
 677     }
 678 }
 679
 680 #file-info-file-path .file-info-field-value:hover {
 681     background-color: #555;
 682     color: #dedede;
 683 }
 684
 685 .megamenu-content,
 686 .megamenu-opened header {
 687     background: var(--bg-color);
 688 }
 689
 690 .megamenu-menu-panel h2,
 691 .megamenu-menu-panel h1,
 692 .long-btn {
 693     color: inherit;
 694 }
 695
 696 .megamenu-menu-panel input[type='text'] {
 697     background: inherit;
 698     border: 0;
 699     border-bottom: 1px solid;
 700 }
 701
 702 #recent-file-panel-action-btn {
 703     background: inherit;
 704     border: 1px grey solid;
 705 }
 706
 707 .megamenu-menu-panel .dropdown-menu > li > a {
 708     color: inherit;
 709     background-color: #2F353A;
 710     text-decoration: none;
 711 }
 712
 713 .megamenu-menu-panel table td:nth-child(1) {
 714     color: inherit;
 715     font-weight: bold;
 716 }
 717
 718 .megamenu-menu-panel tbody tr:hover td:nth-child(1) {
 719     color: white;
 720 }
 721
 722 .modal-footer .btn-default,
 723 .modal-footer .btn-primary,
 724 .modal-footer .btn-default:not(:hover) {
 725     border: 1px solid;
 726     border-color: transparent;
 727 }
 728
 729 .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
 730     color: white;
 731     border: 1px solid #ddd;
 732     background-color: inherit;
 733 }
 734
 735 .modal-header {
 736     border-bottom: 0;
 737 }
 738
 739 .modal-footer {
 740     border-top: 0;
 741 }
 742
 743 #recent-file-panel tbody tr:nth-child(2n-1) {
 744     background-color: transparent !important;
 745 }
 746
 747 .megamenu-menu-panel tbody tr:hover td:nth-child(2) {
 748     color: inherit;
 749 }
 750
 751 .megamenu-menu-panel .btn {
 752     border: 1px solid #eee;
 753     background: transparent;
 754 }
 755
 756 .mouse-hover .toolbar-icon.btn:hover,
 757 #w-full.mouse-hover,
 758 #w-pin.mouse-hover {
 759     background-color: inherit;
 760 }
 761
 762 .typora-node::-webkit-scrollbar {
 763     width: 5px;
 764 }
 765
 766 .typora-node::-webkit-scrollbar-thumb:vertical {
 767     background: rgba(250, 250, 250, 0.3);
 768 }
 769
 770 .typora-node::-webkit-scrollbar-thumb:vertical:active {
 771     background: rgba(250, 250, 250, 0.5);
 772 }
 773
 774 #w-unpin {
 775     background-color: #4182c4;
 776 }
 777
 778 #top-titlebar, #top-titlebar * {
 779     color: var(--item-hover-text-color);
 780 }
 781
 782 .typora-sourceview-on #toggle-sourceview-btn,
 783 #footer-word-count:hover,
 784 .ty-show-word-count #footer-word-count {
 785     background: #333333;
 786 }
 787
 788 #toggle-sourceview-btn:hover {
 789     color: #eee;
 790     background: #333333;
 791 }
 792
 793 /** focus mode */
 794 .on-focus-mode .md-end-block:not(.md-focus):not(.md-focus-container) * {
 795     color: #686868 !important;
 796 }
 797
 798 .on-focus-mode .md-end-block:not(.md-focus) img,
 799 .on-focus-mode .md-task-list-item:not(.md-focus-container)>input {
 800     opacity: #686868 !important;
 801 }
 802
 803 .on-focus-mode li[cid]:not(.md-focus-container){
 804     color: #686868;
 805 }
 806
 807 .on-focus-mode .md-fences.md-focus .CodeMirror-code>*:not(.CodeMirror-activeline) *,
 808 .on-focus-mode .CodeMirror.cm-s-inner:not(.CodeMirror-focused) * {
 809     color: #686868 !important;
 810 }
 811
 812 .on-focus-mode .md-focus,
 813 .on-focus-mode .md-focus-container {
 814     color: #fff;
 815 }
 816
 817 .on-focus-mode #typora-source .CodeMirror-code>*:not(.CodeMirror-activeline) * {
 818     color: #686868 !important;
 819 }
 820
 821
 822 /*diagrams*/
 823 #write .md-focus .md-diagram-panel {
 824     border: 1px solid #ddd;
 825     margin-left: -1px;
 826     width: calc(100% + 2px);
 827 }
 828
 829 /*diagrams*/
 830 #write .md-focus.md-fences-with-lineno .md-diagram-panel {
 831     margin-left: auto;
 832 }
 833
 834 .md-diagram-panel-error {
 835     color: #f1908e;
 836 }
 837
 838 .active-tab-files #info-panel-tab-file,
 839 .active-tab-files #info-panel-tab-file:hover,
 840 .active-tab-outline #info-panel-tab-outline,
 841 .active-tab-outline #info-panel-tab-outline:hover {
 842     color: #eee;
 843 }
 844
 845 .sidebar-footer-item:hover,
 846 .footer-item:hover {
 847     background: inherit;
 848     color: white;
 849 }
 850
 851 .ty-side-sort-btn.active,
 852 .ty-side-sort-btn:hover,
 853 .selected-folder-menu-item a:after {
 854     color: white;
 855 }
 856
 857 #sidebar-files-menu {
 858     border:solid 1px;
 859     box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.79);
 860     background-color: var(--bg-color);
 861 }
 862
 863 .file-list-item {
 864     border-bottom:none;
 865 }
 866
 867 .file-list-item-summary {
 868     opacity: 1;
 869 }
 870
 871 .file-list-item.active:first-child {
 872     border-top: none;
 873 }
 874
 875 .file-node-background {
 876     height: 32px;
 877 }
 878
 879 .file-library-node.active>.file-node-content,
 880 .file-list-item.active {
 881     color: white;
 882     color: var(--active-file-text-color);
 883 }
 884
 885 .file-library-node.active>.file-node-background{
 886     background-color: rgb(34, 34, 34);
 887     background-color: var(--active-file-bg-color);
 888 }
 889 .file-list-item.active {
 890     background-color: rgb(34, 34, 34);
 891     background-color: var(--active-file-bg-color);
 892 }
 893
 894 #ty-tooltip {
 895     background-color: black;
 896     color: #eee;
 897 }
 898
 899 .md-task-list-item>input {
 900     margin-left: -1.3em;
 901     margin-top: 0.3rem;
 902     -webkit-appearance: none;
 903 }
 904
 905 .md-mathjax-midline {
 906     background-color: #57616b;
 907     border-bottom: none;
 908 }
 909
 910 footer.ty-footer {
 911     border-color: #656565;
 912 }
 913
 914 .ty-preferences .btn-default {
 915     background: transparent;
 916 }
 917 .ty-preferences .btn-default:hover {
 918     background: #57616b;
 919 }
 920
 921 .ty-preferences select {
 922     border: 1px solid #989698;
 923     height: 21px;
 924 }
 925
 926 .ty-preferences .nav-group-item.active {
 927     background: var(--item-hover-bg-color);
 928 }
 929
 930 .ty-preferences input[type="search"] {
 931     border-color: #333;
 932     background: #333;
 933     line-height: 22px;
 934     border-radius: 6px;
 935     color: white;
 936 }
 937
 938 .ty-preferences input[type="search"]:focus {
 939     box-shadow: none;
 940 }
 941
 942 [data-is-directory="true"] .file-node-content {
 943     margin-bottom: 0;
 944 }
 945
 946 .file-node-title {
 947     line-height: 22px;
 948 }
 949
 950 .html-for-mac .file-node-open-state, .html-for-mac .file-node-icon {
 951     line-height: 26px;
 952 }
 953
 954 ::-webkit-scrollbar-thumb {
 955     background: rgba(230, 230, 230, 0.30);
 956 }
 957
 958 ::-webkit-scrollbar-thumb:active {
 959     background: rgba(230, 230, 230, 0.50);
 960 }
 961
 962 #typora-sidebar:hover div.sidebar-content-content::-webkit-scrollbar-thumb:horizontal {
 963     background: rgba(230, 230, 230, 0.30);
 964 }
 965
 966 .nav-group-item:active {
 967     background-color: #474d54;
 968 }
 969
 970 .md-search-hit {
 971     background: rgba(199, 140, 60, 0.81);
 972     color: #eee;
 973 }
 974
 975 .md-search-hit * {
 976     color: #eee;
 977 }
 978
 979 #md-searchpanel input {
 980     color: white;
 981 }