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