diff --git a/README.md b/README.md index 6eaf8809..3eac14d7 100644 --- a/README.md +++ b/README.md @@ -53,11 +53,19 @@ npm install @picocss/pico ## Examples +Minimalist templates to discover Pico in action: + [![Examples](https://picocss.com/img/examples.jpg)](https://picocss.com/#examples) +- **[Preview](https://picocss.com/examples/preview/)** + A starter example with all elements and components used in Pico + - **[Class-less](https://picocss.com/examples/classless/)** Just a pure semantic HTML markup, without `.classes` +- **[Basic template](https://picocss.com/examples/basic-template/)** + A basic custom template for Pico using only CSS custom properties (variables) + - **[Company](https://picocss.com/examples/company/)** A classic company or blog layout with a sidebar @@ -67,9 +75,6 @@ npm install @picocss/pico - **[Sign in](https://picocss.com/examples/sign-in/)** A minimalist layout for Login pages -- **[Form elements](https://picocss.com/examples/form-elements/)** - Semantic HTML form markup, without any `.classes` or `JavaScript` - - **[Bootstrap grid system](https://picocss.com/examples/bootstrap-grid/)** Custom CSS build with the Bootstrap grid system to manage complex grid layouts in Pico @@ -101,15 +106,6 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e ## Copyright and license -- Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md) -- Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE)) -- Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free)) +Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md). -Openly inspired by: - -- [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)) -- [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)) -- [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)) -- [CSS Bed](https://github.com/ubershmekel/cssbed) -- [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) -- [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md)) +Openly inspired by: [Bootstrap](https://github.com/twbs/bootstrap), [CSS Bed](https://github.com/ubershmekel/cssbed), [Normalize](https://github.com/necolas/normalize.css/), [Sanitize](https://csstools.github.io/sanitize.css/), [Spectre](https://github.com/picturepan2/spectre), [Wing](https://github.com/kbrsh/wing/). diff --git a/css/pico.classless.css b/css/pico.classless.css index a10a9565..de702057 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -1,148 +1,234 @@ /*! - * Pico.css v1.1.0 (https://picocss.com) + * Pico.css v1.2.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ /** * 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: var(--primary); + --primary-hover: #08769b; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: var(--secondary); + --secondary-hover: #415462; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: var(--contrast); + --contrast-hover: #0d1419; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.33); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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,44 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-family: var(--titles-font); + 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 +522,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -448,7 +535,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 +548,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 +561,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 +574,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 +587,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 * { @@ -513,12 +600,13 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); + font-family: unset; font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -551,12 +639,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 +660,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 +757,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -680,20 +768,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 +793,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"] { @@ -733,6 +829,21 @@ a[role="button"][disabled] { pointer-events: none; } +input[type="reset"] { + border: var(--button-border-width) solid var(--secondary-border); + background-color: var(--secondary); + color: var(--secondary-inverse); +} + +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + border-color: var(--secondary-hover-border); + background-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important; +} + /** * Form elements */ @@ -744,7 +855,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -756,7 +867,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -818,12 +928,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 +941,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -849,20 +959,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 +989,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 +1010,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 +1031,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 +1052,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 +1066,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 +1088,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 +1100,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 +1130,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 +1146,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 +1179,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 +1192,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,38 +1207,37 @@ 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); } -[type="file"]:focus { - box-shadow: none; -} - [type="file"]:focus::-webkit-file-upload-button { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: none; } [type="range"] { @@ -1126,25 +1253,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 +1283,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 +1295,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,46 +1307,50 @@ 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 !important; } [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 { + background: transparent !important; } [type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:active::-moz-range-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:active::-ms-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:focus { @@ -1228,9 +1358,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 +1384,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 +1403,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 +1414,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 +1429,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 +1469,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 +1485,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 { @@ -1432,11 +1562,6 @@ hr { border-top: 1px solid var(--muted-border); } -progress { - display: inline-block; - vertical-align: baseline; -} - [hidden], template { display: none; @@ -1474,8 +1599,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 +1628,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 +1641,7 @@ details summary:focus { } details summary ~ * { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); } details summary ~ * ~ * { @@ -1523,7 +1649,7 @@ details summary ~ * ~ * { } details[open] summary { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } @@ -1535,39 +1661,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 +1712,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 +1729,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 +1738,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 +1747,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 +1845,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 +1866,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 +1884,70 @@ 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); +} + +/** + * Progress + */ +progress { + display: inline-block; + vertical-align: baseline; +} + +progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + width: 100%; + height: .5rem; + margin-bottom: calc(var(--spacing-typography) / 2); + overflow: hidden; + border: 0; + border-radius: var(--block-round); + background-color: var(--muted-background); + color: var(--primary); +} + +progress::-webkit-progress-bar { + border-radius: var(--block-round); + background: transparent; +} + +progress[value]::-webkit-progress-value { + background-color: var(--primary); +} + +progress::-moz-progress-bar { + background-color: var(--primary); +} + +progress:indeterminate { + background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat; + animation: progress-indeterminate 1s linear infinite; +} + +progress:indeterminate[value]::-webkit-progress-value { + background-color: transparent; +} + +progress:indeterminate::-moz-progress-bar { + background-color: transparent; +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } /** @@ -1787,12 +1972,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; @@ -1815,6 +2000,37 @@ aside li a { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; + animation-duration: .2s; + animation-name: slide; +} + +[data-tooltip]:focus::after, [data-tooltip]:hover::after { + animation-name: slideCaret; +} + +@keyframes slide { + from { + opacity: 0; + transform: translate(-50%, 0.75rem); + } + to { + opacity: 1; + transform: translate(-50%, -0.25rem); + } +} + +@keyframes slideCaret { + from { + opacity: 0; + } + 50% { + opacity: 0; + transform: translate(-50%, -0.25rem); + } + to { + opacity: 1; + transform: translate(-50%, 0rem); + } } /** diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index f058cd3b..1f283573 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) + * Pico.css v1.2.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:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.33);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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-family:var(--titles-font);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-family:unset;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[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}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::-webkit-file-upload-button{box-shadow:none}[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!important}[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{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[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)}[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)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[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;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@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..3a80bc49 100644 --- a/css/pico.css +++ b/css/pico.css @@ -1,148 +1,234 @@ /*! - * Pico.css v1.1.0 (https://picocss.com) + * Pico.css v1.2.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ /** * 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: var(--primary); + --primary-hover: #08769b; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: var(--secondary); + --secondary-hover: #415462; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: var(--contrast); + --contrast-hover: #0d1419; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.33); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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,44 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-family: var(--titles-font); + 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 +604,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -531,7 +617,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 +630,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 +643,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 +656,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 +669,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 * { @@ -596,12 +682,13 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); + font-family: unset; font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -634,12 +721,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 +742,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 +839,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -763,20 +850,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 +875,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 +918,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 +933,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 +941,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 +963,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 +971,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 +989,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: var(--button-border-width) solid var(--primary-hover-border); color: var(--primary-hover); } @@ -898,7 +997,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 +1012,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: var(--button-border-width) 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 +1035,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: var(--button-border-width) 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 +1050,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -977,7 +1062,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -1039,12 +1123,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 +1136,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -1070,20 +1154,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 +1184,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 +1205,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 +1226,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 +1243,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 +1270,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 +1284,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 +1306,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 +1318,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 +1348,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 +1364,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 +1397,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 +1410,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,38 +1425,37 @@ 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); } -[type="file"]:focus { - box-shadow: none; -} - [type="file"]:focus::-webkit-file-upload-button { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: none; } [type="range"] { @@ -1370,25 +1471,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 +1501,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 +1513,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,46 +1525,50 @@ 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 !important; } [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 { + background: transparent !important; } [type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:active::-moz-range-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:active::-ms-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:focus { @@ -1472,9 +1576,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 +1602,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 +1621,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 +1632,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 +1647,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 +1687,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 +1703,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 { @@ -1676,11 +1780,6 @@ hr { border-top: 1px solid var(--muted-border); } -progress { - display: inline-block; - vertical-align: baseline; -} - [hidden], template { display: none; @@ -1718,8 +1817,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 +1846,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 +1859,7 @@ details summary:focus { } details summary ~ * { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); } details summary ~ * ~ * { @@ -1767,7 +1867,7 @@ details summary ~ * ~ * { } details[open] summary { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } @@ -1779,39 +1879,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 +1930,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 +1947,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 +1956,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 +1965,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 +2063,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 +2084,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 +2102,70 @@ 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); +} + +/** + * Progress + */ +progress { + display: inline-block; + vertical-align: baseline; +} + +progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + width: 100%; + height: .5rem; + margin-bottom: calc(var(--spacing-typography) / 2); + overflow: hidden; + border: 0; + border-radius: var(--block-round); + background-color: var(--muted-background); + color: var(--primary); +} + +progress::-webkit-progress-bar { + border-radius: var(--block-round); + background: transparent; +} + +progress[value]::-webkit-progress-value { + background-color: var(--primary); +} + +progress::-moz-progress-bar { + background-color: var(--primary); +} + +progress:indeterminate { + background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat; + animation: progress-indeterminate 1s linear infinite; +} + +progress:indeterminate[value]::-webkit-progress-value { + background-color: transparent; +} + +progress:indeterminate::-moz-progress-bar { + background-color: transparent; +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } /** @@ -2035,12 +2190,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; @@ -2063,6 +2218,37 @@ aside li a { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; + animation-duration: .2s; + animation-name: slide; +} + +[data-tooltip]:focus::after, [data-tooltip]:hover::after { + animation-name: slideCaret; +} + +@keyframes slide { + from { + opacity: 0; + transform: translate(-50%, 0.75rem); + } + to { + opacity: 1; + transform: translate(-50%, -0.25rem); + } +} + +@keyframes slideCaret { + from { + opacity: 0; + } + 50% { + opacity: 0; + transform: translate(-50%, -0.25rem); + } + to { + opacity: 1; + transform: translate(-50%, 0rem); + } } /** diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index fe3a35e5..6ef0fee1 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -1,148 +1,234 @@ /*! - * Pico.css v1.1.0 (https://picocss.com) + * Pico.css v1.2.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ /** * 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: var(--primary); + --primary-hover: #08769b; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: var(--secondary); + --secondary-hover: #415462; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: var(--contrast); + --contrast-hover: #0d1419; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.33); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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,44 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-family: var(--titles-font); + 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 +518,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -444,7 +531,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 +544,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 +557,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 +570,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 +583,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 * { @@ -509,12 +596,13 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); + font-family: unset; font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -547,12 +635,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 +656,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 +753,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -676,20 +764,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 +789,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"] { @@ -729,6 +825,21 @@ a[role="button"][disabled] { pointer-events: none; } +input[type="reset"] { + border: var(--button-border-width) solid var(--secondary-border); + background-color: var(--secondary); + color: var(--secondary-inverse); +} + +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + border-color: var(--secondary-hover-border); + background-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important; +} + /** * Form elements */ @@ -740,7 +851,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -752,7 +863,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -814,12 +924,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 +937,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -845,20 +955,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 +985,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 +1006,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 +1027,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 +1048,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 +1062,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 +1084,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 +1096,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 +1126,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 +1142,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 +1175,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 +1188,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,38 +1203,37 @@ 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); } -[type="file"]:focus { - box-shadow: none; -} - [type="file"]:focus::-webkit-file-upload-button { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); + box-shadow: none; } [type="range"] { @@ -1122,25 +1249,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 +1279,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 +1291,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,46 +1303,50 @@ 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 !important; } [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 { + background: transparent !important; } [type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:active::-moz-range-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:active::-ms-thumb { transform: scale(1.25); - background-color: var(--primary-hover); + background-color: var(--primary); } [type="range"]:focus { @@ -1224,9 +1354,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 +1380,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 +1399,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 +1410,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 +1425,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 +1465,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 +1481,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 { @@ -1428,11 +1558,6 @@ hr { border-top: 1px solid var(--muted-border); } -progress { - display: inline-block; - vertical-align: baseline; -} - [hidden], template { display: none; @@ -1470,8 +1595,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 +1624,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 +1637,7 @@ details summary:focus { } details summary ~ * { - margin-top: 0.75rem; + margin-top: calc(var(--spacing-typography) / 2); } details summary ~ * ~ * { @@ -1519,7 +1645,7 @@ details summary ~ * ~ * { } details[open] summary { - margin-bottom: 0.375rem; + margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } @@ -1531,39 +1657,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 +1708,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 +1725,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 +1734,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 +1743,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 +1841,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 +1862,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 +1880,70 @@ 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); +} + +/** + * Progress + */ +progress { + display: inline-block; + vertical-align: baseline; +} + +progress { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: inline-block; + width: 100%; + height: .5rem; + margin-bottom: calc(var(--spacing-typography) / 2); + overflow: hidden; + border: 0; + border-radius: var(--block-round); + background-color: var(--muted-background); + color: var(--primary); +} + +progress::-webkit-progress-bar { + border-radius: var(--block-round); + background: transparent; +} + +progress[value]::-webkit-progress-value { + background-color: var(--primary); +} + +progress::-moz-progress-bar { + background-color: var(--primary); +} + +progress:indeterminate { + background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat; + animation: progress-indeterminate 1s linear infinite; +} + +progress:indeterminate[value]::-webkit-progress-value { + background-color: transparent; +} + +progress:indeterminate::-moz-progress-bar { + background-color: transparent; +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } } /** @@ -1783,12 +1968,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; @@ -1811,6 +1996,37 @@ aside li a { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; + animation-duration: .2s; + animation-name: slide; +} + +[data-tooltip]:focus::after, [data-tooltip]:hover::after { + animation-name: slideCaret; +} + +@keyframes slide { + from { + opacity: 0; + transform: translate(-50%, 0.75rem); + } + to { + opacity: 1; + transform: translate(-50%, -0.25rem); + } +} + +@keyframes slideCaret { + from { + opacity: 0; + } + 50% { + opacity: 0; + transform: translate(-50%, -0.25rem); + } + to { + opacity: 1; + transform: translate(-50%, 0rem); + } } /** diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index bfbf8dfd..ab93c068 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) + * Pico.css v1.2.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:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.33);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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-family:var(--titles-font);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-family:unset;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[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}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::-webkit-file-upload-button{box-shadow:none}[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!important}[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{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[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)}[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)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[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;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@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..4fcb716d 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.1.0 (https://picocss.com) + * Pico.css v1.2.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:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.33);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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-family:var(--titles-font);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-family:unset;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:var(--button-border-width) 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:var(--button-border-width) 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:var(--button-border-width) 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::-webkit-file-upload-button{box-shadow:none}[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!important}[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{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[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)}[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)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[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;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@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..75104749 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -1,5 +1,5 @@ /*! - * Pico.css v1.1.0 (https://picocss.com) + * Pico.css v1.2.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT * * Slim version example @@ -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: var(--primary); + --primary-hover: #08769b; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: var(--secondary); + --secondary-hover: #415462; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: var(--contrast); + --contrast-hover: #0d1419; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.33); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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,44 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: 1.5rem; - font-weight: 700; + margin-bottom: var(--spacing-typography); + font-family: var(--titles-font); + 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 +542,7 @@ p ~ h1, pre ~ h1, table ~ h1, ul ~ h1 { - margin-top: 3rem; + margin-top: calc(var(--spacing-typography) * 2); } address ~ h2, @@ -469,7 +555,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 +568,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 +581,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 +594,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 +607,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 * { @@ -534,12 +620,13 @@ hgroup * { hgroup > *:last-child { color: var(--muted-text); + font-family: unset; font-size: 1.125rem; - font-weight: normal; + font-weight: unset; } p { - margin-bottom: 0.75rem; + margin-bottom: var(--spacing-typography); } small { @@ -572,12 +659,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 +680,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 +777,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: 1.5rem; + margin-bottom: var(--spacing-typography); } a[role="button"] { @@ -701,17 +788,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 +812,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 +859,7 @@ textarea { font-family: inherit; font-size: 1rem; letter-spacing: inherit; - line-height: 1.5; + line-height: var(--line-height); } input { @@ -776,7 +871,6 @@ select { } legend { - display: table; max-width: 100%; padding: 0; color: inherit; @@ -838,12 +932,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 +945,7 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: 0.25rem; + margin-bottom: var(--spacing-form-element); vertical-align: middle; } @@ -869,19 +963,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 +992,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 +1013,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 +1034,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 +1055,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 +1069,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 +1092,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 +1111,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..7f156576 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -1,7 +1,7 @@ /*! - * Pico.css v1.1.0 (https://picocss.com) + * Pico.css v1.2.0 (https://picocss.com) * Copyright 2020 - Licensed under MIT * * 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:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.33);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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-family:var(--titles-font);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-family:unset;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..891aa435 --- /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: var(--primary); + --primary-hover: #08769b; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-border: var(--secondary); + --secondary-hover: #415462; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-border: var(--contrast); + --contrast-hover: #0d1419; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-inverse: #FFF; + --input-background: #FFF; + --input-border: #c8d1d8; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.33); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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: var(--primary); + --primary-hover: #1ab3e6; + --primary-hover-border: var(--primary-hover); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-border: var(--secondary); + --secondary-hover: #73828c; + --secondary-hover-border: var(--secondary-hover); + --secondary-focus: rgba(89, 107, 120, 0.25); + --secondary-inverse: #FFF; + --contrast: #d5dce2; + --contrast-border: var(--contrast); + --contrast-hover: #FFF; + --contrast-hover-border: var(--contrast-hover); + --contrast-focus: rgba(89, 107, 120, 0.25); + --contrast-inverse: #10181e; + --input-background: #10181e; + --input-border: #374956; + --input-hover-background: var(--input-background); + --input-hover-border: var(--primary); + --input-focus: var(--primary-focus); + --input-inverse: var(--primary-inverse); + --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.1875); + --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..9b3203fe --- /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:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.33);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--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.1875);--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..1dfd6de3 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -4,6 +4,12 @@ /** * 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"); + --icon-check-dark: 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(0, 0, 0, 0.75)' 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 +39,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 +75,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 +112,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 +129,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 +213,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,7 +237,7 @@ 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; @@ -239,11 +245,11 @@ main > aside details[open] summary { } #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"); + background-image: var(--icon-check-dark); } #customization h4 { - transition: color 0.2s ease-in-out; + transition: color var(--transition); } #customization pre[data-theme="generated"] { @@ -253,7 +259,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) { @@ -267,19 +273,23 @@ main > aside details[open] summary { #grids button svg { stroke: var(--secondary); margin-right: .5rem; - border: 3px solid currentColor; + border: 2px solid currentColor; border-radius: 1rem; background: currentColor; } #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); +} + +#grids details svg { + vertical-align: bottom; } #forms div.grid { @@ -290,12 +300,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 +319,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 +363,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 +409,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 +417,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 +432,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 +452,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 +467,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 +476,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 +486,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..7c6dd724 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");--icon-check-dark: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(0, 0, 0, 0.75)' 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 figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#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:2px 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)}#grids details svg{vertical-align:bottom}#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..add92ddb 100644 --- a/docs/index.html +++ b/docs/index.html @@ -68,6 +68,7 @@
  • Typography
  • Buttons
  • Forms
    • +
  • Tables
    • @@ -76,6 +77,7 @@
  • Accordions
  • Cards
  • Navs
    • +
  • Progress
  • Tooltips
    • @@ -108,7 +110,7 @@ 
    <link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">

    Install with NPM

    npm install @picocss/pico
    -

    Starter template:

    +

    Starter HTML template:

    <!doctype html>
 <html lang="en">
