1 | * {
|
2 | -webkit-font-smoothing: antialiased;
|
3 | -webkit-overflow-scrolling: touch;
|
4 | -webkit-tap-highlight-color: rgba(0,0,0,0);
|
5 | -webkit-text-size-adjust: none;
|
6 | -webkit-touch-callout: none;
|
7 | box-sizing: border-box;
|
8 | }
|
9 | body:not(.ready) {
|
10 | overflow: hidden;
|
11 | }
|
12 | body:not(.ready) [data-cloak],
|
13 | body:not(.ready) .app-nav,
|
14 | body:not(.ready) > nav {
|
15 | display: none;
|
16 | }
|
17 | div#app {
|
18 | font-size: 30px;
|
19 | font-weight: lighter;
|
20 | margin: 40vh auto;
|
21 | text-align: center;
|
22 | }
|
23 | div#app:empty::before {
|
24 | content: 'Loading...';
|
25 | }
|
26 | .emoji {
|
27 | height: 1.2rem;
|
28 | vertical-align: middle;
|
29 | }
|
30 | .progress {
|
31 | background-color: var(--theme-color, #000);
|
32 | height: 2px;
|
33 | left: 0px;
|
34 | position: fixed;
|
35 | right: 0px;
|
36 | top: 0px;
|
37 | transition: width 0.2s, opacity 0.4s;
|
38 | width: 0%;
|
39 | z-index: 999999;
|
40 | }
|
41 | .search a:hover {
|
42 | color: var(--theme-color, #000);
|
43 | }
|
44 | .search .search-keyword {
|
45 | color: var(--theme-color, #000);
|
46 | font-style: normal;
|
47 | font-weight: bold;
|
48 | }
|
49 | html,
|
50 | body {
|
51 | height: 100%;
|
52 | }
|
53 | body {
|
54 | -moz-osx-font-smoothing: grayscale;
|
55 | -webkit-font-smoothing: antialiased;
|
56 | color: #000;
|
57 | font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
58 | font-size: 15px;
|
59 | letter-spacing: 0;
|
60 | margin: 0;
|
61 | overflow-x: hidden;
|
62 | }
|
63 | img {
|
64 | max-width: 100%;
|
65 | }
|
66 | a[disabled] {
|
67 | cursor: not-allowed;
|
68 | opacity: 0.6;
|
69 | }
|
70 | kbd {
|
71 | border: solid 1px #ccc;
|
72 | border-radius: 3px;
|
73 | display: inline-block;
|
74 | font-size: 12px !important;
|
75 | line-height: 12px;
|
76 | margin-bottom: 3px;
|
77 | padding: 3px 5px;
|
78 | vertical-align: middle;
|
79 | }
|
80 | li input[type='checkbox'] {
|
81 | margin: 0 0.2em 0.25em 0;
|
82 | vertical-align: middle;
|
83 | }
|
84 | .app-nav {
|
85 | margin: 25px 60px 0 0;
|
86 | position: absolute;
|
87 | right: 0;
|
88 | text-align: right;
|
89 | z-index: 10;
|
90 |
|
91 | }
|
92 | .app-nav.no-badge {
|
93 | margin-right: 25px;
|
94 | }
|
95 | .app-nav p {
|
96 | margin: 0;
|
97 | }
|
98 | .app-nav > a {
|
99 | margin: 0 1rem;
|
100 | padding: 5px 0;
|
101 | }
|
102 | .app-nav ul,
|
103 | .app-nav li {
|
104 | display: inline-block;
|
105 | list-style: none;
|
106 | margin: 0;
|
107 | }
|
108 | .app-nav a {
|
109 | color: inherit;
|
110 | font-size: 16px;
|
111 | text-decoration: none;
|
112 | transition: color 0.3s;
|
113 | }
|
114 | .app-nav a:hover {
|
115 | color: var(--theme-color, #000);
|
116 | }
|
117 | .app-nav a.active {
|
118 | border-bottom: 2px solid var(--theme-color, #000);
|
119 | color: var(--theme-color, #000);
|
120 | }
|
121 | .app-nav li {
|
122 | display: inline-block;
|
123 | margin: 0 1rem;
|
124 | padding: 5px 0;
|
125 | position: relative;
|
126 | cursor: pointer;
|
127 | }
|
128 | .app-nav li ul {
|
129 | background-color: #fff;
|
130 | border: 1px solid #ddd;
|
131 | border-bottom-color: #ccc;
|
132 | border-radius: 4px;
|
133 | box-sizing: border-box;
|
134 | display: none;
|
135 | max-height: calc(100vh - 61px);
|
136 | overflow-y: auto;
|
137 | padding: 10px 0;
|
138 | position: absolute;
|
139 | right: -15px;
|
140 | text-align: left;
|
141 | top: 100%;
|
142 | white-space: nowrap;
|
143 | }
|
144 | .app-nav li ul li {
|
145 | display: block;
|
146 | font-size: 14px;
|
147 | line-height: 1rem;
|
148 | margin: 0;
|
149 | margin: 8px 14px;
|
150 | white-space: nowrap;
|
151 | }
|
152 | .app-nav li ul a {
|
153 | display: block;
|
154 | font-size: inherit;
|
155 | margin: 0;
|
156 | padding: 0;
|
157 | }
|
158 | .app-nav li ul a.active {
|
159 | border-bottom: 0;
|
160 | }
|
161 | .app-nav li:hover ul {
|
162 | display: block;
|
163 | }
|
164 | .github-corner {
|
165 | border-bottom: 0;
|
166 | position: fixed;
|
167 | right: 0;
|
168 | text-decoration: none;
|
169 | top: 0;
|
170 | z-index: 1;
|
171 | }
|
172 | .github-corner:hover .octo-arm {
|
173 | -webkit-animation: octocat-wave 560ms ease-in-out;
|
174 | animation: octocat-wave 560ms ease-in-out;
|
175 | }
|
176 | .github-corner svg {
|
177 | color: #fff;
|
178 | fill: var(--theme-color, #000);
|
179 | height: 80px;
|
180 | width: 80px;
|
181 | }
|
182 | main {
|
183 | display: block;
|
184 | position: relative;
|
185 | width: 100vw;
|
186 | height: 100%;
|
187 | z-index: 0;
|
188 | }
|
189 | main.hidden {
|
190 | display: none;
|
191 | }
|
192 | .anchor {
|
193 | display: inline-block;
|
194 | text-decoration: none;
|
195 | transition: all 0.3s;
|
196 | }
|
197 | .anchor span {
|
198 | color: #000;
|
199 | }
|
200 | .anchor:hover {
|
201 | text-decoration: underline;
|
202 | }
|
203 | .sidebar {
|
204 | border-right: 1px solid rgba(0,0,0,0.07);
|
205 | overflow-y: auto;
|
206 | padding: 40px 0 0;
|
207 | position: absolute;
|
208 | top: 0;
|
209 | bottom: 0;
|
210 | left: 0;
|
211 | transition: transform 250ms ease-out;
|
212 | width: 300px;
|
213 | z-index: 20;
|
214 | }
|
215 | .sidebar > h1 {
|
216 | margin: 0 auto 1rem;
|
217 | font-size: 1.5rem;
|
218 | font-weight: 300;
|
219 | text-align: center;
|
220 | }
|
221 | .sidebar > h1 a {
|
222 | color: inherit;
|
223 | text-decoration: none;
|
224 | }
|
225 | .sidebar > h1 .app-nav {
|
226 | display: block;
|
227 | position: static;
|
228 | }
|
229 | .sidebar .sidebar-nav {
|
230 | line-height: 2em;
|
231 | padding-bottom: 40px;
|
232 | }
|
233 | .sidebar li.collapse .app-sub-sidebar {
|
234 | display: none;
|
235 | }
|
236 | .sidebar ul {
|
237 | margin: 0 0 0 15px;
|
238 | padding: 0;
|
239 | }
|
240 | .sidebar li > p {
|
241 | font-weight: 700;
|
242 | margin: 0;
|
243 | }
|
244 | .sidebar ul,
|
245 | .sidebar ul li {
|
246 | list-style: none;
|
247 | }
|
248 | .sidebar ul li a {
|
249 | border-bottom: none;
|
250 | display: block;
|
251 | }
|
252 | .sidebar ul li ul {
|
253 | padding-left: 20px;
|
254 | }
|
255 | .sidebar::-webkit-scrollbar {
|
256 | width: 4px;
|
257 | }
|
258 | .sidebar::-webkit-scrollbar-thumb {
|
259 | background: transparent;
|
260 | border-radius: 4px;
|
261 | }
|
262 | .sidebar:hover::-webkit-scrollbar-thumb {
|
263 | background: rgba(136,136,136,0.4);
|
264 | }
|
265 | .sidebar:hover::-webkit-scrollbar-track {
|
266 | background: rgba(136,136,136,0.1);
|
267 | }
|
268 | .sidebar-toggle {
|
269 | background-color: transparent;
|
270 | background-color: rgba(255,255,255,0.8);
|
271 | border: 0;
|
272 | outline: none;
|
273 | padding: 10px;
|
274 | position: absolute;
|
275 | bottom: 0;
|
276 | left: 0;
|
277 | text-align: center;
|
278 | transition: opacity 0.3s;
|
279 | width: 284px;
|
280 | z-index: 30;
|
281 | cursor: pointer;
|
282 | }
|
283 | .sidebar-toggle:hover .sidebar-toggle-button {
|
284 | opacity: 0.4;
|
285 | }
|
286 | .sidebar-toggle span {
|
287 | background-color: var(--theme-color, #000);
|
288 | display: block;
|
289 | margin-bottom: 4px;
|
290 | width: 16px;
|
291 | height: 2px;
|
292 | }
|
293 | body.sticky .sidebar,
|
294 | body.sticky .sidebar-toggle {
|
295 | position: fixed;
|
296 | }
|
297 | .content {
|
298 | padding-top: 60px;
|
299 | position: absolute;
|
300 | top: 0;
|
301 | right: 0;
|
302 | bottom: 0;
|
303 | left: 300px;
|
304 | transition: left 250ms ease;
|
305 | }
|
306 | .markdown-section {
|
307 | margin: 0 auto;
|
308 | max-width: 80%;
|
309 | padding: 30px 15px 40px 15px;
|
310 | position: relative;
|
311 | }
|
312 | .markdown-section > * {
|
313 | box-sizing: border-box;
|
314 | font-size: inherit;
|
315 | }
|
316 | .markdown-section > :first-child {
|
317 | margin-top: 0 !important;
|
318 | }
|
319 | .markdown-section hr {
|
320 | border: none;
|
321 | border-bottom: 1px solid #eee;
|
322 | margin: 2em 0;
|
323 | }
|
324 | .markdown-section iframe {
|
325 | border: 1px solid #eee;
|
326 |
|
327 | width: 1px;
|
328 | min-width: 100%;
|
329 | }
|
330 | .markdown-section table {
|
331 | border-collapse: collapse;
|
332 | border-spacing: 0;
|
333 | display: block;
|
334 | margin-bottom: 1rem;
|
335 | overflow: auto;
|
336 | width: 100%;
|
337 | }
|
338 | .markdown-section th {
|
339 | border: 1px solid #ddd;
|
340 | font-weight: bold;
|
341 | padding: 6px 13px;
|
342 | }
|
343 | .markdown-section td {
|
344 | border: 1px solid #ddd;
|
345 | padding: 6px 13px;
|
346 | }
|
347 | .markdown-section tr {
|
348 | border-top: 1px solid #ccc;
|
349 | }
|
350 | .markdown-section tr:nth-child(2n) {
|
351 | background-color: #f8f8f8;
|
352 | }
|
353 | .markdown-section p.tip {
|
354 | background-color: #f8f8f8;
|
355 | border-bottom-right-radius: 2px;
|
356 | border-left: 4px solid #f66;
|
357 | border-top-right-radius: 2px;
|
358 | margin: 2em 0;
|
359 | padding: 12px 24px 12px 30px;
|
360 | position: relative;
|
361 | }
|
362 | .markdown-section p.tip:before {
|
363 | background-color: #f66;
|
364 | border-radius: 100%;
|
365 | color: #fff;
|
366 | content: '!';
|
367 | font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
|
368 | font-size: 14px;
|
369 | font-weight: bold;
|
370 | left: -12px;
|
371 | line-height: 20px;
|
372 | position: absolute;
|
373 | height: 20px;
|
374 | width: 20px;
|
375 | text-align: center;
|
376 | top: 14px;
|
377 | }
|
378 | .markdown-section p.tip code {
|
379 | background-color: #efefef;
|
380 | }
|
381 | .markdown-section p.tip em {
|
382 | color: #000;
|
383 | }
|
384 | .markdown-section p.warn {
|
385 | background: rgba(0,0,0,0.1);
|
386 | border-radius: 2px;
|
387 | padding: 1rem;
|
388 | }
|
389 | .markdown-section ul.task-list > li {
|
390 | list-style-type: none;
|
391 | }
|
392 | body.close .sidebar {
|
393 | transform: translateX(-300px);
|
394 | }
|
395 | body.close .sidebar-toggle {
|
396 | width: auto;
|
397 | }
|
398 | body.close .content {
|
399 | left: 0;
|
400 | }
|
401 | @media print {
|
402 | .github-corner,
|
403 | .sidebar-toggle,
|
404 | .sidebar,
|
405 | .app-nav {
|
406 | display: none;
|
407 | }
|
408 | }
|
409 | @media screen and (max-width: 768px) {
|
410 | .github-corner,
|
411 | .sidebar-toggle,
|
412 | .sidebar {
|
413 | position: fixed;
|
414 | }
|
415 | .app-nav {
|
416 | margin-top: 16px;
|
417 | }
|
418 | .app-nav li ul {
|
419 | top: 30px;
|
420 | }
|
421 | main {
|
422 | height: auto;
|
423 | overflow-x: hidden;
|
424 | }
|
425 | .sidebar {
|
426 | left: -300px;
|
427 | transition: transform 250ms ease-out;
|
428 | }
|
429 | .content {
|
430 | left: 0;
|
431 | max-width: 100vw;
|
432 | position: static;
|
433 | padding-top: 20px;
|
434 | transition: transform 250ms ease;
|
435 | }
|
436 | .app-nav,
|
437 | .github-corner {
|
438 | transition: transform 250ms ease-out;
|
439 | }
|
440 | .sidebar-toggle {
|
441 | background-color: transparent;
|
442 | width: auto;
|
443 | padding: 30px 30px 10px 10px;
|
444 | }
|
445 | body.close .sidebar {
|
446 | transform: translateX(300px);
|
447 | }
|
448 | body.close .sidebar-toggle {
|
449 | background-color: rgba(255,255,255,0.8);
|
450 | transition: 1s background-color;
|
451 | width: 284px;
|
452 | padding: 10px;
|
453 | }
|
454 | body.close .content {
|
455 | transform: translateX(300px);
|
456 | }
|
457 | body.close .app-nav,
|
458 | body.close .github-corner {
|
459 | display: none;
|
460 | }
|
461 | .github-corner:hover .octo-arm {
|
462 | -webkit-animation: none;
|
463 | animation: none;
|
464 | }
|
465 | .github-corner .octo-arm {
|
466 | -webkit-animation: octocat-wave 560ms ease-in-out;
|
467 | animation: octocat-wave 560ms ease-in-out;
|
468 | }
|
469 | }
|
470 | @-webkit-keyframes octocat-wave {
|
471 | 0%, 100% {
|
472 | transform: rotate(0);
|
473 | }
|
474 | 20%, 60% {
|
475 | transform: rotate(-25deg);
|
476 | }
|
477 | 40%, 80% {
|
478 | transform: rotate(10deg);
|
479 | }
|
480 | }
|
481 | @keyframes octocat-wave {
|
482 | 0%, 100% {
|
483 | transform: rotate(0);
|
484 | }
|
485 | 20%, 60% {
|
486 | transform: rotate(-25deg);
|
487 | }
|
488 | 40%, 80% {
|
489 | transform: rotate(10deg);
|
490 | }
|
491 | }
|
492 | section.cover {
|
493 | align-items: center;
|
494 | background-position: center center;
|
495 | background-repeat: no-repeat;
|
496 | background-size: cover;
|
497 | height: 100vh;
|
498 | width: 100vw;
|
499 | display: none;
|
500 | }
|
501 | section.cover.show {
|
502 | display: flex;
|
503 | }
|
504 | section.cover.has-mask .mask {
|
505 | background-color: #fff;
|
506 | opacity: 0.8;
|
507 | position: absolute;
|
508 | top: 0;
|
509 | height: 100%;
|
510 | width: 100%;
|
511 | }
|
512 | section.cover .cover-main {
|
513 | flex: 1;
|
514 | margin: -20px 16px 0;
|
515 | text-align: center;
|
516 | position: relative;
|
517 | }
|
518 | section.cover a {
|
519 | color: inherit;
|
520 | text-decoration: none;
|
521 | }
|
522 | section.cover a:hover {
|
523 | text-decoration: none;
|
524 | }
|
525 | section.cover p {
|
526 | line-height: 1.5rem;
|
527 | margin: 1em 0;
|
528 | }
|
529 | section.cover h1 {
|
530 | color: inherit;
|
531 | font-size: 2.5rem;
|
532 | font-weight: 300;
|
533 | margin: 0.625rem 0 2.5rem;
|
534 | position: relative;
|
535 | text-align: center;
|
536 | }
|
537 | section.cover h1 a {
|
538 | display: block;
|
539 | }
|
540 | section.cover h1 small {
|
541 | bottom: -0.4375rem;
|
542 | font-size: 1rem;
|
543 | position: absolute;
|
544 | }
|
545 | section.cover blockquote {
|
546 | font-size: 1.5rem;
|
547 | text-align: center;
|
548 | }
|
549 | section.cover ul {
|
550 | line-height: 1.8;
|
551 | list-style-type: none;
|
552 | margin: 1em auto;
|
553 | max-width: 500px;
|
554 | padding: 0;
|
555 | }
|
556 | section.cover .cover-main > p:last-child a {
|
557 | border-color: var(--theme-color, #000);
|
558 | border-radius: 2rem;
|
559 | border-style: solid;
|
560 | border-width: 1px;
|
561 | box-sizing: border-box;
|
562 | color: var(--theme-color, #000);
|
563 | display: inline-block;
|
564 | font-size: 1.05rem;
|
565 | letter-spacing: 0.1rem;
|
566 | margin: 0.5rem 1rem;
|
567 | padding: 0.75em 2rem;
|
568 | text-decoration: none;
|
569 | transition: all 0.15s ease;
|
570 | }
|
571 | section.cover .cover-main > p:last-child a:last-child {
|
572 | background-color: var(--theme-color, #000);
|
573 | color: #fff;
|
574 | }
|
575 | section.cover .cover-main > p:last-child a:last-child:hover {
|
576 | color: inherit;
|
577 | opacity: 0.8;
|
578 | }
|
579 | section.cover .cover-main > p:last-child a:hover {
|
580 | color: inherit;
|
581 | }
|
582 | section.cover blockquote > p > a {
|
583 | border-bottom: 2px solid var(--theme-color, #000);
|
584 | transition: color 0.3s;
|
585 | }
|
586 | section.cover blockquote > p > a:hover {
|
587 | color: var(--theme-color, #000);
|
588 | }
|