• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*--------------------- CSS Variables ----------------------------*/
2:root {
3  --black: #000000;
4  --black1: #090c15;
5  --black2: #2c3437;
6  --black3: #0d111d;
7  --blue1: #0a56b2;
8  --white: #ffffff;
9  --white-smoke: #f2f2f2;
10  --grey-smoke: #e9edf0;
11  --red1: #d60027;
12  --red2: #d50027;
13  --red3: #ca5010;
14  --red4: #ff7070;
15  --green1: #3e7a38;
16  --green2: #5a8147;
17  --green3: #64de64;
18  --green4: #99cc7d;
19  --green5: #84ba64;
20  --gray1: #707070;
21  --gray2: #b4b4b4;
22  --gray3: #cccccc;
23  --gray4: #040404;
24  --gray5: #7a7a7a;
25  --gray6: #333333;
26  --gray7: #c1c1c1;
27  --grey8: #ddd;
28
29  --background-color-api-stability-link: rgba(255, 255, 255, .4);
30  --background-color-highlight: var(--white-smoke);
31  --color-brand-primary: var(--gray6);
32  --color-brand-secondary: var(--green1);
33  --color-critical: var(--red1);
34  --color-fill-app: var(--white);
35  --color-fill-side-nav: var(--gray6);
36  --color-links: var(--green1);
37  --color-text-mark: var(--gray1);
38  --color-text-nav: var(--gray3);
39  --color-text-primary: var(--gray6);
40  --color-text-secondary: var(--green2);
41}
42
43h2 :target,
44h3 :target,
45h4 :target,
46h5 :target {
47  scroll-margin-top: 55px;
48}
49
50.dark-mode {
51  --background-color-highlight: var(--black2);
52  --color-critical: var(--red4);
53  --color-fill-app: var(--black1);
54  --color-fill-side-nav: var(--black3);
55  --color-links: var(--green5);
56  --color-text-mark: var(--gray5);
57  --color-text-primary: var(--white);
58}
59
60.dark-mode code,
61.dark-mode tt {
62  color: var(--grey-smoke);
63  background-color: var(--background-color-highlight);
64}
65.dark-mode a code {
66  color: var(--green3);
67}
68
69/*--------------------- Layout and Typography ----------------------------*/
70html {
71  font-size: 1rem;
72  overflow-wrap: break-word;
73  -webkit-font-smoothing: antialiased;
74  -moz-osx-font-smoothing: grayscale;
75  -webkit-font-variant-ligatures: none;
76          font-variant-ligatures: none;
77}
78
79* {
80  box-sizing: border-box;
81}
82
83body {
84  font-family: Lato, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;
85  margin: 0;
86  padding: 0;
87  color: var(--color-text-primary);
88  background-color: var(--color-fill-app);
89}
90
91h1, h1 code { font-size: 2.5rem; }
92h2, h2 code { font-size: 2rem; }
93h3, h3 code { font-size: 1.75rem; }
94h4, h4 code { font-size: 1.5rem; }
95h5, h5 code { font-size: 1.25rem; }
96h6, h6 code { font-size: 1rem; }
97
98h1,
99h2,
100h3,
101h4,
102h5,
103h6 {
104  font-weight: 700;
105  line-height: inherit;
106  position: relative;
107  margin: 1.5rem 0 1rem;
108  text-rendering: optimizeLegibility;
109}
110
111h1 code,
112h2 code,
113h3 code,
114h4 code,
115h5 code,
116h6 code {
117  color: inherit;
118  font-family: inherit;
119}
120
121pre,
122tt,
123code,
124.pre,
125span.type,
126a.type {
127  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
128  font-size: .9em;
129}
130
131#content {
132  position: relative;
133}
134
135a:link,
136a:active,
137a:visited {
138  color: var(--color-links);
139  text-decoration: none;
140  border-radius: 2px;
141  padding: 1px 3px;
142}
143
144a:hover,
145a:focus {
146  color: var(--white);
147  background-color:var(--green1);
148  outline: none;
149}
150
151strong {
152  font-weight: 700;
153}
154
155code a:hover {
156  background-color: transparent;
157}
158
159em code {
160  font-style: normal;
161}
162
163#changelog #gtoc {
164  display: none;
165}
166
167#gtoc {
168  margin-top: .5rem;
169  margin-bottom: 1rem;
170}
171
172#gtoc > ul {
173  list-style: none;
174  margin-left: 0;
175  line-height: 1.5rem;
176}
177
178.critical, .critical code {
179  color: var(--color-critical);
180}
181
182li.picker-header {
183  position: relative;
184}
185
186li.picker-header .collapsed-arrow, li.picker-header .expanded-arrow {
187  width: 1.5ch;
188  height: 1.5em;
189}
190
191li.picker-header .collapsed-arrow {
192  display: inline-block;
193}
194
195li.picker-header .expanded-arrow {
196  display: none;
197}
198
199li.picker-header.expanded .collapsed-arrow,
200:root:not(.has-js) li.picker-header:hover .collapsed-arrow {
201  display: none;
202}
203
204li.picker-header.expanded .expanded-arrow,
205:root:not(.has-js) li.picker-header:hover .expanded-arrow {
206  display: inline-block;
207}
208
209li.picker-header.expanded > a,
210:root:not(.has-js) li.picker-header:hover > a {
211  border-radius: 2px 2px 0 0;
212}
213
214li.picker-header.expanded > .picker,
215:root:not(.has-js) li.picker-header:hover > .picker {
216  display: block;
217  z-index: 1;
218}
219
220li.picker-header a span {
221  font-size: .7rem;
222}
223
224.picker {
225  background-color: var(--color-fill-app);
226  border: 1px solid var(--color-brand-secondary);
227  border-radius: 0 0 2px 2px;
228  display: none;
229  list-style: none;
230  position: absolute;
231  left: 0;
232  top: 100%;
233  width: max-content;
234  min-width: min(300px, 75vw);
235  max-width: 75vw;
236  max-height: min(600px, 60vh);
237  overflow-y: auto;
238}
239
240.picker > ul, .picker > ol {
241  list-style: none;
242  margin-left: 0;
243  line-height: 1.5rem;
244}
245
246.picker li {
247  display: block;
248  border-right: 0;
249  margin-right: 0;
250}
251
252.picker li a {
253  border-radius: 0;
254  display: block;
255  margin: 0;
256  padding: .1rem;
257  padding-left: 1rem;
258}
259
260.picker li a.active,
261.picker li a.active:hover,
262.picker li a.active:focus {
263  font-weight: 700;
264}
265
266.picker li:last-child a {
267  border-bottom-right-radius: 1px;
268  border-bottom-left-radius: 1px;
269}
270
271.gtoc-picker-header {
272  display: none;
273}
274
275.line {
276  width: calc(100% - 1rem);
277  display: block;
278  padding-bottom: 1px;
279}
280
281.picker .line {
282  margin: 0;
283  width: 100%;
284}
285
286.api_stability {
287  color: var(--white) !important;
288  margin: 0 0 1rem;
289  padding: 1rem;
290  line-height: 1.5;
291}
292
293.api_stability * {
294  color: var(--white) !important;
295}
296
297.api_stability a {
298  text-decoration: underline;
299}
300
301.api_stability a:hover,
302.api_stability a:active,
303.api_stability a:focus {
304  background-color: var(--background-color-api-stability-link);
305}
306
307.api_stability a code {
308  background-color: transparent;
309}
310
311.api_stability_0 {
312  background-color: var(--red1);
313}
314
315.api_stability_1 {
316  background-color: var(--red3);
317}
318
319.api_stability_2 {
320  background-color: var(--green2);
321}
322
323.api_stability_3 {
324  background-color: var(--blue1);
325}
326
327.module_stability {
328  vertical-align: middle;
329}
330
331.api_metadata {
332  font-size: .85rem;
333  margin-bottom: 1rem;
334}
335
336.api_metadata span {
337  margin-right: 1rem;
338}
339
340.api_metadata span:last-child {
341  margin-right: 0;
342}
343
344ul.plain {
345  list-style: none;
346}
347
348abbr {
349  border-bottom: 1px dotted #454545;
350}
351
352p {
353  text-rendering: optimizeLegibility;
354  margin: 0 0 1.125rem;
355  line-height: 1.5;
356}
357
358#apicontent > *:last-child {
359  margin-bottom: 0;
360  padding-bottom: 2rem;
361}
362
363table {
364  border-collapse: collapse;
365  margin: 0 0 1.5rem;
366}
367
368th,
369td {
370  border: 1px solid #aaa;
371  padding: .5rem;
372  vertical-align: top;
373}
374
375th {
376  text-align: left;
377}
378
379td {
380  word-break: break-all; /* Fallback if break-word isn't supported */
381  word-break: break-word;
382}
383
384@media only screen and (min-width: 600px) {
385  th,
386  td {
387    padding: .75rem 1rem;
388  }
389
390  td:first-child {
391    word-break: normal;
392  }
393}
394
395ol,
396ul,
397dl {
398  margin: 0 0 .6rem;
399  padding: 0;
400}
401
402ol ul,
403ol ol,
404ol dl,
405ul ul,
406ul ol,
407ul dl,
408dl ul,
409dl ol,
410dl dl {
411  margin-bottom: 0;
412}
413
414ul,
415ol {
416  margin-left: 2rem;
417}
418
419dl dt {
420  position: relative;
421  margin: 1.5rem 0 0;
422}
423
424dl dd {
425  position: relative;
426  margin: 0 1rem;
427}
428
429dd + dt.pre {
430  margin-top: 1.6rem;
431}
432
433#apicontent {
434  padding-top: 1rem;
435}
436
437#apicontent section {
438  content-visibility: auto;
439  contain-intrinsic-size: 1px auto 5000px;
440}
441
442#apicontent .line {
443  width: calc(50% - 1rem);
444  margin: 1rem 1rem .95rem;
445  background-color: #ccc;
446}
447
448h2 + h2 {
449  margin: 0 0 .5rem;
450}
451
452h3 + h3 {
453  margin: 0 0 .5rem;
454}
455
456h2,
457h3,
458h4,
459h5 {
460  position: relative;
461  padding-right: 40px;
462}
463
464.srclink {
465  float: right;
466  font-size: smaller;
467  margin-right: 30px;
468}
469
470h1 span,
471h2 span,
472h3 span,
473h4 span {
474  position: absolute;
475  display: block;
476  top: 0;
477  right: 0;
478}
479
480h1 span:hover,
481h2 span:hover,
482h3 span:hover,
483h4 span:hover {
484  opacity: 1;
485}
486
487h1 span a,
488h2 span a,
489h3 span a,
490h4 span a {
491  color: #000;
492  text-decoration: none;
493  font-weight: 700;
494}
495
496pre,
497tt,
498code {
499  line-height: 1.5rem;
500  margin: 0;
501  padding: 0;
502}
503
504.pre {
505  line-height: 1.5rem;
506}
507
508pre {
509  padding: 1rem;
510  vertical-align: top;
511  background-color: var(--background-color-highlight);
512  margin: 1rem;
513  overflow-x: auto;
514}
515
516pre > code {
517  padding: 0;
518}
519
520pre + h3 {
521  margin-top: 2.225rem;
522}
523
524code.pre {
525  white-space: pre;
526}
527
528#intro {
529  margin-top: 1.25rem;
530  margin-left: 1rem;
531}
532
533#intro a {
534  color: var(--grey8);
535  font-weight: 700;
536}
537
538hr {
539  background-color: transparent;
540  border: medium none;
541  border-bottom: 1px solid var(--gray5);
542  margin: 0 0 1rem;
543}
544
545#toc > ul {
546  margin-top: 1.5rem;
547}
548
549#toc p {
550  margin: 0;
551}
552
553#toc ul a {
554  text-decoration: none;
555}
556
557#toc ul li {
558  margin-bottom: .666rem;
559  list-style: square outside;
560}
561
562#toc li > ul {
563  margin-top: .666rem;
564}
565
566.toc ul {
567  margin: 0
568}
569
570.toc li a::before {
571  content: "■";
572  color: var(--color-text-primary);
573  padding-right: 1em;
574  font-size: 0.9em;
575}
576
577.toc li a:hover::before {
578  color: var(--white);
579}
580
581.toc ul ul a {
582  padding-left: 1rem;
583}
584
585.toc ul ul ul a {
586  padding-left: 2rem;
587}
588
589.toc ul ul ul ul a {
590  padding-left: 3rem;
591}
592
593.toc ul ul ul ul ul a {
594  padding-left: 4rem;
595}
596
597.toc ul ul ul ul ul ul a {
598  padding-left: 5rem;
599}
600
601#toc .stability_0::after,
602.deprecated-inline::after {
603  background-color: var(--red2);
604  color: var(--white);
605  content: "deprecated";
606  margin-left: .25rem;
607  padding: 1px 3px;
608  border-radius: 3px;
609}
610#toc .stability_3::after {
611  background-color: var(--blue1);
612  color: var(--white);
613  content: "legacy";
614  margin-left: .25rem;
615  padding: 1px 3px;
616  border-radius: 3px;
617}
618
619.experimental-inline::after {
620  background-color: var(--red3);
621  color: var(--white);
622  content: "experimental";
623  margin-left: .25rem;
624  padding: 1px 3px;
625  border-radius: 3px;
626}
627
628#apicontent li {
629  margin-bottom: .5rem;
630}
631
632#apicontent li:last-child {
633  margin-bottom: 0;
634}
635
636tt,
637code {
638  color: #040404;
639  background-color: #f2f2f2;
640  border-radius: 2px;
641  padding: 1px 3px;
642}
643
644.api_stability code {
645  background-color: rgba(0, 0, 0, .1);
646}
647
648a code {
649  color: inherit;
650  background-color: inherit;
651  padding: 0;
652}
653
654.type {
655  line-height: 1.5rem;
656}
657
658#column1.interior {
659  margin-left: 234px;
660  padding: 0 2rem;
661  -webkit-padding-start: 1.5rem;
662}
663
664#column2.interior {
665  width: 234px;
666  background-color: var(--color-fill-side-nav);
667  position: fixed;
668  left: 0;
669  top: 0;
670  bottom: 0;
671  overflow-x: hidden;
672  overflow-y: scroll;
673}
674
675#column2 ul {
676  list-style: none;
677  margin: .9rem 0 .5rem;
678  background-color: var(--color-fill-side-nav);
679}
680
681#column2 > :first-child {
682  margin: 1.25rem;
683  font-size: 1.5rem;
684}
685
686#column2 > ul:nth-child(2) {
687  margin: 1.25rem 0 .5rem;
688}
689
690#column2 > ul:last-child {
691  margin: .9rem 0 1.25rem;
692}
693
694#column2 ul li {
695  padding-left: 1.25rem;
696  margin-bottom: .5rem;
697  padding-bottom: .5rem;
698}
699
700#column2 .line {
701  margin: 0 .5rem;
702  border-color: #707070;
703}
704
705#column2 ul li:last-child {
706  margin-bottom: 0;
707}
708
709#column2 ul li a,
710#column2 ul li a code {
711  color: var(--color-text-nav);
712  border-radius: 0;
713}
714
715#column2 ul li a.active,
716#column2 ul li a.active:hover,
717#column2 ul li a.active:focus {
718  font-weight: 700;
719  color: var(--white);
720  background-color: transparent;
721}
722
723#intro a:hover,
724#intro a:focus,
725#column2 ul li a:hover,
726#column2 ul li a:focus {
727  color: var(--white);
728  background-color: transparent;
729}
730
731span > .mark,
732span > .mark:visited {
733  color: var(--color-text-mark);
734  position: absolute;
735  top: 0;
736  right: 0;
737}
738
739span > .mark:hover,
740span > .mark:focus,
741span > .mark:active {
742  color: var(--color-brand-secondary);
743  background-color: transparent;
744}
745
746th > *:last-child,
747td > *:last-child {
748  margin-bottom: 0;
749}
750
751kbd {
752  background-color: #eee;
753  border-radius: 3px;
754  border: 1px solid #b4b4b4;
755  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
756  color: #333;
757  display: inline-block;
758  font-size: .85em;
759  font-weight: 700;
760  padding: 2px 4px;
761  white-space: nowrap;
762  vertical-align: middle;
763 }
764
765.changelog > summary {
766  margin: .5rem 0;
767  padding: .5rem 0;
768  cursor: pointer;
769}
770
771/* simpler clearfix */
772.clearfix::after {
773  content: ".";
774  display: block;
775  height: 0;
776  clear: both;
777  visibility: hidden;
778}
779
780/* API reference sidebar */
781@media only screen and (min-width: 1025px) {
782  .apidoc #column2 > .line {
783    pointer-events: none;
784  }
785  .apidoc #column2 > :first-child,
786  .apidoc #column2 > ul,
787  .apidoc #column2 > ul > li {
788    margin: 0;
789    padding: 0;
790  }
791  .apidoc #column2 > :first-child > a[href] {
792    border-radius: 0;
793    padding: 1.25rem 1.4375rem .625rem;
794    display: block;
795  }
796  .apidoc #column2 > ul > li > a[href] {
797    padding: .5rem 1.4375rem;
798    display: block;
799  }
800  .apidoc #column2 > ul > :first-child > a[href] {
801    padding-top: .625rem;
802  }
803  .apidoc #column2 > ul > :last-child > a[href] {
804    padding-bottom: .625rem;
805  }
806  .apidoc #column2 > ul:first-of-type > :last-child  > a[href] {
807    padding-bottom: 1rem;
808  }
809  .apidoc #column2 > ul:nth-of-type(2) > :first-child > a[href] {
810    padding-top: .875rem;
811  }
812  .apidoc #column2 > ul:nth-of-type(2) > :last-child > a[href] {
813    padding-bottom: .9375rem;
814  }
815  .apidoc #column2 > ul:last-of-type > :first-child > a[href] {
816    padding-top: 1rem;
817  }
818  .apidoc #column2 > ul:last-of-type > :last-child > a[href] {
819    padding-bottom: 1.75rem;
820  }
821}
822
823.header {
824  position: sticky;
825  top: -1px;
826  z-index: 1;
827  padding-top: 1rem;
828  background-color: var(--color-fill-app);
829}
830
831@media not screen, (max-width: 600px) {
832  .header {
833    position: relative;
834    top: 0;
835  }
836}
837
838@media not screen, (max-height: 1000px) {
839  :root:not(.has-js) .header {
840    position: relative;
841    top: 0;
842  }
843}
844
845.header .pinned-header {
846  display: none;
847  margin-right: 0.4rem;
848  font-weight: 700;
849}
850
851.header.is-pinned .header-container {
852  display: none;
853}
854
855.header.is-pinned .pinned-header {
856  display: inline;
857}
858
859.header.is-pinned #gtoc {
860  margin: 0;
861}
862
863.header-container {
864  display: flex;
865  align-items: center;
866  margin-bottom: 1rem;
867  justify-content: space-between;
868}
869
870.header-container h1 {
871  margin: 0;
872}
873
874.theme-toggle-btn {
875  border: none;
876  background: transparent;
877  outline: var(--brand3) dotted 2px;
878}
879
880@media only screen and (min-width: 601px) {
881  #gtoc > ul > li {
882    display: inline;
883    border-right: 1px currentColor solid;
884    margin-right: .4rem;
885    padding-right: .4rem;
886  }
887
888  #gtoc > ul > li:last-child {
889    border-right: none;
890    margin-right: 0;
891    padding-right: 0;
892  }
893
894  .header #gtoc > ul > li.pinned-header {
895    display: none;
896  }
897
898  .header.is-pinned #gtoc > ul > li.pinned-header {
899    display: inline;
900  }
901
902  #gtoc > ul > li.gtoc-picker-header {
903    display: none;
904  }
905}
906
907@media only screen and (max-width: 1024px) {
908  #content {
909    overflow: visible;
910  }
911  #column1.interior {
912    margin-left: 0;
913    padding-left: .5rem;
914    padding-right: .5rem;
915    width: auto;
916    overflow-y: visible;
917  }
918  #column2 {
919    display: none;
920  }
921
922  #gtoc > ul > li.gtoc-picker-header {
923    display: inline;
924  }
925}
926
927.icon {
928  cursor: pointer;
929}
930
931.dark-icon {
932  display: block;
933}
934
935.light-icon {
936  fill: var(--white);
937  display: none;
938}
939
940.dark-mode {
941  color-scheme: dark;
942}
943
944.dark-mode .dark-icon {
945  display: none;
946}
947
948.dark-mode .light-icon {
949  fill: var(--white);
950  display: block;
951}
952
953.js-flavor-selector {
954  -webkit-appearance: none;
955  appearance: none;
956  float: right;
957  background-image: url(./js-flavor-cjs.svg);
958  background-size: contain;
959  background-repeat: no-repeat;
960  width: 142px;
961  height: 20px;
962  display: block;
963  cursor: pointer;
964  margin: 0;
965}
966.js-flavor-selector:checked {
967  background-image: url(./js-flavor-esm.svg);
968}
969.js-flavor-selector:not(:checked) ~ .mjs,
970.js-flavor-selector:checked ~ .cjs {
971  display: none;
972}
973.dark-mode .js-flavor-selector {
974  filter: invert(1);
975}
976
977.copy-button {
978  float: right;
979
980  outline: none;
981  font-size: 10px;
982  color: #fff;
983  background-color: var(--green1);
984  line-height: 1;
985  border-radius: 500px;
986  border: 1px solid transparent;
987  letter-spacing: 2px;
988  min-width: 7.5rem;
989  text-transform: uppercase;
990  font-weight: 700;
991  padding: 0 .5rem;
992  margin-right: .2rem;
993  height: 1.5rem;
994  transition-property: background-color,border-color,color,box-shadow,filter;
995  transition-duration: .3s;
996  cursor: pointer;
997}
998
999.copy-button:hover {
1000  background-color: var(--green2);
1001}
1002
1003@supports (aspect-ratio: 1 / 1) {
1004  .js-flavor-selector {
1005    height: 1.5em;
1006    width: auto;
1007    aspect-ratio: 2719 / 384;
1008  }
1009}
1010
1011@media print {
1012  html {
1013    height: auto;
1014    font-size: .75em;
1015  }
1016  #column2.interior {
1017    display: none;
1018  }
1019  #column1.interior {
1020    margin-left: 0;
1021    padding: 0;
1022    overflow-y: auto;
1023  }
1024  .api_metadata,
1025  #toc,
1026  .srclink,
1027  #gtoc,
1028  .mark {
1029    display: none;
1030  }
1031  h1 {
1032    font-size: 2rem;
1033  }
1034  h2 {
1035    font-size: 1.75rem;
1036  }
1037  h3 {
1038    font-size: 1.5rem;
1039  }
1040  h4 {
1041    font-size: 1.3rem;
1042  }
1043  h5 {
1044    font-size: 1.2rem;
1045  }
1046  h6 {
1047    font-size: 1.1rem;
1048  }
1049  .api_stability {
1050    display: inline-block;
1051  }
1052  .api_stability a {
1053    text-decoration: none;
1054  }
1055  a {
1056    color: inherit;
1057  }
1058  #apicontent {
1059    overflow: hidden;
1060  }
1061  .js-flavor-selector {
1062    display: none;
1063  }
1064  .js-flavor-selector + * {
1065    margin-bottom: 2rem;
1066    padding-bottom: 2rem;
1067    border-bottom: 1px solid var(--color-text-primary);
1068  }
1069  .js-flavor-selector ~ * {
1070    display: block !important;
1071    background-position: top right;
1072    background-size: 142px 20px;
1073    background-repeat: no-repeat;
1074  }
1075  .js-flavor-selector ~ .cjs {
1076    background-image: url(./js-flavor-cjs.svg);
1077  }
1078  .js-flavor-selector ~ .mjs {
1079    background-image: url(./js-flavor-esm.svg);
1080  }
1081}
1082