@@ -133,17 +135,17 @@
               
    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
    
               
    
                 
                 
-                
+                
               
    
 
 
    <article data-theme="light">
@@ -156,7 +158,7 @@
               
    
                 
                 
-                
+                
               
    
 
 
    <article data-theme="dark">
@@ -172,14 +174,15 @@
               
    Customization
    
               
    You can customize themes with SCSS or you can simply edit the CSS variables.
    
             
-            
    Pick a color!
    
+            
    Example: pick a color!
    
+
             
    
               
    Custom theme
    
               
    
                 
    
                   
                   
-                  
+                  
                 
    
                 
    
                   
    
               
    
             
    
+            
    There are 2 ways to customize your version of Pico.css:
    
+            
    Importing SASS
    
+            
    It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.
    
+            
    Compile the SASS file to CSS to get a custom version of Pico.
    
 
-            
    SCSS:
    
+
    /* Custom  version */
 
-
    // Custom colors
+// Override default variables
 $primary-500: ...;
 $primary-600: ...;
 $primary-700: ...;
 
-// Pico library
+// Import full Pico source code
 @import "path/pico";
    
 
-            
    CSS:
    
+            
    Alternatively, you can create a custom theme and import it in your project with the components you need.
    
 
-
    /* Light theme (Default) */
