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