Skip to content

Instantly share code, notes, and snippets.

@peterbe
Created August 29, 2019 02:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save peterbe/a0f154da0a1e02e9e6a860933de1b306 to your computer and use it in GitHub Desktop.
Save peterbe/a0f154da0a1e02e9e6a860933de1b306 to your computer and use it in GitHub Desktop.
@charset "UTF-8";
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
line-height: 1.4;
margin: 20px auto;
padding: 0 10px;
color: #363636;
background: #fff;
text-rendering: optimizeLegibility;
}
button,
input,
textarea {
-webkit-transition: background-color 0.1s linear, border-color 0.1s linear,
color 0.1s linear, box-shadow 0.1s linear, -webkit-transform 0.1s ease;
transition: background-color 0.1s linear, border-color 0.1s linear,
color 0.1s linear, box-shadow 0.1s linear, -webkit-transform 0.1s ease;
transition: background-color 0.1s linear, border-color 0.1s linear,
color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease;
transition: background-color 0.1s linear, border-color 0.1s linear,
color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease,
-webkit-transform 0.1s ease;
}
h1 {
font-size: 2.8em;
margin-top: 0;
}
h1,
h2 {
font-weight: 700;
}
h2 {
font-size: 2.3rem;
}
h3 {
font-size: 1.4rem;
}
h4 {
font-size: 1.2rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong {
color: #000;
}
b,
h2,
h3,
h4,
h5,
h6,
strong,
th {
font-weight: 600;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Zilla Slab, Arial, sans-serif;
}
blockquote {
border-left: 4px solid rgba(0, 150, 191, 0.67);
margin: 1.5em 0;
padding: 0.5em 1em;
font-style: italic;
}
blockquote > footer {
margin-top: 10px;
font-style: normal;
}
address,
blockquote cite {
font-style: normal;
}
a[href^="mailto"]:before {
content: "📧 ";
}
a[href^="tel"]:before {
content: "📞 ";
}
a[href^="sms"]:before {
content: "💬 ";
}
button,
input[type="button"],
input[type="checkbox"],
input[type="submit"] {
cursor: pointer;
}
input:not([type="checkbox"]):not([type="radio"]),
select {
display: block;
}
button,
input,
select,
textarea {
color: #000;
background-color: #efefef;
font-family: inherit;
font-size: inherit;
margin-right: 6px;
margin-bottom: 6px;
padding: 10px;
border: none;
border-radius: 6px;
outline: none;
}
button,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
-webkit-appearance: none;
}
textarea {
margin-right: 0;
width: 100%;
box-sizing: border-box;
resize: vertical;
}
button,
input[type="button"],
input[type="submit"] {
padding-right: 30px;
padding-left: 30px;
}
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
background: #ddd;
}
button:focus,
input:focus,
select:focus,
textarea:focus {
box-shadow: 0 0 0 2px rgba(0, 150, 191, 0.67);
}
button:active,
input[type="button"]:active,
input[type="checkbox"]:active,
input[type="radio"]:active,
input[type="submit"]:active {
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
cursor: not-allowed;
opacity: 0.5;
}
::-webkit-input-placeholder {
color: #949494;
}
::-moz-placeholder {
color: #949494;
}
:-ms-input-placeholder {
color: #949494;
}
::-ms-input-placeholder {
color: #949494;
}
::placeholder {
color: #949494;
}
a {
text-decoration: none;
color: #0076d1;
}
a:hover {
text-decoration: underline;
}
code,
kbd {
background: #efefef;
color: #000;
padding: 5px;
border-radius: 6px;
}
pre > code {
padding: 10px;
display: block;
overflow-x: auto;
}
img {
max-width: 100%;
}
hr {
border: none;
border-top: 1px solid #dbdbdb;
}
table {
border-collapse: collapse;
margin-bottom: 10px;
width: 100%;
}
td,
th {
padding: 6px;
text-align: left;
}
th {
border-bottom: 1px solid #dbdbdb;
}
tbody tr:nth-child(2n) {
background-color: #efefef;
}
::-webkit-scrollbar {
height: 10px;
width: 10px;
}
::-webkit-scrollbar-track {
background: #efefef;
border-radius: 6px;
}
::-webkit-scrollbar-thumb {
background: #d5d5d5;
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: #c4c4c4;
}
* {
box-sizing: border-box;
}
h1.page-title {
background-color: #f5f9fa;
padding: 10px;
}
div.sidebar {
float: left;
max-width: 300px;
}
div.sidebar h3,
div.sidebar h4,
div.sidebar h5,
div.sidebar h6 {
margin-top: 0;
}
div.sidebar ul {
padding-left: 0;
margin-bottom: 50px;
}
div.sidebar ul li {
list-style: none;
margin-top: 20px;
}
div.content {
margin-left: 22.75%;
}
div.content h2:before {
border-top: 3px solid #3d7e9a;
content: "";
display: block;
margin: 40px 0;
width: 100%;
}
div.content h3 {
padding: 2px 4px 2px 40px;
background-color: #333;
color: #fff;
font-weight: 400;
line-height: 1.25;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
div.content .interactive-example {
box-sizing: border-box;
background-color: #f5f9fa;
color: #333;
padding: 10px;
border: 1px solid #eaf2f4;
width: 100%;
max-width: 70rem;
}
div.content .live-sample-frame {
border: 1px solid #3d7e9a;
border-left-width: 5px;
padding: 10px;
}
div.content .live-sample-frame,
div.content dl,
div.content ol,
div.content p,
div.content pre,
div.content ul {
max-width: 42rem;
}
div.content .bc-github-link {
white-space: pre-line;
float: right;
display: inline-block;
}
div.content .external-icon:not([href^="https://mdn.mozillademos.org"]):not(.ignore-external) {
white-space: pre-line;
}
div.content .external-icon:not([href^="https://mdn.mozillademos.org"]):not(.ignore-external):after,div.content .external-icon:not([href^="https://mdn.mozillademos.org"]):not(.ignore-external):before {
background-image: url(/bcd/general/external-link.svg);
background-size: 12px;
width: 12px;
height: 20px;
margin-top: 3px;
margin-right: 3px;
vertical-align: text-top;
}
div.content .external-icon:not([href^="https://mdn.mozillademos.org"]):not(.ignore-external):before {
display: inline-block;
content: "";
background-repeat: no-repeat;
}
div.content .bc-table {
width: 100%;
table-layout: fixed;
border: none;
border-collapse: separate;
border-spacing: 0;
background-color: #eaeef2;
background-color: rgba(212, 221, 228, 0.5);
margin-bottom: 0;
}
div.content .bc-table th {
background-color: transparent;
overflow: hidden;
padding: 5px 3px 5px 6px;
}
div.content .bc-table tr {
position: relative;
border-bottom: 0 solid transparent;
}
div.content .bc-table thead td {
border-top: 0;
border-right: 2px solid #222;
border-left: 0;
}
div.content .bc-table tbody th,
div.content .bc-table thead td {
overflow: hidden;
}
div.content .bc-table td,
div.content .bc-table th {
position: relative;
padding: 5px 3px;
border-color: #222;
border-top: 1px solid #222;
border-right: 0;
border-bottom: 0 solid transparent;
border-left: 1px solid #222;
text-align: center;
}
div.content .bc-table tbody th {
border-right: 2px solid #222;
border-left: 0;
text-align: left;
}
div.content .bc-table,
div.content .bc-table tbody,
div.content .bc-table td,
div.content .bc-table th,
div.content .bc-table thead,
div.content .bc-table tr {
box-sizing: border-box;
}
div.content .bc-table-web td:nth-child(8),
div.content .bc-table-web th:nth-child(8) {
border-left: 2px solid #222;
}
div.content .bc-table tbody th + td,
div.content .bc-table thead td + th {
border-left: 0;
}
div.content .bc-table-web tbody td,
div.content .bc-table-web thead th {
width: 7.69231%;
}
div.content .bc-table-web tbody th,
div.content .bc-table-web thead td {
width: 200px;
}
div.content .bc-table tbody td[tabindex],
div.content .no-js .bc-table tbody td {
padding-top: 6px;
padding-bottom: 12px;
}
div.content .bc-table td[tabindex] {
cursor: pointer;
}
div.content .bc-table tbody tr:nth-child(2n) {
background-color: #eaeef2;
}
div.content .bc-table tbody th code {
word-wrap: break-word;
width: 100%;
position: relative;
display: inline-block;
}
div.content .bc-table .bc-platforms th {
width: auto;
padding: 5px 0 2px;
border-top: 0;
border-bottom: 2px solid #222;
border-left: 2px solid #222;
font-size: 28px;
font-size: 1.55556rem;
}
div.content .bc-table .bc-platforms span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
}
div.content .bc-table .bc-platforms .bc-platform-desktop:before {
background-image: url(/bcd/platforms/desktop.svg);
background-size: 24px;
width: 24px;
height: 24px;
}
div.content .bc-table .bc-platforms .bc-platform-mobile:before {
background-image: url(/bcd/platforms/mobile.svg);
background-size: 16px;
width: 16px;
height: 32px;
margin-top: 0;
}
div.content .bc-table .bc-platforms td + th {
border-left: 0;
}
div.content .bc-table .bc-platforms th:before {
background-size: 24px;
margin-top: 10px;
width: 24px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-chrome:before,
div.content .bc-browsers .bc-head-icon-chrome_android:before,
div.content .bc-browsers .bc-head-icon-edge:before,
div.content .bc-browsers .bc-head-icon-edge_mobile:before,
div.content .bc-browsers .bc-head-icon-firefox:before,
div.content .bc-browsers .bc-head-icon-firefox_android:before,
div.content .bc-browsers .bc-head-icon-ie:before,
div.content .bc-browsers .bc-head-icon-nodejs:before,
div.content .bc-browsers .bc-head-icon-opera:before,
div.content .bc-browsers .bc-head-icon-opera_android:before,
div.content .bc-browsers .bc-head-icon-safari:before,
div.content .bc-browsers .bc-head-icon-safari_ios:before,
div.content .bc-browsers .bc-head-icon-samsunginternet_android:before,
div.content .bc-browsers .bc-head-icon-webview_android:before,
div.content .bc-platforms .bc-platform-desktop:before,
div.content .bc-platforms .bc-platform-mobile:before,
div.content .bc-platforms .bc-platform-server:before,
div.content .bc-table .bc-platforms th:before,
div.content .ic-altname:before,
div.content .ic-deprecated:before,
div.content .ic-disabled:before,
div.content .ic-experimental:before,
div.content .ic-footnote:before,
div.content .ic-history:before,
div.content .ic-non-standard:before {
display: inline-block;
content: "";
background-repeat: no-repeat;
}
div.content .bc-table .bc-browsers th {
border-top: 0;
padding: 3px 0;
height: 200px;
vertical-align: bottom;
font-size: 22px;
font-size: 1.22222rem;
}
div.content .bc-table .bc-browsers td + th {
border-left: 0;
}
div.content .bc-table .bc-browsers .bc-head-txt-label {
display: inline-block;
bottom: 0;
margin: 0 0 20px 10px;
padding: 0;
width: 20px;
height: 20px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left;
transform-origin: left;
font-size: 20px;
font-size: 1.11111rem;
text-align: left;
white-space: nowrap;
}
div.content .bc-table .bc-browsers .bc-head-txt-label:before {
position: absolute;
left: -28px;
display: inline-block;
content: "";
background-repeat: no-repeat;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
div.content .bc-browsers .bc-head-icon-chrome:before,
div.content .bc-browsers .bc-head-icon-chrome_android:before {
background-image: url(/bcd/browsers/chrome.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-edge:before,
div.content .bc-browsers .bc-head-icon-edge_mobile:before {
background-image: url(/bcd/browsers/edge.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-firefox:before,
div.content .bc-browsers .bc-head-icon-firefox_android:before {
background-image: url(/bcd/browsers/firefox.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-ie:before {
background-image: url(/bcd/browsers/internet-explorer.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-opera:before,
div.content .bc-browsers .bc-head-icon-opera_android:before {
background-image: url(/bcd/browsers/opera.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-safari:before,
div.content .bc-browsers .bc-head-icon-safari_ios:before {
background-image: url(/bcd/browsers/safari.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-browsers .bc-head-icon-webview_android:before {
background-image: url(/bcd/platforms/android.svg);
background-size: 18px;
width: 18px;
height: 22px;
left: -23px;
}
div.content .bc-browsers .bc-head-icon-samsunginternet_android:before {
background-image: url(/bcd/browsers/samsung-internet.svg);
background-size: 20px;
width: 20px;
height: 24px;
}
div.content .bc-supports-yes {
background-color: #e4f8e1;
}
div.content .bc-supports-no,
div.content .bc-supports-partial,
div.content .bc-supports-unknown,
div.content .bc-supports-yes,
div.content .bc-table .bc-history {
color: #222;
}
div.content .bc-supports-no {
background-color: #f8e1e1;
background-image: -webkit-linear-gradient(
top left,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 1px,
transparent 0,
transparent 67px,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 73px,
transparent 0,
transparent 138px,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 144px,
transparent 0
),
-webkit-linear-gradient(top right, rgba(230, 100, 101, 0.2) 0, rgba(
230,
100,
101,
0.2
)
1px, transparent 0, transparent 67px, rgba(230, 100, 101, 0.2) 0, rgba(
230,
100,
101,
0.2
)
73px, transparent 0, transparent 138px, rgba(230, 100, 101, 0.2) 0, rgba(
230,
100,
101,
0.2
)
144px, transparent 0);
background-image: linear-gradient(
to bottom right,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 1px,
transparent 0,
transparent 67px,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 73px,
transparent 0,
transparent 138px,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 144px,
transparent 0
),
linear-gradient(
to bottom left,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 1px,
transparent 0,
transparent 67px,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 73px,
transparent 0,
transparent 138px,
rgba(230, 100, 101, 0.2) 0,
rgba(230, 100, 101, 0.2) 144px,
transparent 0
);
background-size: 100px 100px, 100px 100px;
background-position: 50% 50%, 50% 50%;
background-repeat: no-repeat;
}
div.content .bc-supports-unknown {
background-color: #eee;
}
div.content .bc-browser-name {
display: none;
}
div.content .bc-table abbr {
text-decoration: none;
}
div.content abbr[title] {
cursor: help;
}
div.content .bc-table .bc-icons {
position: relative;
z-index: 12;
display: inline-block;
}
div.content .bc-table .bc-icons abbr {
margin: 0 2px;
}
div.content .bc-table button.bc-history-link {
background-color: transparent;
border-radius: 0;
box-shadow: none;
color: #333;
padding: 0;
position: absolute;
bottom: 0;
right: -6px;
z-index: 11;
display: block;
margin-bottom: 0;
width: 100%;
height: 11px;
clear: both;
text-align: center;
font-size: 12px;
font-size: 0.66667rem;
border: none;
border-top: 1px solid rgba(34, 34, 34, 0.3);
}
div.content .bc-table button.bc-history-link i {
position: relative;
top: -4px;
}
div.content .bc-table button.bc-history-link:hover {
background-color: #83d0f2 !important;
}
div.content .bc-table button.bc-history-link:focus {
outline: 3px solid #83d0f2;
outline-offset: -3px;
}
div.content .active .bc-history-link {
z-index: 21;
}
div.content .active .bc-history-link,
div.content td[tabindex]:focus .bc-history-link,
div.content td[tabindex]:hover .bc-history-link {
background-color: #222;
border-top: 1px solid #222;
}
div.content .bc-history-link-inverse {
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
div.content .bc-history dd,
div.content .bc-history dt {
margin-top: 30px;
}
div.content .bc-history dd + dd,
div.content .bc-history dl > dt:first-child,
div.content .bc-history dl > dt:first-child + dd {
margin-top: 0;
}
div.content .bc-history dt {
float: left;
clear: left;
max-width: 120px;
margin-left: -140px;
margin-right: 10px;
}
div.content .bc-history dl {
text-align: left;
margin: 20px;
padding-left: 350px;
max-width: 85%;
}
div.content .bc-history dd.padded-note {
min-height: 25px;
}
div.content .bc-history dd {
min-height: 1.2em;
margin-bottom: 0;
padding-top: 4px;
padding-left: 0;
margin-left: 10px;
padding-bottom: 10px;
font-weight: 400;
}
div.content .ic-footnote:before {
background-image: url(/bcd/browser-compat-general/asterisk.svg);
background-size: 10px;
width: 10px;
height: 10px;
}
div.content .ic-history:before {
background-image: url(/bcd/arrows/caret-down.svg);
background-size: 9px;
width: 9px;
height: 13px;
}
div.content .active.bc-supports-no .ic-history:before,
div.content .active.bc-supports-yes .ic-history:before,
div.content td[tabindex].bc-supports-no:focus .ic-history:before,
div.content td[tabindex].bc-supports-no:hover .ic-history:before,
div.content td[tabindex].bc-supports-yes:focus .ic-history:before,
div.content td[tabindex].bc-supports-yes:hover .ic-history:before {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyOCIgZmlsbD0iI2Y4ZTFlMSI+PHBhdGggZD0iTTE2IDExYS45OS45OSAwIDAgMS0uMjk3LjcwM2wtNyA3QzguNTE2IDE4Ljg5IDguMjY1IDE5IDggMTlzLS41MTYtLjEwOS0uNzAzLS4yOTdsLTctN0EuOTk2Ljk5NiAwIDAgMSAwIDExYzAtLjU0Ny40NTMtMSAxLTFoMTRjLjU0NyAwIDEgLjQ1MyAxIDF6Ii8+PC9zdmc+");
}
div.content .ic-deprecated:before {
background-image: url(/bcd/emojis/thumbs-down.svg);
background-size: 16px;
width: 16px;
height: 20px;
}
div.content .ic-non-standard:before {
background-image: url(/bcd/notifications/exclamation-triangle.svg);
background-size: 17px;
width: 17px;
height: 20px;
}
div.content .ic-experimental:before {
background-image: url(/bcd/general/flask.svg);
background-size: 16px;
width: 16px;
height: 20px;
}
div.content .ic-prefix:before {
content: "-x-";
text-decoration: none;
font-size: 18px;
font-size: 1rem;
line-height: 1;
font-family: sans-serif;
font-style: normal;
}
div.content .ic-disabled:before {
background-image: url(/bcd/general/flag.svg);
background-size: 24px;
width: 24px;
height: 24px;
}
div.content .ic-altname:before {
background-image: url(/bcd/browser-compat-general/alternate.svg);
background-size: 12px;
width: 12px;
height: 22px;
}
div.content .offscreen,
div.content .only-icon span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
div.content .bc-supports {
display: inline-block;
position: relative;
border: 1px solid #222;
padding: 3px;
min-width: 120px;
text-align: center;
}
div.content .bc-notes {
display: none;
}
div.content .bc-legend {
margin-bottom: 20px;
margin-top: 20px;
}
div.content .bc-legend dl {
display: grid;
grid-template-columns: 30px 1fr;
}
div.content .bc-legend dt {
display: block;
margin: 0 0 5px;
}
div.content .bc-legend .bc-supports {
display: inline-block;
min-width: 30px;
margin-bottom: 25px;
}
div.content .bc-legend dd {
display: block;
margin: 0 10px 5px;
padding-left: 20px;
}
@media (min-width: 63.9385em) {
div.content .bc-icons {
float: right;
}
}
@media (max-width: 47.9375em) {
div.content .bc-table thead {
display: none;
}
div.content .bc-table tbody td {
position: relative;
min-width: 100%;
width: 100%;
max-width: 100%;
display: block;
box-sizing: border-box;
box-shadow: inset 220px 0 0 0 #eaeff2;
border-top: 1px solid #222;
border-left: 0;
padding-left: 250px;
padding-right: 10px;
text-align: left;
}
div.content .bc-table-web td:nth-child(8),
div.content .bc-table-web th:nth-child(8) {
border-top: 2px solid #222;
border-left: none;
}
div.content .bc-table tbody th {
width: 100%;
max-width: 100%;
display: block;
border-right: 0;
border-bottom: 1px solid #222;
padding-top: 20px;
padding-bottom: 0;
}
div.content .bc-table tbody td[tabindex] {
padding-bottom: 20px;
}
div.content .bc-browser-name {
display: block;
position: absolute;
top: 8px;
left: 0;
padding-left: 6px;
height: 25px;
width: 220px;
color: #333;
white-space: nowrap;
}
div.content .bc-history-link {
width: calc(100% - 219px);
height: 20px;
margin-top: -20px;
font-size: 16px;
font-size: 0.88889rem;
}
div.content .bc-history {
display: none;
}
div.content .bc-table .bc-history {
padding-left: 0;
}
div.content .bc-history dt {
margin-top: 10px;
margin-left: 0;
margin-bottom: 10px;
}
div.content .bc-history dd {
clear: left;
min-height: 0;
}
div.content td.bc-supports-no {
background-position: calc(50% + 110px) 50%, calc(50% + 110px) 50%;
}
div.content .bc-notes {
display: block;
margin-top: 10px;
}
}
@media (min-width: 47.9385em) {
div.content .bc-legend dl {
grid-template-columns: 30px 1fr 30px 1fr;
}
}
/*# sourceMappingURL=main.7365d324.chunk.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment