1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 | [data-theme="light"],
|
12 | :root:not([data-theme="dark"]) {
|
13 | --background: #FFF;
|
14 | --text: #415462;
|
15 | --h1: #1b2832;
|
16 | --h2: #2c3d49;
|
17 | --h3: #415462;
|
18 | --h4: #596b78;
|
19 | --h5: #73828c;
|
20 | --h6: #8a99a3;
|
21 | --primary: #1095c1;
|
22 | --primary-hover: #08769b;
|
23 | --primary-focus: rgba(16, 149, 193, 0.125);
|
24 | --primary-inverse: #FFF;
|
25 | --secondary: #73828c;
|
26 | --secondary-hover: #415462;
|
27 | --secondary-focus: rgba(115, 130, 140, 0.125);
|
28 | --secondary-inverse: #FFF;
|
29 | --contrast: #2c3d49;
|
30 | --contrast-hover: #0d1419;
|
31 | --contrast-focus: rgba(115, 130, 140, 0.125);
|
32 | --contrast-border: rgba(255, 223, 128, 0.5);
|
33 | --contrast-border-h: #ffdf80;
|
34 | --contrast-inverse: #FFF;
|
35 | --input-background: #FFF;
|
36 | --input-border: #c8d1d8;
|
37 | --valid: #288a6a;
|
38 | --invalid: #b94646;
|
39 | --mark: rgba(255, 223, 128, 0.5);
|
40 | --mark-text: #2c3d49;
|
41 | --muted-text: #7e8d98;
|
42 | --muted-background: #edf0f3;
|
43 | --muted-border: #edf0f3;
|
44 | --card-background: #FFF;
|
45 | --card-sections: #f3f5f7;
|
46 | --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
|
47 | --code-background: #f3f5f7;
|
48 | --code-inlined: #edf0f3;
|
49 | --code-color-1: #73828c;
|
50 | --code-color-2: #b34d80;
|
51 | --code-color-3: #3d888f;
|
52 | --code-color-4: #998866;
|
53 | --code-color-5: #96a4ae;
|
54 | --table-border: rgba(237, 240, 243, 0.75);
|
55 | --table-stripping: rgba(115, 130, 140, 0.04);
|
56 | }
|
57 |
|
58 | @media only screen and (prefers-color-scheme: dark) {
|
59 | :root:not([data-theme="light"]) {
|
60 | --background: #10181e;
|
61 | --text: #a2afb9;
|
62 | --h1: #edf0f3;
|
63 | --h2: #d5dce2;
|
64 | --h3: #bbc6ce;
|
65 | --h4: #a2afb9;
|
66 | --h5: #8a99a3;
|
67 | --h6: #73828c;
|
68 | --primary: #1095c1;
|
69 | --primary-hover: #1ab3e6;
|
70 | --primary-focus: rgba(16, 149, 193, 0.25);
|
71 | --primary-inverse: #FFF;
|
72 | --secondary: #596b78;
|
73 | --secondary-hover: #73828c;
|
74 | --secondary-focus: rgba(89, 107, 120, 0.25);
|
75 | --secondary-inverse: #FFF;
|
76 | --contrast: #d5dce2;
|
77 | --contrast-hover: #FFF;
|
78 | --contrast-focus: rgba(89, 107, 120, 0.25);
|
79 | --contrast-border: rgba(255, 223, 128, 0.33);
|
80 | --contrast-border-h: rgba(255, 223, 128, 0.5);
|
81 | --contrast-inverse: #10181e;
|
82 | --input-background: #10181e;
|
83 | --input-border: #374956;
|
84 | --valid: #1f7a5c;
|
85 | --invalid: #943838;
|
86 | --mark: rgba(255, 223, 128, 0.5);
|
87 | --mark-text: #FFF;
|
88 | --muted-text: #73828c;
|
89 | --muted-background: #10181e;
|
90 | --muted-border: #23333e;
|
91 | --card-background: #17232b;
|
92 | --card-sections: #141d24;
|
93 | --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
94 | --code-background: #141d24;
|
95 | --code-inlined: rgba(65, 84, 98, 0.25);
|
96 | --code-color-1: #73828c;
|
97 | --code-color-2: #a65980;
|
98 | --code-color-3: #599fa6;
|
99 | --code-color-4: #8c8473;
|
100 | --code-color-5: #4d606d;
|
101 | --table-border: #10181e;
|
102 | --table-stripping: rgba(115, 130, 140, 0.02);
|
103 | }
|
104 | }
|
105 |
|
106 | [data-theme="dark"] {
|
107 | --background: #10181e;
|
108 | --text: #a2afb9;
|
109 | --h1: #edf0f3;
|
110 | --h2: #d5dce2;
|
111 | --h3: #bbc6ce;
|
112 | --h4: #a2afb9;
|
113 | --h5: #8a99a3;
|
114 | --h6: #73828c;
|
115 | --primary: #1095c1;
|
116 | --primary-hover: #1ab3e6;
|
117 | --primary-focus: rgba(16, 149, 193, 0.25);
|
118 | --primary-inverse: #FFF;
|
119 | --secondary: #596b78;
|
120 | --secondary-hover: #73828c;
|
121 | --secondary-focus: rgba(89, 107, 120, 0.25);
|
122 | --secondary-inverse: #FFF;
|
123 | --contrast: #d5dce2;
|
124 | --contrast-hover: #FFF;
|
125 | --contrast-focus: rgba(89, 107, 120, 0.25);
|
126 | --contrast-border: rgba(255, 223, 128, 0.33);
|
127 | --contrast-inverse: #10181e;
|
128 | --input-background: #10181e;
|
129 | --input-border: #374956;
|
130 | --valid: #1f7a5c;
|
131 | --invalid: #943838;
|
132 | --mark: rgba(255, 223, 128, 0.5);
|
133 | --mark-text: #FFF;
|
134 | --muted-text: #73828c;
|
135 | --muted-background: #10181e;
|
136 | --muted-border: #23333e;
|
137 | --card-background: #17232b;
|
138 | --card-sections: #141d24;
|
139 | --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);
|
140 | --code-background: #141d24;
|
141 | --code-inlined: rgba(65, 84, 98, 0.25);
|
142 | --code-color-1: #73828c;
|
143 | --code-color-2: #a65980;
|
144 | --code-color-3: #599fa6;
|
145 | --code-color-4: #8c8473;
|
146 | --code-color-5: #4d606d;
|
147 | --table-border: #10181e;
|
148 | --table-stripping: rgba(115, 130, 140, 0.02);
|
149 | }
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 | *,
|
156 | *::before,
|
157 | *::after {
|
158 | box-sizing: border-box;
|
159 | }
|
160 |
|
161 | html {
|
162 | -webkit-text-size-adjust: 100%;
|
163 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
164 | background: var(--background);
|
165 | color: var(--text);
|
166 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
167 | font-size: 16px;
|
168 | font-weight: 400;
|
169 | line-height: 1.5;
|
170 | text-rendering: optimizeLegibility;
|
171 | }
|
172 |
|
173 | @media (min-width: 576px) {
|
174 | html {
|
175 | font-size: 17px;
|
176 | }
|
177 | }
|
178 |
|
179 | @media (min-width: 768px) {
|
180 | html {
|
181 | font-size: 18px;
|
182 | }
|
183 | }
|
184 |
|
185 | @media (min-width: 992px) {
|
186 | html {
|
187 | font-size: 19px;
|
188 | }
|
189 | }
|
190 |
|
191 | @media (min-width: 1200px) {
|
192 | html {
|
193 | font-size: 20px;
|
194 | }
|
195 | }
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 | main {
|
202 | display: block;
|
203 | }
|
204 |
|
205 | body {
|
206 | width: 100%;
|
207 | margin: 0;
|
208 | }
|
209 |
|
210 | body > header,
|
211 | body > main,
|
212 | body > footer {
|
213 | width: 100%;
|
214 | margin-right: auto;
|
215 | margin-left: auto;
|
216 | padding: 2rem 0;
|
217 | }
|
218 |
|
219 |
|
220 |
|
221 |
|
222 | .container,
|
223 | .container-fluid {
|
224 | width: 100%;
|
225 | margin-right: auto;
|
226 | margin-left: auto;
|
227 | padding-right: 1rem;
|
228 | padding-left: 1rem;
|
229 | }
|
230 |
|
231 | @media (min-width: 576px) {
|
232 | .container {
|
233 | padding-right: 0;
|
234 | padding-left: 0;
|
235 | max-width: 510px;
|
236 | }
|
237 | }
|
238 |
|
239 | @media (min-width: 768px) {
|
240 | .container {
|
241 | max-width: 700px;
|
242 | }
|
243 | }
|
244 |
|
245 | @media (min-width: 992px) {
|
246 | .container {
|
247 | max-width: 920px;
|
248 | }
|
249 | }
|
250 |
|
251 | @media (min-width: 1200px) {
|
252 | .container {
|
253 | max-width: 1130px;
|
254 | }
|
255 | }
|
256 |
|
257 |
|
258 |
|
259 |
|
260 |
|
261 | .grid {
|
262 | grid-column-gap: 1rem;
|
263 | grid-row-gap: 1rem;
|
264 | display: grid;
|
265 | grid-template-columns: 1fr;
|
266 | margin: 0;
|
267 | }
|
268 |
|
269 | @media (min-width: 992px) {
|
270 | .grid {
|
271 | grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
|
272 | }
|
273 | }
|
274 |
|
275 | .grid > * {
|
276 | min-width: 0;
|
277 | }
|
278 |
|
279 |
|
280 |
|
281 |
|
282 | figure {
|
283 | display: block;
|
284 | margin: 0;
|
285 | padding: 0;
|
286 | overflow-x: auto;
|
287 | }
|
288 |
|
289 | figure figcaption {
|
290 | padding: 0.5rem 0;
|
291 | color: var(--muted-text);
|
292 | }
|
293 |
|
294 |
|
295 |
|
296 |
|
297 | b,
|
298 | strong {
|
299 | font-weight: bolder;
|
300 | }
|
301 |
|
302 | sub,
|
303 | sup {
|
304 | position: relative;
|
305 | font-size: .75rem;
|
306 | line-height: 0;
|
307 | vertical-align: baseline;
|
308 | }
|
309 |
|
310 | sub {
|
311 | bottom: -0.25rem;
|
312 | }
|
313 |
|
314 | sup {
|
315 | top: -0.5rem;
|
316 | }
|
317 |
|
318 | img {
|
319 | max-width: 100%;
|
320 | height: auto;
|
321 | border-style: none;
|
322 | }
|
323 |
|
324 | svg,
|
325 | img {
|
326 | vertical-align: text-bottom;
|
327 | }
|
328 |
|
329 | address,
|
330 | blockquote,
|
331 | dl,
|
332 | figure,
|
333 | form,
|
334 | ol,
|
335 | p,
|
336 | pre,
|
337 | table,
|
338 | ul {
|
339 | margin-top: 0;
|
340 | margin-bottom: 1.5rem;
|
341 | color: var(--text);
|
342 | font-size: 1rem;
|
343 | font-style: normal;
|
344 | }
|
345 |
|
346 | a {
|
347 | background-color: transparent;
|
348 | color: var(--primary);
|
349 | text-decoration: none;
|
350 | }
|
351 |
|
352 | a:hover, a:active, a:focus {
|
353 | color: var(--primary-hover);
|
354 | text-decoration: underline;
|
355 | }
|
356 |
|
357 | a:focus {
|
358 | outline: none;
|
359 | background-color: var(--primary-focus);
|
360 | }
|
361 |
|
362 | a.secondary {
|
363 | color: var(--secondary);
|
364 | }
|
365 |
|
366 | a.secondary:hover, a.secondary:active, a.secondary:focus {
|
367 | color: var(--secondary-hover);
|
368 | }
|
369 |
|
370 | a.secondary:focus {
|
371 | background-color: var(--secondary-focus);
|
372 | }
|
373 |
|
374 | a.contrast:not([role="button"]) {
|
375 | box-shadow: inset 0 -0.33rem 0 var(--contrast-border);
|
376 | color: var(--contrast);
|
377 | }
|
378 |
|
379 | a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus {
|
380 | box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h);
|
381 | color: var(--contrast-hover);
|
382 | text-decoration: none;
|
383 | }
|
384 |
|
385 | a.contrast:not([role="button"]):focus {
|
386 | background-color: var(--contrast-focus);
|
387 | }
|
388 |
|
389 | h1,
|
390 | h2,
|
391 | h3,
|
392 | h4,
|
393 | h5,
|
394 | h6 {
|
395 | margin-top: 0;
|
396 | margin-bottom: 1.5rem;
|
397 | font-weight: 700;
|
398 | }
|
399 |
|
400 | h1 {
|
401 | margin-bottom: 3rem;
|
402 | color: var(--h1);
|
403 | font-size: 2rem;
|
404 | }
|
405 |
|
406 | h2 {
|
407 | margin-bottom: 2.625rem;
|
408 | color: var(--h2);
|
409 | font-size: 1.75rem;
|
410 | }
|
411 |
|
412 | h3 {
|
413 | margin-bottom: 2.25rem;
|
414 | color: var(--h3);
|
415 | font-size: 1.5rem;
|
416 | }
|
417 |
|
418 | h4 {
|
419 | margin-bottom: 1.875rem;
|
420 | color: var(--h4);
|
421 | font-size: 1.25rem;
|
422 | }
|
423 |
|
424 | h5 {
|
425 | margin-bottom: 1.6875rem;
|
426 | color: var(--h5);
|
427 | font-size: 1.125rem;
|
428 | }
|
429 |
|
430 | h6 {
|
431 | color: var(--h6);
|
432 | font-size: 1rem;
|
433 | }
|
434 |
|
435 | hgroup {
|
436 | margin-bottom: 1.5rem;
|
437 | }
|
438 |
|
439 | hgroup * {
|
440 | margin-bottom: 0;
|
441 | }
|
442 |
|
443 | hgroup > *:last-child {
|
444 | color: var(--muted-text);
|
445 | font-size: 1.125rem;
|
446 | font-weight: normal;
|
447 | }
|
448 |
|
449 | p {
|
450 | margin-bottom: 0.75rem;
|
451 | }
|
452 |
|
453 | small {
|
454 | font-size: 85%;
|
455 | }
|
456 |
|
457 | @media (min-width: 576px) {
|
458 | small {
|
459 | font-size: 83%;
|
460 | }
|
461 | }
|
462 |
|
463 | @media (min-width: 768px) {
|
464 | small {
|
465 | font-size: 81%;
|
466 | }
|
467 | }
|
468 |
|
469 | @media (min-width: 992px) {
|
470 | small {
|
471 | font-size: 79%;
|
472 | }
|
473 | }
|
474 |
|
475 | @media (min-width: 1200px) {
|
476 | small {
|
477 | font-size: 77%;
|
478 | }
|
479 | }
|
480 |
|
481 | ul,
|
482 | ol {
|
483 | padding-left: 1.5rem;
|
484 | }
|
485 |
|
486 | ul li,
|
487 | ol li {
|
488 | margin-bottom: 0.75rem;
|
489 | }
|
490 |
|
491 | ul li {
|
492 | list-style: square;
|
493 | }
|
494 |
|
495 | mark {
|
496 | padding: .125rem .25rem;
|
497 | background: var(--mark);
|
498 | color: var(--mark-text);
|
499 | vertical-align: middle;
|
500 | }
|
501 |
|
502 | blockquote {
|
503 | display: block;
|
504 | margin: 3rem 0;
|
505 | padding: 1rem;
|
506 | border-left: 0.25rem solid var(--muted-border);
|
507 | }
|
508 |
|
509 | blockquote footer {
|
510 | margin-top: 0.75rem;
|
511 | color: var(--muted-text);
|
512 | }
|
513 |
|
514 | abbr[title] {
|
515 | border-bottom: 1px dotted;
|
516 | text-decoration: none;
|
517 | cursor: help;
|
518 | }
|
519 |
|
520 | ins {
|
521 | color: var(--valid);
|
522 | text-decoration: none;
|
523 | }
|
524 |
|
525 | del {
|
526 | color: var(--invalid);
|
527 | }
|
528 |
|
529 | ::selection {
|
530 | background-color: var(--primary-focus);
|
531 | }
|
532 |
|
533 |
|
534 |
|
535 |
|
536 | input,
|
537 | optgroup,
|
538 | select,
|
539 | textarea {
|
540 | margin: 0;
|
541 | font-family: inherit;
|
542 | font-size: 1rem;
|
543 | line-height: 1.5;
|
544 | }
|
545 |
|
546 | input {
|
547 | overflow: visible;
|
548 | }
|
549 |
|
550 | select {
|
551 | text-transform: none;
|
552 | }
|
553 |
|
554 | legend {
|
555 | display: table;
|
556 | max-width: 100%;
|
557 | padding: 0;
|
558 | color: inherit;
|
559 | white-space: normal;
|
560 | }
|
561 |
|
562 | textarea {
|
563 | overflow: auto;
|
564 | }
|
565 |
|
566 | [type="checkbox"],
|
567 | [type="radio"] {
|
568 | padding: 0;
|
569 | }
|
570 |
|
571 | [type="number"]::-webkit-inner-spin-button {
|
572 | height: auto;
|
573 | }
|
574 |
|
575 | [type="search"] {
|
576 | -webkit-appearance: textfield;
|
577 | outline-offset: -2px;
|
578 | }
|
579 |
|
580 | [type="search"]::-webkit-search-decoration {
|
581 | -webkit-appearance: none;
|
582 | }
|
583 |
|
584 | ::-webkit-file-upload-button {
|
585 | -webkit-appearance: button;
|
586 | font: inherit;
|
587 | }
|
588 |
|
589 | fieldset {
|
590 | margin: 0;
|
591 | margin-bottom: 1.5rem;
|
592 | padding: 0;
|
593 | border: 0;
|
594 | }
|
595 |
|
596 | input:not([type="checkbox"]):not([type="radio"]),
|
597 | select,
|
598 | textarea,
|
599 | form small {
|
600 | display: block;
|
601 | width: 100%;
|
602 | }
|
603 |
|
604 | label,
|
605 | fieldset legend {
|
606 | display: block;
|
607 | margin-bottom: 0.125rem;
|
608 | vertical-align: middle;
|
609 | }
|
610 |
|
611 | input,
|
612 | select,
|
613 | textarea {
|
614 | -webkit-appearance: none;
|
615 | -moz-appearance: none;
|
616 | appearance: none;
|
617 | border: 1px solid var(--input-border);
|
618 | border-radius: 0.25rem;
|
619 | outline: none;
|
620 | background-color: var(--input-background);
|
621 | color: var(--text);
|
622 | font-weight: normal;
|
623 | vertical-align: middle;
|
624 | }
|
625 |
|
626 | input::placeholder,
|
627 | select::placeholder,
|
628 | textarea::placeholder {
|
629 | color: var(--muted-text);
|
630 | opacity: 1;
|
631 | }
|
632 |
|
633 | input:active, input:focus,
|
634 | select:active,
|
635 | select:focus,
|
636 | textarea:active,
|
637 | textarea:focus {
|
638 | border-color: var(--primary);
|
639 | }
|
640 |
|
641 | input:focus,
|
642 | select:focus,
|
643 | textarea:focus {
|
644 | box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
645 | }
|
646 |
|
647 | input[readonly], input[disabled],
|
648 | select[readonly],
|
649 | select[disabled],
|
650 | textarea[readonly],
|
651 | textarea[disabled] {
|
652 | border-color: var(--muted-border);
|
653 | box-shadow: none;
|
654 | }
|
655 |
|
656 | input[readonly] ~ label, input[disabled] ~ label,
|
657 | select[readonly] ~ label,
|
658 | select[disabled] ~ label,
|
659 | textarea[readonly] ~ label,
|
660 | textarea[disabled] ~ label {
|
661 | color: var(--muted-text);
|
662 | }
|
663 |
|
664 | input[disabled],
|
665 | select[disabled],
|
666 | textarea[disabled] {
|
667 | background-color: var(--muted-background);
|
668 | opacity: .5;
|
669 | }
|
670 |
|
671 | input:not([type="checkbox"]):not([type="radio"]),
|
672 | select,
|
673 | textarea {
|
674 | margin-bottom: 1.5rem;
|
675 | padding: 0.75rem 1rem;
|
676 | }
|
677 |
|
678 | input[type="color"] {
|
679 | height: calc(3rem + 2px);
|
680 | }
|
681 |
|
682 | select::-ms-expand {
|
683 | border: 0;
|
684 | background-color: transparent;
|
685 | }
|
686 |
|
687 | select:not([multiple]) {
|
688 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
|
689 | background-position: center right .75rem;
|
690 | background-repeat: no-repeat;
|
691 | background-size: 1rem auto;
|
692 | }
|
693 |
|
694 | form small {
|
695 | color: var(--muted-text);
|
696 | }
|
697 |
|
698 | input + small,
|
699 | select + small,
|
700 | textarea + small {
|
701 | margin-top: -1rem;
|
702 | margin-bottom: 1.5rem;
|
703 | }
|
704 |
|
705 | label > input:not([type="checkbox"]):not([type="radio"]),
|
706 | label > select,
|
707 | label > textarea {
|
708 | margin-top: 0.125rem;
|
709 | }
|
710 |
|
711 |
|
712 |
|
713 |
|
714 | [type="checkbox"],
|
715 | [type="radio"] {
|
716 | display: inline-block;
|
717 | width: 1em;
|
718 | height: 1em;
|
719 | margin-right: .375rem;
|
720 | margin-bottom: 0.125rem;
|
721 | border-width: 2px;
|
722 | font-size: 1.125rem;
|
723 | vertical-align: middle;
|
724 | cursor: pointer;
|
725 | transition: none;
|
726 | }
|
727 |
|
728 | [type="checkbox"]::-ms-check,
|
729 | [type="radio"]::-ms-check {
|
730 | display: none;
|
731 | }
|
732 |
|
733 | [type="checkbox"]:checked,
|
734 | [type="radio"]:checked {
|
735 | border-color: var(--primary);
|
736 | background-color: var(--primary);
|
737 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
|
738 | background-position: center;
|
739 | background-repeat: no-repeat;
|
740 | background-size: .66rem auto;
|
741 | }
|
742 |
|
743 | [type="checkbox"] ~ label,
|
744 | [type="radio"] ~ label {
|
745 | display: inline-block;
|
746 | margin-right: .375rem;
|
747 | margin-bottom: 0;
|
748 | cursor: pointer;
|
749 | }
|
750 |
|
751 | [type="radio"] {
|
752 | border-radius: 50%;
|
753 | }
|
754 |
|
755 | [type="radio"]:checked {
|
756 | border-width: .33rem;
|
757 | border-color: var(--primary);
|
758 | background-color: var(--primary-inverse);
|
759 | background-image: none;
|
760 | }
|
761 |
|
762 | [type="checkbox"][role="switch"] {
|
763 | width: 1.85em;
|
764 | height: 1em;
|
765 | border: 2px solid var(--input-border);
|
766 | border-radius: 1em;
|
767 | background-color: var(--input-border);
|
768 | line-height: 1em;
|
769 | }
|
770 |
|
771 | [type="checkbox"][role="switch"]:before {
|
772 | display: block;
|
773 | width: calc(1em - 4px);
|
774 | height: 100%;
|
775 | border-radius: 50%;
|
776 | background-color: var(--primary-inverse);
|
777 | content: '';
|
778 | }
|
779 |
|
780 | [type="checkbox"][role="switch"]:checked {
|
781 | border-color: var(--primary);
|
782 | background-color: var(--primary);
|
783 | background-image: none;
|
784 | }
|
785 |
|
786 | [type="checkbox"][role="switch"]:checked::before {
|
787 | margin-right: 0;
|
788 | margin-left: calc(0.925em - 2px);
|
789 | }
|
790 |
|
791 |
|
792 |
|
793 |
|
794 | button {
|
795 | margin: 0;
|
796 | overflow: visible;
|
797 | font-family: inherit;
|
798 | text-transform: none;
|
799 | }
|
800 |
|
801 | button,
|
802 | [type="button"],
|
803 | [type="reset"],
|
804 | [type="submit"] {
|
805 | -webkit-appearance: button;
|
806 | }
|
807 |
|
808 | button::-moz-focus-inner,
|
809 | [type="button"]::-moz-focus-inner,
|
810 | [type="reset"]::-moz-focus-inner,
|
811 | [type="submit"]::-moz-focus-inner {
|
812 | padding: 0;
|
813 | border-style: none;
|
814 | }
|
815 |
|
816 | button {
|
817 | display: block;
|
818 | width: 100%;
|
819 | margin-bottom: 1.5rem;
|
820 | }
|
821 |
|
822 | a[role="button"] {
|
823 | display: inline-block;
|
824 | text-decoration: none;
|
825 | }
|
826 |
|
827 | button,
|
828 | input[type="submit"],
|
829 | a[role="button"] {
|
830 | border: 1px solid transparent;
|
831 | padding: 0.75rem 1rem;
|
832 | border-radius: 0.25rem;
|
833 | outline: none;
|
834 | background-color: var(--primary);
|
835 | color: var(--primary-inverse);
|
836 | font-size: 1rem;
|
837 | font-weight: normal;
|
838 | line-height: 1.5;
|
839 | text-align: center;
|
840 | cursor: pointer;
|
841 | }
|
842 |
|
843 | button:hover, button:active, button:focus,
|
844 | input[type="submit"]:hover,
|
845 | input[type="submit"]:active,
|
846 | input[type="submit"]:focus,
|
847 | a[role="button"]:hover,
|
848 | a[role="button"]:active,
|
849 | a[role="button"]:focus {
|
850 | background-color: var(--primary-hover);
|
851 | }
|
852 |
|
853 | button:focus,
|
854 | input[type="submit"]:focus,
|
855 | a[role="button"]:focus {
|
856 | box-shadow: 0 0 0 0.2rem var(--primary-focus);
|
857 | }
|
858 |
|
859 | input[type="reset"] {
|
860 | cursor: pointer;
|
861 | }
|
862 |
|
863 | button[disabled],
|
864 | input[type="submit"][disabled],
|
865 | input[type="reset"][disabled],
|
866 | a[role="button"][disabled] {
|
867 | opacity: .5;
|
868 | pointer-events: none;
|
869 | }
|
870 |
|
871 |
|
872 |
|
873 |
|
874 | table {
|
875 | width: 100%;
|
876 | border-spacing: 0;
|
877 | }
|
878 |
|
879 | th,
|
880 | td {
|
881 | padding: 0.5rem 1rem;
|
882 | border-bottom: 1px solid var(--table-border);
|
883 | color: var(--muted-text);
|
884 | font-weight: 400;
|
885 | text-align: left;
|
886 | font-size: 0.875rem;
|
887 | }
|
888 |
|
889 | th,
|
890 | thead td {
|
891 | color: var(--text);
|
892 | font-size: 1rem;
|
893 | }
|
894 |
|
895 | thead th,
|
896 | thead td {
|
897 | border-bottom: 3px solid var(--table-border);
|
898 | }
|
899 |
|
900 | tbody tr:nth-child(odd) {
|
901 | background-color: var(--table-stripping);
|
902 | }
|