+
    /* Custom  version */
+
+// Custom theme
+@import "path/themes/custom";
+
+// Import needed components
+@import "path/layout/document";
+@import "path/layout/sectioning";
+...
+
    
+
+            
    This allows to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.
    
+            
    Overriding CSS variables
    
+            
    All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.
    
+
+
    /* Light scheme (Default) */
 /* Can be forced with data-theme="light" */
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --primary:            ...;
-  --primary-hover:      ...;
-  --primary-focus:      ...;
-  --primary-inverse:    ...;
+  --primary:              ...;
+  --primary-hover:        ...;
+  --primary-focus:        ...;
+  --primary-inverse:      ...;
 }
 
-
-/* Dark theme (Auto) */
+/* Dark scheme (Auto) */
 /* Automatically enabled if user has Dark mode enabled */
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --primary:          ...;
-    --primary-hover:    ...;
-    --primary-focus:    ...;
-    --primary-inverse:  ...;
+  :root:not([data-theme="light"]) {
+    --primary:            ...;
+    --primary-hover:      ...;
+    --primary-focus:      ...;
+    --primary-inverse:    ...;
+  }
 }
 
-
-/* Dark theme (Forced) */
+/* Dark scheme (Forced) */
 /* Enabled if forced with data-theme="dark" */
