UNPKG

15.7 kBCSSView Raw
1@import url("https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,400,600");
2* {
3 -webkit-font-smoothing: antialiased;
4 -webkit-overflow-scrolling: touch;
5 -webkit-tap-highlight-color: rgba(0,0,0,0);
6 -webkit-text-size-adjust: none;
7 -webkit-touch-callout: none;
8 box-sizing: border-box;
9}
10body:not(.ready) {
11 overflow: hidden;
12}
13body:not(.ready) [data-cloak],
14body:not(.ready) .app-nav,
15body:not(.ready) > nav {
16 display: none;
17}
18div#app {
19 font-size: 30px;
20 font-weight: lighter;
21 margin: 40vh auto;
22 text-align: center;
23}
24div#app:empty::before {
25 content: 'Loading...';
26}
27.emoji {
28 height: 1.2rem;
29 vertical-align: middle;
30}
31.progress {
32 background-color: var(--theme-color, #ea6f5a);
33 height: 2px;
34 left: 0px;
35 position: fixed;
36 right: 0px;
37 top: 0px;
38 transition: width 0.2s, opacity 0.4s;
39 width: 0%;
40 z-index: 999999;
41}
42.search a:hover {
43 color: var(--theme-color, #ea6f5a);
44}
45.search .search-keyword {
46 color: var(--theme-color, #ea6f5a);
47 font-style: normal;
48 font-weight: bold;
49}
50html,
51body {
52 height: 100%;
53}
54body {
55 -moz-osx-font-smoothing: grayscale;
56 -webkit-font-smoothing: antialiased;
57 color: #c8c8c8;
58 font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
59 font-size: 15px;
60 letter-spacing: 0;
61 margin: 0;
62 overflow-x: hidden;
63}
64img {
65 max-width: 100%;
66}
67a[disabled] {
68 cursor: not-allowed;
69 opacity: 0.6;
70}
71kbd {
72 border: solid 1px #ccc;
73 border-radius: 3px;
74 display: inline-block;
75 font-size: 12px !important;
76 line-height: 12px;
77 margin-bottom: 3px;
78 padding: 3px 5px;
79 vertical-align: middle;
80}
81li input[type='checkbox'] {
82 margin: 0 0.2em 0.25em 0;
83 vertical-align: middle;
84}
85.app-nav {
86 margin: 25px 60px 0 0;
87 position: absolute;
88 right: 0;
89 text-align: right;
90 z-index: 10;
91/* navbar dropdown */
92}
93.app-nav.no-badge {
94 margin-right: 25px;
95}
96.app-nav p {
97 margin: 0;
98}
99.app-nav > a {
100 margin: 0 1rem;
101 padding: 5px 0;
102}
103.app-nav ul,
104.app-nav li {
105 display: inline-block;
106 list-style: none;
107 margin: 0;
108}
109.app-nav a {
110 color: inherit;
111 font-size: 16px;
112 text-decoration: none;
113 transition: color 0.3s;
114}
115.app-nav a:hover {
116 color: var(--theme-color, #ea6f5a);
117}
118.app-nav a.active {
119 border-bottom: 2px solid var(--theme-color, #ea6f5a);
120 color: var(--theme-color, #ea6f5a);
121}
122.app-nav li {
123 display: inline-block;
124 margin: 0 1rem;
125 padding: 5px 0;
126 position: relative;
127 cursor: pointer;
128}
129.app-nav li ul {
130 background-color: #fff;
131 border: 1px solid #ddd;
132 border-bottom-color: #ccc;
133 border-radius: 4px;
134 box-sizing: border-box;
135 display: none;
136 max-height: calc(100vh - 61px);
137 overflow-y: auto;
138 padding: 10px 0;
139 position: absolute;
140 right: -15px;
141 text-align: left;
142 top: 100%;
143 white-space: nowrap;
144}
145.app-nav li ul li {
146 display: block;
147 font-size: 14px;
148 line-height: 1rem;
149 margin: 0;
150 margin: 8px 14px;
151 white-space: nowrap;
152}
153.app-nav li ul a {
154 display: block;
155 font-size: inherit;
156 margin: 0;
157 padding: 0;
158}
159.app-nav li ul a.active {
160 border-bottom: 0;
161}
162.app-nav li:hover ul {
163 display: block;
164}
165.github-corner {
166 border-bottom: 0;
167 position: fixed;
168 right: 0;
169 text-decoration: none;
170 top: 0;
171 z-index: 1;
172}
173.github-corner:hover .octo-arm {
174 -webkit-animation: octocat-wave 560ms ease-in-out;
175 animation: octocat-wave 560ms ease-in-out;
176}
177.github-corner svg {
178 color: #3f3f3f;
179 fill: var(--theme-color, #ea6f5a);
180 height: 80px;
181 width: 80px;
182}
183main {
184 display: block;
185 position: relative;
186 width: 100vw;
187 height: 100%;
188 z-index: 0;
189}
190main.hidden {
191 display: none;
192}
193.anchor {
194 display: inline-block;
195 text-decoration: none;
196 transition: all 0.3s;
197}
198.anchor span {
199 color: #c8c8c8;
200}
201.anchor:hover {
202 text-decoration: underline;
203}
204.sidebar {
205 border-right: 1px solid rgba(0,0,0,0.07);
206 overflow-y: auto;
207 padding: 40px 0 0;
208 position: absolute;
209 top: 0;
210 bottom: 0;
211 left: 0;
212 transition: transform 250ms ease-out;
213 width: 300px;
214 z-index: 20;
215}
216.sidebar > h1 {
217 margin: 0 auto 1rem;
218 font-size: 1.5rem;
219 font-weight: 300;
220 text-align: center;
221}
222.sidebar > h1 a {
223 color: inherit;
224 text-decoration: none;
225}
226.sidebar > h1 .app-nav {
227 display: block;
228 position: static;
229}
230.sidebar .sidebar-nav {
231 line-height: 2em;
232 padding-bottom: 40px;
233}
234.sidebar li.collapse .app-sub-sidebar {
235 display: none;
236}
237.sidebar ul {
238 margin: 0 0 0 15px;
239 padding: 0;
240}
241.sidebar li > p {
242 font-weight: 700;
243 margin: 0;
244}
245.sidebar ul,
246.sidebar ul li {
247 list-style: none;
248}
249.sidebar ul li a {
250 border-bottom: none;
251 display: block;
252}
253.sidebar ul li ul {
254 padding-left: 20px;
255}
256.sidebar::-webkit-scrollbar {
257 width: 4px;
258}
259.sidebar::-webkit-scrollbar-thumb {
260 background: transparent;
261 border-radius: 4px;
262}
263.sidebar:hover::-webkit-scrollbar-thumb {
264 background: rgba(136,136,136,0.4);
265}
266.sidebar:hover::-webkit-scrollbar-track {
267 background: rgba(136,136,136,0.1);
268}
269.sidebar-toggle {
270 background-color: transparent;
271 background-color: rgba(63,63,63,0.8);
272 border: 0;
273 outline: none;
274 padding: 10px;
275 position: absolute;
276 bottom: 0;
277 left: 0;
278 text-align: center;
279 transition: opacity 0.3s;
280 width: 284px;
281 z-index: 30;
282 cursor: pointer;
283}
284.sidebar-toggle:hover .sidebar-toggle-button {
285 opacity: 0.4;
286}
287.sidebar-toggle span {
288 background-color: var(--theme-color, #ea6f5a);
289 display: block;
290 margin-bottom: 4px;
291 width: 16px;
292 height: 2px;
293}
294body.sticky .sidebar,
295body.sticky .sidebar-toggle {
296 position: fixed;
297}
298.content {
299 padding-top: 60px;
300 position: absolute;
301 top: 0;
302 right: 0;
303 bottom: 0;
304 left: 300px;
305 transition: left 250ms ease;
306}
307.markdown-section {
308 margin: 0 auto;
309 max-width: 80%;
310 padding: 30px 15px 40px 15px;
311 position: relative;
312}
313.markdown-section > * {
314 box-sizing: border-box;
315 font-size: inherit;
316}
317.markdown-section > :first-child {
318 margin-top: 0 !important;
319}
320.markdown-section hr {
321 border: none;
322 border-bottom: 1px solid #eee;
323 margin: 2em 0;
324}
325.markdown-section iframe {
326 border: 1px solid #eee;
327/* fix horizontal overflow on iOS Safari */
328 width: 1px;
329 min-width: 100%;
330}
331.markdown-section table {
332 border-collapse: collapse;
333 border-spacing: 0;
334 display: block;
335 margin-bottom: 1rem;
336 overflow: auto;
337 width: 100%;
338}
339.markdown-section th {
340 border: 1px solid #ddd;
341 font-weight: bold;
342 padding: 6px 13px;
343}
344.markdown-section td {
345 border: 1px solid #ddd;
346 padding: 6px 13px;
347}
348.markdown-section tr {
349 border-top: 1px solid #ccc;
350}
351.markdown-section tr:nth-child(2n) {
352 background-color: #f8f8f8;
353}
354.markdown-section p.tip {
355 background-color: #f8f8f8;
356 border-bottom-right-radius: 2px;
357 border-left: 4px solid #f66;
358 border-top-right-radius: 2px;
359 margin: 2em 0;
360 padding: 12px 24px 12px 30px;
361 position: relative;
362}
363.markdown-section p.tip:before {
364 background-color: #f66;
365 border-radius: 100%;
366 color: #3f3f3f;
367 content: '!';
368 font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
369 font-size: 14px;
370 font-weight: bold;
371 left: -12px;
372 line-height: 20px;
373 position: absolute;
374 height: 20px;
375 width: 20px;
376 text-align: center;
377 top: 14px;
378}
379.markdown-section p.tip code {
380 background-color: #efefef;
381}
382.markdown-section p.tip em {
383 color: #c8c8c8;
384}
385.markdown-section p.warn {
386 background: rgba(234,111,90,0.1);
387 border-radius: 2px;
388 padding: 1rem;
389}
390.markdown-section ul.task-list > li {
391 list-style-type: none;
392}
393body.close .sidebar {
394 transform: translateX(-300px);
395}
396body.close .sidebar-toggle {
397 width: auto;
398}
399body.close .content {
400 left: 0;
401}
402@media print {
403 .github-corner,
404 .sidebar-toggle,
405 .sidebar,
406 .app-nav {
407 display: none;
408 }
409}
410@media screen and (max-width: 768px) {
411 .github-corner,
412 .sidebar-toggle,
413 .sidebar {
414 position: fixed;
415 }
416 .app-nav {
417 margin-top: 16px;
418 }
419 .app-nav li ul {
420 top: 30px;
421 }
422 main {
423 height: auto;
424 overflow-x: hidden;
425 }
426 .sidebar {
427 left: -300px;
428 transition: transform 250ms ease-out;
429 }
430 .content {
431 left: 0;
432 max-width: 100vw;
433 position: static;
434 padding-top: 20px;
435 transition: transform 250ms ease;
436 }
437 .app-nav,
438 .github-corner {
439 transition: transform 250ms ease-out;
440 }
441 .sidebar-toggle {
442 background-color: transparent;
443 width: auto;
444 padding: 30px 30px 10px 10px;
445 }
446 body.close .sidebar {
447 transform: translateX(300px);
448 }
449 body.close .sidebar-toggle {
450 background-color: rgba(63,63,63,0.8);
451 transition: 1s background-color;
452 width: 284px;
453 padding: 10px;
454 }
455 body.close .content {
456 transform: translateX(300px);
457 }
458 body.close .app-nav,
459 body.close .github-corner {
460 display: none;
461 }
462 .github-corner:hover .octo-arm {
463 -webkit-animation: none;
464 animation: none;
465 }
466 .github-corner .octo-arm {
467 -webkit-animation: octocat-wave 560ms ease-in-out;
468 animation: octocat-wave 560ms ease-in-out;
469 }
470}
471@-webkit-keyframes octocat-wave {
472 0%, 100% {
473 transform: rotate(0);
474 }
475 20%, 60% {
476 transform: rotate(-25deg);
477 }
478 40%, 80% {
479 transform: rotate(10deg);
480 }
481}
482@keyframes octocat-wave {
483 0%, 100% {
484 transform: rotate(0);
485 }
486 20%, 60% {
487 transform: rotate(-25deg);
488 }
489 40%, 80% {
490 transform: rotate(10deg);
491 }
492}
493section.cover {
494 align-items: center;
495 background-position: center center;
496 background-repeat: no-repeat;
497 background-size: cover;
498 height: 100vh;
499 width: 100vw;
500 display: none;
501}
502section.cover.show {
503 display: flex;
504}
505section.cover.has-mask .mask {
506 background-color: #3f3f3f;
507 opacity: 0.8;
508 position: absolute;
509 top: 0;
510 height: 100%;
511 width: 100%;
512}
513section.cover .cover-main {
514 flex: 1;
515 margin: -20px 16px 0;
516 text-align: center;
517 position: relative;
518}
519section.cover a {
520 color: inherit;
521 text-decoration: none;
522}
523section.cover a:hover {
524 text-decoration: none;
525}
526section.cover p {
527 line-height: 1.5rem;
528 margin: 1em 0;
529}
530section.cover h1 {
531 color: inherit;
532 font-size: 2.5rem;
533 font-weight: 300;
534 margin: 0.625rem 0 2.5rem;
535 position: relative;
536 text-align: center;
537}
538section.cover h1 a {
539 display: block;
540}
541section.cover h1 small {
542 bottom: -0.4375rem;
543 font-size: 1rem;
544 position: absolute;
545}
546section.cover blockquote {
547 font-size: 1.5rem;
548 text-align: center;
549}
550section.cover ul {
551 line-height: 1.8;
552 list-style-type: none;
553 margin: 1em auto;
554 max-width: 500px;
555 padding: 0;
556}
557section.cover .cover-main > p:last-child a {
558 border-color: var(--theme-color, #ea6f5a);
559 border-radius: 2rem;
560 border-style: solid;
561 border-width: 1px;
562 box-sizing: border-box;
563 color: var(--theme-color, #ea6f5a);
564 display: inline-block;
565 font-size: 1.05rem;
566 letter-spacing: 0.1rem;
567 margin: 0.5rem 1rem;
568 padding: 0.75em 2rem;
569 text-decoration: none;
570 transition: all 0.15s ease;
571}
572section.cover .cover-main > p:last-child a:last-child {
573 background-color: var(--theme-color, #ea6f5a);
574 color: #fff;
575}
576section.cover .cover-main > p:last-child a:last-child:hover {
577 color: inherit;
578 opacity: 0.8;
579}
580section.cover .cover-main > p:last-child a:hover {
581 color: inherit;
582}
583section.cover blockquote > p > a {
584 border-bottom: 2px solid var(--theme-color, #ea6f5a);
585 transition: color 0.3s;
586}
587section.cover blockquote > p > a:hover {
588 color: var(--theme-color, #ea6f5a);
589}
590body {
591 background-color: #3f3f3f;
592}
593/* sidebar */
594.sidebar {
595 background-color: #3f3f3f;
596 color: #c8c8c8;
597}
598.sidebar li {
599 margin: 6px 15px 6px 0;
600}
601.sidebar ul li a {
602 color: #c8c8c8;
603 font-size: 14px;
604 overflow: hidden;
605 text-decoration: none;
606 text-overflow: ellipsis;
607 white-space: nowrap;
608}
609.sidebar ul li a:hover {
610 text-decoration: underline;
611}
612.sidebar ul li ul {
613 padding: 0;
614}
615.sidebar ul li.active > a {
616 color: var(--theme-color, #ea6f5a);
617 font-weight: 600;
618}
619/* markdown content found on pages */
620.markdown-section h1,
621.markdown-section h2,
622.markdown-section h3,
623.markdown-section h4,
624.markdown-section strong {
625 color: #657b83;
626 font-weight: 600;
627}
628.markdown-section a {
629 color: var(--theme-color, #ea6f5a);
630 font-weight: 600;
631}
632.markdown-section h1 {
633 font-size: 2rem;
634 margin: 0 0 1rem;
635}
636.markdown-section h2 {
637 font-size: 1.75rem;
638 margin: 45px 0 0.8rem;
639}
640.markdown-section h3 {
641 font-size: 1.5rem;
642 margin: 40px 0 0.6rem;
643}
644.markdown-section h4 {
645 font-size: 1.25rem;
646}
647.markdown-section h5 {
648 font-size: 1rem;
649}
650.markdown-section h6 {
651 color: #777;
652 font-size: 1rem;
653}
654.markdown-section figure,
655.markdown-section p,
656.markdown-section ul,
657.markdown-section ol {
658 margin: 1.2em 0;
659}
660.markdown-section p,
661.markdown-section ul,
662.markdown-section ol {
663 line-height: 1.6rem;
664 word-spacing: 0.05rem;
665}
666.markdown-section ul,
667.markdown-section ol {
668 padding-left: 1.5rem;
669}
670.markdown-section blockquote {
671 border-left: 4px solid var(--theme-color, #ea6f5a);
672 color: #858585;
673 margin: 2em 0;
674 padding-left: 20px;
675}
676.markdown-section blockquote p {
677 font-weight: 600;
678 margin-left: 0;
679}
680.markdown-section iframe {
681 margin: 1em 0;
682}
683.markdown-section em {
684 color: #7f8c8d;
685}
686.markdown-section code {
687 background-color: #282828;
688 border-radius: 2px;
689 color: #657b83;
690 font-family: 'Roboto Mono', Monaco, courier, monospace;
691 margin: 0 2px;
692 padding: 3px 5px;
693 white-space: pre-wrap;
694}
695.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
696 font-size: 0.8rem;
697}
698.markdown-section pre {
699 -moz-osx-font-smoothing: initial;
700 -webkit-font-smoothing: initial;
701 background-color: #282828;
702 font-family: 'Roboto Mono', Monaco, courier, monospace;
703 line-height: 1.5rem;
704 margin: 1.2em 0;
705 overflow: auto;
706 padding: 0 1.4rem;
707 position: relative;
708 word-wrap: normal;
709}
710/* code highlight */
711.token.comment,
712.token.prolog,
713.token.doctype,
714.token.cdata {
715 color: #8e908c;
716}
717.token.namespace {
718 opacity: 0.7;
719}
720.token.boolean,
721.token.number {
722 color: #c76b29;
723}
724.token.punctuation {
725 color: #525252;
726}
727.token.property {
728 color: #c08b30;
729}
730.token.tag {
731 color: #2973b7;
732}
733.token.string {
734 color: var(--theme-color, #ea6f5a);
735}
736.token.selector {
737 color: #6679cc;
738}
739.token.attr-name {
740 color: #2973b7;
741}
742.token.entity,
743.token.url,
744.language-css .token.string,
745.style .token.string {
746 color: #22a2c9;
747}
748.token.attr-value,
749.token.control,
750.token.directive,
751.token.unit {
752 color: var(--theme-color, #ea6f5a);
753}
754.token.keyword {
755 color: #e96900;
756}
757.token.statement,
758.token.regex,
759.token.atrule {
760 color: #22a2c9;
761}
762.token.placeholder,
763.token.variable {
764 color: #3d8fd1;
765}
766.token.deleted {
767 text-decoration: line-through;
768}
769.token.inserted {
770 border-bottom: 1px dotted #202746;
771 text-decoration: none;
772}
773.token.italic {
774 font-style: italic;
775}
776.token.important,
777.token.bold {
778 font-weight: bold;
779}
780.token.important {
781 color: #c94922;
782}
783.token.entity {
784 cursor: help;
785}
786.markdown-section pre > code {
787 -moz-osx-font-smoothing: initial;
788 -webkit-font-smoothing: initial;
789 background-color: #282828;
790 border-radius: 2px;
791 color: #657b83;
792 display: block;
793 font-family: 'Roboto Mono', Monaco, courier, monospace;
794 font-size: 0.8rem;
795 line-height: inherit;
796 margin: 0 2px;
797 max-width: inherit;
798 overflow: inherit;
799 padding: 2.2em 5px;
800 white-space: inherit;
801}
802.markdown-section code::after,
803.markdown-section code::before {
804 letter-spacing: 0.05rem;
805}
806code .token {
807 -moz-osx-font-smoothing: initial;
808 -webkit-font-smoothing: initial;
809 min-height: 1.5rem;
810 position: relative;
811 left: auto;
812}
813pre::after {
814 color: #ccc;
815 content: attr(data-lang);
816 font-size: 0.6rem;
817 font-weight: 600;
818 height: 15px;
819 line-height: 15px;
820 padding: 5px 10px 0;
821 position: absolute;
822 right: 0;
823 text-align: right;
824 top: 0;
825}
826.markdown-section p.tip {
827 background-color: #282828;
828 color: #657b83;
829}
830input[type='search'] {
831 background: #4f4f4f;
832 border-color: #4f4f4f;
833 color: #c8c8c8;
834}