|
export const dark = ` |
|
color-scheme: dark; |
|
|
|
/* text colors */ |
|
--color-fg-default: #adbac7; |
|
--color-fg-muted: #768390; |
|
--color-fg-subtle: #636e7b; |
|
--color-fg-on-emphasis: #cdd9e5; |
|
|
|
/* background colors */ |
|
--color-canvas-default: #22272e; |
|
--color-canvas-overlay: #2d333b; |
|
--color-canvas-inset: #1c2128; |
|
--color-canvas-subtle: #2d333b; |
|
|
|
/* border colors */ |
|
--color-border-default: #444c56; |
|
--color-border-muted: #373e47; |
|
--color-border-subtle: #cdd9e51a; |
|
|
|
/* shadow colors */ |
|
--color-shadow-small: 0 0 transparent; |
|
--color-shadow-medium: 0 3px 6px #1c2128; |
|
--color-shadow-large: 0 8px 24px #1c2128; |
|
--color-shadow-extra-large: 0 12px 48px #1c2128; |
|
|
|
/* neutral colors */ |
|
--color-neutral-emphasis-plus: #636e7b; |
|
--color-neutral-emphasis: #636e7b; |
|
--color-neutral-muted: #636e7b66; |
|
--color-neutral-subtle: #636e7b1a; |
|
|
|
/*** kind colors ***/ |
|
|
|
/* (c)lass */ |
|
--color-kind-class: #6dca70; |
|
--color-kind-class-muted: #347d39; |
|
--bg-kind-class: #6dca701a; |
|
--bg-kind-class-muted: #46954a66; |
|
|
|
/* (E)num */ |
|
--color-kind-enum: #6cb6ff; |
|
--color-kind-enum-muted: #539bf5; |
|
--bg-kind-enum: #6cb6ff26; |
|
--bg-kind-enum-muted: #6cb6ff66; |
|
|
|
/* (f)unction */ |
|
--color-kind-function: #539bf5; |
|
--color-kind-function-muted: #316dca; |
|
--bg-kind-function: #4184e426; |
|
--bg-kind-function-muted: #4184e466; |
|
|
|
/* (i)nterface */ |
|
--color-kind-interface: #dda027; |
|
--color-kind-interface-muted: #966600; |
|
--bg-kind-interface: #ae7c141a; |
|
--bg-kind-interface-muted: #ae7c1466; |
|
|
|
/* (N)amespace */ |
|
--color-kind-namespace: #dc681b; |
|
--color-kind-namespace-muted: #ae5622; |
|
--bg-kind-namespace: #cc6b2c1a; |
|
--bg-kind-namespace-muted: #cc6b2c66; |
|
|
|
/* (T)ype Alias */ |
|
--color-kind-type-alias: #dd61a3; |
|
--color-kind-type-alias-muted: #ae4c82; |
|
--bg-kind-type-alias: #c961981a; |
|
--bg-kind-type-alias-muted: #c9619866; |
|
|
|
/* (v)ariable */ |
|
--color-kind-variable: #986ee2; |
|
--color-kind-variable-muted: #8256d0; |
|
--bg-kind-variable: #986ee21a; |
|
--bg-kind-variable-muted: #986ee266; |
|
|
|
/*** other colors ***/ |
|
|
|
--color-black: #1c2128; |
|
--color-white: #cdd9e5; |
|
--color-gray-0: #cdd9e5; |
|
--color-gray-1: #adbac7; |
|
--color-gray-2: #909dab; |
|
--color-gray-3: #768390; |
|
--color-gray-4: #636e7b; |
|
--color-gray-5: #545d68; |
|
--color-gray-6: #444c56; |
|
--color-gray-7: #373e47; |
|
--color-gray-8: #2d333b; |
|
--color-gray-9: #22272e; |
|
--color-blue-0: #c6e6ff; |
|
--color-blue-1: #96d0ff; |
|
--color-blue-2: #6cb6ff; |
|
--color-blue-3: #539bf5; |
|
--color-blue-4: #4184e4; |
|
--color-blue-5: #316dca; |
|
--color-blue-6: #255ab2; |
|
--color-blue-7: #1b4b91; |
|
--color-blue-8: #143d79; |
|
--color-blue-9: #0f2d5c; |
|
--color-yellow-0: #fbe090; |
|
--color-yellow-1: #eac55f; |
|
--color-yellow-2: #daaa3f; |
|
--color-yellow-3: #c69026; |
|
--color-yellow-4: #ae7c14; |
|
--color-yellow-5: #966600; |
|
--color-yellow-6: #805400; |
|
--color-yellow-7: #6c4400; |
|
--color-yellow-8: #593600; |
|
--color-yellow-9: #452700; |
|
--color-coral-0: #ffdacf; |
|
--color-coral-1: #ffb9a5; |
|
--color-coral-2: #f79981; |
|
--color-coral-3: #ec775c; |
|
--color-coral-4: #de5b41; |
|
--color-coral-5: #c2442d; |
|
--color-coral-6: #a93524; |
|
--color-coral-7: #8d291b; |
|
--color-coral-8: #771d13; |
|
--color-coral-9: #5d1008; |
|
`; |
|
|
|
export const light = ` |
|
color-scheme: light; |
|
|
|
/* text colors */ |
|
--color-fg-default: #1F2328; |
|
--color-fg-muted: #656d76; |
|
--color-fg-subtle: #6e7781; |
|
--color-fg-on-emphasis: #ffffff; |
|
|
|
/* background colors */ |
|
--color-canvas-default: #ffffff; |
|
--color-canvas-overlay: #ffffff; |
|
--color-canvas-inset: #f6f8fa; |
|
--color-canvas-subtle: #f6f8fa; |
|
|
|
/* border colors */ |
|
--color-border-default: #d0d7de; |
|
--color-border-muted: #d8dee4; |
|
--color-border-subtle: #1f232826; |
|
|
|
/* shadow colors */ |
|
--color-shadow-small: 0 1px 0 #1f23280a; |
|
--color-shadow-medium: 0 3px 6px #8c959f26; |
|
--color-shadow-large: 0 8px 24px #8c959f33; |
|
--color-shadow-extra-large: 0 12px 28px #8c959f4d; |
|
|
|
/* neutral colors */ |
|
--color-neutral-emphasis-plus: #24292f; |
|
--color-neutral-emphasis: #6e7781; |
|
--color-neutral-muted: #afb8c133; |
|
--color-neutral-subtle: #eaeef280; |
|
|
|
/*** kind colors ***/ |
|
|
|
/* (c)lass */ |
|
--color-kind-class: #146f2e; |
|
--color-kind-class-muted: #1f883d; |
|
--bg-kind-class: #4ac26b1a; |
|
--bg-kind-class-muted: #4ac26b66; |
|
|
|
/* (E)num */ |
|
--color-kind-enum: #11a2c7; |
|
--color-kind-enum-muted: #47c3e2; |
|
--bg-kind-enum: #11a2c71a; |
|
--bg-kind-enum-muted: #47c3e266; |
|
|
|
/* (f)unction */ |
|
--color-kind-function: #0969da; |
|
--color-kind-function-muted: #0550ae; |
|
--bg-kind-function: #0969da1a; |
|
--bg-kind-function-muted: #54aeff66; |
|
|
|
/* (i)nterface */ |
|
--color-kind-interface: #c98805; |
|
--color-kind-interface-muted: #7d4e00; |
|
--bg-kind-interface: #c9880526; |
|
--bg-kind-interface-muted: #d4a72c66; |
|
|
|
/* (N)amespace */ |
|
--color-kind-namespace: #bc4c00; |
|
--color-kind-namespace-muted: #953800; |
|
--bg-kind-namespace: #fb8f4426; |
|
--bg-kind-namespace-muted: #fb8f4466; |
|
|
|
/* (T)ype Alias */ |
|
--color-kind-type-alias: #bf3989; |
|
--color-kind-type-alias-muted: #99286e; |
|
--bg-kind-type-alias: #ff80c826; |
|
--bg-kind-type-alias-muted: #ff80c866; |
|
|
|
/* (v)ariable */ |
|
--color-kind-variable: #8250df; |
|
--color-kind-variable-muted: #6639ba; |
|
--bg-kind-variable: #c297ff26; |
|
--bg-kind-variable-muted: #c297ff66; |
|
|
|
/*** other colors ***/ |
|
|
|
--color-black: #1F2328; |
|
--color-white: #ffffff; |
|
--color-gray-0: #f6f8fa; |
|
--color-gray-1: #eaeef2; |
|
--color-gray-2: #d0d7de; |
|
--color-gray-3: #afb8c1; |
|
--color-gray-4: #8c959f; |
|
--color-gray-5: #6e7781; |
|
--color-gray-6: #57606a; |
|
--color-gray-7: #424a53; |
|
--color-gray-8: #32383f; |
|
--color-gray-9: #24292f; |
|
--color-blue-0: #ddf4ff; |
|
--color-blue-1: #b6e3ff; |
|
--color-blue-2: #80ccff; |
|
--color-blue-3: #54aeff; |
|
--color-blue-4: #218bff; |
|
--color-blue-5: #0969da; |
|
--color-blue-6: #0550ae; |
|
--color-blue-7: #033d8b; |
|
--color-blue-8: #0a3069; |
|
--color-blue-9: #002155; |
|
--color-yellow-0: #fff8c5; |
|
--color-yellow-1: #fae17d; |
|
--color-yellow-2: #eac54f; |
|
--color-yellow-3: #d4a72c; |
|
--color-yellow-4: #bf8700; |
|
--color-yellow-5: #9a6700; |
|
--color-yellow-6: #7d4e00; |
|
--color-yellow-7: #633c01; |
|
--color-yellow-8: #4d2d00; |
|
--color-yellow-9: #3b2300; |
|
--color-coral-0: #fff0eb; |
|
--color-coral-1: #ffd6cc; |
|
--color-coral-2: #ffb4a1; |
|
--color-coral-3: #fd8c73; |
|
--color-coral-4: #ec6547; |
|
--color-coral-5: #c4432b; |
|
--color-coral-6: #9e2f1c; |
|
--color-coral-7: #801f0f; |
|
--color-coral-8: #691105; |
|
--color-coral-9: #510901; |
|
`; |
|
|
|
export const normalize = ` |
|
/*! normalize.css v8.0.1 | MIT | github.com/necolas/normalize.css */ |
|
html{-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} |
|
`; |
|
|
|
/** |
|
* Variables that are used between the `styles.css` file and `page.css` file. |
|
* For simplicity, these variables are only included in `styles.css`. |
|
*/ |
|
export const variables = ` |
|
/* #region variables */ |
|
/* light color scheme */ |
|
.light, |
|
:not(.dark) { |
|
${light.replaceAll(/^/gm, " ")} |
|
} |
|
/* dark color scheme */ |
|
.dark, |
|
:root:not(.light), |
|
:not(.light) { |
|
${dark.replaceAll(/^/gm, " ")} |
|
} |
|
/* muted color scheme variants */ |
|
.light.muted, |
|
:not(.dark).muted { |
|
${ |
|
[...light.matchAll(/--((?:color|bg)-[\w\-]+?)-muted: ?(.+?);/g)].map( |
|
([, name, value]) => `--${name}: ${value};` |
|
).join("\n ") |
|
} |
|
} |
|
.dark.muted, |
|
:not(.light).muted { |
|
${ |
|
[...dark.matchAll(/--(color-[\w\-]+?)-muted: ?(.+?);/g)].map( |
|
([, name, value]) => `--${name}: ${value};` |
|
).join("\n ") |
|
} |
|
} |
|
@media (prefer-color-scheme: dark) { |
|
:root { |
|
${dark.replaceAll(/^/gm, " ")} |
|
} |
|
} |
|
@media (prefer-color-scheme: light) { |
|
:root, |
|
:not(.dark) { |
|
${light.replaceAll(/^/gm, " ")} |
|
} |
|
} |
|
/* base styles */ |
|
:root { |
|
/* background colors */ |
|
--bg-body: var(--color-canvas-subtle); |
|
--bg-content: var(--color-canvas-default); |
|
--bg-highlight: var(--color-canvas-default); |
|
--bg-searchbar: var(--color-canvas-subtle); |
|
--bg-search-results-hover: var(--color-canvas-accent); |
|
--bg-code: var(--color-canvas-subtle); |
|
--bg-overload-label: var(--color-canvas-subtle); |
|
|
|
/* foreground colors (text) */ |
|
--color-link: var(--color-blue-4); |
|
--color-link-hover: var(--color-blue-3); |
|
--color-link-underline: currentColor; |
|
--color-text-accent: var(--color-fg-subtle); |
|
--color-text-doc: var(--color-fg-default); |
|
--color-text-subtitle: var(--color-fg-muted); |
|
|
|
/* border colors */ |
|
--border-color-base: var(--color-border-default); |
|
--border-radius-kind: var(--border-radius-half); |
|
|
|
/* font families */ |
|
--font-mono: 'Operator Mono', 'Operator Mono SSm', 'Dank Mono', 'IBM Plex Mono', 'Fira Code', 'Roboto Mono', 'Monaco', 'Menlo', 'Souurce Code Pro', 'Lucida Console', 'Courier New', ui-monospace, monospace; |
|
--font-sans: 'Gotham Narrow', 'IBM Plex Sans', 'Roboto', 'Inter', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', 'AppleColorEmoji', ui-sans-serif, sans-serif; |
|
--font-serif: 'Sentinel SSm', 'Sentinel', 'IBM Plex Serif', 'Georgia', 'Times New Roman', ui-serif, serif; |
|
|
|
/* font weights */ |
|
--font-thin: 100; |
|
--font-extralight: 200; |
|
--font-light: 300; |
|
--font-book: 400; |
|
--font-medium: 500; |
|
--font-semibold: 600; |
|
--font-bold: 700; |
|
--font-extrabold: 800; |
|
--font-black: 900; |
|
|
|
/* font sizes */ |
|
--text-xs: 0.75rem; |
|
--text-sm: 0.875rem; |
|
--text-base: 1rem; |
|
--text-md: 1.125rem; |
|
--text-lg: 1.25rem; |
|
--text-xl: 1.5rem; |
|
--text-2xl: 1.75rem; |
|
--text-3xl: 2rem; |
|
--text-4xl: 2.5rem; |
|
--text-5xl: 3rem; |
|
--text-6xl: 4rem; |
|
|
|
/* line heights */ |
|
--leading-5: 1rem; |
|
--leading-6: 1.125rem; |
|
--leading-8: 1.25rem; |
|
--leading-10: 1.5rem; |
|
--leading-12: 1.625rem; |
|
--leading-14: 1.750rem; |
|
--leading-16: 1.875rem; |
|
--leading-18: 2rem; |
|
--leading-20: 2.25rem; |
|
|
|
/* font styles, text decorations, alignments */ |
|
--font-style-subtitle: italic; |
|
--text-align-table-header: center; |
|
--text-decoration-link: underline 1px solid transparent; |
|
|
|
/* border styles */ |
|
--border-overload-label: 1px solid var(--color-border-default); |
|
--border-results-divider: 1px solid var(--color-border-subtle); |
|
--border-table-cell: 1px solid var(--color-border-default); |
|
--border-searchbar: 1px solid var(--color-border-muted)wws |
|
--border-overload-label: 1px solid var(--color-border-default); |
|
|
|
/* border radius */ |
|
--border-radius-sm: 0.25rem; |
|
--border-radius-base: 0.5rem; |
|
--border-radius-md: 0.625rem; |
|
--border-radius-lg: 0.75rem; |
|
--border-radius-xl: 1rem; |
|
--border-radius-2xl: 1.5rem; |
|
--border-radius-3xl: 2rem; |
|
--border-radius-full: 9999px; |
|
--border-radius-none: 0px; |
|
--border-radius-half: 50%; |
|
--border-radius-overload-label: var(--border-radius-sm); |
|
|
|
/* dimensions */ |
|
--width-content: 100%; |
|
--width-kind: 1.5rem; |
|
--height-kind: 1.5rem; |
|
--min-width-sidepanel: 12%; |
|
--max-width-sidepanel: 22%; |
|
--min-width-symbol-section: 13rem; |
|
|
|
/* margins */ |
|
--margin-markdown-between: 1rem; |
|
|
|
/* paddings */ |
|
--padding-code: 0.25rem 0.375rem; |
|
--padding-content: 2rem; |
|
--padding-section-title: 0.5rem 0; |
|
--padding-sidepanel: 0.75rem 0 0.75rem; |
|
--padding-table-cell: 0.5rem; |
|
--padding-symbol-section: 0.5rem 0.75rem 0.5rem 0; |
|
--padding-overload-label: 0.25rem 0.5rem; |
|
|
|
/* transitions */ |
|
--transition-color: color 75ms cubic-bezier(0.4, 0, 0.2, 1); |
|
--transition-underline: text-decoration 150ms ease-in-out; |
|
|
|
/* other */ |
|
--cursor-overload-label: pointer; |
|
} |
|
/* #endregion variables */ |
|
`; |
|
|
|
export const animation = ` |
|
@keyframes pulse { |
|
0% { transform: scale(1) } |
|
50% { transform: scale(1.1) } |
|
100% { transform: scale(1) } |
|
} |
|
@keyframes spin { |
|
0% { transform: rotate(0deg) } |
|
100% { transform: rotate(360deg) } |
|
} |
|
@keyframes spin-reverse { |
|
0% { transform: rotate(0deg) } |
|
100% { transform: rotate(-360deg) } |
|
} |
|
@keyframes spin-pulse { |
|
0% { transform: rotate(0deg) scale(1) } |
|
50% { transform: rotate(180deg) scale(1.1) } |
|
100% { transform: rotate(360deg) scale(1) } |
|
} |
|
@keyframes spin-pulse-alt { |
|
0% { transform: rotate(0deg) scale(1) } |
|
50% { transform: rotate(-180deg) scale(1.1) } |
|
100% { transform: rotate(-360deg) scale(1) } |
|
} |
|
@keyframes rock { |
|
00.0% { transform: rotate(0deg) } |
|
33.3% { transform: rotate(15deg) } |
|
66.6% { transform: rotate(0deg) } |
|
99.9% { transform: rotate(-15deg) } |
|
} |
|
@keyframes rock-pulse { |
|
0% { transform: rotate(0deg) scale(1) } |
|
33.3% { transform: rotate(15deg) scale(1.1) } |
|
66.6% { transform: rotate(0deg) scale(1) } |
|
99.9% { transform: rotate(-15deg) scale(1.1) } |
|
} |
|
@keyframes bounce { |
|
0% { transform: translateY(0) } |
|
25% { transform: translateY(-10px) } |
|
50% { transform: translateY(0) } |
|
75% { transform: translateY(-5px) } |
|
100% { transform: translateY(0) } |
|
} |
|
@keyframes bounce-pulse { |
|
0% { transform: translateY(0) scale(1) } |
|
25% { transform: translateY(-10px) scale(1.1) } |
|
50% { transform: translateY(0) scale(1) } |
|
75% { transform: translateY(-5px) scale(1.1) } |
|
100% { transform: translateY(0) scale(1) } |
|
} |
|
@keyframes bounce-pulse-alt { |
|
0% { transform: translateY(0) scale(1) } |
|
25% { transform: translateY(10px) scale(1.1) } |
|
50% { transform: translateY(0) scale(1) } |
|
75% { transform: translateY(5px) scale(1.1) } |
|
100% { transform: translateY(0) scale(1) } |
|
} |
|
@keyframes beat { |
|
0% { transform: scale(1) } |
|
50% { transform: scale(1.05) } |
|
100% { transform: scale(1) } |
|
} |
|
@keyframes swell { |
|
0% { transform: scale(0) } |
|
50% { transform: scale(1) } |
|
100% { transform: scale(0) } |
|
} |
|
@keyframes jelly { |
|
0% { transform: scaleX(1) scaleY(1) } |
|
25% { transform: scaleX(1.25) scaleY(0.75) } |
|
50% { transform: scaleX(0.75) scaleY(1.25) } |
|
75% { transform: scaleX(1.15) scaleY(0.85) } |
|
100% { transform: scaleX(0.95) scaleY(1.05) } |
|
} |
|
@keyframes jelly-alt { |
|
0% { transform: scaleX(1) scaleY(1) } |
|
25% { transform: scaleX(0.75) scaleY(1.25) } |
|
50% { transform: scaleX(1.25) scaleY(0.75) } |
|
75% { transform: scaleX(0.85) scaleY(1.15) } |
|
100% { transform: scaleX(1.05) scaleY(0.95) } |
|
} |
|
@keyframes float { |
|
0% { transform: translateY(0) } |
|
50% { transform: translateY(-5px) } |
|
100% { transform: translateY(0) } |
|
} |
|
|
|
/* animations */ |
|
.animate { |
|
animation-name: none; |
|
animation-delay: 0s; |
|
animation-direction: normal; |
|
animation-duration: 2s; |
|
animation-fill-mode: both; |
|
animation-iteration-count: infinite; |
|
animation-play-stateee: running; |
|
animation-timing-function: ease-in-out; |
|
} |
|
.fast { |
|
animation-duration: 1250ms; |
|
} |
|
.faster { |
|
animation-duration: 750ms; |
|
} |
|
.fastest { |
|
animation-duration: 500ms; |
|
} |
|
.slow { |
|
animation-duration: 3s; |
|
} |
|
.slower { |
|
animation-duration: 4s; |
|
} |
|
.slowest { |
|
animation-duration: 5s; |
|
} |
|
.ease-in { |
|
animation-timing-function: ease-in; |
|
transition-timing-function: ease-in; |
|
} |
|
.ease-out { |
|
animation-timing-function: ease-out; |
|
transition-timing-function: ease-out; |
|
} |
|
.ease-in-out { |
|
animation-timing-function: ease-in-out; |
|
transition-timing-function: ease-in-out; |
|
} |
|
.linear { |
|
animation-timing-function: linear; |
|
transition-timing-function: linear; |
|
} |
|
.ease { |
|
animation-timing-function: ease; |
|
transition-timing-function: ease; |
|
} |
|
.timing-bounce { |
|
animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); |
|
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); |
|
} |
|
.timing-bounce-alt { |
|
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
} |
|
|
|
/* animation names */ |
|
.pulse { |
|
animation-name: pulse; |
|
} |
|
.spin { |
|
animation-name: spin; |
|
} |
|
.spin-reverse { |
|
animation-name: spin-reverse; |
|
} |
|
.spin-pulse { |
|
animation-name: spin-pulse; |
|
} |
|
.spin-pulse-alt { |
|
animation-name: spin-pulse-alt; |
|
} |
|
.rock { |
|
animation-name: rock; |
|
} |
|
.rock-pulse { |
|
animation-name: rock-pulse; |
|
} |
|
.bounce { |
|
animation-name: bounce; |
|
} |
|
.bounce-pulse { |
|
animation-name: bounce-pulse; |
|
} |
|
.bounce-pulse-alt { |
|
animation-name: bounce-pulse-alt; |
|
} |
|
.beat { |
|
animation-name: beat; |
|
} |
|
.swell { |
|
animation-name: swell; |
|
} |
|
.jelly { |
|
animation-name: jelly; |
|
} |
|
.jelly-alt { |
|
animation-name: jelly-alt; |
|
} |
|
.float { |
|
animation-name: float; |
|
} |
|
`; |
|
|
|
/** |
|
* Represents the stylesheet content of the `page.css` file that the module |
|
* provides in place of the `page.css` file that the original documentation |
|
* generator would have provided. This stylesheet is used to style the page |
|
* itself, and not the documentation. |
|
*/ |
|
export const page = ` |
|
/* @import "./normalize.css"; |
|
@import "./variables.css"; |
|
@import "./animation.css"; |
|
*/ |
|
html, |
|
body { |
|
width: 100vw; |
|
height: 100vh; |
|
font-family: var(--font-sans); |
|
font-size: var(--text-base); |
|
line-height: var(--leading-10); |
|
margin: 0; |
|
padding: 0; |
|
background-color: var(--bg-body); |
|
transition: background-color 150ms ease-in-out; |
|
-webkit-font-smoothing: antialiased; |
|
-moz-osx-font-smoothing: grayscale; |
|
-webkit-tap-highlight-color: transparent; |
|
-webkit-touch-callout: none; |
|
-webkit-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
} |
|
body { |
|
display: flex; |
|
} |
|
:root:not(:is(.light, .dark)) { |
|
color-scheme: light dark; |
|
} |
|
.dark { |
|
color-scheme: dark; |
|
} |
|
.light { |
|
color-scheme: light; |
|
} |
|
.color-scheme-toggle { |
|
content: ""; |
|
width: 2rem; |
|
height: 2rem; |
|
margin: 0; |
|
padding: 0; |
|
position: fixed; |
|
right: 2rem; |
|
bottom: 2rem; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
cursor: pointer; |
|
z-index: 99999; |
|
border: none; |
|
opacity: 0.8; |
|
transition: all 250ms ease-out; |
|
transform: scale(1); |
|
transform-origin: 50% 50%; |
|
outline: none; |
|
appearance: none; |
|
-webkit-mask: var(--icon) no-repeat; |
|
mask: var(--icon) no-repeat; |
|
-webkit-mask-size: 100% 100%; |
|
mask-size: 100% 100%; |
|
background-color: currentColor; |
|
color: inherit; |
|
} |
|
.color-scheme-toggle:hover { |
|
opacity: 1; |
|
} |
|
.color-scheme-toggle:focus { |
|
outline: none; |
|
} |
|
.color-scheme-toggle.active { |
|
background-color: transparent; |
|
} |
|
.i-sun,[i-sun=""] { |
|
--icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cpath fill='currentColor' d='M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12Zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8ZM11 1h2v3h-2V1Zm0 19h2v3h-2v-3ZM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93ZM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121Zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121ZM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121ZM23 11v2h-3v-2h3ZM4 11v2H1v-2h3Z'/%3E%3C/svg%3E"); |
|
} |
|
.dark .i-moon, |
|
.dark [i-moon=""] { |
|
--icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cpath fill='currentColor' d='M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.98 6.98 0 0 0 10 7Zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12Z'/%3E%3C/svg%3E"); |
|
} |
|
.dark .i-moon-fog, |
|
.dark [i-moon-fog=""] { |
|
--icon: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='1em' height='1em'%3E%3Cg fill='none'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 22h8'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 19h14' opacity='.5'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 16h20'/%3E%3Cpath fill='currentColor' d='m21.067 11.857l-.642-.388l.642.388Zm-8.924-8.924l-.388-.642l.388.642ZM2.75 12A9.25 9.25 0 0 1 12 2.75v-1.5C6.063 1.25 1.25 6.063 1.25 12h1.5Zm12.75 2.25A5.75 5.75 0 0 1 9.75 8.5h-1.5a7.25 7.25 0 0 0 7.25 7.25v-1.5Zm4.925-2.781A5.746 5.746 0 0 1 15.5 14.25v1.5a7.247 7.247 0 0 0 6.21-3.505l-1.285-.776ZM9.75 8.5a5.747 5.747 0 0 1 2.781-4.925l-.776-1.284A7.246 7.246 0 0 0 8.25 8.5h1.5Zm11.5 3.5a9.216 9.216 0 0 1-.77 3.7l1.375.6c.576-1.318.895-2.773.895-4.3h-1.5ZM3.52 15.7a9.216 9.216 0 0 1-.77-3.7h-1.5c0 1.527.319 2.982.895 4.3l1.374-.6ZM12 2.75a.384.384 0 0 1-.268-.118a.285.285 0 0 1-.082-.155c-.004-.031-.002-.121.105-.186l.776 1.284c.503-.304.665-.861.606-1.299c-.062-.455-.42-1.026-1.137-1.026v1.5Zm9.71 9.495c-.066.107-.156.109-.187.105a.285.285 0 0 1-.155-.082a.384.384 0 0 1-.118-.268h1.5c0-.717-.571-1.075-1.026-1.137c-.438-.059-.995.103-1.299.606l1.284.776Z' opacity='.5'/%3E%3Cpath stroke='currentColor' d='M19.9 2.307a.483.483 0 0 0-.9 0l-.43 1.095a.484.484 0 0 1-.272.274l-1.091.432a.486.486 0 0 0 0 .903l1.091.432a.48.48 0 0 1 .272.273L19 6.81c.162.41.74.41.9 0l.43-1.095a.484.484 0 0 1 .273-.273l1.091-.432a.486.486 0 0 0 0-.903l-1.091-.432a.484.484 0 0 1-.273-.274l-.43-1.095ZM16.033 8.13a.483.483 0 0 0-.9 0l-.157.399a.484.484 0 0 1-.272.273l-.398.158a.486.486 0 0 0 0 .903l.398.157c.125.05.223.148.272.274l.157.399c.161.41.739.41.9 0l.157-.4a.484.484 0 0 1 .272-.273l.398-.157a.486.486 0 0 0 0-.903l-.398-.158a.484.484 0 0 1-.272-.273l-.157-.4Z'/%3E%3C/g%3E%3C/svg%3E"); |
|
} |
|
.i-sun, .dark .i-moon { |
|
opacity: 1; |
|
} |
|
.dark .i-sun, |
|
.light .i-moon { |
|
opacity: 0; |
|
} |
|
.unicon { |
|
-webkit-mask: var(--icon) no-repeat; |
|
mask: var(--icon) no-repeat; |
|
-webkit-mask-size: 100% 100%; |
|
mask-size: 100% 100%; |
|
background-color: currentColor; |
|
color: inherit; |
|
width: 1em; |
|
height: 1em |
|
} |
|
table { |
|
border-color: inherit; |
|
border-collapse: collapse; |
|
} |
|
#content { |
|
padding: var(--padding-content, 2rem); |
|
width: var(--width-content); |
|
box-sizing: border-box; |
|
margin: 0; |
|
background-color: var(--bg-content); |
|
border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); |
|
overflow-y: auto; |
|
} |
|
#content a > h2 { |
|
margin: 0; |
|
} |
|
p { |
|
margin: 0; |
|
} |
|
a { |
|
color: inherit; |
|
text-decoration: inherit; |
|
} |
|
.link { |
|
color: var(--color-link); |
|
text-decoration: var(--text-decoration-link); |
|
transition: var(--transition-color), var(--transition-underline); |
|
} |
|
.link:hover { |
|
color: var(--color-link-hover); |
|
text-decoration-color: var(--color-link-underline); |
|
} |
|
#sidepanel { |
|
flex-shrink: 0; |
|
margin: 0; |
|
padding: 0.75rem 0 0.75rem; |
|
height: 100vh; |
|
width: fit-content; |
|
min-width: var(--min-width-sidepanel); |
|
max-width: var(--max-width-sidepanel); |
|
position: sticky; |
|
top: 0; |
|
left: 0; |
|
bottom: 0; |
|
overflow-y: scroll; |
|
box-sizing: border-box; |
|
overscroll-behavior-y: auto; |
|
scrollbar-width: thin; |
|
} |
|
#sidepanel ul { |
|
list-style: none; |
|
padding-left: 1rem; |
|
} |
|
#sidepanel li { |
|
display: block; |
|
margin: -0.125rem 0; |
|
} |
|
#sidepanel a { |
|
display: flex; |
|
padding: 0.25rem 1rem 0.25rem; |
|
border-radius: var(--border-radius-md) 0 0 var(--border-radius-md); |
|
position: relative; |
|
background-color: var(--bg-content); |
|
transition: all 0ms; |
|
} |
|
#sidepanel a span { |
|
display: block; |
|
width: 100%; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
background-color: inherit; |
|
} |
|
#sidepanel :is(a:target, a:hover, a.active) { |
|
background-color: var(--bg-highlight) !important; |
|
} |
|
#sidepanel a::before, |
|
#sidepanel a::after { |
|
content: ""; |
|
position: absolute; |
|
background-color: #f000; |
|
right: 0; |
|
width: var(--border-radius-md); |
|
height: 0; |
|
padding: calc(var(--border-radius-md)) 0; |
|
opacity: 0; |
|
/* transition: box-shadow 60ms 1ms ease; */ |
|
} |
|
#sidepanel a::before { |
|
top: calc(var(--border-radius-md) * -2); |
|
border-bottom-right-radius: var(--border-radius-md); |
|
box-shadow: 0.5rem 0.5rem 0 0.5rem var(--bg-highlight); |
|
} |
|
#sidepanel a::after { |
|
bottom: calc(var(--border-radius-md) * -2); |
|
border-top-right-radius: var(--border-radius-md); |
|
box-shadow: 0.5rem -0.5rem 0 0.5rem var(--bg-highlight); |
|
} |
|
#sidepanel :is(a:target, a:hover, a.active)::before, |
|
#sidepanel :is(a:target, a:hover, a.active)::after { |
|
opacity: 1; |
|
} |
|
#sidepanel .section_title { |
|
display: flex; |
|
align-items: center; |
|
gap: 0.625rem; |
|
margin: 0.625rem 1.25rem 0.625rem; |
|
} |
|
#sidepanel .section_title h3 { |
|
margin: 0; |
|
line-height: 1; |
|
} |
|
#searchbar { |
|
width: 100%; |
|
margin: 1.25rem 0; |
|
padding: 0.575rem 1.125rem; |
|
box-sizing: border-box; |
|
border: 1.5px solid var(--border-searchbar); |
|
background-color: var(--bg-searchbar); |
|
border-radius: var(--border-radius-full); |
|
font-size: var(--text-base); |
|
font-weight: var(--font-medium, 500); |
|
} |
|
#searchResults ul { |
|
list-style: none; |
|
margin: 0; |
|
padding: 0; |
|
} |
|
#searchResults ul li { |
|
display: block; |
|
} |
|
#searchResults ul a { |
|
display: flex; |
|
gap: 1rem; |
|
align-items: center; |
|
padding: 0.625rem 0.75rem; |
|
justify-content: space-between; |
|
line-height: 1; |
|
background-color: var(--bg-search-results); |
|
transition: background-color 0.125s ease-in-out; |
|
} |
|
#searchResults ul a div:first-child { |
|
display: flex; |
|
gap: 0.625rem; |
|
align-items: center; |
|
} |
|
#searchResults ul a div:last-child { |
|
color: var(--color-text-subtitle); |
|
font-style: var(--font-style-subtitle); |
|
} |
|
#searchResults ul a:hover { |
|
background-color: var(--bg-search-results-hover); |
|
} |
|
#searchResults ul > * + * { |
|
border-top: var(--border-results-divider); |
|
} |
|
`; |
|
|
|
/** |
|
* Represents the stylesheet content of the `styles.css` file that the module |
|
* provides in place of the `styles.css` file that the original documentation |
|
* generator would have provided. |
|
*/ |
|
export const styles = ` |
|
/* @import "./normalize.css"; |
|
@import "./variables.css"; |
|
@import "./animation.css"; */ |
|
|
|
/* #region styles */ |
|
.symbol_group { |
|
margin-top: 1rem; |
|
} |
|
/* doc classes */ |
|
.symbol_group > * + * { |
|
margin-top: 3rem; |
|
} |
|
.symbol > * + * { |
|
margin-top: 2rem; |
|
} |
|
.symbol_header { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: flex-start; |
|
} |
|
.doc_block_items > * + * { |
|
margin-top: 1.75rem; |
|
} |
|
.doc_block_title { |
|
font-weight: var(--font-medium, 500); |
|
background-color: unset !important; |
|
} |
|
.doc_block_title > * + * { |
|
margin-top: 0.25rem; |
|
} |
|
.doc_block_title > *:first-child { |
|
font-size: var(--text-xl); |
|
line-height: var(--leading-14); |
|
} |
|
.doc_block_subtitle { |
|
font-size: var(--text-lg); |
|
line-height: var(--leading-12); |
|
font-weight: var(--font-medium, 500); |
|
} |
|
.doc_block_subtitle > * + * { |
|
margin-top: 0.125rem; |
|
} |
|
.doc_block_subtitle_text { |
|
color: var(--color-text-subtitle); |
|
font-style: var(--font-style-subtitle); |
|
} |
|
.section_title { |
|
font-size: var(--text-base); |
|
line-height: var(--leading-10); |
|
font-weight: var(--font-medium); |
|
color: var(--color-text-subtitle); |
|
padding: var(--padding-section-title); |
|
} |
|
.section { |
|
margin-top: 0.5rem; |
|
} |
|
.section > * + * { |
|
margin-top: 1.75rem; |
|
} |
|
.doc_item { |
|
/* TODO: group */ |
|
position: relative; |
|
} |
|
.doc_item:hover .anchor { |
|
opacity: 1; |
|
} |
|
.doc_entry { |
|
display: flex; |
|
justify-content: space-between; |
|
} |
|
.doc_entry_children { |
|
display: flex; |
|
align-items: center; |
|
overflow-wrap: break-word; |
|
gap: 0.5rem; |
|
} |
|
.doc_entry + .markdown { |
|
margin-top: 1rem; |
|
} |
|
.function_overload_selectors { |
|
gap: 0.5rem; |
|
margin: 1rem 0; |
|
} |
|
.function_overload_selectors > * + * { |
|
margin-top: 0.5rem; |
|
} |
|
.function_overload_label { |
|
display: block; |
|
padding: var(--padding-overload-label); |
|
border-radius: var(--border-radius-overload-label); |
|
border: var(--border-overload-label); |
|
cursor: var(--cursor-overload-label); |
|
} |
|
.function_overload_label:hover { |
|
border-color: var(--bg-overload-label); |
|
} |
|
.symbol_section, |
|
.symbol_section > tr { |
|
display: block; |
|
} |
|
.symbol_section_symbol { |
|
display: block; |
|
padding: var(--padding-symbol-section); |
|
font-weight: var(--font-bold); |
|
} |
|
.symbol_section_symbol > div { |
|
min-width: var(--min-width-symbol-section); |
|
display: flex; |
|
align-items: center; |
|
} |
|
.symbol_section_symbol > div > * + * { |
|
margin-left: 0.5rem; |
|
} |
|
.symbol_section_doc { |
|
display: block; |
|
padding: 0.25rem 0; |
|
font-size: var(--text-wa); |
|
line-height: var(--leading-8); |
|
color: var(--color-text-doc); |
|
} |
|
@media (min-width: 1024px) { |
|
.symbol_section { |
|
display: table; |
|
} |
|
.symbol_section > tr { |
|
display: table-row; |
|
} |
|
.symbol_section_symbol { |
|
display: table-cell; |
|
} |
|
.symbol_section_doc { |
|
display: table-cell; |
|
} |
|
} |
|
.anchor { |
|
float: left; |
|
line-height: 1; |
|
display: block; |
|
opacity: 0; |
|
color: var(--color-text-accent); |
|
margin-left: -1.25rem; |
|
padding-right: 0.5rem; |
|
transition: opacity 200ms ease-in-out; |
|
} |
|
.anchor:hover, |
|
*:hover > .anchor, |
|
*:target > .anchor { |
|
opacity: 1 !important; |
|
} |
|
/*.muted div[class^="kind_"] { |
|
--color-kind-function: var(--color-kind-function-muted); |
|
--bg-kind-function: var(--bg-kind-function-muted); |
|
--color-kind-enum: var(--color-kind-enum-muted); |
|
--bg-kind-enum: var(--bg-kind-enum-muted); |
|
--color-kind-class: var(--color-kind-class-muted); |
|
--bg-kind-class: var(--bg-kind-class-muted); |
|
--color-kind-interface: var(--color-kind-interface-muted); |
|
--bg-kind-interface: var(--bg-kind-interface-muted); |
|
--color-kind-type-alias: var(--color-kind-type-alias-muted); |
|
--bg-kind-type-alias: var(--bg-kind-type-alias-muted); |
|
--color-kind-namespace: var(--color-kind-namespace-muted); |
|
--bg-kind-namespace: var(--bg-kind-namespace-muted); |
|
--color-kind-variable: var(--color-kind-variable-muted); |
|
--bg-kind-variable: var(--bg-kind-variable-muted); |
|
}*/ |
|
.kind_Function_text { |
|
color: var(--color-kind-function); |
|
} |
|
.kind_Function_bg { |
|
background-color: var(--bg-kind-function); |
|
} |
|
.kind_Variable_text { |
|
color: var(--color-kind-variable); |
|
} |
|
.kind_Variable_bg { |
|
background-color: var(--bg-kind-variable); |
|
} |
|
.kind_Class_text { |
|
color: var(--color-kind-class); |
|
} |
|
.kind_Class_bg { |
|
background-color: var(--bg-kind-class); |
|
} |
|
.kind_Enum_text { |
|
color: var(--color-kind-enum); |
|
} |
|
.kind_Enum_bg { |
|
background-color: var(--bg-kind-enum); |
|
} |
|
.kind_Interface_text { |
|
color: var(--color-kind-interface); |
|
} |
|
.kind_Interface_bg { |
|
background-color: var(--bg-kind-interface); |
|
} |
|
.kind_TypeAlias_text { |
|
color: var(--color-kind-type-alias); |
|
} |
|
.kind_TypeAlias_bg { |
|
background-color: var(--bg-kind-type-alias); |
|
} |
|
.kind_Namespace_text { |
|
color: var(--color-kind-namespace); |
|
} |
|
.kind_Namespace_bg { |
|
background-color: var(--bg-kind-namespace); |
|
} |
|
.symbol_kind { |
|
border-radius: var(--border-radius-kind); |
|
width: var(--width-kind); |
|
height: var(--height-kind); |
|
display: inline-flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-weight: var(--font-semibold); |
|
font-size: var(--text-sm); |
|
line-height: 1; |
|
flex-shrink: 0; |
|
user-select: none; |
|
} |
|
/* markdown */ |
|
.markdown > * + * { |
|
margin-top: var(--margin-markdown-between); |
|
} |
|
.markdown :not(pre) > code { |
|
font-family: var(--font-mono); |
|
font-size: var(--text-sm, 0.875rem); |
|
line-height: var(--leading-8); |
|
padding: 0.25rem 0.375rem; |
|
border-radius: var(--border-radius-sm); |
|
background-color: var(--bg-code); |
|
} |
|
.markdown pre { |
|
font-family: var(--font-mono); |
|
font-size: var(--text-sm); |
|
line-height: var(--leading-8); |
|
padding: 0.625rem; |
|
border-radius: var(--border-radius-base); |
|
color: var(--color-fg-muted); |
|
background-color: var(--bg-code); |
|
overflow-x: auto; |
|
} |
|
.markdown a { |
|
color: var(--color-link); |
|
transition: var(--transition-color); |
|
} |
|
.markdown a:hover { |
|
color: var(--color-link-hover); |
|
} |
|
.markdown p { |
|
margin: 0.25rem 0; |
|
text-align: left; |
|
} |
|
.markdown table { |
|
table-layout: auto; |
|
} |
|
.markdown td { |
|
padding: var(--padding-table-cell); |
|
border: var(--border-table-cell); |
|
} |
|
.markdown th { |
|
font-weight: var(--font-bold, 700); |
|
text-align: var(--text-align-table-header); |
|
} |
|
.markdown_summary { |
|
display: flex; |
|
color: var(--color-text-accent); |
|
padding: 0.5rem 0; |
|
} |
|
.markdown_summary p { |
|
display: block; |
|
} |
|
.markdown_summary a { |
|
color: var(--color-link); |
|
transition: var(--transition-color); |
|
} |
|
.markdown_summary a:hover { |
|
color: var(--color-link-hover); |
|
} |
|
.markdown_summary :not(pre) > code, .markdown_summary > code { |
|
font-family: var(--font-mono); |
|
font-size: var(--text-sm, 0.875rem); |
|
line-height: var(--leading-8, 1.25rem); |
|
padding: var(--padding-code, 0.25rem 0.375rem); |
|
border-radius: var(--border-radius-sm, 0.25rem); |
|
background-color: var(--bg-code); |
|
} |
|
.example > details .arrow_toggle { |
|
color: var(--color-text-accent); |
|
} |
|
.example > details[open] .arrow_toggle { |
|
transform: rotate(90deg); |
|
} |
|
.example > details > summary { |
|
list-style: none; |
|
display: flex; |
|
align-items: center; |
|
gap: 0.5rem; |
|
padding: 0.5rem 0.75rem; |
|
border-radius: var(--border-radius-md); |
|
width: 100%; |
|
line-height: var(--leading-10); |
|
} |
|
.example > details > summary::-webkit-details-marker { |
|
display: none; |
|
} |
|
/* #endregion styles */ |
|
`; |
|
|
|
export default { |
|
light, |
|
dark, |
|
animation, |
|
normalize, |
|
variables, |
|
styles, |
|
page, |
|
} |