1679 lines
45 KiB
CSS
1679 lines
45 KiB
CSS
:root {
|
|
--color-bg: #fff;
|
|
--color-text: #333;
|
|
--theme-color: #0b85d7;
|
|
--color-mono-min: var(--color-bg);
|
|
--color-mono-1: color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%);
|
|
--color-mono-2: color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%);
|
|
--color-mono-3: color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%);
|
|
--color-mono-4: color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%);
|
|
--color-mono-5: color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%);
|
|
--color-mono-6: color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%);
|
|
--color-mono-7: color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%);
|
|
--color-mono-8: color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%);
|
|
--color-mono-9: color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%);
|
|
--color-mono-max: var(--color-text);
|
|
--theme-color-1: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%);
|
|
--theme-color-2: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%);
|
|
--theme-color-3: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%);
|
|
--theme-color-4: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%);
|
|
--theme-color-5: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%);
|
|
--theme-color-6: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%);
|
|
--theme-color-7: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%);
|
|
--theme-color-8: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%);
|
|
--font-family: system-ui, sans-serif;
|
|
--font-family-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
'Noto Color Emoji';
|
|
--font-family-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
|
|
'DejaVu Sans Mono', monospace;
|
|
--font-size: 16px;
|
|
--font-size-xxxl: calc(var(--font-size-xxl) * var(--modular-scale));
|
|
--font-size-xxl: calc(var(--font-size-xl) * var(--modular-scale));
|
|
--font-size-xl: calc(var(--font-size-l) * var(--modular-scale));
|
|
--font-size-l: calc(1rem * var(--modular-scale));
|
|
--font-size-m: var(--font-size);
|
|
--font-size-s: max(13px, calc(var(--font-size-m) / var(--modular-scale)));
|
|
--font-size-xs: max(11px, calc(var(--font-size-s) / var(--modular-scale)));
|
|
--font-size-emoji: 1.2em;
|
|
--font-size-mono: 0.875rem;
|
|
--font-weight: 350;
|
|
--font-weight-mono: var(--font-weight);
|
|
--line-height: 1.6;
|
|
--modular-scale: 1.25;
|
|
--border-color: var(--color-mono-2);
|
|
--border-radius: 3px;
|
|
--duration-slow: 500ms;
|
|
--duration-medium: 250ms;
|
|
--duration-fast: 150ms;
|
|
--margin-block: 1rem;
|
|
--scroll-padding-top: var(--margin-block);
|
|
--content-margin-inline: 45px;
|
|
--content-max-width: 72ch;
|
|
--cover-bg: unset;
|
|
--cover-bg-brightness: 1;
|
|
--cover-bg-overlay: radial-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
|
|
--cover-color: ;
|
|
--cover-title-color: var(--strong-color);
|
|
--cover-title-font: var(--font-size-xxxl) var(--font-family);
|
|
--blockquote-bg: ;
|
|
--blockquote-border-color: var(--theme-color);
|
|
--blockquote-border-radius: 0;
|
|
--blockquote-border-width: 0 0 0 4px;
|
|
--blockquote-color: var(--color-mono-6);
|
|
--blockquote-padding: 0 0 0 1.5em;
|
|
--button-bg: var(--theme-color);
|
|
--button-border-radius: 100vh;
|
|
--button-color: #fff;
|
|
--button-padding: 0.3em 1.25em 0.315em 1.25em;
|
|
--callout-bg: var(--color-mono-1);
|
|
--callout-border-color: ;
|
|
--callout-border-radius: var(--border-radius);
|
|
--callout-border-width: 1px;
|
|
--callout-charm-bg: ;
|
|
--callout-charm-border-radius: 100vh;
|
|
--callout-charm-color: #fff;
|
|
--callout-charm-content: '';
|
|
--callout-charm-font-size: 16px;
|
|
--callout-charm-inset: 1em auto auto 15px;
|
|
--callout-charm-size: 26px;
|
|
--callout-charm-translate: 0;
|
|
--callout-color: ;
|
|
--callout-padding: 1em 1em 1em calc(25px + var(--callout-charm-size));
|
|
--code-bg: var(--color-mono-1);
|
|
--code-color: ;
|
|
--codeblock-bg: var(--code-bg);
|
|
--codeblock-color: var(--code-color);
|
|
--codeblock-comment: #6e8090;
|
|
--codeblock-function: #dd4a68;
|
|
--codeblock-important: #c94922;
|
|
--codeblock-keyword: #07a;
|
|
--codeblock-operator: #a67f59;
|
|
--codeblock-property: #c08b30;
|
|
--codeblock-punctuation: #999;
|
|
--codeblock-selector: #690;
|
|
--codeblock-tag: #905;
|
|
--codeblock-variable: #e90;
|
|
--form-element-bg: var(--color-mono-1);
|
|
--form-element-border-color: var(--color-mono-3);
|
|
--form-element-border-radius: var(--border-radius);
|
|
--form-element-color: ;
|
|
--heading-color: var(--strong-color);
|
|
--heading-font-weight: 600;
|
|
--heading-line-height: calc(2ex + 5px);
|
|
--kbd-bg: var(--color-mono-1);
|
|
--kbd-border: 1px solid var(--color-mono-3);
|
|
--kbd-border-radius: 4px;
|
|
--kbd-color: var(--color-mono-5);
|
|
--kbd-alt-bg: var(--color-mono-1);
|
|
--kbd-alt-border: none;
|
|
--kbd-alt-border-radius: var(--kbd-border-radius);
|
|
--kbd-alt-box-shadow: 0 2px 0 1px var(--color-mono-3);
|
|
--kbd-alt-color: var(--kbd-color);
|
|
--link-color: ;
|
|
--link-color-hover: var(--theme-color);
|
|
--link-underline-color: var(--theme-color);
|
|
--link-underline-color-hover: var(--link-underline-color);
|
|
--link-underline-thickness: 2px;
|
|
--link-underline-thickness-hover: var(--link-underline-thickness);
|
|
--mark-bg: #fef08a;
|
|
--mark-color: ;
|
|
--strong-color: color-mix(in srgb, var(--color-text), #000 35%);
|
|
--strong-font-weight: 600;
|
|
--table-row-alt-bg: var(--color-mono-1);
|
|
--navbar-font-size: var(--font-size);
|
|
--navbar-height: 4em;
|
|
--navbar-link-color: ;
|
|
--navbar-link-color-active: var(--theme-color);
|
|
--navbar-drop-link-spacing: 0.5em;
|
|
--sidebar-bg: var(--color-bg);
|
|
--sidebar-border-color: var(--border-color);
|
|
--sidebar-color: ;
|
|
--sidebar-font-size: var(--font-size);
|
|
--sidebar-group-border: ;
|
|
--sidebar-group-spacing: ;
|
|
--sidebar-group-title-border: ;
|
|
--sidebar-group-title-color: var(--strong-color);
|
|
--sidebar-group-title-font-size: ;
|
|
--sidebar-group-title-font-weight: var(--strong-font-weight);
|
|
--sidebar-group-title-spacing: ;
|
|
--sidebar-link-color: var(--color-text);
|
|
--sidebar-link-color-active: var(--theme-color);
|
|
--sidebar-link-spacing: 0.75em;
|
|
--sidebar-name-color: var(--strong-color);
|
|
--sidebar-name-font-family: var(--font-family);
|
|
--sidebar-name-font-size: var(--font-size-xl);
|
|
--sidebar-name-font-weight: var(--strong-font-weight);
|
|
--sidebar-name-margin: 1.5rem 20px;
|
|
--sidebar-pagelink-bg: ;
|
|
--sidebar-pagelink-bg-collapsed: ;
|
|
--sidebar-pagelink-bg-empty: ;
|
|
--sidebar-pagelink-bg-expanded: ;
|
|
--sidebar-toggle-alignment: center;
|
|
--sidebar-toggle-bg: var(--color-mono-2);
|
|
--sidebar-toggle-bg-hover: var(--button-bg);
|
|
--sidebar-toggle-color: var(--color-mono-4);
|
|
--sidebar-toggle-color-hover: var(--button-color);
|
|
--sidebar-toggle-height: 80px;
|
|
--sidebar-toggle-margin-block: 20px;
|
|
--sidebar-toggle-width: 22px;
|
|
--sidebar-width: 280px;
|
|
}
|
|
.callout.caution {
|
|
--callout-bg: #fef2f2;
|
|
--callout-border-color: #fecaca;
|
|
--callout-charm-bg: #ef4444 center no-repeat
|
|
url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="%23fff" viewBox="0 0 16 16"><path d="M10 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2M10 1.6c0-.4-.2-.7-.4-.9C9.2.3 8.6 0 8 0S6.8.2 6.5.6c-.3.3-.5.6-.5 1v.3l.8 7.7c.1.3.2.5.4.6.2.2.5.3.8.3s.6-.1.8-.2c.2-.2.3-.4.4-.7l.8-7.7z"/></svg>');
|
|
}
|
|
.callout.important {
|
|
--callout-bg: #f5f3ff;
|
|
--callout-border-color: #ddd6fe;
|
|
--callout-charm-bg: #8b5cf6 center no-repeat
|
|
url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23fff" viewBox="0 0 16 16"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25m0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41z"/></svg>');
|
|
}
|
|
.callout.note {
|
|
--callout-bg: var(--theme-color-1);
|
|
--callout-border-color: var(--theme-color-2);
|
|
--callout-charm-bg: var(--theme-color) center no-repeat
|
|
url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23fff" viewBox="0 0 16 16"><path d="M9.1 0c1.1 0 1.6.7 1.6 1.6 0 1-.9 2-2.1 2C7.6 3.6 7 3 7 2c0-.9.7-2 2.1-2M5.8 16c-.8 0-1.4-.5-.8-2.8l.9-4.1q.3-.9 0-.9c-.2 0-1.3.4-2 .9l-.4-.7c2.1-1.8 4.4-2.8 5.4-2.8.9 0 1 1 .6 2.6l-1.1 4.3c-.2.7-.1 1 .1 1s1.1-.3 1.9-1l.5.7c-2 2-4.2 2.8-5.1 2.8"/></svg>');
|
|
}
|
|
.callout.tip {
|
|
--callout-bg: #f0fdfa;
|
|
--callout-border-color: #99f6e4;
|
|
--callout-charm-bg: #14b8a6 center no-repeat
|
|
url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23fff" viewBox="0 0 16 16"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a9 9 0 0 0-.542-.68q-.126-.149-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259q-.142.172-.268.319c-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848q.113-.133.213-.253c.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75M5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5M6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75"/></svg>');
|
|
}
|
|
.callout.warning {
|
|
--callout-bg: #fffbeb;
|
|
--callout-border-color: #fde68a;
|
|
--callout-charm-bg: #fcd34d center no-repeat
|
|
url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="%23a16207" viewBox="0 0 16 16"><path d="M10 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2M10 1.6c0-.4-.2-.7-.4-.9C9.2.3 8.6 0 8 0S6.8.2 6.5.6c-.3.3-.5.6-.5 1v.3l.8 7.7c.1.3.2.5.4.6.2.2.5.3.8.3s.6-.1.8-.2c.2-.2.3-.4.4-.7l.8-7.7z"/></svg>');
|
|
}
|
|
:root {
|
|
--z-skip-to-content: 2147483647;
|
|
--z-progress: 2147483637;
|
|
--z-sidebar: 60;
|
|
--z-sidebar-toggle: 50;
|
|
--z-main-overlay: 40;
|
|
--z-github-corner: 30;
|
|
--z-app-nav: 20;
|
|
--z-cover: 10;
|
|
}
|
|
*,
|
|
:after,
|
|
:before {
|
|
border: 0;
|
|
box-sizing: border-box;
|
|
font: inherit;
|
|
-webkit-text-size-adjust: none;
|
|
text-size-adjust: none;
|
|
}
|
|
body,
|
|
html {
|
|
height: 100vh;
|
|
}
|
|
html {
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
font-family: var(--font-family);
|
|
font-feature-settings:
|
|
'liga' 1,
|
|
'calt' 1;
|
|
font-optical-sizing: auto;
|
|
font-size: var(--font-size);
|
|
font-weight: var(--font-weight);
|
|
line-height: var(--line-height);
|
|
scroll-padding-top: var(--scroll-padding-top);
|
|
}
|
|
body {
|
|
margin: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
body:not(.ready) {
|
|
overflow: hidden;
|
|
}
|
|
body:not(.ready) .app-nav,
|
|
body:not(.ready) [data-cloak],
|
|
body:not(.ready) > nav {
|
|
display: none;
|
|
}
|
|
body.loading:before {
|
|
position: fixed;
|
|
}
|
|
body.loading:has(:where(#main, .cover-main):not(:empty)):before {
|
|
display: none;
|
|
}
|
|
[tabindex='-1']:focus {
|
|
outline: none !important;
|
|
}
|
|
small,
|
|
sub,
|
|
sup {
|
|
display: inline-block;
|
|
font-size: var(--font-size-s);
|
|
}
|
|
a {
|
|
color: var(--link-color);
|
|
}
|
|
a:not(.button) {
|
|
text-decoration-color: var(--link-underline-color);
|
|
text-decoration-line: underline;
|
|
text-decoration-style: solid;
|
|
text-decoration-thickness: var(--link-underline-thickness);
|
|
text-underline-offset: 2px;
|
|
}
|
|
a:not(.button):hover {
|
|
color: var(--link-color-hover);
|
|
text-decoration-color: var(--link-underline-color-hover);
|
|
text-decoration-thickness: var(--link-underline-thickness-hover);
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
line-height: var(--heading-line-height);
|
|
margin: 0;
|
|
}
|
|
hr {
|
|
border: none;
|
|
border-bottom: 1px solid var(--border-color);
|
|
margin-block: 1em;
|
|
}
|
|
ins {
|
|
text-decoration: underline;
|
|
}
|
|
kbd {
|
|
background: var(--kbd-bg);
|
|
border: var(--kbd-border);
|
|
border-radius: var(--kbd-border-radius);
|
|
color: var(--kbd-color);
|
|
display: inline-block;
|
|
font-size: var(--font-size-s);
|
|
line-height: 1;
|
|
min-width: 2em;
|
|
padding: 0.3em 0.5em;
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
mark {
|
|
background: var(--mark-bg);
|
|
border-radius: 1px;
|
|
color: var(--mark-color);
|
|
padding-inline: 1px;
|
|
}
|
|
strong {
|
|
color: var(--strong-color);
|
|
font-weight: var(--strong-font-weight);
|
|
}
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
summary > * {
|
|
display: inline;
|
|
}
|
|
:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit']) {
|
|
background: var(--color-mono-2);
|
|
border: 2px solid var(--color-mono-2);
|
|
box-shadow: 0 0 0 3px transparent;
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
margin-block: 0.35em;
|
|
transition: outline-color var(--duration-fast);
|
|
vertical-align: middle;
|
|
}
|
|
:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
):not(:focus-visible) {
|
|
outline-color: transparent;
|
|
}
|
|
:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
):hover {
|
|
outline: 3px solid var(--theme-color-3);
|
|
outline-offset: 1px;
|
|
}
|
|
:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
)
|
|
+ :is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
) {
|
|
margin-left: 0.25em;
|
|
}
|
|
.primary:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
),
|
|
.secondary:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
) {
|
|
border-color: var(--button-bg);
|
|
}
|
|
.primary:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
) {
|
|
background: var(--button-bg);
|
|
color: var(--button-color);
|
|
}
|
|
.secondary:is(
|
|
a.button,
|
|
button[type],
|
|
input.button,
|
|
input:is([type='button'], [type='reset'], [type='submit'])
|
|
) {
|
|
background: transparent;
|
|
color: var(--button-bg);
|
|
}
|
|
a.button,
|
|
button[type],
|
|
input:where([type='button'], [type='reset'], [type='submit']) {
|
|
border-radius: var(--button-border-radius);
|
|
padding: var(--button-padding);
|
|
text-decoration: none;
|
|
}
|
|
:is(
|
|
button[type],
|
|
input.button,
|
|
input:where([type='button'], [type='reset'], [type='submit'])
|
|
):disabled {
|
|
filter: grayscale(100%);
|
|
opacity: 0.6;
|
|
pointer-events: none;
|
|
}
|
|
button:not([type]) {
|
|
color: inherit;
|
|
}
|
|
.emoji:where(img) {
|
|
height: 1.2em;
|
|
vertical-align: middle;
|
|
}
|
|
.emoji:where(span) {
|
|
font-family: var(--font-family-emoji);
|
|
font-size: var(--font-size-emoji);
|
|
vertical-align: middle;
|
|
}
|
|
:is(
|
|
fieldset,
|
|
input:not([type='checkbox']),
|
|
optgroup,
|
|
option,
|
|
select,
|
|
textarea
|
|
):disabled {
|
|
opacity: 0.6;
|
|
}
|
|
fieldset,
|
|
input,
|
|
select,
|
|
textarea {
|
|
border-radius: var(--form-element-border-radius);
|
|
max-width: 100%;
|
|
}
|
|
input,
|
|
select,
|
|
textarea {
|
|
background: var(--form-element-bg);
|
|
border: 1px solid var(--form-element-border-color);
|
|
color: var(--form-element-color);
|
|
padding: 0.25em 0.5em;
|
|
}
|
|
input,
|
|
label,
|
|
select {
|
|
vertical-align: middle;
|
|
}
|
|
fieldset {
|
|
border: 1px solid var(--color-mono-2);
|
|
padding: 1em;
|
|
}
|
|
fieldset > :first-child,
|
|
fieldset > legend + * {
|
|
margin-top: 0;
|
|
}
|
|
fieldset > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
input:where([type='checkbox'], [type='radio']) {
|
|
--_size: 1.1em;
|
|
appearance: none;
|
|
display: inline-block;
|
|
height: var(--_size);
|
|
margin: 0;
|
|
padding: 0;
|
|
position: relative;
|
|
top: -0.1em;
|
|
width: var(--_size);
|
|
}
|
|
input.toggle:where([type='checkbox'], [type='radio']) {
|
|
--_inset: 2px;
|
|
--_handle-size: calc(var(--_size) - var(--_inset) * 2);
|
|
border-radius: 100vh;
|
|
height: calc(var(--_size) + 2px);
|
|
width: calc(var(--_size) * 1.9);
|
|
}
|
|
input.toggle:where([type='checkbox'], [type='radio']):after,
|
|
input.toggle:where([type='checkbox'], [type='radio']):before {
|
|
all: unset;
|
|
}
|
|
input.toggle:where([type='checkbox'], [type='radio']):before {
|
|
background: var(--color-mono-3);
|
|
border-radius: 100vh;
|
|
content: '';
|
|
display: inline-block;
|
|
height: var(--_handle-size);
|
|
left: var(--_inset);
|
|
position: absolute;
|
|
top: var(--_inset);
|
|
transition: all var(--duration-fast);
|
|
width: var(--_handle-size);
|
|
}
|
|
input.toggle:where([type='checkbox'], [type='radio']):checked {
|
|
background: var(--theme-color);
|
|
border-color: var(--theme-color);
|
|
}
|
|
input.toggle:where([type='checkbox'], [type='radio']):checked:before {
|
|
background: var(--color-bg);
|
|
left: calc(100% - var(--_handle-size) - var(--_inset));
|
|
}
|
|
label input:where([type='checkbox'], [type='radio']) {
|
|
margin-right: 0.25em;
|
|
}
|
|
input:where([type='checkbox']):not(.toggle) {
|
|
border-radius: min(var(--form-element-border-radius), 3px);
|
|
}
|
|
input:where([type='checkbox']):not(.toggle):before {
|
|
border-bottom: 2px solid transparent;
|
|
border-right: 2px solid transparent;
|
|
content: '';
|
|
display: inline-block;
|
|
height: 0.7em;
|
|
left: 50%;
|
|
position: absolute;
|
|
rotate: 40deg;
|
|
top: 43%;
|
|
translate: -50% -50%;
|
|
width: 0.4em;
|
|
}
|
|
input:where([type='checkbox']):not(.toggle):checked {
|
|
background: var(--theme-color);
|
|
border-color: var(--theme-color);
|
|
}
|
|
input:where([type='checkbox']):not(.toggle):checked:before {
|
|
border-color: var(--color-bg);
|
|
}
|
|
input:where([type='radio']):not(.toggle) {
|
|
border-radius: 100vh;
|
|
}
|
|
input:where([type='radio']):not(.toggle):checked {
|
|
border-color: var(--theme-color);
|
|
box-shadow: inset 0 0 0 0.25em var(--theme-color);
|
|
}
|
|
label {
|
|
display: inline-block;
|
|
}
|
|
select {
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.95 10'%3E%3Cpath d='m1.41 4.67 1.07-1.49 1.06 1.49zM3.54 5.33 2.48 6.82 1.41 5.33z' opacity='.5'/%3E%3C/svg%3E");
|
|
background-position: right 2px center;
|
|
background-repeat: no-repeat;
|
|
font-weight: 400;
|
|
padding-right: 20px;
|
|
}
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
select {
|
|
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4.95 10'%3E%3Cpath fill='%23fff' d='m1.41 4.67 1.07-1.49 1.06 1.49zM3.54 5.33 2.48 6.82 1.41 5.33z' opacity='.4'/%3E%3C/svg%3E");
|
|
}
|
|
}
|
|
body > .progress {
|
|
background: var(--theme-color);
|
|
height: 2px;
|
|
inset: 0 0 auto 0;
|
|
position: fixed;
|
|
transition:
|
|
width var(--duration-medium) ease,
|
|
opacity calc(var(--duration-medium) * 2);
|
|
width: 0;
|
|
z-index: var(--z-progress);
|
|
}
|
|
main {
|
|
display: block;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
width: 100vw;
|
|
}
|
|
main:before {
|
|
background: transparent;
|
|
bottom: 0;
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
transition:
|
|
width 0s var(--duration-medium),
|
|
background var(--duration-medium);
|
|
width: 0;
|
|
z-index: var(--z-main-overlay);
|
|
}
|
|
main.hidden {
|
|
display: none;
|
|
}
|
|
main > .content {
|
|
inset: 0;
|
|
position: absolute;
|
|
transition: left var(--duration-medium) ease;
|
|
}
|
|
body:has(.sidebar.show) :is(main > .content) {
|
|
left: var(--sidebar-width);
|
|
}
|
|
body:not:has(.sidebar) :is(main > .content) {
|
|
position: static;
|
|
}
|
|
.github-corner {
|
|
border-bottom: 0;
|
|
position: absolute;
|
|
right: 0;
|
|
text-decoration: none;
|
|
top: 0;
|
|
z-index: var(--z-github-corner);
|
|
}
|
|
.github-corner:hover .octo-arm {
|
|
animation: github-corner 0.56s ease-in-out;
|
|
}
|
|
.github-corner svg {
|
|
color: var(--color-bg);
|
|
height: var(--navbar-height);
|
|
width: var(--navbar-height);
|
|
fill: var(--theme-color);
|
|
}
|
|
@keyframes github-corner {
|
|
0%,
|
|
to {
|
|
rotate: 0;
|
|
}
|
|
20%,
|
|
60% {
|
|
rotate: -25deg;
|
|
}
|
|
40%,
|
|
80% {
|
|
rotate: 10deg;
|
|
}
|
|
}
|
|
.loading:empty,
|
|
.loading:not(:empty):before {
|
|
--_gradient: no-repeat radial-gradient(farthest-side, var(--theme-color) 92%, #0000);
|
|
animation: loading 1s infinite;
|
|
aspect-ratio: 1;
|
|
background:
|
|
var(--_gradient) top,
|
|
var(--_gradient) left,
|
|
var(--_gradient) right,
|
|
var(--_gradient) bottom;
|
|
background-size: 10px 10px;
|
|
content: '';
|
|
display: block;
|
|
width: 36px;
|
|
}
|
|
.loading:not(:empty):before {
|
|
left: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
translate: -50% -50%;
|
|
z-index: 1;
|
|
}
|
|
@keyframes loading {
|
|
to {
|
|
rotate: 0.5turn;
|
|
}
|
|
}
|
|
#app {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.75em;
|
|
height: 100vh;
|
|
justify-content: center;
|
|
padding-inline: 50px;
|
|
}
|
|
#skip-to-content {
|
|
left: 50%;
|
|
opacity: 0;
|
|
position: fixed;
|
|
top: 0;
|
|
transition-delay: var(--duration-medium), 0s;
|
|
transition-duration: 0s, var(--duration-medium);
|
|
transition-property: opacity, translate;
|
|
transition-timing-function: ease;
|
|
translate: -50% -100%;
|
|
z-index: var(--z-skip-to-content);
|
|
}
|
|
#skip-to-content:focus {
|
|
opacity: 1;
|
|
transition-delay: 0s, 0s;
|
|
transition-duration: 0s, var(--duration-medium);
|
|
translate: -50% 0.75rem;
|
|
}
|
|
.cover {
|
|
align-items: center;
|
|
background: var(--cover-bg);
|
|
color: var(--cover-color);
|
|
display: none;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
width: 100%;
|
|
z-index: var(--z-cover);
|
|
}
|
|
.cover:before {
|
|
-webkit-backdrop-filter: brightness(var(--cover-bg-brightness));
|
|
backdrop-filter: brightness(var(--cover-bg-brightness));
|
|
background: var(--cover-bg-overlay);
|
|
content: '';
|
|
inset: 0 0 0 0;
|
|
position: absolute;
|
|
}
|
|
.cover.show {
|
|
display: flex;
|
|
}
|
|
.cover a:not(.anchor) {
|
|
text-decoration-color: var(--theme-color);
|
|
}
|
|
.cover blockquote {
|
|
font-size: var(--font-size-xl);
|
|
line-height: var(--heading-line-height);
|
|
text-align: center;
|
|
}
|
|
:is(.cover blockquote),
|
|
:is(.cover blockquote) > p {
|
|
margin-block: 1rem;
|
|
}
|
|
.cover h1 {
|
|
color: var(--cover-title-color);
|
|
font: var(--cover-title-font);
|
|
position: relative;
|
|
}
|
|
:is(:is(.cover h1) a),
|
|
:is(:is(.cover h1) a):hover {
|
|
text-decoration-color: transparent;
|
|
}
|
|
:is(.cover h1) a {
|
|
color: var(--cover-title-color);
|
|
}
|
|
:is(.cover h1) small {
|
|
bottom: 0;
|
|
font-weight: var(--font-weight);
|
|
position: absolute;
|
|
}
|
|
.cover ul {
|
|
list-style-type: none;
|
|
margin-bottom: 1.5rem;
|
|
padding: 0;
|
|
}
|
|
.cover-main {
|
|
flex: 1;
|
|
margin: 5vh var(--content-margin-inline);
|
|
position: relative;
|
|
text-align: center;
|
|
z-index: 1;
|
|
}
|
|
.app-nav {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 1em;
|
|
height: var(--navbar-height);
|
|
justify-content: end;
|
|
left: 0;
|
|
padding-inline: var(--content-margin-inline);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
transition: left var(--duration-medium) ease;
|
|
z-index: var(--z-app-nav);
|
|
}
|
|
.app-nav:has(~ .github-corner) {
|
|
padding-inline-end: calc(var(--navbar-height) + 1em);
|
|
}
|
|
body:where(:has(.sidebar.show)) .app-nav {
|
|
left: var(--sidebar-width);
|
|
}
|
|
.app-nav a {
|
|
color: var(--navbar-link-color);
|
|
text-decoration-color: transparent;
|
|
}
|
|
:is(.app-nav a):hover {
|
|
text-decoration-color: var(--navbar-link-color-active);
|
|
translate: 0;
|
|
}
|
|
.active :is(.app-nav a) {
|
|
color: var(--navbar-link-color-active);
|
|
}
|
|
.app-nav ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.app-nav > ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 1em;
|
|
justify-content: end;
|
|
}
|
|
.app-nav li {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
position: relative;
|
|
white-space: nowrap;
|
|
}
|
|
:is(.app-nav li) ul {
|
|
background: var(--color-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
max-height: calc(100vh - 61px);
|
|
overflow-y: auto;
|
|
padding: 1em;
|
|
position: absolute;
|
|
right: 50%;
|
|
top: -9999vh;
|
|
translate: 50% 0;
|
|
z-index: 1;
|
|
}
|
|
li:last-child :is(:is(.app-nav li) ul) {
|
|
right: calc(0px - var(--content-margin-inline) / 2);
|
|
translate: 0;
|
|
}
|
|
:is(.app-nav li) li {
|
|
display: block;
|
|
margin-block: var(--navbar-drop-link-spacing);
|
|
}
|
|
:is(:is(.app-nav li) li):first-child {
|
|
margin-top: 0;
|
|
}
|
|
:is(:is(.app-nav li) li):last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
:is(:is(.app-nav li) li) a {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.25em;
|
|
margin: 0;
|
|
}
|
|
:is(:is(:is(.app-nav li) li) a):hover {
|
|
color: var(--navbar-link-color-active);
|
|
}
|
|
:is(:is(.app-nav li):focus-within, :is(.app-nav li):hover) ul {
|
|
top: 100%;
|
|
}
|
|
.app-nav p {
|
|
margin: 0;
|
|
}
|
|
.app-nav > :where(a, p),
|
|
.app-nav > ul > li > :where(a, p) {
|
|
white-space: nowrap;
|
|
}
|
|
.app-nav-merged {
|
|
display: none;
|
|
}
|
|
:root {
|
|
--_sidebar-inset: 20px;
|
|
--_sidebar-list-inset: 0.85em;
|
|
--_sidebar-scrollbar-width: 10px;
|
|
}
|
|
@supports (scrollbar-width: auto) {
|
|
:root {
|
|
--_sidebar-scrollbar-width: 4px;
|
|
}
|
|
}
|
|
:is(.app-nav-merged, .sidebar-nav) > * {
|
|
margin-inline: var(--_sidebar-inset);
|
|
}
|
|
:is(:is(.app-nav-merged, .sidebar-nav) > *):first-child {
|
|
margin-top: 0;
|
|
}
|
|
:is(.app-nav-merged, .sidebar-nav) > hr {
|
|
margin-inline: 0;
|
|
}
|
|
:is(.app-nav-merged, .sidebar-nav) ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
:is(:is(.app-nav-merged, .sidebar-nav) > ul) > * {
|
|
margin-left: var(--_sidebar-inset);
|
|
}
|
|
:is(:is(.app-nav-merged, .sidebar-nav) > ul) ul {
|
|
padding-left: var(--_sidebar-list-inset);
|
|
}
|
|
.group:is(:is(:is(.app-nav-merged, .sidebar-nav) > ul) > li) {
|
|
border-top: var(--sidebar-group-border);
|
|
padding-top: var(--sidebar-group-spacing);
|
|
}
|
|
.group:is(:is(:is(.app-nav-merged, .sidebar-nav) > ul) > li):has(+ :not(.group)),
|
|
.group:is(:is(:is(.app-nav-merged, .sidebar-nav) > ul) > li):last-child {
|
|
border-bottom: var(--sidebar-group-border);
|
|
}
|
|
:is(.app-nav-merged, .sidebar-nav) li {
|
|
margin-block: var(--sidebar-link-spacing);
|
|
}
|
|
:is(:is(.app-nav-merged, .sidebar-nav) li) > p {
|
|
margin: 0;
|
|
}
|
|
.group-title:is(:is(:is(.app-nav-merged, .sidebar-nav) li) > p) {
|
|
border-bottom: var(--sidebar-group-title-border);
|
|
color: var(--sidebar-group-title-color);
|
|
font-size: var(--sidebar-group-title-font-size);
|
|
font-weight: var(--sidebar-group-title-font-weight);
|
|
margin-bottom: var(--sidebar-group-title-spacing);
|
|
margin-right: var(--_sidebar-inset);
|
|
padding-bottom: var(--sidebar-group-title-spacing);
|
|
}
|
|
:is(:is(.app-nav-merged, .sidebar-nav) li) a {
|
|
display: block;
|
|
overflow: hidden;
|
|
padding-right: var(--_sidebar-inset);
|
|
}
|
|
:is(:is(:is(.app-nav-merged, .sidebar-nav) li) a):has(img, svg) {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: 0.25em;
|
|
}
|
|
.active:is(:is(.app-nav-merged, .sidebar-nav) li) > a {
|
|
color: var(--sidebar-link-color-active);
|
|
}
|
|
.collapse:is(:is(.app-nav-merged, .sidebar-nav) li) > :not(a) {
|
|
display: none;
|
|
}
|
|
.sidebar {
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--sidebar-border-color);
|
|
bottom: 0;
|
|
color: var(--sidebar-color);
|
|
font-size: var(--sidebar-font-size);
|
|
left: 0;
|
|
overscroll-behavior: contain;
|
|
position: absolute;
|
|
top: 0;
|
|
transition:
|
|
translate var(--duration-medium) ease,
|
|
visibility var(--duration-medium);
|
|
translate: calc(0px - var(--sidebar-width));
|
|
visibility: hidden;
|
|
width: var(--sidebar-width);
|
|
z-index: var(--z-sidebar);
|
|
}
|
|
@supports (scrollbar-width: auto) {
|
|
.sidebar::-webkit-scrollbar {
|
|
width: var(--_sidebar-scrollbar-width);
|
|
}
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background: transparent;
|
|
border-radius: var(--_sidebar-scrollbar-width);
|
|
}
|
|
.sidebar:hover::-webkit-scrollbar-thumb {
|
|
background: hsla(0, 0%, 53%, 0.4);
|
|
}
|
|
.sidebar:hover::-webkit-scrollbar-track {
|
|
background: hsla(0, 0%, 53%, 0.1);
|
|
}
|
|
}
|
|
.sidebar a[href] {
|
|
color: var(--sidebar-link-color);
|
|
text-decoration-color: transparent;
|
|
}
|
|
:is(.sidebar a[href]):hover {
|
|
text-decoration-color: var(--sidebar-link-color-active);
|
|
translate: 0;
|
|
}
|
|
.sidebar .app-name {
|
|
color: var(--sidebar-name-color);
|
|
font-family: var(--sidebar-name-font-family);
|
|
font-size: var(--sidebar-name-font-size);
|
|
font-weight: var(--sidebar-name-font-weight);
|
|
margin: var(--sidebar-name-margin);
|
|
text-align: center;
|
|
}
|
|
:is(.sidebar a.app-name-link) img {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
:is(.sidebar a.app-name-link):hover {
|
|
color: var(--sidebar-link-color-active);
|
|
text-decoration-color: transparent;
|
|
}
|
|
body:has(.sidebar.show) .sidebar {
|
|
translate: 0;
|
|
visibility: visible;
|
|
}
|
|
body.sticky .sidebar {
|
|
overflow-y: auto;
|
|
position: fixed;
|
|
}
|
|
:is(.sidebar-nav li) a.page-link {
|
|
background: var(--sidebar-pagelink-bg);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.active > :is(:is(.sidebar-nav li) a.page-link),
|
|
:has(.active) > :is(:is(.sidebar-nav li) a.page-link) {
|
|
background: var(--sidebar-pagelink-bg-expanded);
|
|
}
|
|
:is(
|
|
.active > :is(:is(.sidebar-nav li) a.page-link),
|
|
:has(.active) > :is(:is(.sidebar-nav li) a.page-link)
|
|
):only-child {
|
|
background: var(--sidebar-pagelink-bg-empty);
|
|
}
|
|
.collapse > :is(:is(.sidebar-nav li) a.page-link) {
|
|
background: var(--sidebar-pagelink-bg-collapsed);
|
|
}
|
|
.sidebar-toggle {
|
|
align-items: var(--sidebar-toggle-alignment);
|
|
background: transparent;
|
|
border: 0;
|
|
bottom: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: start;
|
|
margin: 0;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: var(--sidebar-toggle-width);
|
|
z-index: var(--z-sidebar-toggle);
|
|
-webkit-tap-highlight-color: transparent;
|
|
transition:
|
|
background var(--duration-medium),
|
|
translate var(--duration-medium) ease;
|
|
}
|
|
@media screen and (any-hover) {
|
|
.sidebar-toggle:hover {
|
|
background: color-mix(in srgb, var(--sidebar-toggle-bg-hover) 10%, transparent);
|
|
}
|
|
}
|
|
body:where(:has(.sidebar.show)) .sidebar-toggle {
|
|
transition:
|
|
background 0s,
|
|
translate var(--duration-medium) ease;
|
|
translate: var(--sidebar-width);
|
|
}
|
|
body.sticky .sidebar-toggle {
|
|
position: fixed;
|
|
}
|
|
@media screen and not (any-hover) {
|
|
.sidebar-toggle {
|
|
width: calc(var(--content-margin-inline) - 10px);
|
|
}
|
|
}
|
|
.sidebar-toggle-button {
|
|
align-items: center;
|
|
background: var(--sidebar-toggle-bg);
|
|
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
|
color: var(--sidebar-toggle-color);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: var(--sidebar-toggle-height);
|
|
justify-content: center;
|
|
margin-block: var(--sidebar-toggle-margin-block);
|
|
transition-duration: var(--duration-medium);
|
|
transition-property: background, translate;
|
|
width: var(--sidebar-toggle-width);
|
|
}
|
|
.sidebar-toggle-button span {
|
|
--_size: 4px;
|
|
background: currentColor;
|
|
border-radius: 100vh;
|
|
display: block;
|
|
height: var(--_size);
|
|
transition: background var(--duration-medium);
|
|
width: var(--_size);
|
|
}
|
|
:is(.sidebar-toggle-button span):nth-child(2) {
|
|
margin-block: calc(var(--_size) - 1px);
|
|
}
|
|
@media screen and (any-hover) {
|
|
.sidebar-toggle-button:hover,
|
|
body:where(:has(.sidebar-toggle:hover)) .sidebar-toggle-button {
|
|
background: var(--sidebar-toggle-bg-hover);
|
|
color: var(--sidebar-toggle-color-hover);
|
|
}
|
|
}
|
|
.markdown-section {
|
|
margin: var(--content-margin-inline) auto 0 auto;
|
|
max-width: calc(100% - var(--content-margin-inline) * 2);
|
|
padding-bottom: 2rem;
|
|
position: relative;
|
|
width: var(--content-max-width);
|
|
}
|
|
body:has(.app-nav) .markdown-section {
|
|
margin-top: calc(var(--navbar-height) + var(--content-margin-inline) / 2);
|
|
}
|
|
.markdown-section > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
.markdown-section blockquote,
|
|
.markdown-section details,
|
|
.markdown-section figure,
|
|
.markdown-section form,
|
|
.markdown-section iframe,
|
|
.markdown-section ol,
|
|
.markdown-section output,
|
|
.markdown-section p,
|
|
.markdown-section pre,
|
|
.markdown-section table,
|
|
.markdown-section ul {
|
|
margin-block: var(--margin-block);
|
|
}
|
|
.anchor:is(.markdown-section a) {
|
|
color: inherit;
|
|
}
|
|
.anchor:is(.markdown-section a):not(:hover) {
|
|
text-decoration-color: transparent;
|
|
}
|
|
.anchor:is(.markdown-section a):hover {
|
|
text-decoration-color: var(--link-underline-color-hover);
|
|
translate: 0 0 0;
|
|
}
|
|
.markdown-section blockquote {
|
|
background: var(--blockquote-bg);
|
|
border: solid var(--blockquote-border-color);
|
|
border-radius: var(--blockquote-border-radius);
|
|
border-width: var(--blockquote-border-width);
|
|
color: var(--blockquote-color);
|
|
margin-inline: 0;
|
|
overflow: auto;
|
|
padding: var(--blockquote-padding);
|
|
position: relative;
|
|
}
|
|
:is(.markdown-section blockquote) > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
:is(.markdown-section blockquote) > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.markdown-section em {
|
|
font-style: italic;
|
|
}
|
|
.markdown-section hr {
|
|
margin-block: 2em;
|
|
}
|
|
.markdown-section iframe {
|
|
border: 1px solid var(--color-mono-2);
|
|
display: block;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
}
|
|
.markdown-section img {
|
|
max-width: 100%;
|
|
}
|
|
.markdown-section kbd {
|
|
margin-inline: 0.15em;
|
|
}
|
|
.alt:is(.markdown-section kbd) {
|
|
background: var(--kbd-alt-bg);
|
|
border: var(--kbd-alt-border);
|
|
border-radius: var(--kbd-alt-border-radius);
|
|
box-shadow: var(--kbd-alt-box-shadow);
|
|
color: var(--kbd-alt-color);
|
|
font-size: var(--font-size-m);
|
|
padding: 0.5em;
|
|
}
|
|
.markdown-section .callout {
|
|
background: var(--callout-bg);
|
|
border: solid var(--callout-border-color);
|
|
border-radius: var(--callout-border-radius);
|
|
border-width: var(--callout-border-width);
|
|
color: var(--callout-color);
|
|
margin-block: calc(var(--margin-block) * 1.5);
|
|
padding: var(--callout-padding);
|
|
position: relative;
|
|
}
|
|
:is(.markdown-section .callout):before {
|
|
background: var(--callout-charm-bg);
|
|
border-radius: var(--callout-charm-border-radius);
|
|
color: var(--callout-charm-color);
|
|
content: var(--callout-charm-content);
|
|
font-size: var(--callout-charm-font-size);
|
|
font-weight: var(--strong-font-weight);
|
|
height: var(--callout-charm-size);
|
|
inset: var(--callout-charm-inset);
|
|
line-height: var(--callout-charm-size);
|
|
position: absolute;
|
|
text-align: center;
|
|
translate: var(--callout-charm-translate);
|
|
width: var(--callout-charm-size);
|
|
}
|
|
:is(.markdown-section .callout) > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
:is(.markdown-section .callout) > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
:is(.markdown-section .callout) code,
|
|
:is(.markdown-section .callout) strong {
|
|
color: inherit;
|
|
}
|
|
:is(.markdown-section .callout) code {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
:is(.markdown-section .callout) pre:where([data-lang]) {
|
|
background: hsla(0, 0%, 100%, 0.4);
|
|
}
|
|
:is(.markdown-section .callout) .callout {
|
|
margin-block: var(--margin-block);
|
|
}
|
|
.markdown-section code,
|
|
.markdown-section output,
|
|
.markdown-section pre {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
.markdown-section code,
|
|
.markdown-section pre,
|
|
.markdown-section samp {
|
|
font-family: var(--font-family-mono);
|
|
font-size: var(--font-size-mono);
|
|
}
|
|
.markdown-section output,
|
|
.markdown-section pre[data-lang] {
|
|
position: relative;
|
|
}
|
|
:is(.markdown-section output, .markdown-section pre[data-lang]):after {
|
|
color: inherit;
|
|
content: attr(data-lang);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size-xs);
|
|
letter-spacing: 0.02em;
|
|
line-height: 1;
|
|
opacity: 0.5;
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 0.5rem;
|
|
}
|
|
.markdown-section code,
|
|
.markdown-section samp {
|
|
white-space: pre-wrap;
|
|
}
|
|
.markdown-section code {
|
|
background: var(--code-bg);
|
|
color: var(--code-color);
|
|
margin: 0 0.1em;
|
|
padding: 0.2em 0.35em;
|
|
}
|
|
:is(.markdown-section code) .token {
|
|
left: auto;
|
|
position: relative;
|
|
}
|
|
.markdown-section output {
|
|
border: 1px solid var(--color-mono-2);
|
|
display: block;
|
|
padding: 1.7rem 1.4rem 1.4rem;
|
|
}
|
|
:is(.markdown-section output) > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
:is(.markdown-section output) > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
.markdown-section pre[data-lang] {
|
|
border-radius: var(--border-radius) !important;
|
|
font-family: var(--font-family-mono) !important;
|
|
font-size: var(--font-size-mono) !important;
|
|
line-height: inherit !important;
|
|
padding: 0 !important;
|
|
tab-size: 2 !important;
|
|
text-align: left;
|
|
white-space: pre;
|
|
word-spacing: normal;
|
|
word-wrap: normal;
|
|
hyphens: none;
|
|
word-break: normal;
|
|
}
|
|
:is(.markdown-section pre[data-lang]):only-child {
|
|
margin: 0;
|
|
}
|
|
:is(.markdown-section pre[data-lang]) > code {
|
|
background: transparent;
|
|
color: inherit;
|
|
display: block;
|
|
font-size: inherit;
|
|
margin: 0 !important;
|
|
overflow: auto;
|
|
padding: 0 !important;
|
|
padding-block: 1.5rem !important;
|
|
padding-inline: 1.5rem !important;
|
|
white-space: inherit;
|
|
}
|
|
.markdown-section samp {
|
|
font-weight: var(--strong-font-weight);
|
|
}
|
|
:is(.markdown-section samp) .token {
|
|
left: auto;
|
|
position: relative;
|
|
}
|
|
.markdown-section :where(h1, h2, h3, h4, h5, h6) {
|
|
color: var(--heading-color);
|
|
font-weight: var(--heading-font-weight);
|
|
margin: 2rem 0 0.5em;
|
|
}
|
|
[id]:is(.markdown-section :where(h1, h2, h3, h4, h5, h6)) a {
|
|
overflow-x: clip;
|
|
overflow-y: visible;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.markdown-section h1,
|
|
.markdown-section h2 {
|
|
margin-top: 2.5rem;
|
|
}
|
|
.markdown-section :is(h1, h2, h3, h4, h5, h6) + * {
|
|
margin-top: 0;
|
|
}
|
|
.markdown-section h1 {
|
|
font-size: var(--font-size-xxxl);
|
|
}
|
|
:is(.markdown-section h1):first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
.markdown-section h2 {
|
|
--_spacing: 0.5em;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: var(--font-size-xxl);
|
|
margin-bottom: calc(
|
|
var(--_spacing) + var(--heading-line-height) - var(--font-size-xxl)
|
|
);
|
|
padding-bottom: var(--_spacing);
|
|
}
|
|
.markdown-section h3 {
|
|
font-size: var(--font-size-xl);
|
|
}
|
|
.markdown-section h4 {
|
|
font-size: var(--font-size-l);
|
|
}
|
|
.markdown-section h5 {
|
|
font-size: var(--font-size-m);
|
|
}
|
|
:is(.markdown-section h6),
|
|
:is(.markdown-section h6) + :not(h1, h2, h3, h4, h5) {
|
|
font-size: var(--font-size-s);
|
|
}
|
|
.markdown-section ol,
|
|
.markdown-section ul {
|
|
margin: 0;
|
|
padding-inline-start: 1.5em;
|
|
}
|
|
:is(.markdown-section ol, .markdown-section ul)
|
|
:is(.markdown-section ol, .markdown-section ul) {
|
|
margin-top: 0.25em;
|
|
}
|
|
:is(.markdown-section li):not(:last-child) {
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.markdown-section ul.task-list {
|
|
--_checkbox-margin: 0.2em;
|
|
--_checkbox-offset: 1.6em;
|
|
padding-inline-start: 0.6em;
|
|
}
|
|
:is(.markdown-section ul.task-list) input[type='checkbox'] {
|
|
margin-left: calc(0px - var(--_checkbox-offset));
|
|
margin-right: var(--_checkbox-margin);
|
|
margin-top: -0.15em;
|
|
}
|
|
:is(.markdown-section ul.task-list) li {
|
|
list-style-type: none;
|
|
margin-bottom: var(--_checkbox-margin);
|
|
margin-left: var(--_checkbox-offset);
|
|
margin-top: var(--_checkbox-margin);
|
|
position: relative;
|
|
}
|
|
:is(:is(.markdown-section ul.task-list) li):has(.task-list):before {
|
|
border-left: 1px solid var(--color-mono-2);
|
|
bottom: 0;
|
|
content: '';
|
|
left: -1em;
|
|
position: absolute;
|
|
top: 1em;
|
|
z-index: -1;
|
|
}
|
|
:is(.markdown-section ul.task-list) ul.task-list {
|
|
padding-inline-start: 1.5em;
|
|
}
|
|
:is(:is(.markdown-section ul.task-list) ul.task-list) li {
|
|
margin-left: var(--_checkbox-margin);
|
|
}
|
|
:is(:is(:is(.markdown-section ul.task-list) ul.task-list) > li):after {
|
|
border-left: none;
|
|
border-top: 1px solid var(--color-mono-2);
|
|
content: '';
|
|
left: -2.7em;
|
|
position: absolute;
|
|
top: 0.9em;
|
|
width: 1.25em;
|
|
z-index: -1;
|
|
}
|
|
:is(:is(:is(.markdown-section ul.task-list) ul.task-list) > li):last-child:after {
|
|
background: var(--color-bg);
|
|
bottom: 0;
|
|
}
|
|
.markdown-section td,
|
|
.markdown-section th {
|
|
border: 1px solid var(--color-mono-2);
|
|
padding: 0.25em 0.75em;
|
|
}
|
|
.markdown-section table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
display: block;
|
|
overflow: auto;
|
|
width: 100%;
|
|
}
|
|
.markdown-section thead {
|
|
display: none;
|
|
font-weight: var(--strong-font-weight);
|
|
text-align: left;
|
|
}
|
|
:is(.markdown-section thead):has(th:not(:empty)) {
|
|
display: table-header-group;
|
|
}
|
|
.markdown-section th {
|
|
font-weight: var(--strong-font-weight);
|
|
}
|
|
:is(.markdown-section th):not([align]) {
|
|
text-align: left;
|
|
}
|
|
.markdown-section tr {
|
|
border-top: 1px solid var(--color-mono-2);
|
|
}
|
|
:is(.markdown-section tr):nth-child(2n) {
|
|
background: var(--table-row-alt-bg);
|
|
}
|
|
pre[data-lang] {
|
|
background: var(--codeblock-bg);
|
|
color: var(--codeblock-color);
|
|
}
|
|
.namespace {
|
|
opacity: 0.7;
|
|
}
|
|
.token.boolean,
|
|
.token.constant,
|
|
.token.deleted,
|
|
.token.number,
|
|
.token.property,
|
|
.token.symbol,
|
|
.token.tag {
|
|
color: var(--codeblock-tag);
|
|
}
|
|
.token.attr-name,
|
|
.token.builtin,
|
|
.token.char,
|
|
.token.inserted,
|
|
.token.selector,
|
|
.token.string {
|
|
color: var(--codeblock-selector);
|
|
}
|
|
.language-css .token.string,
|
|
.style .token.string,
|
|
.token.entity,
|
|
.token.operator,
|
|
.token.url {
|
|
color: var(--codeblock-operator);
|
|
}
|
|
.token.cdata,
|
|
.token.comment,
|
|
.token.doctype,
|
|
.token.prolog {
|
|
color: var(--codeblock-comment);
|
|
}
|
|
.token.atrule,
|
|
.token.attr-value,
|
|
.token.keyword {
|
|
color: var(--codeblock-keyword);
|
|
}
|
|
.token.important,
|
|
.token.regex,
|
|
.token.variable {
|
|
color: var(--codeblock-variable);
|
|
}
|
|
.token.bold,
|
|
.token.important {
|
|
font-weight: var(--strong-font-weight);
|
|
}
|
|
.token.entity {
|
|
cursor: help;
|
|
}
|
|
.token.function {
|
|
color: var(--codeblock-function);
|
|
}
|
|
.token.important {
|
|
color: var(--codeblock-important);
|
|
}
|
|
.token.italic {
|
|
font-style: italic;
|
|
}
|
|
.token.punctuation {
|
|
color: var(--codeblock-punctuation);
|
|
}
|
|
[class*='clamp-'] {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
[class*='clamp-']:not(.clamp-1) {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.clamp-1 {
|
|
white-space: nowrap;
|
|
}
|
|
.clamp-2 {
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
.clamp-3 {
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
.visually-hidden {
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
:root {
|
|
--_mobile-breakpoint: 640px;
|
|
}
|
|
@media (prefers-reduced-motion) {
|
|
:root {
|
|
--duration-slow: 0s;
|
|
--duration-medium: 0s;
|
|
--duration-fast: 0s;
|
|
}
|
|
}
|
|
@media print {
|
|
.app-nav,
|
|
.github-corner,
|
|
.sidebar,
|
|
.sidebar-toggle {
|
|
display: none;
|
|
}
|
|
}
|
|
@media screen and (max-width: 640px) {
|
|
.app-nav-merged {
|
|
display: block;
|
|
}
|
|
body:has(.sidebar.show) .app-nav,
|
|
body:has(.sidebar.show) .github-corner {
|
|
pointer-events: none;
|
|
}
|
|
body:has(.sidebar.show) .app-nav {
|
|
left: 0;
|
|
}
|
|
:is(body:has(.sidebar.show) main):before {
|
|
background: rgba(0, 0, 0, 0.15);
|
|
transition:
|
|
width 0s,
|
|
background var(--duration-medium);
|
|
width: 100%;
|
|
}
|
|
body:has(.sidebar.show) .sidebar-toggle {
|
|
width: calc(100% - var(--sidebar-width));
|
|
}
|
|
:is(body:has(.sidebar.show) .sidebar-toggle):hover {
|
|
background: transparent;
|
|
}
|
|
body:has(.sidebar.show) main > .content {
|
|
left: 0;
|
|
}
|
|
body:has(.app-nav-merged) .app-nav {
|
|
display: none;
|
|
}
|
|
body:has(.app-nav-merged) .markdown-section {
|
|
margin-top: var(--content-margin-inline);
|
|
}
|
|
}
|
|
:root:has(body[class*='sidebar-chevron']) {
|
|
--sidebar-chevron-collapsed-color: var(--color-mono-3);
|
|
--sidebar-chevron-expanded-color: var(--theme-color);
|
|
--sidebar-pagelink-bg: no-repeat var(--_sidebar_pagelink-bg-left) calc(50% - 2.5px) /
|
|
6px 5px
|
|
linear-gradient(
|
|
45deg,
|
|
transparent 2.75px,
|
|
var(--sidebar-chevron-collapsed-color) 2.75px 4.25px,
|
|
transparent 4px
|
|
),
|
|
no-repeat var(--_sidebar_pagelink-bg-left) calc(50% + 2.5px) / 6px 5px
|
|
linear-gradient(
|
|
135deg,
|
|
transparent 2.75px,
|
|
var(--sidebar-chevron-collapsed-color) 2.75px 4.25px,
|
|
transparent 4px
|
|
);
|
|
--sidebar-pagelink-bg-collapsed: no-repeat var(--_sidebar_pagelink-bg-left)
|
|
calc(50% - 2.5px) / 6px 5px
|
|
linear-gradient(
|
|
45deg,
|
|
transparent 2.75px,
|
|
var(--sidebar-chevron-expanded-color) 2.75px 4.25px,
|
|
transparent 4px
|
|
),
|
|
no-repeat var(--_sidebar_pagelink-bg-left) calc(50% + 2.5px) / 6px 5px
|
|
linear-gradient(
|
|
135deg,
|
|
transparent 2.75px,
|
|
var(--sidebar-chevron-expanded-color) 2.75px 4.25px,
|
|
transparent 4px
|
|
);
|
|
--sidebar-pagelink-bg-expanded: no-repeat calc(var(--_sidebar_pagelink-bg-left) - 2px)
|
|
center / 5px 6px
|
|
linear-gradient(
|
|
225deg,
|
|
transparent 2.75px,
|
|
var(--sidebar-chevron-expanded-color) 2.75px 4.25px,
|
|
transparent 4.25px
|
|
),
|
|
no-repeat calc(var(--_sidebar_pagelink-bg-left) + 3px) center / 5px 6px
|
|
linear-gradient(
|
|
135deg,
|
|
transparent 2.75px,
|
|
var(--sidebar-chevron-expanded-color) 2.75px 4.25px,
|
|
transparent 4.25px
|
|
);
|
|
--sidebar-pagelink-bg-empty: no-repeat var(--_sidebar_pagelink-bg-left) center / 7px
|
|
7px
|
|
radial-gradient(
|
|
circle,
|
|
var(--sidebar-chevron-expanded-color) 0,
|
|
var(--sidebar-chevron-expanded-color) 70%,
|
|
transparent 71%
|
|
);
|
|
}
|
|
body[class*='sidebar-chevron'] .sidebar-nav a.page-link.no-chevron {
|
|
background: none;
|
|
}
|
|
:root:has(body.sidebar-chevron-left) {
|
|
--_sidebar_pagelink-bg-left: 2px;
|
|
}
|
|
body.sidebar-chevron-left .sidebar-nav {
|
|
--_inset: 18px;
|
|
}
|
|
:is(:is(body.sidebar-chevron-left .sidebar-nav) li) a.page-link {
|
|
padding-left: var(--_inset);
|
|
}
|
|
:is(:is(body.sidebar-chevron-left .sidebar-nav) li):has(> .page-link, > p > .page-link)
|
|
> p
|
|
> ul,
|
|
:is(:is(body.sidebar-chevron-left .sidebar-nav) li):has(> .page-link, > p > .page-link)
|
|
> ul {
|
|
margin-left: calc(var(--_sidebar-list-inset) + var(--_inset));
|
|
padding-left: 0;
|
|
}
|
|
:root:has(body.sidebar-chevron-right) {
|
|
--_sidebar_pagelink-bg-left: calc(100% - var(--_sidebar-inset));
|
|
}
|
|
:is(:is(body.sidebar-chevron-right .sidebar-nav) li) a {
|
|
padding-right: calc(var(--_sidebar-inset) + 15px);
|
|
}
|
|
:root:has(body.sidebar-group-box) {
|
|
--sidebar-group-border: 1px solid var(--sidebar-border-color);
|
|
--sidebar-group-spacing: 1em;
|
|
}
|
|
:root:has(body.sidebar-group-underline) {
|
|
--sidebar-group-spacing: 0.5em;
|
|
--sidebar-group-title-border: 1px solid var(--sidebar-border-color);
|
|
--sidebar-group-title-spacing: 0.35em;
|
|
}
|
|
:is(body.sidebar-link-clamp .sidebar) a:not(.app-name-link) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
:is(body.sidebar-toggle-chevron .sidebar-toggle-button) span {
|
|
--_size: 10px;
|
|
background: transparent;
|
|
border: solid;
|
|
border-radius: 0;
|
|
}
|
|
:is(:is(body.sidebar-toggle-chevron .sidebar-toggle-button) span):where(
|
|
:not(:first-child)
|
|
) {
|
|
display: none;
|
|
}
|
|
:is(:is(body.sidebar-toggle-chevron .sidebar-toggle-button) span):first-child {
|
|
border-width: 2px 2px 0 0;
|
|
height: var(--_size);
|
|
rotate: 45deg;
|
|
translate: -20%;
|
|
width: var(--_size);
|
|
}
|
|
body:has(.sidebar.show)
|
|
:is(:is(body.sidebar-toggle-chevron .sidebar-toggle-button) span):first-child {
|
|
rotate: -135deg;
|
|
translate: 20%;
|
|
}
|
|
:is(body.sidebar-toggle-hamburger .sidebar-toggle-button) span {
|
|
height: 2px;
|
|
max-width: 16px;
|
|
width: 65%;
|
|
}
|
|
/*# sourceMappingURL=core.min.css.map */
|