-[data-theme="dark"] {
-  --primary:            ...;
-  --primary-hover:      ...;
-  --primary-focus:      ...;
-  --primary-inverse:    ...;
-}
    
+[data-theme="dark"] {
+  --primary:              ...;
+  --primary-hover:        ...;
+  --primary-focus:        ...;
+  --primary-inverse:      ...;
+}
 
-            
    Colors can be modified in scss/themes/.
    
-            
    Spacings, Typography, Rounded, Transitions, Breakpoints, etc. can be modified in scss/_variables.scss.
    
-            
    You can also compile pico with only the modules you need to generate a slimer version. Example in scss/pico.slim.scss.
    
+/* (Common styles) */
+:root {
+  --primary-border:       var(--primary);
+  --primary-hover-border: var(--primary-hover);
+  --input-hover-border:   var(--primary);
+  --input-focus:          var(--primary-focus);
+  --input-inverse:        var(--primary-inverse);
+}
+
    
+
+            
    You can find all the CSS variables used in the default theme here: css/default.css
    
           
 
 
@@ -270,7 +299,7 @@
 
             
    Pico use the same breakpoints and viewports sizes as Bootstrap.
    
             
    
-              
+              
    
@@ -301,7 +330,7 @@
                 
    
                 
                   
    
                     Device
               
    
             
    
