From 9b1ef335778208d0df62cb74dbcf37542bd3b73e Mon Sep 17 00:00:00 2001 From: Lucas Date: Tue, 29 Sep 2020 08:38:35 +0700 Subject: [PATCH] Move styles in SCSS vars to CSS vars --- css/pico.classless.css | 755 ++++++++++-------- css/pico.classless.min.css | 2 +- css/pico.css | 816 +++++++++++--------- css/pico.fluid.classless.css | 755 ++++++++++-------- css/pico.fluid.classless.min.css | 2 +- css/pico.min.css | 2 +- css/pico.slim.css | 514 +++++++----- css/pico.slim.min.css | 2 +- css/themes/default.css | 228 ++++++ css/themes/default.min.css | 1 + docs/css/pico.docs.css | 99 +-- docs/css/pico.docs.min.css | 2 +- docs/index.html | 12 +- docs/scss/components/_nav.scss | 4 +- docs/scss/components/_theme-switcher.scss | 24 +- docs/scss/content/_code.scss | 16 +- docs/scss/content/_typography.scss | 6 +- docs/scss/layout/_aside.scss | 4 +- docs/scss/layout/_documentation.scss | 18 +- docs/scss/layout/_main.scss | 35 +- docs/scss/themes/{_docs.scss => docs.scss} | 1 + docs/scss/themes/docs/_icons.scss | 7 + index.html | 370 +++++++++ scss/_variables.scss | 102 --- scss/components/_accordion.scss | 15 +- scss/components/_card-sectioning.scss | 72 +- scss/components/_card.scss | 31 +- scss/components/_nav.scss | 40 +- scss/components/_tooltip.scss | 4 +- scss/content/_button-styles.scss | 33 +- scss/content/_button.scss | 25 +- scss/content/_code.scss | 14 +- scss/content/_form-alt-input-types.scss | 90 +-- scss/content/_form-checkbox-radio.scss | 35 +- scss/content/_form.scss | 66 +- scss/content/_table.scss | 10 +- scss/content/_typography.scss | 71 +- scss/layout/_container.scss | 4 +- scss/layout/_document.scss | 20 +- scss/layout/_grid.scss | 4 +- scss/layout/_scroller.scss | 2 +- scss/layout/_section.scss | 14 +- scss/layout/_sectioning.scss | 24 +- scss/themes/{_default.scss => default.scss} | 2 + scss/themes/default/_colors.scss | 6 - scss/themes/default/_dark.scss | 198 ++--- scss/themes/default/_icons.scss | 13 + scss/themes/default/_light.scss | 99 +-- scss/themes/default/_styles.scss | 93 +++ 49 files changed, 2921 insertions(+), 1841 deletions(-) create mode 100644 css/themes/default.css create mode 100644 css/themes/default.min.css rename docs/scss/themes/{_docs.scss => docs.scss} (85%) create mode 100644 docs/scss/themes/docs/_icons.scss create mode 100644 index.html rename scss/themes/{_default.scss => default.scss} (66%) create mode 100644 scss/themes/default/_icons.scss create mode 100644 scss/themes/default/_styles.scss diff --git a/css/pico.classless.css b/css/pico.classless.css index a10a9565..0aaedcaa 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -5,144 +5,230 @@ /** * Theme: default */ +:root { + --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --titles-font: var(--text-font); + --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --text-weight: 400; + --titles-weight: 700; + --form-element-weight: var(--text-weight); + --buttons-weight: var(--text-weight); + --code-weight: var(--text-weight); + --base-font-xs: 16px; + --base-font-sm: 17px; + --base-font-md: 18px; + --base-font-lg: 19px; + --base-font-xl: 20px; + --h1-size: 2rem; + --h2-size: 1.75rem; + --h3-size: 1.5rem; + --h4-size: 1.25rem; + --h5-size: 1.125rem; + --block-round: .25rem ; + --form-element-border-width: 1px; + --form-element-outline-width: 3px; + --checkbox-radio-border-width: 2px; + --switch-border-width: 3px; + --form-element-spacing-vertical: .75rem; + --form-element-spacing-horizontal: 1rem; + --button-round: var(--block-round); + --button-border-width: var(--form-element-border-width); + --button-outline-width: var(--form-element-outline-width); + --button-spacing-vertical: var(--form-element-spacing-vertical); + --button-spacing-horizontal: var(--form-element-spacing-horizontal); + --spacing-gutter: 1rem; + --spacing-block: 2rem; + --spacing-factor-xs: 1; + --spacing-factor-sm: 1.25; + --spacing-factor-md: 1.5; + --spacing-factor-lg: 1.75; + --spacing-factor-xl: 2; + --spacing-typography: 1.5rem; + --spacing-form-element: .25rem; + --transition: .2s ease-in-out; +} + +:root { + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-hover: #08769b; - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-hover: #415462; - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-hover: #0d1419; - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-border: rgba(255, 223, 128, 0.5); - --contrast-border-h: #ffdf80; - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.04); + --background: #FFF; + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #08769b; + --primary-hover-border: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: #73828c; + --secondary-hover: #415462; + --secondary-hover-border: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: #2c3d49; + --contrast-hover: #0d1419; + --contrast-hover-border: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: #FFF; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.125); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #288a6a; + --invalid: #b94646; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; + --card-background: #FFF; + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --code-background: #f3f5f7; + --code-inlined: #edf0f3; + --code-color-1: #73828c; + --code-color-2: #b34d80; + --code-color-3: #3d888f; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(115, 130, 140, 0.075); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-border-h: rgba(255, 223, 128, 0.5); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } } [data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } /** @@ -169,35 +255,35 @@ html { -webkit-text-size-adjust: 100%; background: var(--background); color: var(--text); - font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 16px; - font-weight: 400; - line-height: 1.5; + font-family: var(--text-font); + font-size: var(--base-font-xs); + font-weight: var(--text-weight); + line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } @media (min-width: 576px) { html { - font-size: 17px; + font-size: var(--base-font-sm); } } @media (min-width: 768px) { html { - font-size: 18px; + font-size: var(--base-font-md); } } @media (min-width: 992px) { html { - font-size: 19px; + font-size: var(--base-font-lg); } } @media (min-width: 1200px) { html { - font-size: 20px; + font-size: var(--base-font-xl); } } @@ -220,7 +306,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: 2rem 1rem; + padding: var(--spacing-block) var(--spacing-gutter); } @media (min-width: 576px) { @@ -228,7 +314,7 @@ body > footer { body > main, body > footer { max-width: 510px; - padding: 2.5rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; } } @@ -237,7 +323,7 @@ body > footer { body > main, body > footer { max-width: 700px; - padding: 3rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; } } @@ -246,7 +332,7 @@ body > footer { body > main, body > footer { max-width: 920px; - padding: 3.5rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; } } @@ -255,7 +341,7 @@ body > footer { body > main, body > footer { max-width: 1130px; - padding: 4rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; } } @@ -264,30 +350,30 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: 4rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); } @media (min-width: 576px) { section { - margin-bottom: 5rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2); } } @media (min-width: 768px) { section { - margin-bottom: 6rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2); } } @media (min-width: 992px) { section { - margin-bottom: 7rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2); } } @media (min-width: 1200px) { section { - margin-bottom: 8rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2); } } @@ -302,7 +388,7 @@ figure { } figure figcaption { - padding: 0.5rem 0; + padding: calc(var(--spacing-gutter) / 2) 0; color: var(--muted-text); } @@ -356,7 +442,7 @@ pre, table, ul { margin-top: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); color: var(--text); font-size: 1rem; font-style: normal; @@ -366,7 +452,7 @@ a { background-color: transparent; color: var(--primary); text-decoration: none; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { @@ -386,43 +472,43 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-weight: var(--titles-weight); } h1 { - margin-bottom: 3rem; + margin-bottom: calc(var(--spacing-typography) * 2); color: var(--h1); - font-size: 2rem; + font-size: var(--h1-size); } h2 { - margin-bottom: 2.625rem; + margin-bottom: calc(var(--spacing-typography) * 1.75); color: var(--h2); - font-size: 1.75rem; + font-size: var(--h2-size); } h3 { - margin-bottom: 2.25rem; + margin-bottom: calc(var(--spacing-typography) * 1.5); color: var(--h3); - font-size: 1.5rem; + font-size: var(--h3-size); } h4 { - margin-bottom: 1.875rem; + margin-bottom: calc(var(--spacing-typography) * 1.25); color: var(--h4); - font-size: 1.25rem; + font-size: var(--h4-size); } h5 { - margin-bottom: 1.6875rem; + margin-bottom: calc(var(--spacing-typography) * 1.125); color: var(--h5); - font-size: 1.125rem; + font-size: var(--h5-size); } h6 { color: var(--h6); - font-size: 1rem; + font-size: var(--h6-size); } address ~ h1, @@ -435,7 +521,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -448,7 +534,7 @@ p ~ h2, pre ~ h2, table ~ h2, ul ~ h2 { - margin-top: 2.625rem; + margin-top: calc(var(--spacing-typography) * 1.75); } address ~ h3, @@ -461,7 +547,7 @@ p ~ h3, pre ~ h3, table ~ h3, ul ~ h3 { - margin-top: 2.25rem; + margin-top: calc(var(--spacing-typography) * 1.5); } address ~ h4, @@ -474,7 +560,7 @@ p ~ h4, pre ~ h4, table ~ h4, ul ~ h4 { - margin-top: 1.875rem; + margin-top: calc(var(--spacing-typography) * 1.25); } address ~ h5, @@ -487,7 +573,7 @@ p ~ h5, pre ~ h5, table ~ h5, ul ~ h5 { - margin-top: 1.6875rem; + margin-top: calc(var(--spacing-typography) * 1.125); } address ~ h6, @@ -500,11 +586,11 @@ p ~ h6, pre ~ h6, table ~ h6, ul ~ h6 { - margin-top: 1.5rem; + margin-top: calc(var(--spacing-typography)); } hgroup { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } hgroup * { @@ -514,11 +600,11 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -551,12 +637,12 @@ small { ul, ol { - padding-left: 1.5rem; + padding-left: var(--spacing-typography); } ul li, ol li { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); } ul li { @@ -572,13 +658,13 @@ mark { blockquote { display: block; - margin: 3rem 0; - padding: 1rem; + margin: var(--spacing-typography) 0; + padding: var(--spacing-gutter); border-left: 0.25rem solid var(--muted-border); } blockquote footer { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); color: var(--muted-text); } @@ -669,7 +755,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -680,20 +766,22 @@ a[role="button"] { button, input[type="submit"], input[type="button"], +input[type="reset"], [type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; - border-radius: 0.25rem; + padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); + border: var(--button-border-width) solid var(--primary-border); + border-radius: var(--button-round); outline: none; background-color: var(--primary); + box-shadow: var(--button-shadow); color: var(--primary-inverse); font-size: 1rem; - font-weight: normal; - line-height: 1.5; + font-weight: var(--buttons-weight); + line-height: var(--line-height); text-align: center; cursor: pointer; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } button:hover, button:active, button:focus, @@ -703,21 +791,27 @@ input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, +input[type="reset"]:hover, +input[type="reset"]:active, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:hover, [type="file"]::-webkit-file-upload-button:active, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { + border-color: var(--primary-hover-border); background-color: var(--primary-hover); + box-shadow: var(--button-hover-shadow); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); } input[type="reset"] { @@ -744,7 +838,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -756,7 +850,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -818,12 +911,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc(1.5rem + 1.5rem + 2px); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); } fieldset { margin: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); padding: 0; border: 0; } @@ -831,7 +924,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -849,20 +942,20 @@ textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: 0.75rem 1rem; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); vertical-align: middle; } input, select, textarea { - border: 1px solid var(--input-border); - border-radius: 0.25rem; + border: var(--form-element-border-width) solid var(--input-border); + border-radius: var(--block-round); outline: none; background-color: var(--input-background); color: var(--text); - font-weight: normal; - transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + font-weight: var(--form-element-weight); + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } input::placeholder, input::-webkit-input-placeholder, @@ -879,7 +972,8 @@ select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-background); } input[readonly], input[disabled], @@ -899,6 +993,18 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, +select[readonly]:active, +select[readonly]:focus, +select[disabled]:active, +select[disabled]:focus, +textarea[readonly]:active, +textarea[readonly]:focus, +textarea[disabled]:active, +textarea[disabled]:focus { + box-shadow: none !important; +} + input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { @@ -908,20 +1014,19 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) input[disabled], select[disabled], textarea[disabled] { - cursor: not-allowed; - opacity: .5; + opacity: .66; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } input:not([type="range"]):not([type="file"]):focus, select:focus, textarea:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); } select::-ms-expand { @@ -930,8 +1035,8 @@ select::-ms-expand { } select:not([multiple]):not([size]) { - padding-right: 2.5rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); + background-image: var(--icon-chevron); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -944,14 +1049,14 @@ form small { input + small, select + small, textarea + small { - margin-top: -1rem; - margin-bottom: 1.5rem; + margin-top: calc(var(--spacing-typography) * -0.5); + margin-bottom: var(--spacing-typography); } label > input, label > select, label > textarea { - margin-top: 0.25rem; + margin-top: var(--spacing-form-element); } /** @@ -966,9 +1071,9 @@ label > textarea { display: inline-block; width: 1.25rem; height: 1.25rem; + margin-top: -.125rem; margin-right: .375rem; - margin-bottom: 0.25rem; - border-width: 2px; + border-width: var(--checkbox-radio-border-width); vertical-align: middle; cursor: pointer; } @@ -978,16 +1083,22 @@ label > textarea { display: none; } -[type="checkbox"]:checked, -[type="radio"]:checked { - border-color: var(--primary); - background-color: var(--primary); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="radio"]:checked, +[type="radio"]:indeterminate { + border-color: var(--input-hover-border); + background-color: var(--input-hover-border); + background-image: var(--icon-checkbox); background-position: center; background-repeat: no-repeat; background-size: .75rem auto; } +[type="checkbox"]:indeterminate, +[type="radio"]:indeterminate { + background-image: var(--icon-minus); +} + [type="checkbox"] ~ label, [type="radio"] ~ label { display: inline-block; @@ -1002,15 +1113,15 @@ label > textarea { [type="radio"]:checked { border-width: .33rem; - border-color: var(--primary); - background-color: var(--primary-inverse); + border-color: var(--input-hover-border); + background-color: var(--input-inverse); background-image: none; } [type="checkbox"][role="switch"] { width: 2.25rem; height: 1.25rem; - border: 3px solid var(--input-border); + border: var(--switch-border-width) solid var(--input-border); border-radius: 1.25rem; background-color: var(--input-border); line-height: 1.25rem; @@ -1018,23 +1129,23 @@ label > textarea { [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - 6px); + width: calc(1.25rem - (var(--switch-border-width)*2)); height: 100%; border-radius: 50%; - background-color: var(--primary-inverse); + background-color: var(--input-inverse); content: ''; transition: margin 0.1s ease-in-out; } [type="checkbox"][role="switch"]:checked { - border-color: var(--primary); - background-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-border); background-image: none; } [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(1.125rem - 3px); + margin-left: calc(1.125rem - var(--switch-border-width)); } /** @@ -1051,12 +1162,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: 0.125rem; + border-radius: calc(var(--block-round)/2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: 0.125rem; + border-radius: calc(var(--block-round)/2); } [type="date"], @@ -1064,7 +1175,7 @@ label > textarea { [type="month"], [type="time"], [type="week"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-date); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1079,29 +1190,32 @@ label > textarea { } [type="time"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-time); } [type="file"] { - padding: 0.5rem 0; + padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; background: none; - color: var(--muted-text); } [type="file"]::-webkit-file-upload-button { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); + border: var(--button-border-width) solid var(--secondary-border); background-color: var(--secondary); + box-shadow: var(--button-shadow); color: var(--secondary-inverse); + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } [type="file"]:hover, [type="file"]:active, [type="file"]:focus { border: none; + background: none; } [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { + border-color: var(--secondary-hover-border); background-color: var(--secondary-hover); } @@ -1110,7 +1224,7 @@ label > textarea { } [type="file"]:focus::-webkit-file-upload-button { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); } [type="range"] { @@ -1126,25 +1240,25 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { @@ -1156,12 +1270,11 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; - border: 2px solid var(--background); + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); } [type="range"]::-moz-range-thumb { @@ -1169,11 +1282,11 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); } [type="range"]::-ms-thumb { @@ -1181,31 +1294,31 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); +} + +[type="range"]:focus { + background: transparent; } [type="range"]:focus::-webkit-slider-runnable-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-moz-range-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-ms-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-ms-fill-lower { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:active::-webkit-slider-thumb { @@ -1228,9 +1341,9 @@ label > textarea { } [type="search"] { - border-radius: 3rem; - padding-left: 2.5rem !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + border-radius: 5rem; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + background-image: var(--icon-search); background-position: center left .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1254,11 +1367,11 @@ table { th, td { - padding: 0.5rem 1rem; + padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); border-bottom: 1px solid var(--table-border); color: var(--muted-text); font-size: 0.875rem; - font-weight: 400; + font-weight: var(--text-weight); text-align: left; } @@ -1273,7 +1386,7 @@ thead td { border-bottom: 3px solid var(--table-border); } -tbody tr:nth-child(odd) { +table[role="grid"] tbody tr:nth-child(odd) { background-color: var(--table-stripping); } @@ -1284,7 +1397,7 @@ pre, code, kbd, samp { - font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--code-font); font-size: 1rem; } @@ -1299,7 +1412,7 @@ kbd { background: var(--code-inlined); color: var(--code-color-1); font-size: 85%; - font-weight: 400; + font-weight: var(--code-weight); line-height: initial; } @@ -1339,13 +1452,13 @@ code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: 0.25rem; + border-radius: var(--block-round); } pre { display: block; - margin-bottom: 2rem; - padding: 2rem 1rem; + margin-bottom: var(--spacing-block); + padding: var(--spacing-block) var(--spacing-gutter); overflow-x: auto; background: var(--code-background); } @@ -1355,12 +1468,12 @@ pre > code { padding: 0; background: transparent; font-size: 14px; - line-height: 1.5; + line-height: var(--line-height); } code b { color: var(--code-color-2); - font-weight: normal; + font-weight: var(--code-weight); } code i { @@ -1474,8 +1587,8 @@ canvas { */ details { display: block; - margin-bottom: 1.5rem; - padding-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); + padding-bottom: calc(var(--spacing-typography) / 2); border-bottom: 1px solid var(--muted-border); } @@ -1503,11 +1616,12 @@ details summary::after { height: 1rem; float: right; transform: rotate(-90deg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-chevron); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; content: ''; + transition: transform var(--transition); } details summary:focus { @@ -1515,7 +1629,7 @@ details summary:focus { } details summary ~ * { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); } details summary ~ * ~ * { @@ -1523,7 +1637,7 @@ details summary ~ * ~ * { } details[open] summary { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } @@ -1535,39 +1649,39 @@ details[open] summary::after { * Card (
) */ article { - margin: 2rem 0; - padding: 2rem 1rem; + margin: var(--spacing-block) 0; + padding: var(--spacing-block) var(--spacing-gutter); overflow: hidden; - border-radius: 0.25rem; + border-radius: var(--block-round); background: var(--card-background); box-shadow: var(--card-shadow); } @media (min-width: 576px) { article { - margin: 2.5rem 0; - padding: 2.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { article { - margin: 3rem 0; - padding: 3rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { article { - margin: 3.5rem 0; - padding: 3.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { article { - margin: 4rem 0; - padding: 4rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-xl)); } } @@ -1586,16 +1700,16 @@ article > footer { article > header, article > footer, article > pre { - margin: -1rem; - padding: 2rem 1rem; + margin: calc(var(--spacing-gutter) * -1); + padding: var(--spacing-block) var(--spacing-gutter); } @media (min-width: 576px) { article > header, article > footer, article > pre { - margin: -2.5rem; - padding: 2rem 2.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @@ -1603,8 +1717,8 @@ article > pre { article > header, article > footer, article > pre { - margin: -3rem; - padding: 2rem 3rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); } } @@ -1612,8 +1726,8 @@ article > pre { article > header, article > footer, article > pre { - margin: -3.5rem; - padding: 2rem 3.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @@ -1621,79 +1735,79 @@ article > pre { article > header, article > footer, article > pre { - margin: -4rem; - padding: 2rem 4rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); } } article > header { - margin-top: -2rem; - margin-bottom: 2rem; + margin-top: calc(var(--spacing-gutter) * -2); + margin-bottom: var(--spacing-block); } @media (min-width: 576px) { article > header { - margin-top: -2.5rem; - margin-bottom: 2.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { article > header { - margin-top: -3rem; - margin-bottom: 3rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { article > header { - margin-top: -3.5rem; - margin-bottom: 3.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { article > header { - margin-top: -4rem; - margin-bottom: 4rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl)); } } article > footer, article > pre { - margin-top: 2rem; - margin-bottom: -2rem; + margin-top: var(--spacing-block); + margin-bottom: calc(var(--spacing-gutter) * -2); } @media (min-width: 576px) { article > footer, article > pre { - margin-top: 2.5rem; - margin-bottom: -2.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); } } @media (min-width: 768px) { article > footer, article > pre { - margin-top: 3rem; - margin-bottom: -3rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-md)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); } } @media (min-width: 992px) { article > footer, article > pre { - margin-top: 3.5rem; - margin-bottom: -3.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); } } @media (min-width: 1200px) { article > footer, article > pre { - margin-top: 4rem; - margin-bottom: -4rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); } } @@ -1719,18 +1833,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: -0.5rem; + margin-left: calc(var(--spacing-gutter) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: -0.5rem; + margin-right: calc(var(--spacing-gutter) * -0.5); } nav li { display: inline-block; margin: 0; - padding: 1rem 0.5rem; + padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); } nav li > *, @@ -1740,13 +1854,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { nav a { display: block; - margin: -1rem -0.5rem; - padding: 1rem 0.5rem; - border-radius: 0.25rem; + margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); + padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + border-radius: var(--block-round); + text-decoration: none !important; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none; + text-decoration: none !important; } aside nav, @@ -1757,12 +1872,12 @@ aside li { } aside li { - padding: 0.5rem; + padding: calc(var(--spacing-gutter) / 2); } aside li a { - margin: -0.5rem; - padding: 0.5rem; + margin: calc(var(--spacing-gutter) * -0.5); + padding: calc(var(--spacing-gutter) / 2); } /** @@ -1787,12 +1902,12 @@ aside li a { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: 0.25rem; + border-radius: var(--block-round); background: var(--contrast); color: var(--contrast-inverse); font-size: .85rem; font-style: normal; - font-weight: normal; + font-weight: var(--text-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index f058cd3b..c48c6e71 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.1.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc(1.5rem + 1.5rem + 2px)}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}fieldset legend,label{display:block;margin-bottom:0.25rem;vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0.75rem 1rem;vertical-align:middle}input,select,textarea{border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.25rem}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.25rem;border-width:2px;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:0.125rem}[type=color]::-moz-color-swatch{border:none;border-radius:0.125rem}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E")}[type=file]{padding:0.5rem 0;border:none;border-radius:0;background:none;color:var(--muted-text)}[type=file]::-webkit-file-upload-button{padding-top:0.5rem;padding-bottom:0.5rem;background-color:var(--secondary);color:var(--secondary-inverse)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:0 0 0 0.2rem var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border:2px solid var(--background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]:focus::-webkit-slider-runnable-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-moz-range-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-fill-lower{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:3rem;padding-left:2.5rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:-0.5rem}nav ol:last-of-type,nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#08769b;--primary-hover-border:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:#73828c;--secondary-hover:#415462;--secondary-hover-border:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:#2c3d49;--contrast-hover:#0d1419;--contrast-hover-border:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:#FFF;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.125);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.5);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index 803b42b1..ffec832e 100644 --- a/css/pico.css +++ b/css/pico.css @@ -5,144 +5,230 @@ /** * Theme: default */ +:root { + --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --titles-font: var(--text-font); + --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --text-weight: 400; + --titles-weight: 700; + --form-element-weight: var(--text-weight); + --buttons-weight: var(--text-weight); + --code-weight: var(--text-weight); + --base-font-xs: 16px; + --base-font-sm: 17px; + --base-font-md: 18px; + --base-font-lg: 19px; + --base-font-xl: 20px; + --h1-size: 2rem; + --h2-size: 1.75rem; + --h3-size: 1.5rem; + --h4-size: 1.25rem; + --h5-size: 1.125rem; + --block-round: .25rem ; + --form-element-border-width: 1px; + --form-element-outline-width: 3px; + --checkbox-radio-border-width: 2px; + --switch-border-width: 3px; + --form-element-spacing-vertical: .75rem; + --form-element-spacing-horizontal: 1rem; + --button-round: var(--block-round); + --button-border-width: var(--form-element-border-width); + --button-outline-width: var(--form-element-outline-width); + --button-spacing-vertical: var(--form-element-spacing-vertical); + --button-spacing-horizontal: var(--form-element-spacing-horizontal); + --spacing-gutter: 1rem; + --spacing-block: 2rem; + --spacing-factor-xs: 1; + --spacing-factor-sm: 1.25; + --spacing-factor-md: 1.5; + --spacing-factor-lg: 1.75; + --spacing-factor-xl: 2; + --spacing-typography: 1.5rem; + --spacing-form-element: .25rem; + --transition: .2s ease-in-out; +} + +:root { + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-hover: #08769b; - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-hover: #415462; - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-hover: #0d1419; - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-border: rgba(255, 223, 128, 0.5); - --contrast-border-h: #ffdf80; - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.04); + --background: #FFF; + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #08769b; + --primary-hover-border: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: #73828c; + --secondary-hover: #415462; + --secondary-hover-border: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: #2c3d49; + --contrast-hover: #0d1419; + --contrast-hover-border: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: #FFF; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.125); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #288a6a; + --invalid: #b94646; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; + --card-background: #FFF; + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --code-background: #f3f5f7; + --code-inlined: #edf0f3; + --code-color-1: #73828c; + --code-color-2: #b34d80; + --code-color-3: #3d888f; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(115, 130, 140, 0.075); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-border-h: rgba(255, 223, 128, 0.5); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } } [data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } /** @@ -169,35 +255,35 @@ html { -webkit-text-size-adjust: 100%; background: var(--background); color: var(--text); - font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 16px; - font-weight: 400; - line-height: 1.5; + font-family: var(--text-font); + font-size: var(--base-font-xs); + font-weight: var(--text-weight); + line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } @media (min-width: 576px) { html { - font-size: 17px; + font-size: var(--base-font-sm); } } @media (min-width: 768px) { html { - font-size: 18px; + font-size: var(--base-font-md); } } @media (min-width: 992px) { html { - font-size: 19px; + font-size: var(--base-font-lg); } } @media (min-width: 1200px) { html { - font-size: 20px; + font-size: var(--base-font-xl); } } @@ -220,14 +306,14 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: 2rem 0; + padding: var(--spacing-block) 0; } @media (min-width: 576px) { body > header, body > main, body > footer { - padding: 2.5rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; } } @@ -235,7 +321,7 @@ body > footer { body > header, body > main, body > footer { - padding: 3rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; } } @@ -243,7 +329,7 @@ body > footer { body > header, body > main, body > footer { - padding: 3.5rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; } } @@ -251,7 +337,7 @@ body > footer { body > header, body > main, body > footer { - padding: 4rem 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; } } @@ -263,8 +349,8 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding-right: 1rem; - padding-left: 1rem; + padding-right: var(--spacing-gutter); + padding-left: var(--spacing-gutter); } @media (min-width: 576px) { @@ -298,30 +384,30 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: 4rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); } @media (min-width: 576px) { section { - margin-bottom: 5rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2); } } @media (min-width: 768px) { section { - margin-bottom: 6rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2); } } @media (min-width: 992px) { section { - margin-bottom: 7rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2); } } @media (min-width: 1200px) { section { - margin-bottom: 8rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2); } } @@ -330,8 +416,8 @@ section { * Minimal grid system with auto-layout columns */ .grid { - grid-column-gap: 1rem; - grid-row-gap: 1rem; + grid-column-gap: var(--spacing-gutter); + grid-row-gap: var(--spacing-gutter); display: grid; grid-template-columns: 1fr; margin: 0; @@ -358,7 +444,7 @@ figure { } figure figcaption { - padding: 0.5rem 0; + padding: calc(var(--spacing-gutter) / 2) 0; color: var(--muted-text); } @@ -412,7 +498,7 @@ pre, table, ul { margin-top: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); color: var(--text); font-size: 1rem; font-style: normal; @@ -422,7 +508,7 @@ a { background-color: transparent; color: var(--primary); text-decoration: none; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { @@ -437,6 +523,7 @@ a:focus { a.secondary { color: var(--secondary); + text-decoration: underline; } a.secondary:hover, a.secondary:active, a.secondary:focus { @@ -447,18 +534,16 @@ a.secondary:focus { background-color: var(--secondary-focus); } -a.contrast:not([role="button"]) { - box-shadow: inset 0 -0.33rem 0 var(--contrast-border); +a.contrast { color: var(--contrast); + text-decoration: underline; } -a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus { - box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h); +a.contrast:hover, a.contrast:active, a.contrast:focus { color: var(--contrast-hover); - text-decoration: none; } -a.contrast:not([role="button"]):focus { +a.contrast:focus { background-color: var(--contrast-focus); } @@ -469,43 +554,43 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-weight: var(--titles-weight); } h1 { - margin-bottom: 3rem; + margin-bottom: calc(var(--spacing-typography) * 2); color: var(--h1); - font-size: 2rem; + font-size: var(--h1-size); } h2 { - margin-bottom: 2.625rem; + margin-bottom: calc(var(--spacing-typography) * 1.75); color: var(--h2); - font-size: 1.75rem; + font-size: var(--h2-size); } h3 { - margin-bottom: 2.25rem; + margin-bottom: calc(var(--spacing-typography) * 1.5); color: var(--h3); - font-size: 1.5rem; + font-size: var(--h3-size); } h4 { - margin-bottom: 1.875rem; + margin-bottom: calc(var(--spacing-typography) * 1.25); color: var(--h4); - font-size: 1.25rem; + font-size: var(--h4-size); } h5 { - margin-bottom: 1.6875rem; + margin-bottom: calc(var(--spacing-typography) * 1.125); color: var(--h5); - font-size: 1.125rem; + font-size: var(--h5-size); } h6 { color: var(--h6); - font-size: 1rem; + font-size: var(--h6-size); } address ~ h1, @@ -518,7 +603,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -531,7 +616,7 @@ p ~ h2, pre ~ h2, table ~ h2, ul ~ h2 { - margin-top: 2.625rem; + margin-top: calc(var(--spacing-typography) * 1.75); } address ~ h3, @@ -544,7 +629,7 @@ p ~ h3, pre ~ h3, table ~ h3, ul ~ h3 { - margin-top: 2.25rem; + margin-top: calc(var(--spacing-typography) * 1.5); } address ~ h4, @@ -557,7 +642,7 @@ p ~ h4, pre ~ h4, table ~ h4, ul ~ h4 { - margin-top: 1.875rem; + margin-top: calc(var(--spacing-typography) * 1.25); } address ~ h5, @@ -570,7 +655,7 @@ p ~ h5, pre ~ h5, table ~ h5, ul ~ h5 { - margin-top: 1.6875rem; + margin-top: calc(var(--spacing-typography) * 1.125); } address ~ h6, @@ -583,11 +668,11 @@ p ~ h6, pre ~ h6, table ~ h6, ul ~ h6 { - margin-top: 1.5rem; + margin-top: calc(var(--spacing-typography)); } hgroup { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } hgroup * { @@ -597,11 +682,11 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -634,12 +719,12 @@ small { ul, ol { - padding-left: 1.5rem; + padding-left: var(--spacing-typography); } ul li, ol li { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); } ul li { @@ -655,13 +740,13 @@ mark { blockquote { display: block; - margin: 3rem 0; - padding: 1rem; + margin: var(--spacing-typography) 0; + padding: var(--spacing-gutter); border-left: 0.25rem solid var(--muted-border); } blockquote footer { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); color: var(--muted-text); } @@ -752,7 +837,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -763,20 +848,22 @@ a[role="button"] { button, input[type="submit"], input[type="button"], +input[type="reset"], [type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; - border-radius: 0.25rem; + padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); + border: var(--button-border-width) solid var(--primary-border); + border-radius: var(--button-round); outline: none; background-color: var(--primary); + box-shadow: var(--button-shadow); color: var(--primary-inverse); font-size: 1rem; - font-weight: normal; - line-height: 1.5; + font-weight: var(--buttons-weight); + line-height: var(--line-height); text-align: center; cursor: pointer; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } button:hover, button:active, button:focus, @@ -786,21 +873,27 @@ input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, +input[type="reset"]:hover, +input[type="reset"]:active, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:hover, [type="file"]::-webkit-file-upload-button:active, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { + border-color: var(--primary-hover-border); background-color: var(--primary-hover); + box-shadow: var(--button-hover-shadow); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); } input[type="reset"] { @@ -823,6 +916,7 @@ button.secondary, input[type="submit"].secondary, input[type="reset"], a[role="button"].secondary { + border: var(--button-border-width) solid var(--secondary-border); background-color: var(--secondary); color: var(--secondary-inverse); } @@ -837,6 +931,7 @@ input[type="reset"]:focus, a[role="button"].secondary:hover, a[role="button"].secondary:active, a[role="button"].secondary:focus { + border-color: var(--secondary-hover-border); background-color: var(--secondary-hover); } @@ -844,13 +939,14 @@ button.secondary:focus, input[type="submit"].secondary:focus, input[type="reset"]:focus, a[role="button"].secondary:focus { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important; } button.contrast, input[type="submit"].contrast, input[type="reset"].contrast, a[role="button"].contrast { + border: var(--button-border-width) solid var(--contrast-border); background-color: var(--contrast); color: var(--contrast-inverse); } @@ -865,6 +961,7 @@ input[type="reset"].contrast:focus, a[role="button"].contrast:hover, a[role="button"].contrast:active, a[role="button"].contrast:focus { + border-color: var(--contrast-hover-border); background-color: var(--contrast-hover); } @@ -872,13 +969,13 @@ button.contrast:focus, input[type="submit"].contrast:focus, input[type="reset"].contrast:focus, a[role="button"].contrast:focus { - box-shadow: 0 0 0 0.2rem var(--contrast-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus); } button.outline, input[type="submit"].outline, a.outline[role="button"] { - border: 1px solid var(--primary); + border: var(--button-border-width) solid var(--primary-border); background-color: transparent; color: var(--primary); } @@ -890,7 +987,7 @@ input[type="submit"].outline:focus, a.outline[role="button"]:hover, a.outline[role="button"]:active, a.outline[role="button"]:focus { - border: 1px solid var(--primary-hover); + border: 1px solid var(--primary-hover-border); color: var(--primary-hover); } @@ -898,7 +995,7 @@ button.outline.secondary, input[type="submit"].outline.secondary, input[type="reset"].outline, a[role="button"].outline.secondary { - border: 1px solid var(--secondary); + border: var(--button-border-width) solid var(--secondary-border); background-color: transparent; color: var(--secondary); } @@ -913,22 +1010,15 @@ input[type="reset"].outline:focus, a[role="button"].outline.secondary:hover, a[role="button"].outline.secondary:active, a[role="button"].outline.secondary:focus { - border: 1px solid var(--secondary-hover); + border: 1px solid var(--secondary-hover-border); color: var(--secondary-hover); } -button.outline.secondary:focus, -input[type="submit"].outline.secondary:focus, -input[type="reset"].outline:focus, -a[role="button"].outline.secondary:focus { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); -} - button.outline.contrast, input[type="submit"].outline.contrast, input[type="reset"].outline.contrast, a[role="button"].outline.contrast { - border: 1px solid var(--contrast); + border: var(--button-border-width) solid var(--contrast-border); background-color: transparent; color: var(--contrast); } @@ -943,17 +1033,10 @@ input[type="reset"].outline.contrast:focus, a[role="button"].outline.contrast:hover, a[role="button"].outline.contrast:active, a[role="button"].outline.contrast:focus { - border: 1px solid var(--contrast-hover); + border: 1px solid var(--contrast-hover-border); color: var(--contrast-hover); } -button.outline.contrast:focus, -input[type="submit"].outline.contrast:focus, -input[type="reset"].outline.contrast:focus, -a[role="button"].outline.contrast:focus { - box-shadow: 0 0 0 0.2rem var(--contrast-focus); -} - /** * Form elements */ @@ -965,7 +1048,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -977,7 +1060,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -1039,12 +1121,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc(1.5rem + 1.5rem + 2px); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); } fieldset { margin: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); padding: 0; border: 0; } @@ -1052,7 +1134,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -1070,20 +1152,20 @@ textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: 0.75rem 1rem; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); vertical-align: middle; } input, select, textarea { - border: 1px solid var(--input-border); - border-radius: 0.25rem; + border: var(--form-element-border-width) solid var(--input-border); + border-radius: var(--block-round); outline: none; background-color: var(--input-background); color: var(--text); - font-weight: normal; - transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + font-weight: var(--form-element-weight); + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } input::placeholder, input::-webkit-input-placeholder, @@ -1100,7 +1182,8 @@ select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-background); } input[readonly], input[disabled], @@ -1120,6 +1203,18 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, +select[readonly]:active, +select[readonly]:focus, +select[disabled]:active, +select[disabled]:focus, +textarea[readonly]:active, +textarea[readonly]:focus, +textarea[disabled]:active, +textarea[disabled]:focus { + box-shadow: none !important; +} + input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { @@ -1129,8 +1224,7 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) input[disabled], select[disabled], textarea[disabled] { - cursor: not-allowed; - opacity: .5; + opacity: .66; } input.valid, input.invalid, @@ -1147,25 +1241,25 @@ textarea.invalid { input.valid, select.valid, textarea.valid { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-valid); } input.invalid, select.invalid, textarea.invalid { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-invalid); } input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } input:not([type="range"]):not([type="file"]):focus, select:focus, textarea:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); } select::-ms-expand { @@ -1174,8 +1268,8 @@ select::-ms-expand { } select:not([multiple]):not([size]) { - padding-right: 2.5rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); + background-image: var(--icon-chevron); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1188,14 +1282,14 @@ form small { input + small, select + small, textarea + small { - margin-top: -1rem; - margin-bottom: 1.5rem; + margin-top: calc(var(--spacing-typography) * -0.5); + margin-bottom: var(--spacing-typography); } label > input, label > select, label > textarea { - margin-top: 0.25rem; + margin-top: var(--spacing-form-element); } /** @@ -1210,9 +1304,9 @@ label > textarea { display: inline-block; width: 1.25rem; height: 1.25rem; + margin-top: -.125rem; margin-right: .375rem; - margin-bottom: 0.25rem; - border-width: 2px; + border-width: var(--checkbox-radio-border-width); vertical-align: middle; cursor: pointer; } @@ -1222,16 +1316,22 @@ label > textarea { display: none; } -[type="checkbox"]:checked, -[type="radio"]:checked { - border-color: var(--primary); - background-color: var(--primary); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="radio"]:checked, +[type="radio"]:indeterminate { + border-color: var(--input-hover-border); + background-color: var(--input-hover-border); + background-image: var(--icon-checkbox); background-position: center; background-repeat: no-repeat; background-size: .75rem auto; } +[type="checkbox"]:indeterminate, +[type="radio"]:indeterminate { + background-image: var(--icon-minus); +} + [type="checkbox"] ~ label, [type="radio"] ~ label { display: inline-block; @@ -1246,15 +1346,15 @@ label > textarea { [type="radio"]:checked { border-width: .33rem; - border-color: var(--primary); - background-color: var(--primary-inverse); + border-color: var(--input-hover-border); + background-color: var(--input-inverse); background-image: none; } [type="checkbox"][role="switch"] { width: 2.25rem; height: 1.25rem; - border: 3px solid var(--input-border); + border: var(--switch-border-width) solid var(--input-border); border-radius: 1.25rem; background-color: var(--input-border); line-height: 1.25rem; @@ -1262,23 +1362,23 @@ label > textarea { [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - 6px); + width: calc(1.25rem - (var(--switch-border-width)*2)); height: 100%; border-radius: 50%; - background-color: var(--primary-inverse); + background-color: var(--input-inverse); content: ''; transition: margin 0.1s ease-in-out; } [type="checkbox"][role="switch"]:checked { - border-color: var(--primary); - background-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-border); background-image: none; } [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(1.125rem - 3px); + margin-left: calc(1.125rem - var(--switch-border-width)); } /** @@ -1295,12 +1395,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: 0.125rem; + border-radius: calc(var(--block-round)/2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: 0.125rem; + border-radius: calc(var(--block-round)/2); } [type="date"], @@ -1308,7 +1408,7 @@ label > textarea { [type="month"], [type="time"], [type="week"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-date); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1323,29 +1423,32 @@ label > textarea { } [type="time"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-time); } [type="file"] { - padding: 0.5rem 0; + padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; background: none; - color: var(--muted-text); } [type="file"]::-webkit-file-upload-button { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); + border: var(--button-border-width) solid var(--secondary-border); background-color: var(--secondary); + box-shadow: var(--button-shadow); color: var(--secondary-inverse); + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } [type="file"]:hover, [type="file"]:active, [type="file"]:focus { border: none; + background: none; } [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { + border-color: var(--secondary-hover-border); background-color: var(--secondary-hover); } @@ -1354,7 +1457,7 @@ label > textarea { } [type="file"]:focus::-webkit-file-upload-button { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); } [type="range"] { @@ -1370,25 +1473,25 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { @@ -1400,12 +1503,11 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; - border: 2px solid var(--background); + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); } [type="range"]::-moz-range-thumb { @@ -1413,11 +1515,11 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); } [type="range"]::-ms-thumb { @@ -1425,31 +1527,31 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); +} + +[type="range"]:focus { + background: transparent; } [type="range"]:focus::-webkit-slider-runnable-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-moz-range-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-ms-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-ms-fill-lower { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:active::-webkit-slider-thumb { @@ -1472,9 +1574,9 @@ label > textarea { } [type="search"] { - border-radius: 3rem; - padding-left: 2.5rem !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + border-radius: 5rem; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + background-image: var(--icon-search); background-position: center left .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1498,11 +1600,11 @@ table { th, td { - padding: 0.5rem 1rem; + padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); border-bottom: 1px solid var(--table-border); color: var(--muted-text); font-size: 0.875rem; - font-weight: 400; + font-weight: var(--text-weight); text-align: left; } @@ -1517,7 +1619,7 @@ thead td { border-bottom: 3px solid var(--table-border); } -tbody tr:nth-child(odd) { +table[role="grid"] tbody tr:nth-child(odd) { background-color: var(--table-stripping); } @@ -1528,7 +1630,7 @@ pre, code, kbd, samp { - font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--code-font); font-size: 1rem; } @@ -1543,7 +1645,7 @@ kbd { background: var(--code-inlined); color: var(--code-color-1); font-size: 85%; - font-weight: 400; + font-weight: var(--code-weight); line-height: initial; } @@ -1583,13 +1685,13 @@ code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: 0.25rem; + border-radius: var(--block-round); } pre { display: block; - margin-bottom: 2rem; - padding: 2rem 1rem; + margin-bottom: var(--spacing-block); + padding: var(--spacing-block) var(--spacing-gutter); overflow-x: auto; background: var(--code-background); } @@ -1599,12 +1701,12 @@ pre > code { padding: 0; background: transparent; font-size: 14px; - line-height: 1.5; + line-height: var(--line-height); } code b { color: var(--code-color-2); - font-weight: normal; + font-weight: var(--code-weight); } code i { @@ -1718,8 +1820,8 @@ canvas { */ details { display: block; - margin-bottom: 1.5rem; - padding-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); + padding-bottom: calc(var(--spacing-typography) / 2); border-bottom: 1px solid var(--muted-border); } @@ -1747,11 +1849,12 @@ details summary::after { height: 1rem; float: right; transform: rotate(-90deg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-chevron); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; content: ''; + transition: transform var(--transition); } details summary:focus { @@ -1759,7 +1862,7 @@ details summary:focus { } details summary ~ * { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); } details summary ~ * ~ * { @@ -1767,7 +1870,7 @@ details summary ~ * ~ * { } details[open] summary { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } @@ -1779,39 +1882,39 @@ details[open] summary::after { * Card (
) */ article { - margin: 2rem 0; - padding: 2rem 1rem; + margin: var(--spacing-block) 0; + padding: var(--spacing-block) var(--spacing-gutter); overflow: hidden; - border-radius: 0.25rem; + border-radius: var(--block-round); background: var(--card-background); box-shadow: var(--card-shadow); } @media (min-width: 576px) { article { - margin: 2.5rem 0; - padding: 2.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { article { - margin: 3rem 0; - padding: 3rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { article { - margin: 3.5rem 0; - padding: 3.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { article { - margin: 4rem 0; - padding: 4rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-xl)); } } @@ -1830,16 +1933,16 @@ article > footer { article > header, article > footer, article > pre { - margin: -1rem; - padding: 2rem 1rem; + margin: calc(var(--spacing-gutter) * -1); + padding: var(--spacing-block) var(--spacing-gutter); } @media (min-width: 576px) { article > header, article > footer, article > pre { - margin: -2.5rem; - padding: 2rem 2.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @@ -1847,8 +1950,8 @@ article > pre { article > header, article > footer, article > pre { - margin: -3rem; - padding: 2rem 3rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); } } @@ -1856,8 +1959,8 @@ article > pre { article > header, article > footer, article > pre { - margin: -3.5rem; - padding: 2rem 3.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @@ -1865,79 +1968,79 @@ article > pre { article > header, article > footer, article > pre { - margin: -4rem; - padding: 2rem 4rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); } } article > header { - margin-top: -2rem; - margin-bottom: 2rem; + margin-top: calc(var(--spacing-gutter) * -2); + margin-bottom: var(--spacing-block); } @media (min-width: 576px) { article > header { - margin-top: -2.5rem; - margin-bottom: 2.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { article > header { - margin-top: -3rem; - margin-bottom: 3rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { article > header { - margin-top: -3.5rem; - margin-bottom: 3.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { article > header { - margin-top: -4rem; - margin-bottom: 4rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl)); } } article > footer, article > pre { - margin-top: 2rem; - margin-bottom: -2rem; + margin-top: var(--spacing-block); + margin-bottom: calc(var(--spacing-gutter) * -2); } @media (min-width: 576px) { article > footer, article > pre { - margin-top: 2.5rem; - margin-bottom: -2.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); } } @media (min-width: 768px) { article > footer, article > pre { - margin-top: 3rem; - margin-bottom: -3rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-md)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); } } @media (min-width: 992px) { article > footer, article > pre { - margin-top: 3.5rem; - margin-bottom: -3.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); } } @media (min-width: 1200px) { article > footer, article > pre { - margin-top: 4rem; - margin-bottom: -4rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); } } @@ -1963,18 +2066,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: -0.5rem; + margin-left: calc(var(--spacing-gutter) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: -0.5rem; + margin-right: calc(var(--spacing-gutter) * -0.5); } nav li { display: inline-block; margin: 0; - padding: 1rem 0.5rem; + padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); } nav li > *, @@ -1984,17 +2087,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { nav a { display: block; - margin: -1rem -0.5rem; - padding: 1rem 0.5rem; - border-radius: 0.25rem; + margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); + padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + border-radius: var(--block-round); + text-decoration: none !important; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none; -} - -nav a.contrast:not([role="button"]), nav a.contrast:not([role="button"]):hover, nav a.contrast:not([role="button"]):active, nav a.contrast:not([role="button"]):focus { - box-shadow: none; + text-decoration: none !important; } aside nav, @@ -2005,12 +2105,12 @@ aside li { } aside li { - padding: 0.5rem; + padding: calc(var(--spacing-gutter) / 2); } aside li a { - margin: -0.5rem; - padding: 0.5rem; + margin: calc(var(--spacing-gutter) * -0.5); + padding: calc(var(--spacing-gutter) / 2); } /** @@ -2035,12 +2135,12 @@ aside li a { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: 0.25rem; + border-radius: var(--block-round); background: var(--contrast); color: var(--contrast-inverse); font-size: .85rem; font-style: normal; - font-weight: normal; + font-weight: var(--text-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index fe3a35e5..86d2e028 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -5,144 +5,230 @@ /** * Theme: default */ +:root { + --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --titles-font: var(--text-font); + --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --text-weight: 400; + --titles-weight: 700; + --form-element-weight: var(--text-weight); + --buttons-weight: var(--text-weight); + --code-weight: var(--text-weight); + --base-font-xs: 16px; + --base-font-sm: 17px; + --base-font-md: 18px; + --base-font-lg: 19px; + --base-font-xl: 20px; + --h1-size: 2rem; + --h2-size: 1.75rem; + --h3-size: 1.5rem; + --h4-size: 1.25rem; + --h5-size: 1.125rem; + --block-round: .25rem ; + --form-element-border-width: 1px; + --form-element-outline-width: 3px; + --checkbox-radio-border-width: 2px; + --switch-border-width: 3px; + --form-element-spacing-vertical: .75rem; + --form-element-spacing-horizontal: 1rem; + --button-round: var(--block-round); + --button-border-width: var(--form-element-border-width); + --button-outline-width: var(--form-element-outline-width); + --button-spacing-vertical: var(--form-element-spacing-vertical); + --button-spacing-horizontal: var(--form-element-spacing-horizontal); + --spacing-gutter: 1rem; + --spacing-block: 2rem; + --spacing-factor-xs: 1; + --spacing-factor-sm: 1.25; + --spacing-factor-md: 1.5; + --spacing-factor-lg: 1.75; + --spacing-factor-xl: 2; + --spacing-typography: 1.5rem; + --spacing-form-element: .25rem; + --transition: .2s ease-in-out; +} + +:root { + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-hover: #08769b; - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-hover: #415462; - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-hover: #0d1419; - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-border: rgba(255, 223, 128, 0.5); - --contrast-border-h: #ffdf80; - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.04); + --background: #FFF; + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #08769b; + --primary-hover-border: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: #73828c; + --secondary-hover: #415462; + --secondary-hover-border: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: #2c3d49; + --contrast-hover: #0d1419; + --contrast-hover-border: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: #FFF; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.125); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #288a6a; + --invalid: #b94646; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; + --card-background: #FFF; + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --code-background: #f3f5f7; + --code-inlined: #edf0f3; + --code-color-1: #73828c; + --code-color-2: #b34d80; + --code-color-3: #3d888f; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(115, 130, 140, 0.075); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-border-h: rgba(255, 223, 128, 0.5); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } } [data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } /** @@ -169,35 +255,35 @@ html { -webkit-text-size-adjust: 100%; background: var(--background); color: var(--text); - font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 16px; - font-weight: 400; - line-height: 1.5; + font-family: var(--text-font); + font-size: var(--base-font-xs); + font-weight: var(--text-weight); + line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } @media (min-width: 576px) { html { - font-size: 17px; + font-size: var(--base-font-sm); } } @media (min-width: 768px) { html { - font-size: 18px; + font-size: var(--base-font-md); } } @media (min-width: 992px) { html { - font-size: 19px; + font-size: var(--base-font-lg); } } @media (min-width: 1200px) { html { - font-size: 20px; + font-size: var(--base-font-xl); } } @@ -220,14 +306,14 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: 2rem 1rem; + padding: var(--spacing-block) var(--spacing-gutter); } @media (min-width: 576px) { body > header, body > main, body > footer { - padding: 2.5rem 1rem; + padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter); } } @@ -235,7 +321,7 @@ body > footer { body > header, body > main, body > footer { - padding: 3rem 1rem; + padding: calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter); } } @@ -243,7 +329,7 @@ body > footer { body > header, body > main, body > footer { - padding: 3.5rem 1rem; + padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter); } } @@ -251,7 +337,7 @@ body > footer { body > header, body > main, body > footer { - padding: 4rem 1rem; + padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter); } } @@ -260,30 +346,30 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: 4rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); } @media (min-width: 576px) { section { - margin-bottom: 5rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2); } } @media (min-width: 768px) { section { - margin-bottom: 6rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2); } } @media (min-width: 992px) { section { - margin-bottom: 7rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2); } } @media (min-width: 1200px) { section { - margin-bottom: 8rem; + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2); } } @@ -298,7 +384,7 @@ figure { } figure figcaption { - padding: 0.5rem 0; + padding: calc(var(--spacing-gutter) / 2) 0; color: var(--muted-text); } @@ -352,7 +438,7 @@ pre, table, ul { margin-top: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); color: var(--text); font-size: 1rem; font-style: normal; @@ -362,7 +448,7 @@ a { background-color: transparent; color: var(--primary); text-decoration: none; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { @@ -382,43 +468,43 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-weight: var(--titles-weight); } h1 { - margin-bottom: 3rem; + margin-bottom: calc(var(--spacing-typography) * 2); color: var(--h1); - font-size: 2rem; + font-size: var(--h1-size); } h2 { - margin-bottom: 2.625rem; + margin-bottom: calc(var(--spacing-typography) * 1.75); color: var(--h2); - font-size: 1.75rem; + font-size: var(--h2-size); } h3 { - margin-bottom: 2.25rem; + margin-bottom: calc(var(--spacing-typography) * 1.5); color: var(--h3); - font-size: 1.5rem; + font-size: var(--h3-size); } h4 { - margin-bottom: 1.875rem; + margin-bottom: calc(var(--spacing-typography) * 1.25); color: var(--h4); - font-size: 1.25rem; + font-size: var(--h4-size); } h5 { - margin-bottom: 1.6875rem; + margin-bottom: calc(var(--spacing-typography) * 1.125); color: var(--h5); - font-size: 1.125rem; + font-size: var(--h5-size); } h6 { color: var(--h6); - font-size: 1rem; + font-size: var(--h6-size); } address ~ h1, @@ -431,7 +517,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -444,7 +530,7 @@ p ~ h2, pre ~ h2, table ~ h2, ul ~ h2 { - margin-top: 2.625rem; + margin-top: calc(var(--spacing-typography) * 1.75); } address ~ h3, @@ -457,7 +543,7 @@ p ~ h3, pre ~ h3, table ~ h3, ul ~ h3 { - margin-top: 2.25rem; + margin-top: calc(var(--spacing-typography) * 1.5); } address ~ h4, @@ -470,7 +556,7 @@ p ~ h4, pre ~ h4, table ~ h4, ul ~ h4 { - margin-top: 1.875rem; + margin-top: calc(var(--spacing-typography) * 1.25); } address ~ h5, @@ -483,7 +569,7 @@ p ~ h5, pre ~ h5, table ~ h5, ul ~ h5 { - margin-top: 1.6875rem; + margin-top: calc(var(--spacing-typography) * 1.125); } address ~ h6, @@ -496,11 +582,11 @@ p ~ h6, pre ~ h6, table ~ h6, ul ~ h6 { - margin-top: 1.5rem; + margin-top: calc(var(--spacing-typography)); } hgroup { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } hgroup * { @@ -510,11 +596,11 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -547,12 +633,12 @@ small { ul, ol { - padding-left: 1.5rem; + padding-left: var(--spacing-typography); } ul li, ol li { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); } ul li { @@ -568,13 +654,13 @@ mark { blockquote { display: block; - margin: 3rem 0; - padding: 1rem; + margin: var(--spacing-typography) 0; + padding: var(--spacing-gutter); border-left: 0.25rem solid var(--muted-border); } blockquote footer { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); color: var(--muted-text); } @@ -665,7 +751,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -676,20 +762,22 @@ a[role="button"] { button, input[type="submit"], input[type="button"], +input[type="reset"], [type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; - border-radius: 0.25rem; + padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); + border: var(--button-border-width) solid var(--primary-border); + border-radius: var(--button-round); outline: none; background-color: var(--primary); + box-shadow: var(--button-shadow); color: var(--primary-inverse); font-size: 1rem; - font-weight: normal; - line-height: 1.5; + font-weight: var(--buttons-weight); + line-height: var(--line-height); text-align: center; cursor: pointer; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } button:hover, button:active, button:focus, @@ -699,21 +787,27 @@ input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, +input[type="reset"]:hover, +input[type="reset"]:active, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:hover, [type="file"]::-webkit-file-upload-button:active, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { + border-color: var(--primary-hover-border); background-color: var(--primary-hover); + box-shadow: var(--button-hover-shadow); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); } input[type="reset"] { @@ -740,7 +834,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -752,7 +846,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -814,12 +907,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc(1.5rem + 1.5rem + 2px); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); } fieldset { margin: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); padding: 0; border: 0; } @@ -827,7 +920,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -845,20 +938,20 @@ textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: 0.75rem 1rem; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); vertical-align: middle; } input, select, textarea { - border: 1px solid var(--input-border); - border-radius: 0.25rem; + border: var(--form-element-border-width) solid var(--input-border); + border-radius: var(--block-round); outline: none; background-color: var(--input-background); color: var(--text); - font-weight: normal; - transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + font-weight: var(--form-element-weight); + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } input::placeholder, input::-webkit-input-placeholder, @@ -875,7 +968,8 @@ select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-background); } input[readonly], input[disabled], @@ -895,6 +989,18 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, +select[readonly]:active, +select[readonly]:focus, +select[disabled]:active, +select[disabled]:focus, +textarea[readonly]:active, +textarea[readonly]:focus, +textarea[disabled]:active, +textarea[disabled]:focus { + box-shadow: none !important; +} + input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { @@ -904,20 +1010,19 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) input[disabled], select[disabled], textarea[disabled] { - cursor: not-allowed; - opacity: .5; + opacity: .66; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } input:not([type="range"]):not([type="file"]):focus, select:focus, textarea:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); } select::-ms-expand { @@ -926,8 +1031,8 @@ select::-ms-expand { } select:not([multiple]):not([size]) { - padding-right: 2.5rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); + background-image: var(--icon-chevron); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -940,14 +1045,14 @@ form small { input + small, select + small, textarea + small { - margin-top: -1rem; - margin-bottom: 1.5rem; + margin-top: calc(var(--spacing-typography) * -0.5); + margin-bottom: var(--spacing-typography); } label > input, label > select, label > textarea { - margin-top: 0.25rem; + margin-top: var(--spacing-form-element); } /** @@ -962,9 +1067,9 @@ label > textarea { display: inline-block; width: 1.25rem; height: 1.25rem; + margin-top: -.125rem; margin-right: .375rem; - margin-bottom: 0.25rem; - border-width: 2px; + border-width: var(--checkbox-radio-border-width); vertical-align: middle; cursor: pointer; } @@ -974,16 +1079,22 @@ label > textarea { display: none; } -[type="checkbox"]:checked, -[type="radio"]:checked { - border-color: var(--primary); - background-color: var(--primary); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="radio"]:checked, +[type="radio"]:indeterminate { + border-color: var(--input-hover-border); + background-color: var(--input-hover-border); + background-image: var(--icon-checkbox); background-position: center; background-repeat: no-repeat; background-size: .75rem auto; } +[type="checkbox"]:indeterminate, +[type="radio"]:indeterminate { + background-image: var(--icon-minus); +} + [type="checkbox"] ~ label, [type="radio"] ~ label { display: inline-block; @@ -998,15 +1109,15 @@ label > textarea { [type="radio"]:checked { border-width: .33rem; - border-color: var(--primary); - background-color: var(--primary-inverse); + border-color: var(--input-hover-border); + background-color: var(--input-inverse); background-image: none; } [type="checkbox"][role="switch"] { width: 2.25rem; height: 1.25rem; - border: 3px solid var(--input-border); + border: var(--switch-border-width) solid var(--input-border); border-radius: 1.25rem; background-color: var(--input-border); line-height: 1.25rem; @@ -1014,23 +1125,23 @@ label > textarea { [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - 6px); + width: calc(1.25rem - (var(--switch-border-width)*2)); height: 100%; border-radius: 50%; - background-color: var(--primary-inverse); + background-color: var(--input-inverse); content: ''; transition: margin 0.1s ease-in-out; } [type="checkbox"][role="switch"]:checked { - border-color: var(--primary); - background-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-border); background-image: none; } [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(1.125rem - 3px); + margin-left: calc(1.125rem - var(--switch-border-width)); } /** @@ -1047,12 +1158,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: 0.125rem; + border-radius: calc(var(--block-round)/2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: 0.125rem; + border-radius: calc(var(--block-round)/2); } [type="date"], @@ -1060,7 +1171,7 @@ label > textarea { [type="month"], [type="time"], [type="week"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-date); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1075,29 +1186,32 @@ label > textarea { } [type="time"] { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-time); } [type="file"] { - padding: 0.5rem 0; + padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; background: none; - color: var(--muted-text); } [type="file"]::-webkit-file-upload-button { - padding-top: 0.5rem; - padding-bottom: 0.5rem; + padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); + border: var(--button-border-width) solid var(--secondary-border); background-color: var(--secondary); + box-shadow: var(--button-shadow); color: var(--secondary-inverse); + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } [type="file"]:hover, [type="file"]:active, [type="file"]:focus { border: none; + background: none; } [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { + border-color: var(--secondary-hover-border); background-color: var(--secondary-hover); } @@ -1106,7 +1220,7 @@ label > textarea { } [type="file"]:focus::-webkit-file-upload-button { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus); } [type="range"] { @@ -1122,25 +1236,25 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-track { width: 100%; height: 0.25rem; - border-radius: 0.25rem; + border-radius: var(--block-round); background-color: var(--input-border); - transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { @@ -1152,12 +1266,11 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; - border: 2px solid var(--background); + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); } [type="range"]::-moz-range-thumb { @@ -1165,11 +1278,11 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); } [type="range"]::-ms-thumb { @@ -1177,31 +1290,31 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 0; + border: 2px solid var(--input-background); border-radius: 50%; background-color: var(--text); cursor: pointer; - transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; + transition: background-color var(--transition), transform var(--transition); +} + +[type="range"]:focus { + background: transparent; } [type="range"]:focus::-webkit-slider-runnable-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-moz-range-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-ms-track { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:focus::-ms-fill-lower { - background-color: var(--muted-text); - box-shadow: 0 0 0 0.1rem var(--primary-focus); + box-shadow: 0 0 0 0.1rem var(--input-focus); } [type="range"]:active::-webkit-slider-thumb { @@ -1224,9 +1337,9 @@ label > textarea { } [type="search"] { - border-radius: 3rem; - padding-left: 2.5rem !important; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + border-radius: 5rem; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + background-image: var(--icon-search); background-position: center left .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -1250,11 +1363,11 @@ table { th, td { - padding: 0.5rem 1rem; + padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); border-bottom: 1px solid var(--table-border); color: var(--muted-text); font-size: 0.875rem; - font-weight: 400; + font-weight: var(--text-weight); text-align: left; } @@ -1269,7 +1382,7 @@ thead td { border-bottom: 3px solid var(--table-border); } -tbody tr:nth-child(odd) { +table[role="grid"] tbody tr:nth-child(odd) { background-color: var(--table-stripping); } @@ -1280,7 +1393,7 @@ pre, code, kbd, samp { - font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--code-font); font-size: 1rem; } @@ -1295,7 +1408,7 @@ kbd { background: var(--code-inlined); color: var(--code-color-1); font-size: 85%; - font-weight: 400; + font-weight: var(--code-weight); line-height: initial; } @@ -1335,13 +1448,13 @@ code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: 0.25rem; + border-radius: var(--block-round); } pre { display: block; - margin-bottom: 2rem; - padding: 2rem 1rem; + margin-bottom: var(--spacing-block); + padding: var(--spacing-block) var(--spacing-gutter); overflow-x: auto; background: var(--code-background); } @@ -1351,12 +1464,12 @@ pre > code { padding: 0; background: transparent; font-size: 14px; - line-height: 1.5; + line-height: var(--line-height); } code b { color: var(--code-color-2); - font-weight: normal; + font-weight: var(--code-weight); } code i { @@ -1470,8 +1583,8 @@ canvas { */ details { display: block; - margin-bottom: 1.5rem; - padding-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); + padding-bottom: calc(var(--spacing-typography) / 2); border-bottom: 1px solid var(--muted-border); } @@ -1499,11 +1612,12 @@ details summary::after { height: 1rem; float: right; transform: rotate(-90deg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-chevron); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; content: ''; + transition: transform var(--transition); } details summary:focus { @@ -1511,7 +1625,7 @@ details summary:focus { } details summary ~ * { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); } details summary ~ * ~ * { @@ -1519,7 +1633,7 @@ details summary ~ * ~ * { } details[open] summary { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } @@ -1531,39 +1645,39 @@ details[open] summary::after { * Card (
) */ article { - margin: 2rem 0; - padding: 2rem 1rem; + margin: var(--spacing-block) 0; + padding: var(--spacing-block) var(--spacing-gutter); overflow: hidden; - border-radius: 0.25rem; + border-radius: var(--block-round); background: var(--card-background); box-shadow: var(--card-shadow); } @media (min-width: 576px) { article { - margin: 2.5rem 0; - padding: 2.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { article { - margin: 3rem 0; - padding: 3rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { article { - margin: 3.5rem 0; - padding: 3.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { article { - margin: 4rem 0; - padding: 4rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; + padding: calc(var(--spacing-block) * var(--spacing-factor-xl)); } } @@ -1582,16 +1696,16 @@ article > footer { article > header, article > footer, article > pre { - margin: -1rem; - padding: 2rem 1rem; + margin: calc(var(--spacing-gutter) * -1); + padding: var(--spacing-block) var(--spacing-gutter); } @media (min-width: 576px) { article > header, article > footer, article > pre { - margin: -2.5rem; - padding: 2rem 2.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @@ -1599,8 +1713,8 @@ article > pre { article > header, article > footer, article > pre { - margin: -3rem; - padding: 2rem 3rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); } } @@ -1608,8 +1722,8 @@ article > pre { article > header, article > footer, article > pre { - margin: -3.5rem; - padding: 2rem 3.5rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @@ -1617,79 +1731,79 @@ article > pre { article > header, article > footer, article > pre { - margin: -4rem; - padding: 2rem 4rem; + margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); } } article > header { - margin-top: -2rem; - margin-bottom: 2rem; + margin-top: calc(var(--spacing-gutter) * -2); + margin-bottom: var(--spacing-block); } @media (min-width: 576px) { article > header { - margin-top: -2.5rem; - margin-bottom: 2.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { article > header { - margin-top: -3rem; - margin-bottom: 3rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { article > header { - margin-top: -3.5rem; - margin-bottom: 3.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { article > header { - margin-top: -4rem; - margin-bottom: 4rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl)); } } article > footer, article > pre { - margin-top: 2rem; - margin-bottom: -2rem; + margin-top: var(--spacing-block); + margin-bottom: calc(var(--spacing-gutter) * -2); } @media (min-width: 576px) { article > footer, article > pre { - margin-top: 2.5rem; - margin-bottom: -2.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); } } @media (min-width: 768px) { article > footer, article > pre { - margin-top: 3rem; - margin-bottom: -3rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-md)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); } } @media (min-width: 992px) { article > footer, article > pre { - margin-top: 3.5rem; - margin-bottom: -3.5rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); } } @media (min-width: 1200px) { article > footer, article > pre { - margin-top: 4rem; - margin-bottom: -4rem; + margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl)); + margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); } } @@ -1715,18 +1829,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: -0.5rem; + margin-left: calc(var(--spacing-gutter) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: -0.5rem; + margin-right: calc(var(--spacing-gutter) * -0.5); } nav li { display: inline-block; margin: 0; - padding: 1rem 0.5rem; + padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); } nav li > *, @@ -1736,13 +1850,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { nav a { display: block; - margin: -1rem -0.5rem; - padding: 1rem 0.5rem; - border-radius: 0.25rem; + margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); + padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + border-radius: var(--block-round); + text-decoration: none !important; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none; + text-decoration: none !important; } aside nav, @@ -1753,12 +1868,12 @@ aside li { } aside li { - padding: 0.5rem; + padding: calc(var(--spacing-gutter) / 2); } aside li a { - margin: -0.5rem; - padding: 0.5rem; + margin: calc(var(--spacing-gutter) * -0.5); + padding: calc(var(--spacing-gutter) / 2); } /** @@ -1783,12 +1898,12 @@ aside li a { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: 0.25rem; + border-radius: var(--block-round); background: var(--contrast); color: var(--contrast-inverse); font-size: .85rem; font-style: normal; - font-weight: normal; + font-weight: var(--text-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index bfbf8dfd..281df2d3 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.1.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc(1.5rem + 1.5rem + 2px)}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}fieldset legend,label{display:block;margin-bottom:0.25rem;vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0.75rem 1rem;vertical-align:middle}input,select,textarea{border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.25rem}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.25rem;border-width:2px;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:0.125rem}[type=color]::-moz-color-swatch{border:none;border-radius:0.125rem}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E")}[type=file]{padding:0.5rem 0;border:none;border-radius:0;background:none;color:var(--muted-text)}[type=file]::-webkit-file-upload-button{padding-top:0.5rem;padding-bottom:0.5rem;background-color:var(--secondary);color:var(--secondary-inverse)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:0 0 0 0.2rem var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border:2px solid var(--background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]:focus::-webkit-slider-runnable-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-moz-range-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-fill-lower{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:3rem;padding-left:2.5rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:-0.5rem}nav ol:last-of-type,nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#08769b;--primary-hover-border:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:#73828c;--secondary-hover:#415462;--secondary-hover-border:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:#2c3d49;--contrast-hover:#0d1419;--contrast-hover-border:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:#FFF;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.125);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter)}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter)}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter)}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter)}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.5);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index b9fb86be..4ab6a826 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.1.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a[role=button].secondary,button.secondary,input[type=reset],input[type=submit].secondary{background-color:var(--secondary);color:var(--secondary-inverse)}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{background-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=reset]:focus,input[type=submit].secondary:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a[role=button].contrast,button.contrast,input[type=reset].contrast,input[type=submit].contrast{background-color:var(--contrast);color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{background-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input[type=submit].outline{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=reset].outline,input[type=submit].outline.secondary{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a[role=button].outline.secondary:focus,button.outline.secondary:focus,input[type=reset].outline:focus,input[type=submit].outline.secondary:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a[role=button].outline.contrast,button.outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a[role=button].outline.contrast:focus,button.outline.contrast:focus,input[type=reset].outline.contrast:focus,input[type=submit].outline.contrast:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc(1.5rem + 1.5rem + 2px)}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}fieldset legend,label{display:block;margin-bottom:0.25rem;vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0.75rem 1rem;vertical-align:middle}input,select,textarea{border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input.invalid,input.valid,select.invalid,select.valid,textarea.invalid,textarea.valid{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input.valid,select.valid,textarea.valid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input.invalid,select.invalid,textarea.invalid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.25rem}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.25rem;border-width:2px;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:0.125rem}[type=color]::-moz-color-swatch{border:none;border-radius:0.125rem}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E")}[type=file]{padding:0.5rem 0;border:none;border-radius:0;background:none;color:var(--muted-text)}[type=file]::-webkit-file-upload-button{padding-top:0.5rem;padding-bottom:0.5rem;background-color:var(--secondary);color:var(--secondary-inverse)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:0 0 0 0.2rem var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border:2px solid var(--background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]:focus::-webkit-slider-runnable-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-moz-range-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-fill-lower{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:3rem;padding-left:2.5rem!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:-0.5rem}nav ol:last-of-type,nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]),nav a.contrast:not([role=button]):active,nav a.contrast:not([role=button]):focus,nav a.contrast:not([role=button]):hover{box-shadow:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#08769b;--primary-hover-border:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:#73828c;--secondary-hover:#415462;--secondary-hover-border:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:#2c3d49;--contrast-hover:#0d1419;--contrast-hover-border:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:#FFF;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.125);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) 0}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing-gutter);padding-left:var(--spacing-gutter)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}.grid{grid-column-gap:var(--spacing-gutter);grid-row-gap:var(--spacing-gutter);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary);text-decoration:underline}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast{color:var(--contrast);text-decoration:underline}a.contrast:active,a.contrast:focus,a.contrast:hover{color:var(--contrast-hover)}a.contrast:focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a[role=button].secondary,button.secondary,input[type=reset],input[type=submit].secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=reset]:focus,input[type=submit].secondary:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}a[role=button].contrast,button.contrast,input[type=reset].contrast,input[type=submit].contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:var(--contrast);color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{border-color:var(--contrast-hover-border);background-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus)}a.outline[role=button],button.outline,input[type=submit].outline{border:var(--button-border-width) solid var(--primary-border);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{border:1px solid var(--primary-hover-border);color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=reset].outline,input[type=submit].outline.secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:transparent;color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{border:1px solid var(--secondary-hover-border);color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:transparent;color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{border:1px solid var(--contrast-hover-border);color:var(--contrast-hover)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input.invalid,input.valid,select.invalid,select.valid,textarea.invalid,textarea.valid{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input.valid,select.valid,textarea.valid{background-image:var(--icon-valid)}input.invalid,select.invalid,textarea.invalid{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.5);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.slim.css b/css/pico.slim.css index e4f44008..9531e4d7 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -8,144 +8,230 @@ /** * Theme: default */ +:root { + --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --titles-font: var(--text-font); + --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --text-weight: 400; + --titles-weight: 700; + --form-element-weight: var(--text-weight); + --buttons-weight: var(--text-weight); + --code-weight: var(--text-weight); + --base-font-xs: 16px; + --base-font-sm: 17px; + --base-font-md: 18px; + --base-font-lg: 19px; + --base-font-xl: 20px; + --h1-size: 2rem; + --h2-size: 1.75rem; + --h3-size: 1.5rem; + --h4-size: 1.25rem; + --h5-size: 1.125rem; + --block-round: .25rem ; + --form-element-border-width: 1px; + --form-element-outline-width: 3px; + --checkbox-radio-border-width: 2px; + --switch-border-width: 3px; + --form-element-spacing-vertical: .75rem; + --form-element-spacing-horizontal: 1rem; + --button-round: var(--block-round); + --button-border-width: var(--form-element-border-width); + --button-outline-width: var(--form-element-outline-width); + --button-spacing-vertical: var(--form-element-spacing-vertical); + --button-spacing-horizontal: var(--form-element-spacing-horizontal); + --spacing-gutter: 1rem; + --spacing-block: 2rem; + --spacing-factor-xs: 1; + --spacing-factor-sm: 1.25; + --spacing-factor-md: 1.5; + --spacing-factor-lg: 1.75; + --spacing-factor-xl: 2; + --spacing-typography: 1.5rem; + --spacing-form-element: .25rem; + --transition: .2s ease-in-out; +} + +:root { + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-hover: #08769b; - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-hover: #415462; - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-hover: #0d1419; - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-border: rgba(255, 223, 128, 0.5); - --contrast-border-h: #ffdf80; - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.04); + --background: #FFF; + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #08769b; + --primary-hover-border: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: #73828c; + --secondary-hover: #415462; + --secondary-hover-border: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: #2c3d49; + --contrast-hover: #0d1419; + --contrast-hover-border: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: #FFF; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.125); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #288a6a; + --invalid: #b94646; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; + --card-background: #FFF; + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --code-background: #f3f5f7; + --code-inlined: #edf0f3; + --code-color-1: #73828c; + --code-color-2: #b34d80; + --code-color-3: #3d888f; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(115, 130, 140, 0.075); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-border-h: rgba(255, 223, 128, 0.5); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } } [data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-hover: #1ab3e6; - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-hover: #73828c; - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-hover: #FFF; - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-border: rgba(255, 223, 128, 0.33); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.5); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #10181e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.06); - --table-stripping: rgba(115, 130, 140, 0.02); + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); } /** @@ -172,35 +258,35 @@ html { -webkit-text-size-adjust: 100%; background: var(--background); color: var(--text); - font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - font-size: 16px; - font-weight: 400; - line-height: 1.5; + font-family: var(--text-font); + font-size: var(--base-font-xs); + font-weight: var(--text-weight); + line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } @media (min-width: 576px) { html { - font-size: 17px; + font-size: var(--base-font-sm); } } @media (min-width: 768px) { html { - font-size: 18px; + font-size: var(--base-font-md); } } @media (min-width: 992px) { html { - font-size: 19px; + font-size: var(--base-font-lg); } } @media (min-width: 1200px) { html { - font-size: 20px; + font-size: var(--base-font-xl); } } @@ -223,7 +309,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: 2rem 0; + padding: var(--spacing-block) 0; } /** @@ -234,8 +320,8 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding-right: 1rem; - padding-left: 1rem; + padding-right: var(--spacing-gutter); + padding-left: var(--spacing-gutter); } @media (min-width: 576px) { @@ -269,8 +355,8 @@ body > footer { * Minimal grid system with auto-layout columns */ .grid { - grid-column-gap: 1rem; - grid-row-gap: 1rem; + grid-column-gap: var(--spacing-gutter); + grid-row-gap: var(--spacing-gutter); display: grid; grid-template-columns: 1fr; margin: 0; @@ -297,7 +383,7 @@ figure { } figure figcaption { - padding: 0.5rem 0; + padding: calc(var(--spacing-gutter) / 2) 0; color: var(--muted-text); } @@ -351,7 +437,7 @@ pre, table, ul { margin-top: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); color: var(--text); font-size: 1rem; font-style: normal; @@ -375,6 +461,7 @@ a:focus { a.secondary { color: var(--secondary); + text-decoration: underline; } a.secondary:hover, a.secondary:active, a.secondary:focus { @@ -385,18 +472,16 @@ a.secondary:focus { background-color: var(--secondary-focus); } -a.contrast:not([role="button"]) { - box-shadow: inset 0 -0.33rem 0 var(--contrast-border); +a.contrast { color: var(--contrast); + text-decoration: underline; } -a.contrast:not([role="button"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus { - box-shadow: inset 0 -0.33rem 0 var(--contrast-border-h); +a.contrast:hover, a.contrast:active, a.contrast:focus { color: var(--contrast-hover); - text-decoration: none; } -a.contrast:not([role="button"]):focus { +a.contrast:focus { background-color: var(--contrast-focus); } @@ -407,43 +492,43 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-weight: var(--titles-weight); } h1 { - margin-bottom: 3rem; + margin-bottom: calc(var(--spacing-typography) * 2); color: var(--h1); - font-size: 2rem; + font-size: var(--h1-size); } h2 { - margin-bottom: 2.625rem; + margin-bottom: calc(var(--spacing-typography) * 1.75); color: var(--h2); - font-size: 1.75rem; + font-size: var(--h2-size); } h3 { - margin-bottom: 2.25rem; + margin-bottom: calc(var(--spacing-typography) * 1.5); color: var(--h3); - font-size: 1.5rem; + font-size: var(--h3-size); } h4 { - margin-bottom: 1.875rem; + margin-bottom: calc(var(--spacing-typography) * 1.25); color: var(--h4); - font-size: 1.25rem; + font-size: var(--h4-size); } h5 { - margin-bottom: 1.6875rem; + margin-bottom: calc(var(--spacing-typography) * 1.125); color: var(--h5); - font-size: 1.125rem; + font-size: var(--h5-size); } h6 { color: var(--h6); - font-size: 1rem; + font-size: var(--h6-size); } address ~ h1, @@ -456,7 +541,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -469,7 +554,7 @@ p ~ h2, pre ~ h2, table ~ h2, ul ~ h2 { - margin-top: 2.625rem; + margin-top: calc(var(--spacing-typography) * 1.75); } address ~ h3, @@ -482,7 +567,7 @@ p ~ h3, pre ~ h3, table ~ h3, ul ~ h3 { - margin-top: 2.25rem; + margin-top: calc(var(--spacing-typography) * 1.5); } address ~ h4, @@ -495,7 +580,7 @@ p ~ h4, pre ~ h4, table ~ h4, ul ~ h4 { - margin-top: 1.875rem; + margin-top: calc(var(--spacing-typography) * 1.25); } address ~ h5, @@ -508,7 +593,7 @@ p ~ h5, pre ~ h5, table ~ h5, ul ~ h5 { - margin-top: 1.6875rem; + margin-top: calc(var(--spacing-typography) * 1.125); } address ~ h6, @@ -521,11 +606,11 @@ p ~ h6, pre ~ h6, table ~ h6, ul ~ h6 { - margin-top: 1.5rem; + margin-top: calc(var(--spacing-typography)); } hgroup { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } hgroup * { @@ -535,11 +620,11 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -572,12 +657,12 @@ small { ul, ol { - padding-left: 1.5rem; + padding-left: var(--spacing-typography); } ul li, ol li { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); } ul li { @@ -593,13 +678,13 @@ mark { blockquote { display: block; - margin: 3rem 0; - padding: 1rem; + margin: var(--spacing-typography) 0; + padding: var(--spacing-gutter); border-left: 0.25rem solid var(--muted-border); } blockquote footer { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); color: var(--muted-text); } @@ -690,7 +775,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -701,17 +786,19 @@ a[role="button"] { button, input[type="submit"], input[type="button"], +input[type="reset"], [type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; - border-radius: 0.25rem; + padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); + border: var(--button-border-width) solid var(--primary-border); + border-radius: var(--button-round); outline: none; background-color: var(--primary); + box-shadow: var(--button-shadow); color: var(--primary-inverse); font-size: 1rem; - font-weight: normal; - line-height: 1.5; + font-weight: var(--buttons-weight); + line-height: var(--line-height); text-align: center; cursor: pointer; } @@ -723,21 +810,27 @@ input[type="submit"]:focus, input[type="button"]:hover, input[type="button"]:active, input[type="button"]:focus, +input[type="reset"]:hover, +input[type="reset"]:active, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:hover, [type="file"]::-webkit-file-upload-button:active, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { + border-color: var(--primary-hover-border); background-color: var(--primary-hover); + box-shadow: var(--button-hover-shadow); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, +input[type="reset"]:focus, [type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); } input[type="reset"] { @@ -764,7 +857,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -776,7 +869,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -838,12 +930,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc(1.5rem + 1.5rem + 2px); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); } fieldset { margin: 0; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); padding: 0; border: 0; } @@ -851,7 +943,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -869,19 +961,19 @@ textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: 0.75rem 1rem; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); vertical-align: middle; } input, select, textarea { - border: 1px solid var(--input-border); - border-radius: 0.25rem; + border: var(--form-element-border-width) solid var(--input-border); + border-radius: var(--block-round); outline: none; background-color: var(--input-background); color: var(--text); - font-weight: normal; + font-weight: var(--form-element-weight); } input::placeholder, input::-webkit-input-placeholder, @@ -898,7 +990,8 @@ select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--primary); + border-color: var(--input-hover-border); + background-color: var(--input-hover-background); } input[readonly], input[disabled], @@ -918,6 +1011,18 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, +select[readonly]:active, +select[readonly]:focus, +select[disabled]:active, +select[disabled]:focus, +textarea[readonly]:active, +textarea[readonly]:focus, +textarea[disabled]:active, +textarea[disabled]:focus { + box-shadow: none; +} + input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { @@ -927,20 +1032,19 @@ textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) input[disabled], select[disabled], textarea[disabled] { - cursor: not-allowed; - opacity: .5; + opacity: .66; } input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } input:not([type="range"]):not([type="file"]):focus, select:focus, textarea:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); + box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); } select::-ms-expand { @@ -949,8 +1053,8 @@ select::-ms-expand { } select:not([multiple]):not([size]) { - padding-right: 2.5rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); + background-image: var(--icon-chevron); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -963,14 +1067,14 @@ form small { input + small, select + small, textarea + small { - margin-top: -1rem; - margin-bottom: 1.5rem; + margin-top: calc(var(--spacing-typography) * -0.5); + margin-bottom: var(--spacing-typography); } label > input, label > select, label > textarea { - margin-top: 0.25rem; + margin-top: var(--spacing-form-element); } /** @@ -986,11 +1090,11 @@ table { th, td { - padding: 0.5rem 1rem; + padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); border-bottom: 1px solid var(--table-border); color: var(--muted-text); font-size: 0.875rem; - font-weight: 400; + font-weight: var(--text-weight); text-align: left; } @@ -1005,7 +1109,7 @@ thead td { border-bottom: 3px solid var(--table-border); } -tbody tr:nth-child(odd) { +table[role="grid"] tbody tr:nth-child(odd) { background-color: var(--table-stripping); } diff --git a/css/pico.slim.min.css b/css/pico.slim.min.css index 873c0b36..a9109466 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -4,4 +4,4 @@ * * Slim version example * You can export only the modules you need - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc(1.5rem + 1.5rem + 2px)}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}fieldset legend,label{display:block;margin-bottom:0.25rem;vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0.75rem 1rem;vertical-align:middle}input,select,textarea{border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.25rem}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#08769b;--primary-hover-border:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:#73828c;--secondary-hover:#415462;--secondary-hover-border:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:#2c3d49;--contrast-hover:#0d1419;--contrast-hover-border:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:#FFF;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.125);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing-gutter);padding-left:var(--spacing-gutter)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:var(--spacing-gutter);grid-row-gap:var(--spacing-gutter);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary);text-decoration:underline}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast{color:var(--contrast);text-decoration:underline}a.contrast:active,a.contrast:focus,a.contrast:hover{color:var(--contrast-hover)}a.contrast:focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-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}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.5);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation} \ No newline at end of file diff --git a/css/themes/default.css b/css/themes/default.css new file mode 100644 index 00000000..4de0ffb0 --- /dev/null +++ b/css/themes/default.css @@ -0,0 +1,228 @@ +/** + * Theme: default + */ +:root { + --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --titles-font: var(--text-font); + --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --text-weight: 400; + --titles-weight: 700; + --form-element-weight: var(--text-weight); + --buttons-weight: var(--text-weight); + --code-weight: var(--text-weight); + --base-font-xs: 16px; + --base-font-sm: 17px; + --base-font-md: 18px; + --base-font-lg: 19px; + --base-font-xl: 20px; + --h1-size: 2rem; + --h2-size: 1.75rem; + --h3-size: 1.5rem; + --h4-size: 1.25rem; + --h5-size: 1.125rem; + --block-round: .25rem ; + --form-element-border-width: 1px; + --form-element-outline-width: 3px; + --checkbox-radio-border-width: 2px; + --switch-border-width: 3px; + --form-element-spacing-vertical: .75rem; + --form-element-spacing-horizontal: 1rem; + --button-round: var(--block-round); + --button-border-width: var(--form-element-border-width); + --button-outline-width: var(--form-element-outline-width); + --button-spacing-vertical: var(--form-element-spacing-vertical); + --button-spacing-horizontal: var(--form-element-spacing-horizontal); + --spacing-gutter: 1rem; + --spacing-block: 2rem; + --spacing-factor-xs: 1; + --spacing-factor-sm: 1.25; + --spacing-factor-md: 1.5; + --spacing-factor-lg: 1.75; + --spacing-factor-xl: 2; + --spacing-typography: 1.5rem; + --spacing-form-element: .25rem; + --transition: .2s ease-in-out; +} + +:root { + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +} + +[data-theme="light"], +:root:not([data-theme="dark"]) { + --background: #FFF; + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #08769b; + --primary-hover-border: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: #73828c; + --secondary-hover: #415462; + --secondary-hover-border: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: #2c3d49; + --contrast-hover: #0d1419; + --contrast-hover-border: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: #FFF; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.125); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #288a6a; + --invalid: #b94646; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #2c3d49; + --muted-text: #7e8d98; + --muted-background: #edf0f3; + --muted-border: #edf0f3; + --card-background: #FFF; + --card-sections: #f3f5f7; + --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --code-background: #f3f5f7; + --code-inlined: #edf0f3; + --code-color-1: #73828c; + --code-color-2: #b34d80; + --code-color-3: #3d888f; + --code-color-4: #998866; + --code-color-5: #96a4ae; + --table-border: rgba(237, 240, 243, 0.75); + --table-stripping: rgba(115, 130, 140, 0.075); +} + +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); + } +} + +[data-theme="dark"] { + --background: #10181e; + --text: #a2afb9; + --h1: #edf0f3; + --h2: #d5dce2; + --h3: #bbc6ce; + --h4: #a2afb9; + --h5: #8a99a3; + --h6: #73828c; + --primary: #1095c1; + --primary-border: #1095c1; + --primary-hover: #1ab3e6; + --primary-hover-border: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: #596b78; + --secondary-hover: #73828c; + --secondary-hover-border: #73828c; + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: #d5dce2; + --contrast-hover: #FFF; + --contrast-hover-border: #FFF; + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: #10181e; + --input-hover-border: #1095c1; + --input-focus: rgba(16, 149, 193, 0.25); + --input-inverse: #FFF; + --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); + --valid: #1f7a5c; + --invalid: #943838; + --mark: rgba(255, 223, 128, 0.5); + --mark-text: #FFF; + --muted-text: #73828c; + --muted-background: #23333e; + --muted-border: #23333e; + --card-background: #17232b; + --card-sections: #141d24; + --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: rgba(115, 130, 140, 0.075); + --table-stripping: rgba(115, 130, 140, 0.05); +} diff --git a/css/themes/default.min.css b/css/themes/default.min.css new file mode 100644 index 00000000..1e1103aa --- /dev/null +++ b/css/themes/default.min.css @@ -0,0 +1 @@ +:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#08769b;--primary-hover-border:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:#73828c;--secondary-hover:#415462;--secondary-hover-border:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:#2c3d49;--contrast-hover:#0d1419;--contrast-hover-border:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:#FFF;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.125);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:#1095c1;--primary-hover:#1ab3e6;--primary-hover-border:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:#596b78;--secondary-hover:#73828c;--secondary-hover-border:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:#d5dce2;--contrast-hover:#FFF;--contrast-hover-border:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:#10181e;--input-hover-border:#1095c1;--input-focus:rgba(16, 149, 193, 0.25);--input-inverse:#FFF;--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)} \ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index be7ce84c..d5370b68 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -4,6 +4,11 @@ /** * Theme: Additions for docs */ +:root { + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +} + [data-theme="light"], :root:not([data-theme="dark"]) { --nav-background: rgba(255, 255, 255, 0.7); @@ -33,33 +38,33 @@ html { * Docs: Main (Grid) */ body > main { - padding-top: 4.5rem; + padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem); } @media (min-width: 576px) { body > main { - padding-top: 4.75rem; + padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem); } } @media (min-width: 768px) { body > main { - padding-top: 5rem; + padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem); } } @media (min-width: 992px) { body > main { - grid-column-gap: 4rem; + grid-column-gap: calc(var(--spacing-gutter) * 4); display: grid; grid-template-columns: 200px auto; - padding-top: 5.25rem; + padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem); } } @media (min-width: 1200px) { body > main { - padding-top: 5.5rem; + padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem); } } @@ -69,36 +74,36 @@ body > main > * { div[role="document"] > section::before { display: block; - height: 4.5rem; - margin-top: -4.5rem; + height: calc(1rem * var(--spacing-factor-xs) + 3.5rem); + margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem); content: ''; } @media (min-width: 576px) { div[role="document"] > section::before { - height: 4.75rem; - margin-top: -4.75rem; + height: calc(1rem * var(--spacing-factor-sm) + 3.5rem); + margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem); } } @media (min-width: 768px) { div[role="document"] > section::before { - height: 5rem; - margin-top: -5rem; + height: calc(1rem * var(--spacing-factor-md) + 3.5rem); + margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem); } } @media (min-width: 992px) { div[role="document"] > section::before { - height: 5.25rem; - margin-top: -5.25rem; + height: calc(1rem * var(--spacing-factor-lg) + 3.5rem); + margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem); } } @media (min-width: 1200px) { div[role="document"] > section::before { - height: 5.5rem; - margin-top: -5.5rem; + height: calc(1rem * var(--spacing-factor-xl) + 3.5rem); + margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem); } } @@ -106,7 +111,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no display: inline-block; width: 1rem; height: 1rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-external); background-position: top center; background-repeat: no-repeat; background-size: .66rem auto; @@ -123,11 +128,11 @@ form.grid > button { */ main > aside nav { width: 100%; - margin-bottom: 2rem; + margin-bottom: var(--spacing-block); } main > aside nav h1 { - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } @media (min-width: 992px) { @@ -207,8 +212,8 @@ main > aside details[open] summary { #customization figure { grid-template-columns: repeat(18, 1fr); grid-template-rows: 1fr; - border-top-right-radius: 0.25rem; - border-top-left-radius: 0.25rem; + border-top-right-radius: var(--block-round); + border-top-left-radius: var(--block-round); } } @@ -231,19 +236,15 @@ main > aside details[open] summary { } #customization figure button.picked { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-check); background-position: center; background-repeat: no-repeat; background-size: .66rem auto; box-shadow: inset 0 0 1rem 0 rgba(0, 0, 0, 0.25); } -#customization figure button[data-color="lime"].picked, #customization figure button[data-color="yellow"].picked, #customization figure button[data-color="amber"].picked { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); -} - #customization h4 { - transition: color 0.2s ease-in-out; + transition: color var(--transition); } #customization pre[data-theme="generated"] { @@ -253,7 +254,7 @@ main > aside details[open] summary { #grids button { display: block; width: 100%; - margin-bottom: 0.75rem; + margin-bottom: calc(var(--spacing-typography) / 2); } @media (min-width: 576px) { @@ -273,13 +274,13 @@ main > aside details[open] summary { } #grids .grid > * { - padding: 0.5rem 0; + padding: calc(var(--spacing-gutter) / 2) 0; background: var(--code-background); text-align: center; } #grids details { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } #forms div.grid { @@ -290,12 +291,12 @@ main > aside details[open] summary { * Docs: Typography */ section > hgroup { - margin-bottom: 3rem; + margin-bottom: calc(var(--spacing-typography) * 2); } a[role=button] { - margin-right: 0.25rem; - margin-bottom: 1.5rem; + margin-right: calc(var(--spacing-typography) / 4); + margin-bottom: var(--spacing-typography); } [role=document] section > h1, @@ -309,25 +310,25 @@ a[role=button] { */ @media (min-width: 576px) { pre { - padding: 2rem 2.5rem; + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @media (min-width: 768px) { pre { - padding: 2rem 3rem; + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); } } @media (min-width: 992px) { pre { - padding: 2rem 3.5rem; + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @media (min-width: 1200px) { pre { - padding: 2rem 4rem; + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); } } @@ -353,8 +354,8 @@ a[role=button] { @media (min-width: 992px) { [data-theme="invalid"]:before, [data-theme="valid"]:before { - top: 1rem; - right: 1rem; + top: var(--spacing-gutter); + right: var(--spacing-gutter); } } @@ -399,7 +400,7 @@ body > nav a svg { body > nav ul:first-of-type li:first-of-type a { width: 3.5rem; height: 3.5rem; - margin-left: -1rem; + margin-left: calc(var(--spacing-gutter) * -1); padding: 0; background: var(--h1); color: var(--background); @@ -407,7 +408,7 @@ body > nav ul:first-of-type li:first-of-type a { body > nav ul:first-of-type li:nth-of-type(2) { display: none; - margin-left: 1rem; + margin-left: var(--spacing-gutter); color: var(--h1); } @@ -422,15 +423,15 @@ body > nav ul:first-of-type li:nth-of-type(2) { */ .switcher { position: fixed; - right: 0.5rem; - bottom: 1rem; + right: calc(var(--spacing-gutter) / 2); + bottom: var(--spacing-gutter); width: auto; margin-bottom: 0; padding: .75rem; border-radius: 2rem; + box-shadow: var(--card-shadow); line-height: 1; text-align: right; - box-shadow: var(--card-shadow); } .switcher::after { @@ -442,7 +443,7 @@ body > nav ul:first-of-type li:nth-of-type(2) { background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%); vertical-align: bottom; content: ''; - transition: transform 0.2s ease-in-out; + transition: transform var(--transition); } .switcher i { @@ -457,7 +458,7 @@ body > nav ul:first-of-type li:nth-of-type(2) { .switcher:hover, .switcher:focus { max-width: 100%; - transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; + transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } .switcher:hover::after { @@ -466,8 +467,8 @@ body > nav ul:first-of-type li:nth-of-type(2) { .switcher:hover i { max-width: 100%; - padding: 0 0.5rem 0 0.25rem; - transition: max-width 0.2s ease-in-out, padding 0.2s ease-in-out; + padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); + transition: max-width var(--transition), padding var(--transition); } .switcher:focus { @@ -476,6 +477,6 @@ body > nav ul:first-of-type li:nth-of-type(2) { @media (min-width: 576px) { .switcher { - right: 1rem; + right: var(--spacing-gutter); } } diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 410313d5..9ebe1e45 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles for Docs - */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:1rem}} \ No newline at end of file + */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:calc(1rem * var(--spacing-factor-xs) + 3.5rem)}@media (min-width:576px){body>main{padding-top:calc(1rem * var(--spacing-factor-sm) + 3.5rem)}}@media (min-width:768px){body>main{padding-top:calc(1rem * var(--spacing-factor-md) + 3.5rem)}}@media (min-width:992px){body>main{grid-column-gap:calc(var(--spacing-gutter) * 4);display:grid;grid-template-columns:200px auto;padding-top:calc(1rem * var(--spacing-factor-lg) + 3.5rem)}}@media (min-width:1200px){body>main{padding-top:calc(1rem * var(--spacing-factor-xl) + 3.5rem)}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:calc(1rem * var(--spacing-factor-xs) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xs) - 3.5rem);content:''}@media (min-width:576px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-sm) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-sm) - 3.5rem)}}@media (min-width:768px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-md) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-md) - 3.5rem)}}@media (min-width:992px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-lg) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-lg) - 3.5rem)}}@media (min-width:1200px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-xl) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xl) - 3.5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:var(--spacing-block)}main>aside nav h1{margin-bottom:var(--spacing-typography)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--block-round);border-top-left-radius:var(--block-round)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:calc(var(--spacing-typography) / 2)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing-gutter) / 2) 0;background:var(--code-background);text-align:center}#grids details{margin-top:calc(var(--spacing-typography) * 2)}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--spacing-typography) * 2)}a[role=button]{margin-right:calc(var(--spacing-typography) / 4);margin-bottom:var(--spacing-typography)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing-gutter);right:var(--spacing-gutter)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing-gutter) * -1);padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing-gutter);color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing-gutter) / 2);bottom:var(--spacing-gutter);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-shadow);line-height:1;text-align:right}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing-gutter)}} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index aa23cea0..a21373f5 100644 --- a/docs/index.html +++ b/docs/index.html @@ -133,11 +133,11 @@

Themes

Pico is shipped with 2 consistents themes: Light & Dark.

-

The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled prefers-color-scheme: dark.

+

The Light theme is used by default. The Dark theme is automatically enabled if user has dark mode enabled prefers-color-scheme: dark

-

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">.

+

Themes can be forced on document level <html data-theme="light"> or on any HTML element <article data-theme="dark">

Light theme

@@ -301,7 +301,7 @@ -

<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding.

+

<header>, <main> and <footer> as direct childs of <body> provide a responsive vertical padding

<section> provide a responsive margin-bottom to separate your sections.

@@ -327,7 +327,7 @@ </div>
-

Columns intentionally collapses below large devices (992px).

+

Columns intentionally collapses below large devices (992px)

To go further, discover how to merge Pico with the Bootstrap grid system.

@@ -353,7 +353,7 @@

Horizontal scroller

<figure> act as a container to make any content scrollable horizontally.

-

Useful to have responsives <table>.

+

Useful to have responsives <table>

@@ -938,7 +938,7 @@

We love .classes

-

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes.

+

As a starting point, Pico chose to be as neutral and semantic as possible using very few .classes

But off course, .classes are not a bad practice at all.

Feel free to use modifiers.

diff --git a/docs/scss/components/_nav.scss b/docs/scss/components/_nav.scss index 93fc7ebf..a8835004 100644 --- a/docs/scss/components/_nav.scss +++ b/docs/scss/components/_nav.scss @@ -28,7 +28,7 @@ body > nav { a { width: 3.5rem; height: 3.5rem; - margin-left: -$spacing-gutter; + margin-left: calc(var(--spacing-gutter) * -1); padding: 0; background: var(--h1); color: var(--background); @@ -38,7 +38,7 @@ body > nav { // Title &:nth-of-type(2) { display: none; - margin-left: $spacing-gutter; + margin-left: var(--spacing-gutter); color: var(--h1); @media (min-width: map-get($breakpoints, "lg")) { diff --git a/docs/scss/components/_theme-switcher.scss b/docs/scss/components/_theme-switcher.scss index b7ee831a..d5d4dff2 100644 --- a/docs/scss/components/_theme-switcher.scss +++ b/docs/scss/components/_theme-switcher.scss @@ -4,15 +4,15 @@ .switcher { position: fixed; - right: $spacing-gutter/2; - bottom: $spacing-gutter; + right: calc(var(--spacing-gutter) / 2); + bottom: var(--spacing-gutter); width: auto; margin-bottom: 0; padding: .75rem; border-radius: 2rem; + box-shadow: var(--card-shadow); line-height: 1; text-align: right; - box-shadow: var(--card-shadow); &::after { display: inline-block; @@ -23,7 +23,7 @@ background: linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%); vertical-align: bottom; content: ''; - transition: transform $transition; + transition: transform var(--transition); } i { @@ -40,10 +40,10 @@ &:focus { max-width: 100%; transition: - background-color $transition, - border-color $transition, - color $transition, - box-shadow $transition; + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); } &:hover { @@ -53,9 +53,9 @@ i { max-width: 100%; - padding: 0 ($spacing-gutter/2) 0 ($spacing-gutter/4); - transition: max-width $transition, - padding $transition; + padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); + transition: max-width var(--transition), + padding var(--transition); } } @@ -65,6 +65,6 @@ } @media (min-width: map-get($breakpoints, "sm")) { - right: $spacing-gutter; + right: var(--spacing-gutter); } } diff --git a/docs/scss/content/_code.scss b/docs/scss/content/_code.scss index 209225e8..d818b6d7 100644 --- a/docs/scss/content/_code.scss +++ b/docs/scss/content/_code.scss @@ -6,38 +6,34 @@ pre { @if map-get($breakpoints, "sm") and - map-get($spacing-factor, "sm") and $enable-responsive-spacings { @media (min-width: map-get($breakpoints, "sm")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "sm")); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); } } @if map-get($breakpoints, "md") and - map-get($spacing-factor, "md") and $enable-responsive-spacings { @media (min-width: map-get($breakpoints, "md")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "md")); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); } } @if map-get($breakpoints, "lg") and - map-get($spacing-factor, "lg") and $enable-responsive-spacings { @media (min-width: map-get($breakpoints, "lg")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "lg")); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); } } @if map-get($breakpoints, "xl") and - map-get($spacing-factor, "xl") and $enable-responsive-spacings { @media (min-width: map-get($breakpoints, "xl")) { - padding: $spacing-block ($spacing-block*map-get($spacing-factor, "xl")); + padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); } } } @@ -61,8 +57,8 @@ pre { line-height: 1; @media (min-width: map-get($breakpoints, "lg")) { - top: $spacing-gutter; - right: $spacing-gutter; + top: var(--spacing-gutter); + right: var(--spacing-gutter); } } diff --git a/docs/scss/content/_typography.scss b/docs/scss/content/_typography.scss index d5de849a..98c9ff8d 100644 --- a/docs/scss/content/_typography.scss +++ b/docs/scss/content/_typography.scss @@ -3,12 +3,12 @@ */ section > hgroup { - margin-bottom: $spacing-typography*2; + margin-bottom: calc(var(--spacing-typography) * 2); } a[role=button] { - margin-right: $spacing-gutter/4; - margin-bottom: $spacing-typography; + margin-right: calc(var(--spacing-typography) / 4); + margin-bottom: var(--spacing-typography); } [role=document] { diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss index ae2817c8..d8ad9bd1 100644 --- a/docs/scss/layout/_aside.scss +++ b/docs/scss/layout/_aside.scss @@ -6,10 +6,10 @@ main > aside { nav { width: 100%; - margin-bottom: $spacing-block; + margin-bottom: var(--spacing-block); h1 { - margin-bottom: $spacing-typography; + margin-bottom: var(--spacing-typography); } @media (min-width: map-get($breakpoints, "lg")) { diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss index 93833a02..f94ddafb 100644 --- a/docs/scss/layout/_documentation.scss +++ b/docs/scss/layout/_documentation.scss @@ -26,8 +26,8 @@ @media (min-width: map-get($breakpoints, "sm")) { grid-template-columns: repeat(18, 1fr); grid-template-rows: 1fr; - border-top-right-radius: $round; - border-top-left-radius: $round; + border-top-right-radius: var(--block-round); + border-top-left-radius: var(--block-round); } ~ article { @@ -48,8 +48,7 @@ } &.picked { - // Source: https://feathericons.com/ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: var(--icon-check); background-position: center; background-repeat: no-repeat; background-size: .66rem auto; @@ -59,15 +58,14 @@ &[data-color="yellow"], &[data-color="amber"] { &.picked { - // Source: https://feathericons.com/ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + // TODO } } } } h4 { - transition: color $transition; + transition: color var(--transition); } pre[data-theme="generated"] { @@ -84,7 +82,7 @@ button { display: block; width: 100%; - margin-bottom: $spacing-typography/2; + margin-bottom: calc(var(--spacing-typography) / 2); @media (min-width: map-get($breakpoints, "sm")) { display: inline-block; @@ -102,13 +100,13 @@ } .grid > * { - padding: ($spacing-gutter/2) 0; + padding: calc(var(--spacing-gutter) / 2) 0; background: var(--code-background); text-align: center; } details { - margin-top: $spacing-typography*2; + margin-top: calc(var(--spacing-typography) * 2); } } diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss index 0ea607dd..664b5c69 100644 --- a/docs/scss/layout/_main.scss +++ b/docs/scss/layout/_main.scss @@ -5,25 +5,25 @@ $navHeight: 3.5rem; body > main { - padding-top:map-get($spacing-factor, "xs") + $navHeight; + padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight}); @media (min-width: map-get($breakpoints, "sm")) { - padding-top: map-get($spacing-factor, "sm") + $navHeight; + padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight}); } @media (min-width: map-get($breakpoints, "md")) { - padding-top: map-get($spacing-factor, "md") + $navHeight; + padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight}); } @media (min-width: map-get($breakpoints, "lg")) { - grid-column-gap: $spacing-gutter*4; + grid-column-gap: calc(var(--spacing-gutter) * 4); display: grid; grid-template-columns: 200px auto; - padding-top: map-get($spacing-factor, "lg") + $navHeight; + padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight}); } @media (min-width: map-get($breakpoints, "xl")) { - padding-top: map-get($spacing-factor, "xl") + $navHeight; + padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight}); } > * { @@ -37,29 +37,29 @@ body > main { div[role="document"] > section::before { display: block; - height: map-get($spacing-factor, "xs") + $navHeight; - margin-top: -(map-get($spacing-factor, "xs")+ $navHeight); + height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight}); + margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight}); content: ''; @media (min-width: map-get($breakpoints, "sm")) { - height: map-get($spacing-factor, "sm") + $navHeight; - margin-top: -(map-get($spacing-factor, "sm") + $navHeight); + height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight}); + margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight}); } @media (min-width: map-get($breakpoints, "md")) { - height: map-get($spacing-factor, "md") + $navHeight; - margin-top: -(map-get($spacing-factor, "md") + $navHeight); + height: calc(1rem * var(--spacing-factor-md) + #{$navHeight}); + margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight}); } @media (min-width: map-get($breakpoints, "lg")) { - height: map-get($spacing-factor, "lg") + $navHeight; - margin-top: -(map-get($spacing-factor, "lg") + $navHeight); + height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight}); + margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight}); } @media (min-width: map-get($breakpoints, "xl")) { - height: map-get($spacing-factor, "xl") + $navHeight; - margin-top: -(map-get($spacing-factor, "xl") + $navHeight); + height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight}); + margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight}); } } @@ -71,8 +71,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no display: inline-block; width: 1rem; height: 1rem; - // Source: https://feathericons.com/ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + background-image: var(--icon-external); background-position: top center; background-repeat: no-repeat; background-size: .66rem auto; diff --git a/docs/scss/themes/_docs.scss b/docs/scss/themes/docs.scss similarity index 85% rename from docs/scss/themes/_docs.scss rename to docs/scss/themes/docs.scss index 1a80da70..f64025aa 100644 --- a/docs/scss/themes/_docs.scss +++ b/docs/scss/themes/docs.scss @@ -3,5 +3,6 @@ */ @import "../../../scss/themes/default/colors"; +@import "docs/icons"; @import "docs/light"; @import "docs/dark"; diff --git a/docs/scss/themes/docs/_icons.scss b/docs/scss/themes/docs/_icons.scss new file mode 100644 index 00000000..0aaff45a --- /dev/null +++ b/docs/scss/themes/docs/_icons.scss @@ -0,0 +1,7 @@ +// Icons +// Source: https://feathericons.com/ + +:root { + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +} diff --git a/index.html b/index.html new file mode 100644 index 00000000..d4a4c22d --- /dev/null +++ b/index.html @@ -0,0 +1,370 @@ + + + + + + Class-less example • Pico.css + + + + + + + + + + +
+
+

Pico

+

Graceful & Minimal CSS design system in pure semantic HTML

+
+ +
+ +
+ +
+ +

Buttons

+
+ + + +
+
+ + + +
+ +
+ +
+ +

Form elements

+ + + + + + + + Curabitur consequat lacus at lacus porta finibus. + + +
+ + + +
+ + + + + + + + + +
+ + +
+ Checkboxes + + + +
+ + +
+ Radio buttons + + +
+ + +
+ Switches + + +
+ +
+ + + + + + + + + + + + +
+ +
+ +
+ Test +
+ +

Article example

+

Nullam dui arcu, malesuada et sodales eu, efficitur vitae dolor. Sed ultricies dolor non ante vulputate hendrerit. Vivamus sit amet suscipit sapien. Nulla iaculis eros a elit pharetra egestas. Nunc placerat facilisis cursus. Sed vestibulum metus eget dolor pharetra rutrum.

+
    +
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • +
  • Nulla pellentesque elit nec velit convallis, sit amet accumsan odio pulvinar.
    • +
  • Aliquam venenatis massa a ornare ullamcorper.
    • +
+ +
+ Test +
+ +
+ +
+ +

Typography

+

Aliquam lobortis vitae nibh nec rhoncus. Morbi mattis neque eget efficitur feugiat. Vivamus porta nunc a erat mattis, mattis feugiat turpis pretium. Quisque sed tristique felis.

+ +
+ "Blockquote example: Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare." +
+ - Phasellus eget lacinia +
+
+ +

Lists

+
    +
  • Aliquam lobortis lacus eu libero ornare facilisis.
    • +
  • Nam et magna at libero scelerisque egestas.
    • +
  • Suspendisse id nisl ut leo finibus vehicula quis eu ex.
    • +
  • Proin ultricies turpis et volutpat vehicula.
    • +
+ +

Inline text elements

+
+

Primary link

+

Secondary link

+

Contrast link

+
+
+

Bold

+

Italic

+

Underline

+
+
+

Deleted

+

Inserted

+

Strikethrough

+
+
+

Small

+

Text Sub

+

Text Sup

+
+
+

Abbr.

+

Kbd

+

Highlighted

+
+ +

Heading 3

+

Integer bibendum malesuada libero vel eleifend. Fusce iaculis turpis ipsum, at efficitur sem scelerisque vel. Aliquam auctor diam ut purus cursus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+ +

Heading 4

+

Cras fermentum velit vitae auctor aliquet. Nunc non congue urna, at blandit nibh. Donec ac fermentum felis. Vivamus tincidunt arcu ut lacus hendrerit, eget mattis dui finibus.

+ +
Heading 5
+

Donec nec egestas nulla. Sed varius placerat felis eu suscipit. Mauris maximus ante in consequat luctus. Morbi euismod sagittis efficitur. Aenean non eros orci. Vivamus ut diam sem.

+ +
Heading 6
+

Ut sed quam non mauris placerat consequat vitae id risus. Vestibulum tincidunt nulla ut tortor posuere, vitae malesuada tortor molestie. Sed nec interdum dolor. Vestibulum id auctor nisi, a efficitur sem. Aliquam sollicitudin efficitur turpis, sollicitudin hendrerit ligula semper id. Nunc risus felis, egestas eu tristique eget, convallis in velit.

+ +
+ Minimal landscape +
Image from unsplash.com
+
+ +
+ +
+

Responsive table example

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#HeadingHeadingHeadingHeadingHeadingHeadingHeading
1CellCellCellCellCellCellCell
2CellCellCellCellCellCellCell
3CellCellCellCellCellCellCell
+
+ + + + + + + + + + + + + + diff --git a/scss/_variables.scss b/scss/_variables.scss index 8ca7e08c..779a4396 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -33,86 +33,6 @@ $enable-transitions: true !default; $enable-important: true !default; -// Spacings -// –––––––––––––––––––– - -// Gutters and horizontals margins -// For , .grid,