Skip to content

Instantly share code, notes, and snippets.

@peterbe

peterbe/main.css

Created Mar 18, 2021
Embed
What would you like to do?
code[class*="language-"],
pre[class*="language-"] {
color: #000;
background: none;
text-shadow: 0 1px #fff;
font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
code[class*="language-"]::selection,
code[class*="language-"] ::selection,
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
pre[class*="language-"] {
padding: 1em;
margin: 0.5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
:not(pre) > code[class*="language-"] {
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #708090;
}
.token.punctuation {
color: #999;
}
.token.namespace {
opacity: 0.7;
}
.token.boolean,
.token.constant,
.token.deleted,
.token.number,
.token.property,
.token.symbol,
.token.tag {
color: #905;
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #690;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url {
color: #9a6e3a;
background: hsla(0, 0%, 100%, 0.5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.class-name,
.token.function {
color: #dd4a68;
}
.token.important,
.token.regex,
.token.variable {
color: #e90;
}
.token.bold,
.token.important {
font-weight: 700;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
*,
:after,
:before {
box-sizing: border-box;
}
ol[class],
ul[class] {
padding: 0;
}
blockquote,
body,
dd,
dl,
figcaption,
figure,
h1,
h2,
h3,
h4,
h5,
li,
ol[class],
p,
ul[class] {
margin: 0;
}
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
ol[class],
ul[class] {
list-style: none;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
img {
max-width: 100%;
display: block;
}
article > * + * {
margin-top: 1em;
}
button,
input,
select,
textarea {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
html {
background-color: #fff;
box-sizing: border-box;
color: #212121;
}
body {
font-family: arial, x-locale-body, sans-serif;
letter-spacing: -0.0027777778rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 100%;
line-height: 1.75;
}
img {
height: auto;
}
@font-face {
font-display: swap;
font-family: zillaslab;
font-style: normal;
font-weight: 700;
src: url(/static/media/ZillaSlab-Bold.subset.0beac26b.woff2) format("woff2"),
url(/static/media/ZillaSlab-Bold.subset.72026b3c.woff) format("woff");
}
@font-face {
font-display: swap;
font-family: zillaslab;
font-style: normal;
font-weight: 400;
src: url(/static/media/ZillaSlab-Regular.subset.ce3a756d.woff2)
format("woff2"),
url(/static/media/ZillaSlab-Regular.subset.7e4c05c9.woff) format("woff");
}
h1,
h2,
h3 {
font-family: zillaslab, palatino, "Palatino Linotype", serif;
line-height: 1.2;
}
h1 {
font-size: 1.802rem;
}
@media (min-width: 47.9385em) {
h1 {
font-size: 3.052rem;
}
}
h2 {
font-size: 1.602rem;
}
@media (min-width: 47.9385em) {
h2 {
font-size: 2.441rem;
}
}
h3 {
font-size: 1.424rem;
background-color: #212121;
color: #fff;
font-family: zillaslab, palatino, "Palatino Linotype", serif;
font-weight: 400;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
padding: 0 6px;
margin: 24px 0;
}
@media (min-width: 47.9385em) {
h3 {
font-size: 1.953rem;
}
}
h4 {
font-size: 1.266rem;
}
@media (min-width: 47.9385em) {
h4 {
font-size: 1.563rem;
}
}
h5 {
font-size: 1.125rem;
}
@media (min-width: 47.9385em) {
h5 {
font-size: 1.25rem;
}
}
p {
margin-bottom: 24px;
}
.smaller-text {
font-size: 0.9rem;
}
.tiny-text {
font-size: 0.75rem;
}
.slab-highlight {
background-color: #212121;
color: #fff;
font-family: zillaslab, palatino, "Palatino Linotype", serif;
font-weight: 400;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
padding: 0 6px;
}
.readable-line-length {
max-width: 45rem;
max-width: 85ch;
}
a:link,
a:visited {
color: #00458b;
text-decoration: none;
}
a:link:active,
a:link:focus,
a:link:hover,
a:visited:active,
a:visited:focus,
a:visited:hover {
text-decoration: underline;
}
blockquote {
max-width: 45rem;
max-width: 85ch;
font-size: 1.125rem;
font-family: zillaslab, palatino, "Palatino Linotype", serif;
font-weight: 400;
margin-bottom: 24px;
}
@media (min-width: 47.9385em) {
blockquote {
font-size: 1.25rem;
}
}
blockquote:after,
blockquote:before {
background-image: linear-gradient(90deg, #00458b, #83d0f2);
content: "";
display: block;
height: 5px;
margin-bottom: 12px;
}
blockquote:after {
margin-top: 12px;
}
blockquote p:last-of-type {
margin-bottom: 0;
}
a {
color: #00458b;
text-decoration: none;
}
a:focus,
a:hover {
text-decoration: underline;
}
a code {
-webkit-text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
}
a.external:after {
background: transparent url(/static/media/external.e091ac5d.svg) 0 0 no-repeat;
background-size: 16px;
content: "";
display: inline-block;
height: 16px;
margin-left: 3px;
width: 16px;
}
.highlighted-link-state {
background-color: #00458b;
color: #fff;
}
dl dt {
font-weight: 700;
}
dl dd {
margin: 0 24px 24px;
}
.flex-list {
display: flex;
flex-wrap: wrap;
grid-gap: 24px;
gap: 24px;
}
.flex-list.styled {
margin: 24px 0;
padding-left: 48px;
}
.flex-list li {
flex-basis: 45%;
}
ul.flex-list.styled li {
list-style-type: disc;
}
ol.flex-list.styled li {
list-style-type: decimal;
}
.icon {
background-position: 0 0;
background-repeat: no-repeat;
background-size: 21px;
content: "";
display: inline-block;
height: 21px;
margin-right: 6px;
vertical-align: sub;
width: 21px;
}
h2 .icon,
h3 .icon,
h4 .icon {
margin-left: 6px;
vertical-align: middle;
}
.experimental,
.non-standard {
fill: #1e7f9d;
}
.deprecated,
.warning {
fill: #b49e35;
}
.obsolete {
fill: #95353a;
}
.callout {
background-color: #c2e8f9;
border-radius: 6px;
display: flex;
flex-flow: column;
justify-content: center;
margin-bottom: 24px;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
padding: 24px 24px 0;
}
.callout p {
max-width: 45rem;
max-width: 85ch;
}
.callout h4 {
font-family: zillaslab, palatino, "Palatino Linotype", serif;
background-color: transparent;
color: #212121;
}
.callout .button {
max-width: inherit;
width: 100%;
}
@media (min-width: 47.9385em) {
.callout .button {
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
width: inherit;
}
}
.neutral {
color: #1e7f9d;
}
.warning {
color: #b49e35;
}
.error {
color: #95353a;
}
.success {
color: #276738;
}
.notecard {
border-left: 6px solid #1e7f9d;
margin: 0 0 24px;
padding: 12px;
}
.notecard a:link,
.notecard a:visited {
color: #212121;
text-decoration: underline;
}
.notecard a:focus,
.notecard a:hover {
text-decoration: none;
}
.notecard h3,
.notecard h4 {
background-color: inherit;
color: inherit;
display: inline-block;
font-family: arial, x-locale-body, sans-serif;
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 6px;
padding: 0;
}
@media (min-width: 47.9385em) {
.notecard h3,
.notecard h4 {
font-size: 1.25rem;
}
}
.notecard.inline:before,
.notecard h3:before,
.notecard h4:before {
background-repeat: no-repeat;
background-size: 18px;
content: "";
display: inline-block;
height: 21px;
margin-right: 6px;
position: relative;
top: 2px;
width: 20px;
}
.notecard p {
margin-bottom: 12px;
}
.notecard p:last-child {
margin-bottom: 0;
}
.notecard.inline {
font-weight: 400;
margin: 6px;
padding: 3px 6px;
}
.notecard.inline:before {
top: 5px;
}
.notecard.inline p {
display: inline-block;
margin-bottom: 0;
}
.notecard.success {
background-color: #ebf8e1;
border-color: #367b48;
color: #212121;
}
.notecard.success.inline:before,
.notecard.success h3:before,
.notecard.success h4:before {
background: transparent url(/static/media/check-mark.41c8922e.svg) 0 0
no-repeat;
}
.notecard.note {
background-color: #dcf4ff;
}
.notecard.note.inline:before,
.notecard.note h3:before,
.notecard.note h4:before {
background: transparent url(/static/media/file.05b73caf.svg) 0 0 no-repeat;
}
.notecard.draft,
.notecard.experimental,
.notecard.secure,
.notecard.warning {
background-color: #fef1b6;
border-color: #e1c542;
color: #212121;
}
.notecard.draft.inline:before,
.notecard.draft h3:before,
.notecard.draft h4:before,
.notecard.experimental.inline:before,
.notecard.experimental h3:before,
.notecard.experimental h4:before,
.notecard.secure.inline:before,
.notecard.secure h3:before,
.notecard.secure h4:before,
.notecard.warning.inline:before,
.notecard.warning h3:before,
.notecard.warning h4:before {
background: transparent url(/static/media/exclamation-triangle.d21c8a03.svg) 0
0 no-repeat;
}
.notecard.experimental h3:before,
.notecard.experimental h4:before {
background-image: url(/static/media/flask.5eb757fe.svg);
}
.notecard.draft h3:before,
.notecard.draft h4:before {
background-image: url(/static/media/pencil.75d89c00.svg);
}
.notecard.secure h3:before,
.notecard.secure h4:before {
background-image: url(/static/media/lock.f9055252.svg);
}
.notecard.deprecated,
.notecard.negative,
.notecard.obsolete {
background-color: #ffbdbd;
border-color: #d0454c;
color: #212121;
}
.notecard.deprecated.inline:before,
.notecard.deprecated h3:before,
.notecard.deprecated h4:before,
.notecard.negative.inline:before,
.notecard.negative h3:before,
.notecard.negative h4:before,
.notecard.obsolete.inline:before,
.notecard.obsolete h3:before,
.notecard.obsolete h4:before {
background: transparent url(/static/media/trash.181dbb93.svg) 0 0 no-repeat;
}
.notecard.deprecated h3:before,
.notecard.deprecated h4:before {
background-image: url(/static/media/thumbs-down.41ba190c.svg);
}
.badge {
background-color: #fafafa;
border-radius: 6px;
margin-right: 6px;
padding: 0 6px;
}
.badge a {
color: #212121;
}
.html-version,
.optional,
.readonly {
border-left: 5px solid #fff;
}
.optional,
.readonly {
border-color: #212121;
}
.html-version {
border-color: #367b48;
}
.spec-living,
.spec-standard {
color: #00458b;
}
.spec-cr,
.spec-pr,
.spec-rec,
.spec-rfc {
color: #276738;
}
.spec-draft,
.spec-lc,
.spec-wd {
color: #a14400;
}
.spec-ed,
.spec-obsolete {
color: #95353a;
}
pre {
border-left: 6px solid #00458b;
font-size: 1rem;
line-height: 1.4;
margin: 0 0 24px;
max-width: 100%;
overflow: auto;
padding: 24px;
width: 100%;
}
code,
pre {
background-color: #eee;
}
code {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
font-family: consolas, "Liberation Mono", courier, monospace;
padding: 0 3px;
word-wrap: break-word;
}
.notranslate code {
background-color: transparent;
}
.example-bad {
background-color: #ffeef0;
border-color: #d0454c;
}
.example-good {
background-color: #ebf8e1;
border-color: #529e66;
}
kbd {
background: linear-gradient(180deg, #eee, #fff);
background-color: #eee;
border: 1px solid #cdd5d7;
border-radius: 6px;
box-shadow: 0 1px 2px 1px #cdd5d7;
font-family: consolas, "Liberation Mono", courier, monospace;
font-size: 0.9rem;
font-weight: 700;
line-height: 1;
margin: 3px;
padding: 4px 6px;
white-space: nowrap;
}
table kbd {
margin: 6px;
}
.token.keyword {
color: #00458b;
}
.token.attr-name,
.token.builtin,
.token.char,
.token.inserted,
.token.selector,
.token.string {
color: #276738;
}
.language-css .token.string,
.style .token.string,
.token.entity,
.token.operator,
.token.url,
.token.variable {
background-color: transparent;
color: #212121;
}
.token.atrule,
.token.attr-value,
.token.function {
color: #b54248;
}
.token.cdata,
.token.comment,
.token.doctype,
.token.prolog {
color: #626262;
}
.token.important,
.token.regex {
color: #a14400;
}
.button,
a.button {
background-color: #216b82;
border: 2px solid #216b82;
color: #fff;
border-radius: 4px;
cursor: pointer;
display: block;
font-weight: 700;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
min-height: 45px;
padding: 10px 20px;
text-decoration: none;
}
.button:focus,
.button:hover,
a.button:focus,
a.button:hover {
background-color: #1e7f9d;
border-color: #1e7f9d;
}
.button:active,
a.button:active {
background-color: #216b82;
border-color: #216b82;
}
.button:active,
.button:focus,
.button:hover,
a.button:active,
a.button:focus,
a.button:hover {
text-decoration: none;
}
.outline,
a.outline {
background-color: #fff;
border-color: #1e7f9d;
color: #1e7f9d;
}
.outline:focus,
.outline:hover,
a.outline:focus,
a.outline:hover {
color: #fff;
}
.danger,
a.danger {
background-color: #95353a;
border: 2px solid #95353a;
color: #fff;
}
.danger:focus,
.danger:hover,
a.danger:focus,
a.danger:hover {
background-color: #b54248;
border-color: #b54248;
}
.danger:active,
a.danger:active {
background-color: #95353a;
border-color: #95353a;
}
.danger.outline,
a.danger.outline {
background-color: #fff;
border-color: #b54248;
color: #b54248;
}
.danger.outline:focus,
.danger.outline:hover,
a.danger.outline:focus,
a.danger.outline:hover {
background-color: #b54248;
border-color: #b54248;
color: #fff;
}
.danger.outline:active,
a.danger.outline:active {
background-color: #b54248;
border-color: #b54248;
}
.positive,
a.positive {
background-color: #276738;
border: 2px solid #276738;
color: #fff;
}
.positive:focus,
.positive:hover,
a.positive:focus,
a.positive:hover {
background-color: #367b48;
border-color: #367b48;
}
.positive:active,
a.positive:active {
background-color: #276738;
border-color: #276738;
}
.positive.outline,
a.positive.outline {
background-color: #fff;
border-color: #367b48;
color: #367b48;
}
.positive.outline:focus,
.positive.outline:hover,
a.positive.outline:focus,
a.positive.outline:hover {
background-color: #367b48;
border-color: #367b48;
color: #fff;
}
.positive.outline:active,
a.positive.outline:active {
background-color: #367b48;
border-color: #367b48;
}
.light,
a.light {
background-color: #fff;
border: 2px solid #fff;
color: #212121;
}
.light:active,
.light:focus,
.light:hover,
a.light:active,
a.light:focus,
a.light:hover {
background-color: #fff;
border-color: #fff;
}
.light.outline,
a.light.outline {
background-color: transparent;
border-color: #fff;
color: #fff;
}
.light.outline:focus,
.light.outline:hover,
a.light.outline:focus,
a.light.outline:hover {
background-color: #fff;
border-color: #fff;
color: #212121;
}
.light.outline:active,
a.light.outline:active {
background-color: #fff;
border-color: #fff;
}
.inactive,
a.inactive {
background-color: #c9c9c9;
border: 2px solid #c9c9c9;
color: #626262;
cursor: default;
}
.inactive:active,
.inactive:focus,
.inactive:hover,
a.inactive:active,
a.inactive:focus,
a.inactive:hover {
background-color: #c9c9c9;
border-color: #c9c9c9;
}
.inactive:focus,
.inactive:hover,
a.inactive:focus,
a.inactive:hover {
color: #626262;
text-decoration: none;
}
.minimal,
a.minimal {
display: inline-block;
font-size: 0.9rem;
font-weight: 400;
min-height: inherit;
padding: 3px 6px;
}
@media (min-width: 47.9385em) {
.minimal,
a.minimal {
padding: 0 6px;
}
}
.ghost {
background: none;
border: 0;
cursor: pointer;
}
.icon-button svg {
fill: currentColor;
height: 22px;
margin-right: 10px;
vertical-align: text-bottom;
width: 22px;
}
.icon-button.right svg {
margin-left: 10px;
margin-right: 0;
}
form .field-group {
margin-bottom: 20px;
}
form .field-group.inline {
display: inline-block;
margin-right: 20px;
}
form .field-note {
color: #626262;
font-size: 0.9rem;
}
fieldset {
border: 0;
margin: 20px 0;
padding-bottom: 0;
}
fieldset.bordered {
border: 1px solid #8e8e8e;
}
legend.highlighted {
background-color: #212121;
color: #fff;
padding: 10px 4px;
}
legend.highlighted code {
background-color: transparent;
}
legend.emphasized {
font-weight: 700;
padding: 10px 0;
}
label {
display: block;
margin-bottom: 5px;
}
label.inline {
display: inline-block;
}
[type="email"],
[type="password"],
[type="text"],
[type="url"],
textarea {
border: 1px solid #8e8e8e;
border-radius: 4px;
padding: 5px 10px;
}
[type="email"]:active,
[type="email"]:focus,
[type="password"]:active,
[type="password"]:focus,
[type="text"]:active,
[type="text"]:focus,
[type="url"]:active,
[type="url"]:focus {
border-color: #1e7f9d;
box-shadow: 1px 1px 1px #1e7f9d;
outline: 0;
}
[type="email"].valid,
[type="password"].valid,
[type="text"].valid,
[type="url"].valid {
border-color: #367b48;
outline: 2px dashed #367b48;
outline-offset: 3px;
}
[type="email"].valid:active,
[type="email"].valid:focus,
[type="password"].valid:active,
[type="password"].valid:focus,
[type="text"].valid:active,
[type="text"].valid:focus,
[type="url"].valid:active,
[type="url"].valid:focus {
box-shadow: 1px 1px 1px #367b48;
}
[type="email"].invalid,
[type="password"].invalid,
[type="text"].invalid,
[type="url"].invalid {
border-color: #b54248;
outline: 2px dashed #b54248;
outline-offset: 3px;
}
[type="email"].invalid:active,
[type="email"].invalid:focus,
[type="password"].invalid:active,
[type="password"].invalid:focus,
[type="text"].invalid:active,
[type="text"].invalid:focus,
[type="url"].invalid:active,
[type="url"].invalid:focus {
box-shadow: 1px 1px 1px #b54248;
}
textarea {
min-height: 120px;
min-width: 350px;
}
table {
font-size: 0.9rem;
overflow-x: auto;
}
@media (min-width: 47.9385em) {
table {
font-size: 1rem;
}
}
table td,
table th {
border: 1px solid #c9c9c9;
padding: 12px;
text-align: left;
}
table pre {
background-color: #fff;
}
.properties,
.standard-table,
table {
border-collapse: collapse;
margin-bottom: 24px;
}
.properties code,
.standard-table code,
table code {
background-color: transparent;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.properties {
max-width: 45rem;
max-width: 85ch;
border: 2px solid #00458b;
border-left-width: 6px;
}
.properties td,
.properties th {
background-color: #fafafa;
border: 0;
border-top: 2px solid #00458b;
display: block;
padding: 12px;
vertical-align: top;
}
@media (min-width: 63.9385em) {
.properties td,
.properties th {
display: table-cell;
}
}
@media (min-width: 63.9385em) {
.properties th {
min-width: 30%;
}
}
.standard-table {
width: 100%;
}
@media (min-width: 63.9385em) {
.standard-table {
border-left: 6px solid #276738;
}
}
.standard-table td,
.standard-table th {
border: 0;
border-left: 2px solid #fff;
padding: 12px;
}
.standard-table td,
.standard-table th {
background-color: #eee;
border-bottom: 2px solid #fff;
}
.standard-table tr td:first-child,
.standard-table tr th:first-child {
border-left: 0;
}
.standard-table tr:last-child td {
border-bottom: 0;
}
.page-overlay {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
height: 100%;
left: 0;
position: fixed;
right: 0;
top: 90px;
width: 100%;
z-index: 300;
}
.visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
.hide {
visibility: hidden;
}
.hidden {
display: none;
}
.show-flex {
display: flex;
}
.sample-code-frame {
border: 1px solid #1e7f9d;
border-left: 6px solid #00458b;
margin: 0 0 12px;
padding: 12px;
width: 100%;
}
.inline {
display: inline-block;
}
.page-wrapper {
margin: 0 auto;
max-width: 1400px;
width: 100%;
}
@supports (display: grid) {
.page-wrapper.document-page {
grid-template-columns: 70% 30%;
}
@media (min-width: 63.9385em) {
.page-wrapper.document-page {
grid-template-columns: minmax(25%, 75%) minmax(75%, 25%);
grid-template-rows: repeat(4, auto) -webkit-max-content 1fr;
grid-template-rows: repeat(4, auto) max-content 1fr;
}
}
.document-page .breadcrumb-locale-container,
.document-page .document-toc-container,
.document-page .main-content,
.document-page .metadata,
.document-page .page-header,
.document-page .sidebar {
grid-column: 1/3;
}
.document-page .page-header {
grid-row: 1/2;
}
.document-page .breadcrumb-locale-container {
grid-row: 2/3;
}
.document-page .document-toc-container {
grid-row: 3/4;
}
@media (min-width: 63.9385em) {
.document-page .document-toc-container {
grid-column: 1/2;
grid-row: 5/6;
}
}
.document-page .main-content {
grid-row: 4/5;
}
@media (min-width: 63.9385em) {
.document-page .main-content {
grid-column: 2/3;
grid-row: 5/7;
}
}
.document-page .sidebar {
grid-row: 5/6;
}
@media (min-width: 63.9385em) {
.document-page .sidebar {
grid-column: 1/2;
grid-row: 6/7;
}
}
.document-page .metadata {
grid-row: 6/7;
}
}
@supports (display: grid) {
.page-wrapper {
display: grid;
grid-template-columns: 100%;
}
.standard-page {
max-width: inherit;
}
.standard-page .page-content-container,
.standard-page .page-header {
grid-column: 1/2;
}
.standard-page .page-header {
grid-row: 1/2;
}
.standard-page .titlebar-container {
grid-row: 2/3;
}
.standard-page .page-content-container {
display: grid;
grid-row: 3/4;
grid-template-columns: 100%;
padding: 24px;
}
@media (min-width: 74.9375em) {
.standard-page .page-content-container {
margin: 0 auto;
max-width: 1400px;
width: 100%;
}
}
}
@media (min-width: 63.9385em) {
.blog-feed {
flex-basis: 65%;
}
}
.blog-feed h3 {
background-color: transparent;
padding: 0;
}
.blog-feed ul {
list-style: none;
margin: 0;
padding: 0;
}
.blog-feed ul li {
border-bottom: 1px solid #eee;
margin-bottom: 12px;
}
.blog-feed .post-meta {
font-size: 0.9rem;
font-style: italic;
}
@media (min-width: 63.9385em) {
.contribute {
flex-basis: 35%;
}
}
.contribute h2 {
margin-bottom: 24px;
}
@media (min-width: 47.9385em) {
.contribute h2 {
font-size: 1.953rem;
}
}
.contribute ul {
list-style: none;
margin: 0;
padding: 0;
}
.contribute ul li {
border-bottom: 1px solid #eee;
margin-bottom: 12px;
}
.hero {
background-color: #83d0f2;
padding: 24px;
position: relative;
}
@media (min-width: 47.9385em) {
.hero {
background: #83d0f2 url(/static/media/home-masthead-background.da81e367.svg)
0 0 repeat;
background-size: cover;
padding: 125px 48px 48px;
}
.hero:before {
background: transparent url(/static/media/hero-dino.a7764ae8.png) 0 0
no-repeat;
background-size: 245px 200px;
content: "";
display: block;
height: 200px;
left: calc(50% - 122px);
position: absolute;
top: 24px;
width: 245px;
}
}
@media (min-width: 63.9385em) {
.hero {
padding-bottom: 72px;
}
}
.hero-content {
margin: 0 auto;
max-width: 63.9375em;
position: relative;
}
.hero-content h1 {
background-color: #212121;
color: #fff;
font-size: 1.602rem;
font-weight: 400;
margin: 0 auto 24px;
text-align: center;
}
@media (min-width: 63.9385em) {
.hero-content h1 {
font-size: 2.441rem;
margin-bottom: 48px;
max-width: 750px;
}
}
.hero-content ul {
list-style: none;
margin: 0;
padding: 0;
}
@media (min-width: 63.9385em) {
.hero-content ul {
display: flex;
justify-content: space-around;
}
}
.hero-content ul li {
flex-basis: 35%;
position: relative;
}
@media (min-width: 63.9385em) {
.hero-content ul li {
flex-basis: 25%;
}
}
.hero-content a {
border-bottom: 2px solid #212121;
color: #212121;
display: inline-block;
padding: 12px 0;
width: 100%;
}
.hero-content a:after {
background: transparent url(/static/media/arrow.e1de8ede.svg) 0 0 no-repeat;
background-size: 16px;
content: "";
display: inline-block;
height: 16px;
position: absolute;
right: 6px;
top: 19px;
transform: rotate(90deg);
width: 16px;
}
.hero-content a:focus:after,
.hero-content a:hover:after {
right: 4px;
}
.home-content-container {
margin: 0 auto;
max-width: 1400px;
padding: 24px;
position: relative;
}
@media (min-width: 63.9385em) {
.home-content-container {
grid-gap: 24px;
gap: 24px;
display: flex;
margin: 48px auto;
}
}
.bc-github-link {
margin: 6px 0;
}
@media (min-width: 63.9385em) {
.bc-github-link {
float: right;
white-space: pre-line;
}
}
.bc-table {
background-color: #eee;
border: 0;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 0;
table-layout: fixed;
width: 100%;
}
.bc-table abbr {
cursor: help;
text-decoration: none;
}
.bc-table td,
.bc-table th {
border-bottom: 0 solid transparent;
border-left: 1px solid #212121;
border-right: 0;
border-top: 1px solid #212121;
padding: 6px;
position: relative;
text-align: center;
}
.bc-table th {
background-color: transparent;
border-left: 0;
border-right: 1px solid #212121;
overflow: hidden;
padding: 6px;
}
.bc-table thead {
display: none;
}
@media (min-width: 63.9385em) {
.bc-table thead {
display: table-header-group;
}
}
.bc-table thead td {
border-left: 0;
border-right: 2px solid #212121;
border-top: 0;
overflow: hidden;
}
@media (min-width: 63.9385em) {
.bc-table thead td {
width: 200px;
}
}
.bc-table .bc-table-row-header {
padding: 12px 6px;
}
.bc-table .bc-table-row-header code {
text-decoration: none;
}
.bc-table tbody td,
.bc-table tbody th {
border-left: 0;
border-right: 0;
display: block;
max-width: 100%;
text-align: left;
width: 100%;
}
.bc-table tbody th {
padding: 0;
}
@media (min-width: 63.9385em) {
.bc-table tbody th {
border-right: 2px solid #212121;
display: table-cell;
font-weight: 400;
overflow: hidden;
width: 200px;
}
}
@media (min-width: 63.9385em) {
.bc-table tbody td {
border-right: 1px solid #212121;
display: table-cell;
overflow: hidden;
padding: 12px 6px;
text-align: center;
vertical-align: middle;
}
}
.bc-table tbody tr:nth-child(2n) {
background-color: #eee;
}
.bc-table .bc-browser-name {
display: inline-block;
width: 75%;
}
@media (min-width: 63.9385em) {
.bc-table .bc-browser-name {
display: none;
}
}
.bc-table .new {
color: #95353a;
}
@media (min-width: 63.9385em) {
.bc-table-web thead th:nth-child(7) {
border-right: 1px solid #212121;
}
.bc-table-web td:nth-child(8),
.bc-table-web thead th:nth-child(8) {
border-left: 1px solid #212121;
}
}
.bc-platforms th {
border-bottom: 2px solid #212121;
border-left: 1px solid #212121;
border-right: 1px solid #212121;
border-top: 0;
padding: 6px 0;
width: auto;
}
.bc-platforms th:nth-child(2) {
border-left: 0;
}
.bc-platforms span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
.bc-platforms .bc-platform-desktop:before,
.bc-platforms .bc-platform-mobile:before,
.bc-platforms .bc-platform-server:before {
background-size: 24px;
content: "";
display: inline-block;
height: 24px;
margin-top: 12px;
width: 24px;
}
.bc-platforms .bc-platform-desktop:before {
background-image: url(/static/media/desktop.ef3ee89a.svg);
}
.bc-platforms .bc-platform-mobile:before {
background-image: url(/static/media/mobile.70f1afec.svg);
}
.bc-platforms .bc-platform-server:before {
background-image: url(/static/media/server.ad489c4d.svg);
}
.bc-icons {
display: inline-block;
vertical-align: text-top;
}
.bc-icons i:before,
.legend-icons:before {
background-size: 18px;
display: inline-block;
height: 18px;
line-height: 1;
margin-left: 5px;
margin-right: 4px;
width: 18px;
}
.ic-footnote:before {
background-image: url(/static/media/asterisk.0770455e.svg);
content: "";
}
.ic-history:before {
background-image: url(/static/media/chevron.f472b7ac.svg);
content: "";
}
.ic-non-standard:before {
background-image: url(/static/media/exclamation-triangle.d21c8a03.svg);
content: "";
}
.ic-deprecated:before {
background-image: url(/static/media/thumbs-down.41ba190c.svg);
content: "";
}
.ic-experimental:before {
background-image: url(/static/media/flask.5eb757fe.svg);
content: "";
}
.ic-prefix {
display: inline-block;
margin-right: 5px;
}
.ic-prefix:before {
color: #212121;
content: "-x-";
font-size: 1.25rem;
font-style: normal;
font-weight: 700;
text-decoration: none;
}
.ic-disabled:before {
background-image: url(/static/media/flag.9056cd9b.svg);
content: "";
}
.ic-altname:before {
background-image: url(/static/media/fork.a92d65c0.svg);
content: "";
}
.bc-supports {
border: 1px solid #212121;
display: inline-block;
min-width: 120px;
padding: 6px;
position: relative;
text-align: center;
}
.bc-supports-yes {
background-color: #ebf8e1;
}
.bc-supports-partial {
background-color: #ffd9bd;
background-image: linear-gradient(
to bottom right,
rgba(144, 99, 18, 0.2) 0,
rgba(144, 99, 18, 0.2) 1px,
transparent 0,
transparent 67px,
rgba(144, 99, 18, 0.2) 0,
rgba(144, 99, 18, 0.2) 73px,
transparent 0,
transparent 138px,
rgba(144, 99, 18, 0.2) 0,
rgba(144, 99, 18, 0.2) 144px,
transparent 0
);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 100px 100px;
}
.bc-supports-no,
.bc-supports-partial,
.bc-supports-unknown,
.bc-supports-yes,
.bc-table .bc-history {
color: #212121;
}
.bc-supports-no {
background-color: #ffbdbd;
background-image: linear-gradient(
to bottom right,
rgba(94, 3, 6, 0.1) 0,
rgba(94, 3, 6, 0.1) 1px,
transparent 0,
transparent 67px,
rgba(94, 3, 6, 0.1) 0,
rgba(94, 3, 6, 0.1) 73px,
transparent 0,
transparent 138px,
rgba(94, 3, 6, 0.1) 0,
rgba(94, 3, 6, 0.1) 144px,
transparent 0
),
linear-gradient(
to bottom left,
rgba(94, 3, 6, 0.1) 0,
rgba(94, 3, 6, 0.1) 1px,
transparent 0,
transparent 67px,
rgba(94, 3, 6, 0.1) 0,
rgba(94, 3, 6, 0.1) 73px,
transparent 0,
transparent 138px,
rgba(94, 3, 6, 0.1) 0,
rgba(94, 3, 6, 0.1) 144px,
transparent 0
);
background-position: 50% 50%, 50% 50%;
background-repeat: no-repeat;
background-size: 100px 100px, 100px 100px;
font-weight: 700;
}
.bc-supports-unknown {
background-color: #eee;
}
.bc-browsers th {
border-top: 0;
height: 200px;
padding: 6px 0;
vertical-align: bottom;
}
.bc-browsers th:nth-child(2) {
border-left: 0;
}
.bc-browsers .bc-head-txt-label {
bottom: 0;
display: inline-block;
font-weight: 400;
height: 20px;
margin: 0 0 24px 12px;
padding: 0;
text-align: left;
transform: rotate(-90deg);
transform-origin: left;
white-space: nowrap;
width: 20px;
}
.bc-browsers .bc-head-txt-label:before {
background-repeat: no-repeat;
content: "";
display: inline-block;
left: -28px;
position: absolute;
transform: rotate(90deg);
}
.bc-head-icon-chrome:before,
.bc-head-icon-chrome_android:before,
.bc-head-icon-edge:before,
.bc-head-icon-edge_mobile:before,
.bc-head-icon-firefox:before,
.bc-head-icon-firefox_android:before,
.bc-head-icon-ie:before,
.bc-head-icon-nodejs:before,
.bc-head-icon-opera:before,
.bc-head-icon-opera_android:before,
.bc-head-icon-safari:before,
.bc-head-icon-safari_ios:before,
.bc-head-icon-samsunginternet_android:before,
.bc-head-icon-webview_android:before {
background-size: 20px;
height: 24px;
width: 20px;
}
.bc-browsers .bc-head-icon-chrome:before,
.bc-browsers .bc-head-icon-chrome_android:before {
background-image: url(/static/media/chrome.4c570865.svg);
}
.bc-browsers .bc-head-icon-edge:before,
.bc-browsers .bc-head-icon-edge_mobile:before {
background-image: url(/static/media/edge.40018f6a.svg);
}
.bc-browsers .bc-head-icon-firefox:before,
.bc-browsers .bc-head-icon-firefox_android:before {
background-image: url(/static/media/firefox.51d8a59c.svg);
}
.bc-browsers .bc-head-icon-ie:before {
background-image: url(/static/media/internet-explorer.cf17782c.svg);
}
.bc-browsers .bc-head-icon-opera:before,
.bc-browsers .bc-head-icon-opera_android:before {
background-image: url(/static/media/opera.a0ab0c50.svg);
}
.bc-browsers .bc-head-icon-safari:before,
.bc-browsers .bc-head-icon-safari_ios:before {
background-image: url(/static/media/safari.3679eb31.svg);
}
.bc-browsers .bc-head-icon-webview_android:before {
background-image: url(/static/media/android.7d9bf320.svg);
}
.bc-browsers .bc-head-icon-samsunginternet_android:before {
background-image: url(/static/media/samsung-internet.6fd7f423.svg);
}
.bc-browsers .bc-head-icon-nodejs:before {
background-image: url(/static/media/nodejs.bb93afa7.svg);
}
.bc-history {
background-color: #eee;
display: none;
}
@media (min-width: 63.9385em) {
.bc-history {
display: table-row;
}
}
.bc-history dl {
display: flex;
flex-flow: column;
grid-gap: 24px;
gap: 24px;
margin: 20px;
max-width: 85%;
}
.bc-history .bc-notes-wrapper {
align-items: center;
display: flex;
}
.bc-history dt {
max-height: 48px;
}
.bc-history dd {
font-weight: 400;
margin-bottom: 0;
margin-left: 12px;
min-height: 24px;
padding-bottom: 12px;
padding-left: 0;
padding-top: 6px;
text-align: left;
}
.bc-history-mobile {
display: block;
padding: 12px;
}
@media (min-width: 63.9385em) {
.bc-history-mobile {
display: none;
}
}
.bc-history-link {
display: none;
}
@media (min-width: 47.9385em) {
.bc-history-link {
background-color: transparent;
border: 0;
border-radius: 0;
border-top: 1px solid #212121;
box-shadow: none;
color: #212121;
cursor: pointer;
display: block;
font-size: 0.75rem;
height: 12px;
margin: 12px 0 0;
padding: 12px;
width: 100%;
}
.bc-history-link:before {
background: transparent url(/static/media/triangle.e8097649.svg) 0 0
no-repeat;
background-size: 16px;
content: "";
display: block;
height: 16px;
margin: 0 auto;
transform: rotate(180deg);
width: 16px;
}
}
@media (min-width: 63.9385em) {
.bc-history-link {
bottom: 0;
left: 0;
padding: 0;
position: absolute;
z-index: 300;
}
.bc-history-link:before {
background-size: 12px;
height: 12px;
width: 12px;
}
}
.bc-history-link-inverse:before {
transform: rotate(0deg);
}
.bc-legend {
margin: 48px 0;
}
.bc-legend dl.bc-legend-items-container {
align-items: center;
display: flex;
flex-wrap: wrap;
grid-gap: 48px;
gap: 48px;
line-height: 1.2;
max-width: inherit;
}
.bc-legend dl.bc-legend-items-container .bc-legend-item {
flex-basis: 100%;
}
@media (min-width: 47.9385em) {
.bc-legend dl.bc-legend-items-container .bc-legend-item {
flex-basis: 45%;
}
}
.bc-legend dl.bc-legend-items-container dd,
.bc-legend dl.bc-legend-items-container dt {
display: inline-block;
margin: 0;
max-width: 275px;
min-height: 30px;
min-width: 30px;
}
.bc-legend dl.bc-legend-items-container dt {
margin-right: 12px;
vertical-align: middle;
}
.bc-legend abbr {
cursor: help;
display: inline-block;
}
.bc-legend .bc-supports {
display: inline-block;
min-height: 30px;
min-width: 30px;
}
.offscreen,
.only-icon span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
@media (min-width: 63.9385em) {
.breadcrumbs-container {
padding: 12px 24px;
padding: 0;
}
}
.breadcrumbs-container a {
align-items: center;
display: flex;
}
.breadcrumbs-container ol {
list-style: none;
margin: 0;
padding: 0;
}
.breadcrumbs-container li {
display: inline-flex;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.breadcrumbs-container li .breadcrumb,
.breadcrumbs-container li .breadcrumb-current-page {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
@media (min-width: 63.9385em) {
.breadcrumbs-container li .breadcrumb,
.breadcrumbs-container li .breadcrumb-current-page {
border: inherit;
clip: inherit;
height: inherit;
margin: inherit;
overflow: inherit;
padding: inherit;
position: inherit !important;
width: inherit;
}
}
.breadcrumbs-container li .breadcrumb-penultimate:after,
.breadcrumbs-container li .breadcrumb:after {
background: transparent url(/static/media/chevron.f472b7ac.svg) 0 0 no-repeat;
background-size: 12px;
content: "";
height: 12px;
transform: rotate(90deg);
width: 12px;
}
.breadcrumbs-container li .breadcrumb:after {
display: inline-block;
}
.breadcrumbs-container li [property="name"] {
display: inline-block;
margin: 0 3px;
}
.breadcrumbs-container li .breadcrumb-penultimate:before {
background: transparent url(/static/media/chevron.f472b7ac.svg) 0 0 no-repeat;
background-size: auto;
content: "";
display: inline-block;
height: 16px;
margin-right: 6px;
transform: rotate(-90deg);
width: 16px;
}
@media (min-width: 63.9385em) {
.breadcrumbs-container li .breadcrumb-penultimate:before {
display: none;
}
}
.breadcrumbs-container li .breadcrumb-penultimate:after {
display: none;
}
@media (min-width: 63.9385em) {
.breadcrumbs-container li .breadcrumb-penultimate:after {
display: inline-block;
}
}
.breadcrumbs-container li:last-child a:link,
.breadcrumbs-container li:last-child a:visited {
color: #212121;
}
ul.language-toggle {
display: flex;
position: relative;
text-align: right;
top: -3px;
}
@media (min-width: 47.9385em) {
ul.language-toggle {
justify-content: flex-end;
text-align: inherit;
top: -2px;
}
}
ul.language-toggle .icon {
margin: 0;
}
ul.language-toggle li {
max-height: 24px;
}
ul.language-toggle .language-icon {
display: inline-block;
min-width: 50px;
width: auto;
}
ul.language-toggle .language-icon.default {
min-width: 100px;
}
@media (min-width: 47.9385em) {
ul.language-toggle .language-icon {
min-width: 100px;
}
}
ul.language-toggle .language-icon:before {
background: transparent url(/static/media/language.9e1dde1b.svg) 0 0 no-repeat;
content: "";
display: inline-block;
height: 29px;
vertical-align: middle;
width: 28px;
}
ul.language-toggle .language-icon:after {
content: "|";
display: inline-block;
margin: 0 6px;
}
ul.language-toggle.single-option {
justify-content: flex-end;
}
ul.language-toggle.single-option .language-icon:after {
display: none;
}
.show-desktop {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
@media (min-width: 47.9385em) {
.show-desktop {
border: inherit;
clip: inherit;
height: inherit;
overflow: inherit;
padding: inherit;
position: inherit !important;
width: inherit;
margin: 0;
}
}
.document-toc {
font-size: 1rem;
padding: 6px 24px;
position: relative;
}
@media (min-width: 47.9385em) {
.document-toc {
padding: 0 24px;
}
}
@media (min-width: 63.9385em) {
.document-toc {
margin-top: 24px;
}
}
.document-toc h2 {
display: none;
}
@media (min-width: 74.9375em) {
.document-toc h2 {
display: block;
font-size: 1.563rem;
}
}
.document-toc .toc-trigger-mobile {
border: 0;
color: #00458b;
font-weight: 400;
padding: 12px 0;
text-align: left;
width: 100%;
}
@media (min-width: 74.9375em) {
.document-toc .toc-trigger-mobile {
display: none;
}
}
.document-toc .toc-trigger-mobile:before {
background: transparent url(/static/media/triangle.e8097649.svg) 0 0 no-repeat;
background-size: 16px;
content: "";
display: inline-block;
height: 16px;
margin-right: 6px;
transform: rotate(90deg);
transform-origin: 50%;
transition: transform 0.2s ease-in;
vertical-align: sub;
width: 16px;
}
@media (min-width: 74.9375em) {
.document-toc .toc-trigger-mobile:before {
display: none;
}
}
.document-toc .toc-trigger-mobile[aria-expanded="true"]:before {
transform: rotate(180deg);
}
.document-toc ul {
background-color: #fff;
border: 2px solid #216b82;
display: none;
list-style: none;
padding: 0 24px;
position: absolute;
top: 65px;
z-index: 300;
}
@media (min-width: 74.9375em) {
.document-toc ul {
background-color: inherit;
border: 0;
display: block;
padding-left: 0;
position: inherit;
top: inherit;
width: auto;
z-index: inherit;
}
}
.document-toc ul li {
line-height: 1.2;
margin: 20px 0;
}
@media (min-width: 74.9375em) {
.document-toc ul li {
margin: 10px 0;
}
}
.document-toc .show-toc {
display: block;
}
.sidebar {
font-size: 0.9rem;
padding: 24px;
}
.sidebar h4 {
font-family: zillaslab, palatino, "Palatino Linotype", serif;
font-size: 1.563rem;
margin-bottom: 24px;
}
.sidebar ol {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
@media (min-width: 47.9385em) {
.sidebar ol ol,
.sidebar ol ul {
padding-left: 12px;
}
}
.sidebar li,
.sidebar summary {
margin-bottom: 12px;
}
.sidebar a {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
.sidebar code {
background-color: transparent;
}
.sidebar summary {
cursor: pointer;
}
.sidebar details {
margin: 24px 0;
}
.sidebar .icon {
background-size: 18px;
height: 18px;
width: 18px;
}
.language-menu {
margin-top: 24px;
}
.language-menu fieldset {
padding: 0;
}
.language-menu legend {
font-size: 1.266rem;
font-weight: 700;
}
@media (min-width: 63.9385em) {
.language-menu legend {
font-size: 1.563rem;
}
}
.language-menu select {
display: inline-block;
margin-right: 6px;
}
@media (min-width: 47.9385em) {
.language-menu select {
display: inline-block;
vertical-align: text-top;
}
}
@media (min-width: 63.9385em) {
.language-menu select {
width: inherit;
}
}
.language-menu .button {
max-width: inherit;
}
.metadata {
background-color: #eee;
margin: 48px 0;
padding: 24px;
}
.metadata-content-container {
margin: 0 auto;
max-width: 1400px;
}
.metadata-content-container a:link,
.metadata-content-container a:visited {
text-decoration: underline;
}
.metadata-content-container .on-github {
margin-bottom: 24px;
}
.metadata-content-container .last-modified-date {
margin-bottom: 0;
}
@keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
to {
opacity: 1;
}
}
@keyframes slow-pulse {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
to {
opacity: 0;
}
}
.breadcrumb-locale-container {
align-items: center;
background-color: #eee;
display: flex;
padding: 12px 24px;
}
@media (min-width: 47.9385em) {
.breadcrumb-locale-container {
margin: 12px 0;
}
}
@media (min-width: 63.9385em) {
.breadcrumb-locale-container {
margin: 24px 0 0;
}
}
.breadcrumb-locale-container .breadcrumbs-container {
flex-basis: 80%;
}
@media (min-width: 47.9385em) {
.breadcrumb-locale-container .breadcrumbs-container {
flex-basis: 55%;
}
}
@media (min-width: 74.9375em) {
.breadcrumb-locale-container .breadcrumbs-container {
flex-basis: 75%;
}
}
.breadcrumb-locale-container .language-toggle {
flex-basis: 20%;
}
@media (min-width: 47.9385em) {
.breadcrumb-locale-container .language-toggle {
flex-basis: 45%;
}
}
@media (min-width: 74.9375em) {
.breadcrumb-locale-container .language-toggle {
flex-basis: 25%;
}
}
.breadcrumb-locale-container .breadcrumbs-container:last-child {
flex-basis: 100%;
}
.breadcrumb-locale-container .language-toggle:only-child {
flex-basis: 100%;
justify-content: flex-end;
}
@media (min-width: 63.9385em) {
.main-content {
margin-top: 24px;
}
}
.main-content.loading-document-placeholder {
animation: slow-pulse 2s infinite normal;
fill: #eee;
min-height: 55vh;
width: 100%;
}
@media (min-width: 63.9385em) {
.main-content.loading-document-placeholder {
grid-column: 1/3;
margin: 24px auto;
max-width: 1400px;
min-height: 75vh;
width: 50%;
}
}
.only-in-en-us span {
font-size: 0.9rem;
}
.main-page-content {
padding: 12px 24px 24px;
}
@media (min-width: 63.9385em) {
.main-page-content {
margin-bottom: 48px;
padding: 0 24px 24px;
}
}
.main-page-content h1 {
word-break: break-word;
}
.main-page-content h2,
.main-page-content h3,
.main-page-content h4,
.main-page-content h5 {
margin-top: 0;
}
.main-page-content dl,
.main-page-content ol,
.main-page-content p,
.main-page-content ul {
max-width: 45rem;
max-width: 85ch;
}
.main-page-content h2 code,
.main-page-content h3 code {
background-color: transparent;
text-decoration: none;
}
.main-page-content a {
text-decoration: underline;
}
.main-page-content a:focus,
.main-page-content a:hover {
text-decoration: none;
}
.main-page-content a:active {
background-color: #00458b;
color: #fff;
}
.main-page-content a:active code {
background-color: transparent;
}
.main-page-content h2 {
margin-bottom: 12px;
}
@media (min-width: 47.9385em) {
.main-page-content h2 {
margin-bottom: 36px;
}
}
.main-page-content h2 a:link,
.main-page-content h2 a:visited {
color: #212121;
}
.main-page-content h2 a:active {
background-color: transparent;
color: #00458b;
}
.main-page-content h3 a:link,
.main-page-content h3 a:visited {
color: #fff;
}
.main-page-content h3 a:active {
background-color: transparent;
color: #fff;
}
.main-page-content h2 a:link,
.main-page-content h2 a:visited,
.main-page-content h3 a:link,
.main-page-content h3 a:visited,
.main-page-content h4 a:link,
.main-page-content h4 a:visited {
text-decoration: none;
}
.main-page-content table {
margin-bottom: 48px;
}
.main-page-content .new,
.main-page-content .page-not-created {
color: #d0454c;
cursor: not-allowed;
}
.main-page-content .inline.optional,
.main-page-content .inline.readonly {
background-color: #eee;
}
@media (min-width: 47.9385em) {
.main-page-content .prev-next,
.main-page-content .prevnext {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
}
}
.main-page-content .prev-next a.button,
.main-page-content .prevnext a.button {
margin-bottom: 12px;
max-width: inherit;
}
@media (min-width: 47.9385em) {
.main-page-content .prev-next a.button,
.main-page-content .prevnext a.button {
margin-bottom: inherit;
}
}
.main-page-content .index {
-webkit-columns: 300px;
columns: 300px;
}
.main-page-content iframe {
border: 0;
}
.archived {
background-color: #fef1b6;
padding: 6px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
}
.archived p {
margin: 0;
}
.interactive {
background-color: #eee;
border: 1px solid #eaf2f4;
color: #212121;
height: 550px;
padding: 10px;
width: 100%;
}
@media (min-width: 63.9385em) {
.interactive {
height: 390px;
}
}
.interactive.interactive-js {
height: 490px;
}
.interactive.taller {
height: 692px;
}
.interactive.shorter {
height: 410px;
}
.interactive.tabbed {
height: 430px;
}
.no-js .interactive {
background-color: #f8f8f8;
height: 240px;
}
.interactive.tabbed-shorter {
height: 375px;
}
.interactive.tabbed-standard {
height: 445px;
}
.interactive.tabbed-taller {
height: 655px;
}
.a11y-nav {
position: absolute;
top: -20em;
width: 100%;
z-index: 300;
}
.a11y-nav a {
background-color: hsla(0, 0%, 100%, 0.9);
font-weight: 700;
left: 0;
padding: 12px;
position: absolute;
right: 0;
text-align: center;
}
.a11y-nav a:focus,
.a11y-nav a:hover {
box-shadow: 3px 3px 5px #eee;
text-decoration: none;
top: 20em;
}
.logo {
display: block;
height: 35px;
width: 170px;
}
@media (min-width: 47.9385em) {
.logo {
height: 55px;
width: 200px;
}
}
@media (min-width: 74.9375em) {
.logo {
flex-basis: 250px;
height: inherit;
}
}
.page-footer-logo {
margin-bottom: 24px;
}
.page-footer {
background-color: #212121;
color: #fff;
padding: 48px 24px;
}
.page-footer .content-container {
margin: 0 auto;
max-width: 1400px;
}
.page-footer a {
color: #fff;
}
.page-footer ul a {
display: block;
padding: 10px 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
}
.page-footer .social {
align-items: center;
display: flex;
}
.page-footer .social h4 {
font-size: 1.25rem;
font-weight: 400;
margin: inherit;
margin-right: 10px;
}
.page-footer .social li {
display: inline-block;
margin-right: 10px;
}
.page-footer .social ul {
-webkit-padding-start: 6px;
padding-inline-start: 6px;
}
.page-footer .social svg {
height: 18px;
vertical-align: sub;
width: 18px;
}
.page-footer .social svg path {
fill: #fff;
}
.page-footer .footer-license {
margin: 10px 0;
}
@media (min-width: 47.9385em) {
.page-footer .footer-license {
border-top: 1px solid #eee;
margin: 50px 0 30px;
padding: 30px 0 0;
}
}
@media (min-width: 47.9385em) {
.page-footer .footer-legal {
padding-bottom: 20px;
}
}
.page-footer .footer-legal li {
display: inline-block;
}
.page-footer .footer-legal a {
display: block;
padding: 0 20px 0 0;
}
@supports (display: grid) {
.content-container {
display: grid;
}
.content-container .footer-legal,
.content-container .footer-license,
.content-container .link-list-mdn,
.content-container .link-list-moz,
.content-container .page-footer-logo {
grid-column: 1/3;
}
.content-container .page-footer-logo {
grid-row: 1/2;
}
.content-container .link-list-mdn {
grid-row: 2/3;
}
@media (min-width: 47.9385em) {
.content-container .link-list-mdn {
grid-column: 1/2;
}
}
.content-container .link-list-moz {
grid-row: 3/4;
}
@media (min-width: 47.9385em) {
.content-container .link-list-moz {
grid-column: 2/3;
grid-row: 2/3;
}
}
.content-container .social-mdn {
grid-column: 1/2;
grid-row: 4/5;
}
.content-container .social-moz {
grid-column: 2/3;
grid-row: 4/5;
}
.content-container .footer-license {
grid-row: 6/7;
}
.content-container .footer-legal {
grid-row: 7/8;
}
}
.dropdown-container {
position: relative;
}
.dropdown-container .dropdown-menu-label {
align-items: center;
border: 0;
color: #212121;
display: flex;
flex-direction: row;
font-weight: 700;
padding: 0;
white-space: nowrap;
}
.dropdown-container .dropdown-menu-items {
background-color: #fff;
display: none;
flex-direction: column;
margin: 12px 0;
min-width: 100%;
}
@media (min-width: 47.9385em) {
.dropdown-container .dropdown-menu-items {
border: 1px solid #8e8e8e;
border-radius: 4px;
box-shadow: 0 2px 8px 0 #c9c9c9;
position: absolute;
right: 0;
z-index: 300;
}
}
.dropdown-container .dropdown-menu-items a,
.dropdown-container .dropdown-menu-items button {
color: #212121;
display: inline-block;
padding: 6px 12px;
text-align: left;
white-space: nowrap;
width: 100%;
}
.dropdown-container .dropdown-menu-items a:focus,
.dropdown-container .dropdown-menu-items a:hover,
.dropdown-container .dropdown-menu-items button:focus,
.dropdown-container .dropdown-menu-items button:hover {
background-color: #1e7f9d;
color: #fff;
text-decoration: none;
}
.dropdown-container .show {
display: block;
}
.auth-container {
margin-top: 12px;
}
@media (min-width: 74.9375em) {
.auth-container {
margin-top: 0;
}
}
.avatar {
border-radius: 50%;
height: 40px;
pointer-events: none;
width: 40px;
}
.avatar-username {
margin-left: 6px;
}
@media (min-width: 74.9375em) {
.avatar-username {
display: none;
}
}
a.signin-link {
color: #212121;
font-weight: 700;
}
ul.main-menu {
background-color: #fff;
box-sizing: border-box;
font-weight: 700;
width: 100%;
}
@media (min-width: 47.9385em) {
ul.main-menu {
display: flex;
justify-content: space-between;
width: inherit;
}
ul.main-menu li:last-child {
flex-basis: inherit;
}
}
@media (min-width: 74.9375em) {
ul.main-menu {
justify-content: space-around;
}
ul.main-menu li {
flex-basis: inherit;
}
}
ul.main-menu li ul {
background-color: #fff;
display: none;
margin: 0;
padding: 6px 0;
}
@media (min-width: 47.9385em) {
ul.main-menu li ul {
border: 1px solid #8e8e8e;
border-radius: 6px;
box-shadow: 0 2px 8px 0 #c9c9c9;
}
}
ul.main-menu li ul a {
display: block;
padding: 6px 16px;
width: 100%;
}
ul.main-menu li ul a:focus,
ul.main-menu li ul a:hover {
background-color: #1e7f9d;
color: #fff;
text-decoration: none;
}
@media (min-width: 47.9385em) {
ul.main-menu li ul a {
width: unset;
}
}
ul.main-menu li ul li {
width: 100%;
}
@media (min-width: 47.9385em) {
ul.main-menu li ul li {
width: unset;
}
}
ul.main-menu .top-level-entry-container {
position: relative;
}
ul.main-menu ul.show {
display: block;
}
@media (min-width: 47.9385em) {
ul.main-menu ul.show {
min-width: 220px;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
position: absolute;
top: 45px;
z-index: 300;
}
}
ul.main-menu .top-level-entry {
background: none;
border: 0;
cursor: pointer;
padding: 10px 10px 15px 0;
text-align: left;
width: 100%;
}
@media (min-width: 47.9385em) {
ul.main-menu .top-level-entry {
padding: 12px 12px 12px 0;
width: unset;
}
}
ul.main-menu .top-level-entry:before {
background: transparent url(/static/media/triangle.e8097649.svg) 0 0 no-repeat;
background-size: 12px;
content: "";
display: inline-block;
font-size: 0.75rem;
height: 12px;
margin-right: 6px;
transform: rotate(90deg);
width: 12px;
}
ul.main-menu .top-level-entry[aria-expanded="true"]:before {
transform: rotate(180deg);
}
ul.main-menu.show {
display: block;
}
@media (min-width: 47.9385em) {
ul.main-menu.show {
display: flex;
}
}
@media (min-width: 47.9385em) {
ul.main-menu.nojs .top-level-entry-container:focus ul,
ul.main-menu.nojs .top-level-entry-container:hover ul {
min-width: 220px;
min-width: -webkit-max-content;
min-width: -moz-max-content;
min-width: max-content;
position: absolute;
top: 45px;
z-index: 300;
display: block;
}
.feedback {
right: 0;
}
}
@media (min-width: 47.9385em) and (min-width: 74.9375em) {
.feedback {
right: inherit;
}
}
@media (min-width: 47.9385em) {
.page-overlay {
display: none;
}
}
.header-search {
background-color: #fff;
}
@media (min-width: 47.9385em) {
.header-search {
height: 40px;
min-width: 80px;
width: inherit;
}
}
.header-search .search-widget {
margin: 24px 0;
position: relative;
width: 100%;
}
@media (min-width: 47.9385em) {
.header-search .search-widget {
margin: 12px 0;
min-width: 80px;
}
}
@media (min-width: 74.9375em) {
.header-search .search-widget {
margin: 0;
}
}
.header-search input.search-input-field {
border: 2px solid #212121;
color: #212121;
min-width: 60px;
padding: 6px 12px;
width: 100%;
}
.header-search .server-error {
color: #95353a;
font-size: 0.9rem;
margin: 0;
}
.header-search .search-results {
background-color: #fff;
border: 2px solid #212121;
border-radius: 0 0 6px 6px;
border-top: 0;
box-shadow: 0 2px 8px 0 #c9c9c9;
left: 0;
position: absolute;
top: 42px;
width: 100%;
z-index: 300;
}
.header-search .search-results .indexing-warning {
color: #b49e35;
}
.header-search .search-results .result-item {
border-bottom: 1px solid #eee;
padding: 6px;
word-break: break-word;
}
.header-search .search-results .result-item.highlight,
.header-search .search-results .result-item:hover {
background-color: #eee;
}
.header-search .search-results .result-item:focus,
.header-search .search-results .result-item:hover {
cursor: pointer;
}
.header-search .search-results div:last-child {
border-bottom: 0;
}
.header-search .search-results mark {
background-color: #e1c542;
}
.header-search .search-results small {
overflow-wrap: break-word;
}
.header-search .search-results a {
text-overflow: ellipsis;
}
.header-search .search-results div.searchindex-error {
color: #95353a;
}
.search-form {
position: relative;
}
input.search-input-field {
border-width: 0;
padding: 6px 36px 6px 12px;
-webkit-appearance: none;
}
input.search-input-field:focus,
input.search-input-field:invalid {
outline: none;
box-shadow: none;
}
.search-button {
background: #fff url(/static/media/search.db31d27c.svg) 0 0 no-repeat;
height: 21px;
padding: 12px;
position: absolute;
right: 10px;
top: 10px;
width: 21px;
}
.main-menu-toggle {
background: none;
padding: 10px 20px;
position: absolute;
right: 0;
top: 24px;
}
.main-menu-toggle:before {
background: transparent url(/static/media/menu-open.c10ee936.svg) 0 0
no-repeat;
background-size: 21px;
content: "";
display: block;
height: 21px;
width: 21px;
}
.main-menu-toggle.expanded:before {
background-image: url(/static/media/menu-close.4a632075.svg);
}
@media (min-width: 47.9385em) {
.main-menu-toggle {
display: none;
}
}
.page-header {
margin: 0 auto;
max-width: 1400px;
padding: 36px 24px 24px;
position: relative;
width: 100%;
}
@media (min-width: 47.9385em) {
.page-header {
display: flex;
flex-flow: column;
padding-bottom: 12px;
}
}
@media (min-width: 74.9375em) {
.page-header {
flex-flow: row;
}
}
.page-header-main {
background-color: #fff;
display: none;
left: 0;
padding: 0 24px 24px;
position: absolute;
top: 90px;
width: 100%;
z-index: 9999;
}
@media (min-width: 47.9385em) {
.page-header-main {
display: block;
grid-template-columns: 70% 30%;
left: inherit;
padding: 0;
position: relative;
top: inherit;
z-index: inherit;
}
@supports (display: grid) {
.page-header-main {
display: grid;
align-items: center;
}
}
}
@media (min-width: 74.9375em) {
.page-header-main {
grid-template-columns: 2fr 1fr 70px;
}
}
.page-header-main .auth-container,
.page-header-main .header-search,
.page-header-main .main-nav {
grid-column: 1/2;
}
.page-header-main .main-nav {
grid-row: 2/3;
}
.page-header-main .header-search {
grid-row: 1/2;
}
.page-header-main .auth-container {
grid-row: 3/4;
}
@media (min-width: 47.9385em) {
.page-header-main .main-nav {
grid-column: 1/3;
grid-row: 1/2;
}
.page-header-main .header-search {
grid-column: 1/2;
grid-row: 2/3;
}
.page-header-main .auth-container {
grid-column: 2/3;
grid-row: 2/3;
justify-self: flex-end;
}
}
@media (min-width: 74.9375em) {
.page-header-main .auth-container,
.page-header-main .header-search,
.page-header-main .main-nav {
grid-row: 1/2;
}
.page-header-main .main-nav {
grid-column: 1/2;
}
.page-header-main .header-search {
grid-column: 2/3;
}
.page-header-main .auth-container {
grid-column: 3/4;
}
}
.show {
display: block;
}
@supports (display: grid) {
.show {
display: grid;
}
}
.site-search {
min-height: 500px;
}
.query-string {
font-style: italic;
}
.page-not-found p {
margin-top: 50px;
}
.page-not-found .fallback-document p {
margin-top: 12px;
}
.page-not-found .fallback-document .fallback-link {
font-size: 1.25rem;
}
.mdn-cta-container {
display: none;
}
@media (min-width: 47.9385em) {
.mdn-cta-container {
background-image: linear-gradient(90deg, #83d0f2, #ebf8e1);
bottom: 0;
display: block;
height: 190px;
padding: 24px;
position: fixed;
width: 100%;
z-index: 9999;
}
.mdn-cta-container .mdn-cta-title {
margin: 0;
position: relative;
}
.mdn-cta-container .mdn-cta-title h2 {
background-color: #212121;
color: #fff;
display: inline-block;
font-size: 1.953rem;
font-weight: 400;
padding: 0 12px;
}
.mdn-cta-container .mdn-cta-copy {
margin: 12px 0;
}
}
@media (min-width: 47.9385em) and (min-width: 74.9375em) {
.mdn-cta-container .mdn-cta-copy {
margin-bottom: 0;
}
}
@media (min-width: 47.9385em) {
.mdn-cta-container .button {
border: 2px solid #212121;
}
.mdn-cta-container .button:active,
.mdn-cta-container .button:focus,
.mdn-cta-container .button:hover {
border: 2px solid #212121;
background-color: #212121;
color: #fff;
}
}
@media (min-width: 47.9385em) {
.mdn-cta-container .mdn-cta-close {
background-color: transparent;
border: 0;
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
}
}
@media (min-width: 63.9385em) {
.mdn-cta-container {
height: 150px;
padding: 0 24px;
}
.mdn-cta-container .mdn-cta-content {
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
justify-content: center;
margin: 0 auto;
max-width: 1400px;
}
.mdn-cta-container .mdn-cta-content-container {
display: flex;
flex-basis: 80%;
flex-flow: column;
}
}
.mdn-cta-container .mdn-cta-button-container {
position: relative;
}
@media (min-width: 63.9385em) {
.mdn-cta-container .mdn-cta-button-container {
flex-basis: 20%;
margin: 0;
}
}
/*# sourceMappingURL=main.519faef4.chunk.css.map */
:not(pre) > code[class*="language-"] {
background: #f5f2f0;
padding: 0.1em;
border-radius: 0.3em;
white-space: normal;
}
.token.punctuation {
color: #999;
}
.token.constant,
.token.number {
color: #905;
}
.token.operator {
background: rgba(255, 255, 255, 0.5);
}
.token.class-name {
color: #dd4a68;
}
*,
:after,
:before {
box-sizing: border-box;
}
ul[class] {
padding: 0;
margin: 0;
list-style: none;
}
body,
dd,
dl,
h1,
h2,
h4,
li,
p {
margin: 0;
}
body {
min-height: 100vh;
scroll-behavior: smooth;
text-rendering: optimizeSpeed;
font-family: arial, x-locale-body, sans-serif;
letter-spacing: -0.0027777778rem;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 100%;
line-height: 1.75;
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
article > * + * {
margin-top: 1em;
}
button,
input,
select {
font: inherit;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
html {
background-color: #fff;
box-sizing: border-box;
color: #212121;
}
@font-face {
font-display: swap;
font-family: zillaslab;
font-style: normal;
font-weight: 700;
src: url(/static/media/ZillaSlab-Bold.subset.0beac26b.woff2) format("woff2"),
url(/static/media/ZillaSlab-Bold.subset.72026b3c.woff) format("woff");
}
@font-face {
font-display: swap;
font-family: zillaslab;
font-style: normal;
font-weight: 400;
src: url(/static/media/ZillaSlab-Regular.subset.ce3a756d.woff2)
format("woff2"),
url(/static/media/ZillaSlab-Regular.subset.7e4c05c9.woff) format("woff");
}
h1,
h2,
h3 {
font-family: zillaslab, palatino, "Palatino Linotype", serif;
line-height: 1.2;
}
h3 {
font-size: 1.424rem;
background-color: #212121;
color: #fff;
font-weight: 400;
max-width: -webkit-max-content;
max-width: -moz-max-content;
max-width: max-content;
padding: 0 6px;
margin: 24px 0;
}
h1 {
font-size: 1.802rem;
}
@media (min-width: 47.9385em) {
h1 {
font-size: 3.052rem;
}
}
h2 {
font-size: 1.602rem;
}
@media (min-width: 47.9385em) {
h2 {
font-size: 2.441rem;
}
}
@media (min-width: 47.9385em) {
h3 {
font-size: 1.953rem;
}
}
h4 {
font-size: 1.266r