-            
    <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 +356,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,9 +382,9 @@
               
    Horizontal scroller
    
               
    <figure> act as a container to make any content scrollable horizontally.
    
             
-            
    Useful to have responsives <table>.
    
+            
    Useful to have responsives <table>
    
             
    
-              
+              
    
@@ -426,7 +455,7 @@
               
    All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.
    
-              
    
                 
                   
    
                     #
             
             
    
+              
    
@@ -505,15 +534,13 @@
               
    Heading 4
    Heading 5
    Heading 6
    
-              
    Paragraph
    <h1>Heading 1</h1>
 <h2>Heading 2</h2>
 <h3>Heading 3</h3>
 <h4>Heading 4</h4>
 <h5>Heading 5</h5>
-<h6>Heading 6</h6>
-<p>Paragraph</p>
    
+<h6>Heading 6</h6>
    Inside a <hgroup> all margin-bottom are collapsed and the :last-child is styled.
    
@@ -560,6 +587,23 @@
 <ahref="#"class="secondary">Secondary</a>
 <ahref="#"class="contrast">Contrast</a>
 
+            
+            
    Blockquote:
    
+            
    
+              
    
+                "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+                
    
+                  - Phasellus eget lacinia
+                
    
+              
    
+
+
    <blockquote>
+  "Maecenas vehicula metus tellus, vitae congue turpis hendrerit non. Nam at dui sit amet ipsum cursus ornare."
+  <footer>
+    <cite>- Phasellus eget lacinia</cite>
+  </footer>
+</blockquote>
    
