545b85d4eebc7432ac411bdcbe61df9dbc13e30a
[dotfilesold/.git] / .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 }