+
             
    
 
@@ -631,7 +675,7 @@
                 We'll never share your email with anyone else.
-                
+                
    <form>
@@ -755,9 +799,178 @@
 </fieldset>
    
-            
    Advanced example with all form elements supported in Pico here.
    
+            
    You can change a checkbox to indeterminate state by setting the indeterminate property of input checkboxes to true
    
+            
    
+              
+              
+            
    
+
+            
    Others input types:
    
+            
    
+              
+              
+              
+              
+              
+
+
    <!-- File browser -->
+<label for="file">File browser
+  <input type="file" id="file" name="file">
+</label>
+
+<!-- Range slider -->
+<label for="range">Range slider
+  <input type="range" min="0" max="100" value="50" id="range" name="range">
+</label>
+
+<!-- Date -->
+<label for="date">Date
+  <input type="date" id="date" name="date">
+</label>
+
+<!-- Time -->
+<label for="time">Time
+  <input type="time" id="time" name="time">
+</label>
+
+<!-- Color -->
+<label for="color">Color
+  <input type="color" id="color" name="color" value="#0eaaaa">
+</label>
    
+
+            
    
 
+          
+          
    
+            
    
+              
    Tables
    
+              
    Default styles for tables without .classes
    
+            
    
+            
    
+              
    
                 
                   
    
                     Device
               
               
 
 
 
             
                 
           
                 
                 
               
 
 
 
             
           
    
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+              
    #HeadingHeadingHeadingHeadingHeading
    1CellCellCellCellCell
    2CellCellCellCellCell
    3CellCellCellCellCell
    
+            
    
+
+
    <table>
+  <thead>
+    <tr>
+      <th scope="col">#</th>
+      <th scope="col">Heading<</th>
+      <th scope="col">Heading</th>
+      <th scope="col">Heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Cell</td>
+      <td>Cell</td>
+      <td>Cell</td>
+    </tr>
+  </tbody>
+</table>
    
+
+            
    role="grid" enable striped rows.
    
+            
    
+              
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+                
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                  
+                    
+                    
+                    
+                    
+                    
+                    
+                  
+                
+              
    #HeadingHeadingHeadingHeadingHeading
    1CellCellCellCellCell
    2CellCellCellCellCell
    3CellCellCellCellCell
    
+            
    
+
+
    <table role="grid">
+  ...
+</table>
    
+
+          
+
           
           
    
             
    
@@ -917,6 +1130,22 @@
    + +
    +
    +

    Progress

    +

    Progress bar element in pure HTML, without JavaScript.

    +
    +
    + + + +
    <progress value="25" max="100"></progress>
+<progress indeterminate="true"></progress>
    + +
    +
    +
    @@ -933,12 +1162,12 @@ <p><button data-tooltip="Tooltip">Tooltip on a button</button></p>
    - +

    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.

    @@ -955,7 +1184,7 @@

    - Openly inspired by Bootstrap, Spectre, Wing, CSS Bed, Normalize & Sanitize
    + Openly inspired by Bootstrap, CSS Bed, Normalize, Sanitize, Spectre & Wing
    Licensed under the MIT License

    diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index 5802754f..812fce0f 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1 +1 @@ -!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));n.currentTheme=e}var n={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(n.button.element);e.className=n.button.class,document.querySelector(n.target).appendChild(e),a(n.currentTheme);for(var t=document.querySelectorAll(n.selector),r=0;r"+(a+1)+"
    ",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(n.targetGrid).innerHTML=t,document.querySelector(n.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,n={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(n.targetButtons).before(t),document.querySelector(n.selectorAdd).addEventListener("click",function(){n.columnsCurrentn.columnsMin&&(n.columnsCurrent--,e(n.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){for(var r=document.querySelectorAll(u.selectorTheme+" .name"),a=0;a>16&255,r>>8&255,255&r].join(",")+","+t+")";throw new Error("Bad Hex")}var u={target:"#customization h5",selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"#000"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"#000"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"#000"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',u.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(u.target).after(a);for(var n=document.querySelectorAll(u.selectorButton),o=0;o section',nav:"main aside nav",active:"active"};window.matchMedia("(min-width: 992px)").matches&&(e(),t=function(){e()},window.addEventListener("scroll",function(e){window.clearTimeout(r),r=setTimeout(function(){t()},n.interval)},!1))}(); \ No newline at end of file +!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));n.currentTheme=e}var n={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(n.button.element);e.className=n.button.class,document.querySelector(n.target).appendChild(e),a(n.currentTheme);for(var t=document.querySelectorAll(n.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(n.targetGrid).innerHTML=t,document.querySelector(n.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,n={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(n.targetButtons).before(t),document.querySelector(n.selectorAdd).addEventListener("click",function(){n.columnsCurrentn.columnsMin&&(n.columnsCurrent--,e(n.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){var a={".name":e.charAt(0).toUpperCase()+e.substring(1)+" ",".c500":t[500],".c600":t[600],".c700":t[700],".c600-outline-light":n(t[600],.125),".c600-outline-dark":n(t[600],.25),".inverse":t.inverse};Object.keys(a).forEach(function(e){for(var t=document.querySelectorAll(i.selectorTheme+" "+e),r=0;r>16&255,r>>8&255,255&r].join(", ")+", "+t+")";throw new Error("Bad Hex")}var i={target:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',i.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(i.target).before(a);for(var n=document.querySelectorAll(i.selectorButton),f=0;f section',nav:"main aside nav",active:"active"};window.matchMedia("(min-width: 992px)").matches&&(e(),t=function(){e()},window.addEventListener("scroll",function(e){window.clearTimeout(r),r=setTimeout(function(){t()},n.interval)},!1))}(); \ No newline at end of file diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js index e4b7a9b8..6489e986 100644 --- a/docs/js/src/color-picker.js +++ b/docs/js/src/color-picker.js @@ -12,9 +12,9 @@ */ var colors = { - target: '#customization h5', // Buttons inserted after target - selectorButton: '#customization button[data-color]', // Button selector in Dom - selectorTheme: '#customization', // Theme selector in Dom + target: '#customization article[data-theme="generated"]', // Buttons inserted before target + selectorButton: '#customization button[data-color]', // Button selector in Dom + selectorTheme: '#customization', // Theme selector in Dom styles: '', // Source: https://material.io/design/color/the-color-system.html @@ -221,7 +221,7 @@ "a200": "#eeff41", "a400": "#c6ff00", "a700": "#aeea00", - "inverse": "#000" + "inverse": "rgba(0, 0, 0, 0.75)" }, "yellow": { "50": "#fffde7", @@ -238,7 +238,7 @@ "a200": "#ffff00", "a400": "#ffea00", "a700": "#ffd600", - "inverse": "#000" + "inverse": "rgba(0, 0, 0, 0.75)" }, "amber": { "50": "#fff8e1", @@ -255,7 +255,7 @@ "a200": "#ffd740", "a400": "#ffc400", "a700": "#ffab00", - "inverse": "#000" + "inverse": "rgba(0, 0, 0, 0.75)" }, "orange": { "50": "#fff3e0", @@ -360,31 +360,31 @@ if (data.hasOwnProperty(color)) { // Buttons - colorButtons += ''; + colorButtons += ''; // CSS Styles colors.styles += 'button[data-color="'+ color +'"] {' - + 'background-color: '+ data[color]['600'] +'; ' - + '}' + + 'background-color: '+ data[color]['600'] +'; ' + + '}' - + '[data-theme="light"] button[data-color="'+ color +'"]:hover, ' - + '[data-theme="light"] button[data-color="'+ color +'"]:active, ' - + '[data-theme="light"] button[data-color="'+ color +'"]:focus {' - + 'background-color: '+ data[color]['700'] +'; ' - + '}' + + '[data-theme="light"] button[data-color="'+ color +'"]:hover, ' + + '[data-theme="light"] button[data-color="'+ color +'"]:active, ' + + '[data-theme="light"] button[data-color="'+ color +'"]:focus {' + + 'background-color: '+ data[color]['700'] +'; ' + + '}' - + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, ' - + '[data-theme="dark"] button[data-color="'+ color +'"]:active, ' - + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {' - + 'background-color: '+ data[color]['500'] +'; ' - + '}' + + '[data-theme="dark"] button[data-color="'+ color +'"]:hover, ' + + '[data-theme="dark"] button[data-color="'+ color +'"]:active, ' + + '[data-theme="dark"] button[data-color="'+ color +'"]:focus {' + + 'background-color: '+ data[color]['500'] +'; ' + + '}'; } } // Insert buttons var buttons = document.createElement('FIGURE'); buttons.innerHTML = colorButtons; - document.querySelector(colors.target).after(buttons); + document.querySelector(colors.target).before(buttons); // Buttons listeners var buttonsAll = document.querySelectorAll(colors.selectorButton); @@ -438,41 +438,28 @@ function generateTheme(name, data) { - // Code and Color name - // TODO: Create a function - var cName = document.querySelectorAll(colors.selectorTheme + ' .name'); - for (var i = 0; i < cName.length; ++i) { - cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' '; - } - var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500'); - for (var i = 0; i < c500.length; ++i) { - c500[i].innerHTML = data[500]; - } - var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600'); - for (var i = 0; i < c600.length; ++i) { - c600[i].innerHTML = data[600]; - } - var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700'); - for (var i = 0; i < c700.length; ++i) { - c700[i].innerHTML = data[700]; - } - var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light'); - for (var i = 0; i < c600OutlineLight.length; ++i) { - c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125); - } - var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark'); - for (var i = 0; i < c600OutlineDark.length; ++i) { - c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25); - } - var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse'); - for (var i = 0; i < inverse.length; ++i) { - inverse[i].innerHTML = data['inverse']; + // Update name and colors in demo code + var swap = { + '.name' : name.charAt(0).toUpperCase() + name.substring(1) + ' ', + '.c500' : data[500], + '.c600' : data[600], + '.c700' : data[700], + '.c600-outline-light' : hexToRgbA(data[600], .125), + '.c600-outline-dark' : hexToRgbA(data[600], .25), + '.inverse' : data['inverse'], } - // CSS Style + Object.keys(swap).forEach(function(key) { + var target = document.querySelectorAll(colors.selectorTheme + ' ' + key); + for (var i = 0; i < target.length; ++i) { + target[i].innerHTML = swap[key]; + } + }); + + // Update CSS Style var generatedStyles = '[data-theme="generated"] {' - + '--primary:' + data[600] + ';' + '--h4:' + data[700] + ';' + + '--primary:' + data[600] + ';' + '--primary-hover:' + data[700] + ';' + '--primary-focus:' + hexToRgbA(data[600], .125) + ';' + '--primary-inverse:' + data['inverse'] + ';' @@ -480,8 +467,8 @@ + '@media only screen and (prefers-color-scheme: dark) {' + ':root:not([data-theme="light"]) [data-theme="generated"] {' - + '--primary:' + data[600] + ';' + '--h4:' + data[400] + ';' + + '--primary:' + data[600] + ';' + '--primary-hover:' + data[500] + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + '--primary-inverse:' + data['inverse'] + ';' @@ -489,11 +476,19 @@ + '}' + '[data-theme="dark"] [data-theme="generated"] {' - + '--primary:' + data[600] + ';' + '--h4:' + data[500] + ';' + + '--primary:' + data[600] + ';' + '--primary-hover:' + data[500] + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';' + '--primary-inverse:' + data['inverse'] + ';' + + '}' + + + '[data-theme="generated"] {' + + '--primary-border: var(--primary);' + + '--primary-hover-border: var(--primary-hover);' + + '--input-hover-border: var(--primary);' + + '--input-focus: var(--primary-focus);' + + '--input-inverse: var(--primary-inverse);' + '}'; // Insert CSS Styles @@ -518,7 +513,7 @@ c= [c[0], c[0], c[1], c[1], c[2], c[2]]; } c= '0x' + c.join(''); - return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')'; + return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(', ') + ', ' + alpha + ')'; } throw new Error('Bad Hex'); } diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js index a6b21443..08edc411 100644 --- a/docs/js/src/grid.js +++ b/docs/js/src/grid.js @@ -61,7 +61,7 @@ function addButtons() { var buttons = document.createElement('P'); buttons.innerHTML = '' + '