diff --git a/LICENSE.md b/LICENSE.md index 00a92421..d256abcb 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2020 Pico +Copyright (c) 2019-2021 Pico Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README.md b/README.md index a3e9b9ae..bdd38cde 100644 --- a/README.md +++ b/README.md @@ -13,44 +13,97 @@ Documentation

-# Pico.css +## Pico.css [![CSS Gzipped](https://img.badgesize.io/picocss/pico/master/css/pico.min.css?compression=gzip&color=1095c1&label=CSS%20gzipped)](https://unpkg.com/@picocss/pico@latest/css/pico.min.css) [![Github release](https://img.shields.io/github/v/release/picocss/pico?color=1095c1&logo=github&logoColor=white)](https://github.com/picocss/pico/releases/latest) [![npm version](https://img.shields.io/npm/v/@picocss/pico?color=1095c1)](https://www.npmjs.com/package/@picocss/pico) [![License](https://img.shields.io/badge/license-MIT-%231095c1)](https://github.com/picocss/pico/blob/master/LICENSE.md) +**Class-light and semantic** +We use simple native HTML tags as much as possible. Only 6 .classes are used in Pico. -- **Class-light and semantic**: we use simple native HTML tags as much as possible. Only 6 .classes are used in Pico. +**Great styles with just one CSS file** +No dependencies, package manager, external files or JavaScript. -- **Great styles with just one CSS file**: No dependencies, package manager, external files or JavaScript. +**Responsive everything** +Elegant and consistent adaptatives spacings and typography on all devices. -- **Responsive everything**: Elegant and consistent adaptatives spacings and typography on all devices. +**Light or Dark mode** +Shipped with two beautiful color themes, automatically enabled according to the user preference. -- **Light or Dark mode**: Shipped with two beautiful color themes, automatically enabled according to the user preference. +## Table of contents + +- [Usage](#usage) +- [Class-less version](#class-less-version) +- [Examples](#examples) +- [Documentation](#documentation) +- [Variations](#variations) +- [Contributing](#contributing) +- [Copyright and license](#copyright-and-license) ## Usage There are 3 ways to get started with pico.css: -### Install manually +**Install manually** + [Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `` of your website. ```html ``` -### Install from CDN +**Install from CDN** + Alternatively, you can use the [unpkg CDN](https://unpkg.com/@picocss/pico@latest/) to link pico.css. ```html ``` -### Install with NPM +**Install with NPM** + ```shell npm install @picocss/pico ``` +## Class-less version + +Pico provide a `.classless` version ([example](https://picocss.com/examples/classless)). + +In this version, `header`, `main` and `footer` act as container. + +Use the default `.classless `version if you need centered viewports: + +```html + +``` + +Or use the `.fluid.classless` version if you need a fluid container: + +```html + +``` + +Then just write pure HTML, and it should look great: + +```html + + + + + + + Hello, world! + + +
+

Hello, world!

+
+ + +``` + ## Examples Minimalist templates to discover Pico in action: @@ -97,11 +150,14 @@ All examples are open-sourced in [picocss/examples](https://github.com/picocss/e - [Typography](https://picocss.com/docs/#typography) - [Buttons](https://picocss.com/docs/#buttons) - [Forms](https://picocss.com/docs/#forms) +- [Tables](https://picocss.com/docs/#tables) + **Components** - [Accordions](https://picocss.com/docs/#accordions) - [Cards](https://picocss.com/docs/#cards) - [Navs](https://picocss.com/docs/#navs) +- [Progress](https://picocss.com/docs/#progress) - [Tooltips](https://picocss.com/docs/#tooltips) ## Variations diff --git a/css/pico.classless.css b/css/pico.classless.css index a9ac3d55..f623cfef 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -1,235 +1,446 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - 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; - --h6-size: 1rem; - --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; + --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"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --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; + --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"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 87.5%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +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"; +} + +kbd { + --font-weight: bolder; } [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); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-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); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(65, 84, 98, 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"); + --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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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"); } @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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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="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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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"); } /** @@ -254,40 +465,16 @@ html { -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); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-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); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -307,7 +494,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) var(--spacing-gutter); + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); } @media (min-width: 576px) { @@ -315,7 +502,8 @@ body > footer { body > main, body > footer { max-width: 510px; - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; + padding-right: 0; + padding-left: 0; } } @@ -324,7 +512,6 @@ body > footer { body > main, body > footer { max-width: 700px; - padding: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; } } @@ -333,7 +520,6 @@ body > footer { body > main, body > footer { max-width: 920px; - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; } } @@ -342,7 +528,6 @@ body > footer { body > main, body > footer { max-width: 1130px; - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; } } @@ -351,31 +536,7 @@ body > footer { * Responsive spacings for section */ 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); - } + margin-bottom: var(--block-spacing-vertical); } /** @@ -389,8 +550,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -443,27 +604,29 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } h1, @@ -473,179 +636,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ 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, -p ~ h3, -pre ~ 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, -p ~ h4, -pre ~ 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, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); + --font-weight: unset; font-family: unset; - font-size: 1.125rem; - font-weight: unset; + font-size: 1rem; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } 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%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -654,21 +769,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -678,12 +793,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -758,7 +873,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -770,17 +885,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -797,30 +915,38 @@ 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); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); } 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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -830,21 +956,6 @@ 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 */ @@ -911,7 +1022,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -929,12 +1040,12 @@ textarea { } 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)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -942,14 +1053,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -967,72 +1077,48 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); } -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"]) { - background-color: var(--muted-background); -} - -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } input[aria-invalid], @@ -1047,25 +1133,46 @@ textarea[aria-invalid] { input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color) !important; +} + input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color) !important; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + 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); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1081,21 +1188,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1112,7 +1218,7 @@ label > textarea { height: 1.25rem; margin-top: -.125rem; margin-right: .375rem; - border-width: var(--checkbox-radio-border-width); + border-width: var(--border-width); vertical-align: middle; cursor: pointer; } @@ -1122,22 +1228,18 @@ label > textarea { display: none; } -[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, -[type="radio"]:indeterminate { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); 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; @@ -1146,45 +1248,64 @@ label > textarea { cursor: pointer; } +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-repeat: no-repeat; + background-size: .75rem auto; +} + [type="radio"] { border-radius: 50%; } -[type="radio"]:checked { - border-width: .33rem; - border-color: var(--input-hover-border); - background-color: var(--input-inverse); +[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: .35rem; background-image: none; } [type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); width: 2.25rem; height: 1.25rem; - border: var(--switch-border-width) solid var(--input-border); + border: var(--border-width) solid var(--border-color); border-radius: 1.25rem; - background-color: var(--input-border); + background-color: var(--background-color); line-height: 1.25rem; } +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} + +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} + [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - (var(--switch-border-width)*2)); + width: calc(1.25rem - (var(--border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--input-inverse); + background-color: var(--color); 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)); + margin-left: calc(1.125rem - var(--border-width)); } /** @@ -1201,12 +1322,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="date"], @@ -1233,6 +1354,7 @@ label > textarea { } [type="file"] { + --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; @@ -1240,26 +1362,34 @@ label > textarea { } [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); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-size: 1rem; + font-weight: var(--font-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"]:hover, [type="file"]:active, [type="file"]:focus { + --color: var(--color); 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::-webkit-file-upload-button { - box-shadow: none; + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } [type="range"] { @@ -1275,29 +1405,29 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); 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); + border-radius: var(--border-radius); + background-color: var(--range-border-color); 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); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { - background-color: var(--input-border); + background-color: var(--border-radius); } [type="range"]::-webkit-slider-thumb { @@ -1305,9 +1435,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1317,9 +1447,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1329,61 +1459,39 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); 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"]:hover, [type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); } [type="range"]:active { - background: transparent !important; + --range-thumb-color: var(--range-thumb-active-color); } [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; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); - background-position: center left .75rem; + background-position: center left 1.125rem; background-repeat: no-repeat; background-size: 1rem auto; } @@ -1406,27 +1514,20 @@ table { th, td { - 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); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** @@ -1436,8 +1537,8 @@ pre, code, kbd, samp { - font-family: var(--code-font); - font-size: 1rem; + font-family: var(--font-family); + font-size: .875rem; } pre { @@ -1448,58 +1549,25 @@ pre { pre, code, kbd { - background: var(--code-inlined); - color: var(--code-color-1); - font-size: 85%; - font-weight: var(--code-weight); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); line-height: initial; } -@media (min-width: 576px) { - pre, - code, - kbd { - font-size: 83%; - } -} - -@media (min-width: 768px) { - pre, - code, - kbd { - font-size: 81%; - } -} - -@media (min-width: 992px) { - pre, - code, - kbd { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - pre, - code, - kbd { - font-size: 77%; - } -} - code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: var(--block-round); + border-radius: var(--border-radius); } pre { display: block; - margin-bottom: var(--spacing-block); - padding: var(--spacing-block) var(--spacing-gutter); + margin-bottom: var(--spacing); + padding: var(--spacing); overflow-x: auto; - background: var(--code-background); + background: var(--code-background-color); } pre > code { @@ -1511,29 +1579,29 @@ pre > code { } code b { - color: var(--code-color-2); - font-weight: var(--code-weight); + color: var(--code-tag-color); + font-weight: var(--font-weight); } code i { - color: var(--code-color-3); + color: var(--code-property-color); font-style: normal; } code u { - color: var(--code-color-4); + color: var(--code-value-color); text-decoration: none; } code em { - color: var(--code-color-5); + color: var(--code-comment-color); font-style: normal; } kbd { - background-color: var(--secondary); - color: var(--secondary-inverse); - font-weight: bolder; + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: middle; } /** @@ -1581,7 +1649,7 @@ hr { height: 0; overflow: visible; border: none; - border-top: 1px solid var(--muted-border); + border-top: 1px solid var(--muted-border-color); } [hidden], @@ -1621,15 +1689,18 @@ canvas { */ details { display: block; - margin-bottom: var(--spacing-typography); - padding-bottom: calc(var(--spacing-typography) / 2); - border-bottom: 1px solid var(--muted-border); + margin-bottom: var(--spacing); + padding-bottom: calc(var(--spacing) / 2); + border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { + color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; + list-style-type: none; cursor: pointer; + transition: color var(--transition); } details summary::-webkit-details-marker { @@ -1660,22 +1731,26 @@ details summary::after { details summary:focus { outline: none; + color: var(--accordion-active-summary-color); } details summary ~ * { - margin-top: calc(var(--spacing-typography) / 2); + margin-top: calc(var(--spacing) / 2); } details summary ~ * ~ * { margin-top: 0; } -details[open] summary { - margin-bottom: calc(var(--spacing-typography) / 4); - color: var(--muted-text); +details[open] > summary { + margin-bottom: calc(var(--spacing) / 4); } -details[open] summary::after { +details[open] > summary:not(:focus) { + color: var(--accordion-open-summary-color); +} + +details[open] > summary::after { transform: rotate(0); } @@ -1683,166 +1758,34 @@ details[open] summary::after { * Card (
) */ article { - margin: var(--spacing-block) 0; - padding: var(--spacing-block) var(--spacing-gutter); + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); 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; -} - -/** - * Card sectionning (
> header, footer, pre) - */ -article > header, -article > footer { - background-color: var(--card-sections); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); } article > header, article > footer, article > pre { - margin: calc(var(--spacing-gutter) * -1); - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - article > header, - article > footer, - 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 > header, - article > footer, - 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 > header, - article > footer, - 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 > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); } 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)); - } + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); } 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); - } + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); } /** @@ -1867,18 +1810,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing-gutter) * -0.5); + margin-left: calc(var(--spacing) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing-gutter) * -0.5); + margin-right: calc(var(--spacing) * -0.5); } nav li { display: inline-block; margin: 0; - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + padding: var(--spacing) calc(var(--spacing) / 2); } nav li > *, @@ -1888,14 +1831,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { 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; + margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); + padding: var(--spacing) calc(var(--spacing) / 2); + border-radius: var(--border-radius); + text-decoration: none; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none !important; + text-decoration: none; } aside nav, @@ -1906,12 +1849,12 @@ aside li { } aside li { - padding: calc(var(--spacing-gutter) / 2); + padding: calc(var(--spacing) / 2); } aside li a { - margin: calc(var(--spacing-gutter) * -0.5); - padding: calc(var(--spacing-gutter) / 2); + margin: calc(var(--spacing) * -0.5); + padding: calc(var(--spacing) / 2); } /** @@ -1929,30 +1872,30 @@ progress { display: inline-block; width: 100%; height: .5rem; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: calc(var(--spacing) / 2); overflow: hidden; border: 0; - border-radius: var(--block-round); - background-color: var(--muted-background); - color: var(--primary); + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); } progress::-webkit-progress-bar { - border-radius: var(--block-round); + border-radius: var(--border-radius); background: transparent; } progress[value]::-webkit-progress-value { - background-color: var(--primary); + background-color: var(--progress-color); } progress::-moz-progress-bar { - background-color: var(--primary); + background-color: var(--progress-color); } 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; + background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; + animation: progressIndeterminate 1s linear infinite; } progress:indeterminate[value]::-webkit-progress-value { @@ -1963,7 +1906,7 @@ progress:indeterminate::-moz-progress-bar { background-color: transparent; } -@keyframes progress-indeterminate { +@keyframes progressIndeterminate { 0% { background-position: 200% 0; } @@ -1994,12 +1937,12 @@ progress:indeterminate::-moz-progress-bar { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--block-round); - background: var(--contrast); - color: var(--contrast-inverse); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + color: var(--tooltip-color); font-size: .85rem; font-style: normal; - font-weight: var(--text-weight); + font-weight: var(--font-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -2016,14 +1959,14 @@ progress:indeterminate::-moz-progress-bar { border-left: .3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--contrast); + color: var(--tooltip-background-color); content: ''; } [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; - animation-duration: .2s; animation-name: slide; + animation-duration: .2s; } [data-tooltip]:focus::after, [data-tooltip]:hover::after { @@ -2032,12 +1975,12 @@ progress:indeterminate::-moz-progress-bar { @keyframes slide { from { - opacity: 0; transform: translate(-50%, 0.75rem); + opacity: 0; } to { - opacity: 1; transform: translate(-50%, -0.25rem); + opacity: 1; } } @@ -2046,12 +1989,12 @@ progress:indeterminate::-moz-progress-bar { opacity: 0; } 50% { - opacity: 0; transform: translate(-50%, -0.25rem); + opacity: 0; } to { - opacity: 1; transform: translate(-50%, 0rem); + opacity: 1; } } diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index debb545e..92974024 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT - */: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;--h6-size:1rem;--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[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{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.75);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 + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - Licensed under MIT + */:root{--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";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:87.5%}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}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"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-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);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(65, 84, 98, 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");--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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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=dark]{color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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")}*,: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-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal)}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px}}section{margin-bottom:var(--block-spacing-vertical)}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing) / 2) 0;color:var(--muted-color)}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(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration);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{--background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);--font-weight:unset;font-family:unset;font-size:1rem}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::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)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-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)}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{--background-color:var(--primary-hover);--border-color:var(--primary-hover);--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0))}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus)}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:none}:-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(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}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{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus-color)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)!important}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)!important}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}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}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}[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(--border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-checkbox);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=checkbox]:indeterminate{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-minus);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary-inverse);border-width:.35rem;background-image:none}[type=checkbox][role=switch]{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color);--color:var(--switch-color);width:2.25rem;height:1.25rem;border:var(--border-width) solid var(--border-color);border-radius:1.25rem;background-color:var(--background-color);line-height:1.25rem}[type=checkbox][role=switch]:focus{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color)}[type=checkbox][role=switch]:checked{--background-color:var(--switch-checked-background-color);--border-color:var(--switch-checked-background-color)}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--border-width) * 2));height:100%;border-radius:50%;background-color:var(--color);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--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(--border-radius) / 2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--border-radius) / 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]{--color:var(--muted-color);padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);margin-right:calc(var(--spacing) / 2);padding:calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-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]:active,[type=file]:focus,[type=file]:hover{--color:var(--color);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{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}[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(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--border-radius)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);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(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);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(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus,[type=range]:hover{--range-border-color:var(--range-active-border-color);--range-thumb-color:var(--range-thumb-hover-color)}[type=range]:active{--range-thumb-color:var(--range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important;background-image:var(--icon-search);background-position:center left 1.125rem;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) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}code,kbd,pre,samp{font-family:var(--font-family);font-size:.875rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-background-color);color:var(--code-color);font-weight:var(--font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--border-radius)}pre{display:block;margin-bottom:var(--spacing);padding:var(--spacing);overflow-x:auto;background:var(--code-background-color)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-tag-color);font-weight:var(--font-weight)}code i{color:var(--code-property-color);font-style:normal}code u{color:var(--code-value-color);text-decoration:none}code em{color:var(--code-comment-color);font-style:normal}kbd{background-color:var(--code-kbd-background-color);color:var(--code-kbd-color);vertical-align:middle}[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-color)}[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);padding-bottom:calc(var(--spacing) / 2);border-bottom:var(--border-width) solid var(--accordion-border-color)}details summary{color:var(--accordion-close-summary-color);line-height:1rem;list-style-type:none;list-style-type:none;cursor:pointer;transition:color var(--transition)}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;color:var(--accordion-active-summary-color)}details summary~*{margin-top:calc(var(--spacing) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing) / 4)}details[open]>summary:not(:focus){color:var(--accordion-open-summary-color)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--block-spacing-vertical) 0;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal);overflow:hidden;border-radius:var(--border-radius);background:var(--card-background-color);box-shadow:var(--card-box-shadow)}article>footer,article>header,article>pre{margin-right:calc(var(--block-spacing-horizontal) * -1);margin-left:calc(var(--block-spacing-horizontal) * -1);padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color)}article>header{margin-top:calc(var(--block-spacing-vertical) * -1);margin-bottom:var(--block-spacing-vertical);border-bottom:var(--border-width) solid var(--card-border-color)}article>footer,article>pre{margin-top:var(--block-spacing-vertical);margin-bottom:calc(var(--block-spacing-vertical) * -1);border-top:var(--border-width) solid var(--card-border-color)}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) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing) calc(var(--spacing) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);padding:var(--spacing) calc(var(--spacing) / 2);border-radius:var(--border-radius);text-decoration:none}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:calc(var(--spacing) / 2)}aside li a{margin:calc(var(--spacing) * -0.5);padding:calc(var(--spacing) / 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) / 2);overflow:hidden;border:0;border-radius:var(--border-radius);background-color:var(--progress-background-color);color:var(--progress-color)}progress::-webkit-progress-bar{border-radius:var(--border-radius);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--progress-color)}progress::-moz-progress-bar{background-color:var(--progress-color)}progress:indeterminate{background:var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;animation:progressIndeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progressIndeterminate{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(--border-radius);background:var(--tooltip-background-color);color:var(--tooltip-color);font-size:.85rem;font-style:normal;font-weight:var(--font-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(--tooltip-background-color);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-name:slide;animation-duration:.2s}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{transform:translate(-50%, 0.75rem);opacity:0}to{transform:translate(-50%, -0.25rem);opacity:1}}@keyframes slideCaret{0%{opacity:0}50%{transform:translate(-50%, -0.25rem);opacity:0}to{transform:translate(-50%, 0rem);opacity:1}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index e89e4c48..dd9f36d5 100644 --- a/css/pico.css +++ b/css/pico.css @@ -1,235 +1,446 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - 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; - --h6-size: 1rem; - --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; + --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"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --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; + --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"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 87.5%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +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"; +} + +kbd { + --font-weight: bolder; } [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); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-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); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(65, 84, 98, 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"); + --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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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"); } @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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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="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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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"); } /** @@ -254,40 +465,16 @@ html { -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); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-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); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -307,39 +494,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) 0; -} - -@media (min-width: 576px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; - } -} - -@media (min-width: 768px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; - } -} - -@media (min-width: 992px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; - } -} - -@media (min-width: 1200px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; - } + padding: var(--block-spacing-vertical) 0; } /** @@ -350,8 +505,8 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding-right: var(--spacing-gutter); - padding-left: var(--spacing-gutter); + padding-right: var(--spacing); + padding-left: var(--spacing); } @media (min-width: 576px) { @@ -385,31 +540,7 @@ body > footer { * Responsive spacings for section */ 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); - } + margin-bottom: var(--block-spacing-vertical); } /** @@ -417,8 +548,8 @@ section { * Minimal grid system with auto-layout columns */ .grid { - grid-column-gap: var(--spacing-gutter); - grid-row-gap: var(--spacing-gutter); + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); display: grid; grid-template-columns: 1fr; margin: 0; @@ -445,8 +576,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -499,53 +630,53 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } a.secondary { - color: var(--secondary); - text-decoration: underline; + --color: var(--secondary); } a.secondary:hover, a.secondary:active, a.secondary:focus { - color: var(--secondary-hover); + --color: var(--secondary-hover); } a.secondary:focus { - background-color: var(--secondary-focus); + --background-color: var(--secondary-focus); } a.contrast { - color: var(--contrast); - text-decoration: underline; + --color: var(--contrast); } a.contrast:hover, a.contrast:active, a.contrast:focus { - color: var(--contrast-hover); + --color: var(--contrast-hover); } a.contrast:focus { - background-color: var(--contrast-focus); + --background-color: var(--contrast-focus); } h1, @@ -555,179 +686,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ 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, -p ~ h3, -pre ~ 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, -p ~ h4, -pre ~ 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, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); + --font-weight: unset; font-family: unset; - font-size: 1.125rem; - font-weight: unset; + font-size: 1rem; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } 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%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -736,21 +819,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -760,12 +843,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -840,7 +923,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -852,17 +935,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -879,30 +965,183 @@ 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); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); } 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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); +} + +button.secondary, +input[type="submit"].secondary, +input[type="button"].secondary, +input[type="reset"].secondary, +a[role="button"].secondary { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + cursor: pointer; +} + +button.secondary:hover, button.secondary:active, button.secondary:focus, +input[type="submit"].secondary:hover, +input[type="submit"].secondary:active, +input[type="submit"].secondary:focus, +input[type="button"].secondary:hover, +input[type="button"].secondary:active, +input[type="button"].secondary:focus, +input[type="reset"].secondary:hover, +input[type="reset"].secondary:active, +input[type="reset"].secondary:focus, +a[role="button"].secondary:hover, +a[role="button"].secondary:active, +a[role="button"].secondary:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +button.secondary:focus, +input[type="submit"].secondary:focus, +input[type="button"].secondary:focus, +input[type="reset"].secondary:focus, +a[role="button"].secondary:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); +} + +button.contrast, +input[type="submit"].contrast, +input[type="button"].contrast, +input[type="reset"].contrast, +a[role="button"].contrast { + --background-color: var(--contrast); + --border-color: var(--contrast); + --color: var(--contrast-inverse); +} + +button.contrast:hover, button.contrast:active, button.contrast:focus, +input[type="submit"].contrast:hover, +input[type="submit"].contrast:active, +input[type="submit"].contrast:focus, +input[type="button"].contrast:hover, +input[type="button"].contrast:active, +input[type="button"].contrast:focus, +input[type="reset"].contrast:hover, +input[type="reset"].contrast:active, +input[type="reset"].contrast:focus, +a[role="button"].contrast:hover, +a[role="button"].contrast:active, +a[role="button"].contrast:focus { + --background-color: var(--contrast-hover); + --border-color: var(--contrast-hover); +} + +button.contrast:focus, +input[type="submit"].contrast:focus, +input[type="button"].contrast:focus, +input[type="reset"].contrast:focus, +a[role="button"].contrast:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus); +} + +button.outline, +input[type="submit"].outline, +input[type="button"].outline, +input[type="reset"].outline, +a[role="button"].outline { + --background-color: transparent; + --color: var(--primary); +} + +button.outline:hover, button.outline:active, button.outline:focus, +input[type="submit"].outline:hover, +input[type="submit"].outline:active, +input[type="submit"].outline:focus, +input[type="button"].outline:hover, +input[type="button"].outline:active, +input[type="button"].outline:focus, +input[type="reset"].outline:hover, +input[type="reset"].outline:active, +input[type="reset"].outline:focus, +a[role="button"].outline:hover, +a[role="button"].outline:active, +a[role="button"].outline:focus { + --background-color: transparent; + --color: var(--primary-hover); +} + +button.outline.secondary, +input[type="submit"].outline.secondary, +input[type="button"].outline.secondary, +input[type="reset"].outline.secondary, +a[role="button"].outline.secondary { + --color: var(--secondary); +} + +button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, +input[type="submit"].outline.secondary:hover, +input[type="submit"].outline.secondary:active, +input[type="submit"].outline.secondary:focus, +input[type="button"].outline.secondary:hover, +input[type="button"].outline.secondary:active, +input[type="button"].outline.secondary:focus, +input[type="reset"].outline.secondary:hover, +input[type="reset"].outline.secondary:active, +input[type="reset"].outline.secondary:focus, +a[role="button"].outline.secondary:hover, +a[role="button"].outline.secondary:active, +a[role="button"].outline.secondary:focus { + --color: var(--secondary-hover); +} + +button.outline.contrast, +input[type="submit"].outline.contrast, +input[type="button"].outline.contrast, +input[type="reset"].outline.contrast, +a[role="button"].outline.contrast { + --color: var(--contrast); +} + +button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, +input[type="submit"].outline.contrast:hover, +input[type="submit"].outline.contrast:active, +input[type="submit"].outline.contrast:focus, +input[type="button"].outline.contrast:hover, +input[type="button"].outline.contrast:active, +input[type="button"].outline.contrast:focus, +input[type="reset"].outline.contrast:hover, +input[type="reset"].outline.contrast:active, +input[type="reset"].outline.contrast:focus, +a[role="button"].outline.contrast:hover, +a[role="button"].outline.contrast:active, +a[role="button"].outline.contrast:focus { + --color: var(--contrast-hover); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -912,134 +1151,6 @@ a[role="button"][disabled] { pointer-events: none; } -/** - * Button Styles - */ -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); -} - -button.secondary:hover, button.secondary:active, button.secondary:focus, -input[type="submit"].secondary:hover, -input[type="submit"].secondary:active, -input[type="submit"].secondary:focus, -input[type="reset"]:hover, -input[type="reset"]:active, -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); -} - -button.secondary:focus, -input[type="submit"].secondary:focus, -input[type="reset"]:focus, -a[role="button"].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); -} - -button.contrast:hover, button.contrast:active, button.contrast:focus, -input[type="submit"].contrast:hover, -input[type="submit"].contrast:active, -input[type="submit"].contrast:focus, -input[type="reset"].contrast:hover, -input[type="reset"].contrast:active, -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); -} - -button.contrast:focus, -input[type="submit"].contrast:focus, -input[type="reset"].contrast:focus, -a[role="button"].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[role="button"].outline { - border: var(--button-border-width) solid var(--primary-border); - background-color: transparent; - color: var(--primary); -} - -button.outline:hover, button.outline:active, button.outline:focus, -input[type="submit"].outline:hover, -input[type="submit"].outline:active, -input[type="submit"].outline:focus, -a[role="button"].outline:hover, -a[role="button"].outline:active, -a[role="button"].outline:focus { - border: var(--button-border-width) solid var(--primary-hover-border); - color: var(--primary-hover); -} - -button.outline.secondary, -input[type="submit"].outline.secondary, -input[type="reset"].outline, -a[role="button"].outline.secondary { - border: var(--button-border-width) solid var(--secondary-border); - background-color: transparent; - color: var(--secondary); -} - -button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, -input[type="submit"].outline.secondary:hover, -input[type="submit"].outline.secondary:active, -input[type="submit"].outline.secondary:focus, -input[type="reset"].outline:hover, -input[type="reset"].outline:active, -input[type="reset"].outline:focus, -a[role="button"].outline.secondary:hover, -a[role="button"].outline.secondary:active, -a[role="button"].outline.secondary:focus { - border: var(--button-border-width) solid var(--secondary-hover-border); - color: var(--secondary-hover); -} - -button.outline.contrast, -input[type="submit"].outline.contrast, -input[type="reset"].outline.contrast, -a[role="button"].outline.contrast { - border: var(--button-border-width) solid var(--contrast-border); - background-color: transparent; - color: var(--contrast); -} - -button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, -input[type="submit"].outline.contrast:hover, -input[type="submit"].outline.contrast:active, -input[type="submit"].outline.contrast:focus, -input[type="reset"].outline.contrast:hover, -input[type="reset"].outline.contrast:active, -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: var(--button-border-width) solid var(--contrast-hover-border); - color: var(--contrast-hover); -} - /** * Form elements */ @@ -1106,7 +1217,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -1124,12 +1235,12 @@ textarea { } 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)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -1137,14 +1248,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -1162,81 +1272,52 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); } -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"]) { - background-color: var(--muted-background); -} - -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } -input .valid, -input .invalid, input[aria-invalid], -select .valid, -select .invalid, +input[aria-invalid], select[aria-invalid], -textarea .valid, -textarea .invalid, textarea[aria-invalid] { padding-right: 2rem; background-position: center right .75rem; @@ -1244,32 +1325,49 @@ textarea[aria-invalid] { background-size: 1rem auto; } -input .valid, input[aria-invalid="false"], -select .valid, +input[aria-invalid="false"], select[aria-invalid="false"], -textarea .valid, textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } -input .invalid, input[aria-invalid="true"], -select .invalid, +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color) !important; +} + +input[aria-invalid="true"], select[aria-invalid="true"], -textarea .invalid, textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color) !important; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + 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); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1285,21 +1383,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1316,7 +1413,7 @@ label > textarea { height: 1.25rem; margin-top: -.125rem; margin-right: .375rem; - border-width: var(--checkbox-radio-border-width); + border-width: var(--border-width); vertical-align: middle; cursor: pointer; } @@ -1326,22 +1423,18 @@ label > textarea { display: none; } -[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, -[type="radio"]:indeterminate { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); 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; @@ -1350,45 +1443,64 @@ label > textarea { cursor: pointer; } +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-repeat: no-repeat; + background-size: .75rem auto; +} + [type="radio"] { border-radius: 50%; } -[type="radio"]:checked { - border-width: .33rem; - border-color: var(--input-hover-border); - background-color: var(--input-inverse); +[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: .35rem; background-image: none; } [type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); width: 2.25rem; height: 1.25rem; - border: var(--switch-border-width) solid var(--input-border); + border: var(--border-width) solid var(--border-color); border-radius: 1.25rem; - background-color: var(--input-border); + background-color: var(--background-color); line-height: 1.25rem; } +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} + +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} + [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - (var(--switch-border-width)*2)); + width: calc(1.25rem - (var(--border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--input-inverse); + background-color: var(--color); 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)); + margin-left: calc(1.125rem - var(--border-width)); } /** @@ -1405,12 +1517,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="date"], @@ -1437,6 +1549,7 @@ label > textarea { } [type="file"] { + --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; @@ -1444,26 +1557,34 @@ label > textarea { } [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); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-size: 1rem; + font-weight: var(--font-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"]:hover, [type="file"]:active, [type="file"]:focus { + --color: var(--color); 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::-webkit-file-upload-button { - box-shadow: none; + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } [type="range"] { @@ -1479,29 +1600,29 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); 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); + border-radius: var(--border-radius); + background-color: var(--range-border-color); 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); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { - background-color: var(--input-border); + background-color: var(--border-radius); } [type="range"]::-webkit-slider-thumb { @@ -1509,9 +1630,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1521,9 +1642,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1533,61 +1654,39 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); 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"]:hover, [type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); } [type="range"]:active { - background: transparent !important; + --range-thumb-color: var(--range-thumb-active-color); } [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; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); - background-position: center left .75rem; + background-position: center left 1.125rem; background-repeat: no-repeat; background-size: 1rem auto; } @@ -1610,27 +1709,20 @@ table { th, td { - 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); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** @@ -1640,8 +1732,8 @@ pre, code, kbd, samp { - font-family: var(--code-font); - font-size: 1rem; + font-family: var(--font-family); + font-size: .875rem; } pre { @@ -1652,58 +1744,25 @@ pre { pre, code, kbd { - background: var(--code-inlined); - color: var(--code-color-1); - font-size: 85%; - font-weight: var(--code-weight); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); line-height: initial; } -@media (min-width: 576px) { - pre, - code, - kbd { - font-size: 83%; - } -} - -@media (min-width: 768px) { - pre, - code, - kbd { - font-size: 81%; - } -} - -@media (min-width: 992px) { - pre, - code, - kbd { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - pre, - code, - kbd { - font-size: 77%; - } -} - code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: var(--block-round); + border-radius: var(--border-radius); } pre { display: block; - margin-bottom: var(--spacing-block); - padding: var(--spacing-block) var(--spacing-gutter); + margin-bottom: var(--spacing); + padding: var(--spacing); overflow-x: auto; - background: var(--code-background); + background: var(--code-background-color); } pre > code { @@ -1715,29 +1774,29 @@ pre > code { } code b { - color: var(--code-color-2); - font-weight: var(--code-weight); + color: var(--code-tag-color); + font-weight: var(--font-weight); } code i { - color: var(--code-color-3); + color: var(--code-property-color); font-style: normal; } code u { - color: var(--code-color-4); + color: var(--code-value-color); text-decoration: none; } code em { - color: var(--code-color-5); + color: var(--code-comment-color); font-style: normal; } kbd { - background-color: var(--secondary); - color: var(--secondary-inverse); - font-weight: bolder; + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: middle; } /** @@ -1785,7 +1844,7 @@ hr { height: 0; overflow: visible; border: none; - border-top: 1px solid var(--muted-border); + border-top: 1px solid var(--muted-border-color); } [hidden], @@ -1825,15 +1884,18 @@ canvas { */ details { display: block; - margin-bottom: var(--spacing-typography); - padding-bottom: calc(var(--spacing-typography) / 2); - border-bottom: 1px solid var(--muted-border); + margin-bottom: var(--spacing); + padding-bottom: calc(var(--spacing) / 2); + border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { + color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; + list-style-type: none; cursor: pointer; + transition: color var(--transition); } details summary::-webkit-details-marker { @@ -1864,22 +1926,26 @@ details summary::after { details summary:focus { outline: none; + color: var(--accordion-active-summary-color); } details summary ~ * { - margin-top: calc(var(--spacing-typography) / 2); + margin-top: calc(var(--spacing) / 2); } details summary ~ * ~ * { margin-top: 0; } -details[open] summary { - margin-bottom: calc(var(--spacing-typography) / 4); - color: var(--muted-text); +details[open] > summary { + margin-bottom: calc(var(--spacing) / 4); } -details[open] summary::after { +details[open] > summary:not(:focus) { + color: var(--accordion-open-summary-color); +} + +details[open] > summary::after { transform: rotate(0); } @@ -1887,166 +1953,34 @@ details[open] summary::after { * Card (
) */ article { - margin: var(--spacing-block) 0; - padding: var(--spacing-block) var(--spacing-gutter); + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); 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; -} - -/** - * Card sectionning (
> header, footer, pre) - */ -article > header, -article > footer { - background-color: var(--card-sections); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); } article > header, article > footer, article > pre { - margin: calc(var(--spacing-gutter) * -1); - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - article > header, - article > footer, - 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 > header, - article > footer, - 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 > header, - article > footer, - 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 > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); } 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)); - } + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); } 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); - } + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); } /** @@ -2071,18 +2005,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing-gutter) * -0.5); + margin-left: calc(var(--spacing) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing-gutter) * -0.5); + margin-right: calc(var(--spacing) * -0.5); } nav li { display: inline-block; margin: 0; - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + padding: var(--spacing) calc(var(--spacing) / 2); } nav li > *, @@ -2092,14 +2026,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { 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; + margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); + padding: var(--spacing) calc(var(--spacing) / 2); + border-radius: var(--border-radius); + text-decoration: none; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none !important; + text-decoration: none; } aside nav, @@ -2110,12 +2044,12 @@ aside li { } aside li { - padding: calc(var(--spacing-gutter) / 2); + padding: calc(var(--spacing) / 2); } aside li a { - margin: calc(var(--spacing-gutter) * -0.5); - padding: calc(var(--spacing-gutter) / 2); + margin: calc(var(--spacing) * -0.5); + padding: calc(var(--spacing) / 2); } /** @@ -2133,30 +2067,30 @@ progress { display: inline-block; width: 100%; height: .5rem; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: calc(var(--spacing) / 2); overflow: hidden; border: 0; - border-radius: var(--block-round); - background-color: var(--muted-background); - color: var(--primary); + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); } progress::-webkit-progress-bar { - border-radius: var(--block-round); + border-radius: var(--border-radius); background: transparent; } progress[value]::-webkit-progress-value { - background-color: var(--primary); + background-color: var(--progress-color); } progress::-moz-progress-bar { - background-color: var(--primary); + background-color: var(--progress-color); } 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; + background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; + animation: progressIndeterminate 1s linear infinite; } progress:indeterminate[value]::-webkit-progress-value { @@ -2167,7 +2101,7 @@ progress:indeterminate::-moz-progress-bar { background-color: transparent; } -@keyframes progress-indeterminate { +@keyframes progressIndeterminate { 0% { background-position: 200% 0; } @@ -2198,12 +2132,12 @@ progress:indeterminate::-moz-progress-bar { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--block-round); - background: var(--contrast); - color: var(--contrast-inverse); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + color: var(--tooltip-color); font-size: .85rem; font-style: normal; - font-weight: var(--text-weight); + font-weight: var(--font-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -2220,14 +2154,14 @@ progress:indeterminate::-moz-progress-bar { border-left: .3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--contrast); + color: var(--tooltip-background-color); content: ''; } [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; - animation-duration: .2s; animation-name: slide; + animation-duration: .2s; } [data-tooltip]:focus::after, [data-tooltip]:hover::after { @@ -2236,12 +2170,12 @@ progress:indeterminate::-moz-progress-bar { @keyframes slide { from { - opacity: 0; transform: translate(-50%, 0.75rem); + opacity: 0; } to { - opacity: 1; transform: translate(-50%, -0.25rem); + opacity: 1; } } @@ -2250,12 +2184,12 @@ progress:indeterminate::-moz-progress-bar { opacity: 0; } 50% { - opacity: 0; transform: translate(-50%, -0.25rem); + opacity: 0; } to { - opacity: 1; transform: translate(-50%, 0rem); + opacity: 1; } } diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index 418a0957..be50d6b5 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -1,235 +1,446 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - 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; - --h6-size: 1rem; - --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; + --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"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --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; + --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"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 87.5%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +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"; +} + +kbd { + --font-weight: bolder; } [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); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-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); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(65, 84, 98, 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"); + --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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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"); } @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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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="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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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"); } /** @@ -254,40 +465,16 @@ html { -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); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-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); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -307,39 +494,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter); - } -} - -@media (min-width: 768px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter); - } -} - -@media (min-width: 992px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter); - } -} - -@media (min-width: 1200px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter); - } + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); } /** @@ -347,31 +502,7 @@ body > footer { * Responsive spacings for section */ 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); - } + margin-bottom: var(--block-spacing-vertical); } /** @@ -385,8 +516,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -439,27 +570,29 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } h1, @@ -469,179 +602,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ 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, -p ~ h3, -pre ~ 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, -p ~ h4, -pre ~ 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, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); + --font-weight: unset; font-family: unset; - font-size: 1.125rem; - font-weight: unset; + font-size: 1rem; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } 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%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -650,21 +735,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -674,12 +759,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -754,7 +839,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -766,17 +851,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -793,30 +881,38 @@ 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); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); } 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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -826,21 +922,6 @@ 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 */ @@ -907,7 +988,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -925,12 +1006,12 @@ textarea { } 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)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -938,14 +1019,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -963,72 +1043,48 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); } -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"]) { - background-color: var(--muted-background); -} - -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } input[aria-invalid], @@ -1043,25 +1099,46 @@ textarea[aria-invalid] { input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color) !important; +} + input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color) !important; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + 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); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1077,21 +1154,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1108,7 +1184,7 @@ label > textarea { height: 1.25rem; margin-top: -.125rem; margin-right: .375rem; - border-width: var(--checkbox-radio-border-width); + border-width: var(--border-width); vertical-align: middle; cursor: pointer; } @@ -1118,22 +1194,18 @@ label > textarea { display: none; } -[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, -[type="radio"]:indeterminate { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); 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; @@ -1142,45 +1214,64 @@ label > textarea { cursor: pointer; } +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-repeat: no-repeat; + background-size: .75rem auto; +} + [type="radio"] { border-radius: 50%; } -[type="radio"]:checked { - border-width: .33rem; - border-color: var(--input-hover-border); - background-color: var(--input-inverse); +[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: .35rem; background-image: none; } [type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); width: 2.25rem; height: 1.25rem; - border: var(--switch-border-width) solid var(--input-border); + border: var(--border-width) solid var(--border-color); border-radius: 1.25rem; - background-color: var(--input-border); + background-color: var(--background-color); line-height: 1.25rem; } +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} + +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} + [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - (var(--switch-border-width)*2)); + width: calc(1.25rem - (var(--border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--input-inverse); + background-color: var(--color); 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)); + margin-left: calc(1.125rem - var(--border-width)); } /** @@ -1197,12 +1288,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="date"], @@ -1229,6 +1320,7 @@ label > textarea { } [type="file"] { + --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; @@ -1236,26 +1328,34 @@ label > textarea { } [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); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-size: 1rem; + font-weight: var(--font-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"]:hover, [type="file"]:active, [type="file"]:focus { + --color: var(--color); 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::-webkit-file-upload-button { - box-shadow: none; + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } [type="range"] { @@ -1271,29 +1371,29 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); 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); + border-radius: var(--border-radius); + background-color: var(--range-border-color); 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); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { - background-color: var(--input-border); + background-color: var(--border-radius); } [type="range"]::-webkit-slider-thumb { @@ -1301,9 +1401,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1313,9 +1413,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1325,61 +1425,39 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); 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"]:hover, [type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); } [type="range"]:active { - background: transparent !important; + --range-thumb-color: var(--range-thumb-active-color); } [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; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); - background-position: center left .75rem; + background-position: center left 1.125rem; background-repeat: no-repeat; background-size: 1rem auto; } @@ -1402,27 +1480,20 @@ table { th, td { - 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); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** @@ -1432,8 +1503,8 @@ pre, code, kbd, samp { - font-family: var(--code-font); - font-size: 1rem; + font-family: var(--font-family); + font-size: .875rem; } pre { @@ -1444,58 +1515,25 @@ pre { pre, code, kbd { - background: var(--code-inlined); - color: var(--code-color-1); - font-size: 85%; - font-weight: var(--code-weight); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); line-height: initial; } -@media (min-width: 576px) { - pre, - code, - kbd { - font-size: 83%; - } -} - -@media (min-width: 768px) { - pre, - code, - kbd { - font-size: 81%; - } -} - -@media (min-width: 992px) { - pre, - code, - kbd { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - pre, - code, - kbd { - font-size: 77%; - } -} - code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: var(--block-round); + border-radius: var(--border-radius); } pre { display: block; - margin-bottom: var(--spacing-block); - padding: var(--spacing-block) var(--spacing-gutter); + margin-bottom: var(--spacing); + padding: var(--spacing); overflow-x: auto; - background: var(--code-background); + background: var(--code-background-color); } pre > code { @@ -1507,29 +1545,29 @@ pre > code { } code b { - color: var(--code-color-2); - font-weight: var(--code-weight); + color: var(--code-tag-color); + font-weight: var(--font-weight); } code i { - color: var(--code-color-3); + color: var(--code-property-color); font-style: normal; } code u { - color: var(--code-color-4); + color: var(--code-value-color); text-decoration: none; } code em { - color: var(--code-color-5); + color: var(--code-comment-color); font-style: normal; } kbd { - background-color: var(--secondary); - color: var(--secondary-inverse); - font-weight: bolder; + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: middle; } /** @@ -1577,7 +1615,7 @@ hr { height: 0; overflow: visible; border: none; - border-top: 1px solid var(--muted-border); + border-top: 1px solid var(--muted-border-color); } [hidden], @@ -1617,15 +1655,18 @@ canvas { */ details { display: block; - margin-bottom: var(--spacing-typography); - padding-bottom: calc(var(--spacing-typography) / 2); - border-bottom: 1px solid var(--muted-border); + margin-bottom: var(--spacing); + padding-bottom: calc(var(--spacing) / 2); + border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { + color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; + list-style-type: none; cursor: pointer; + transition: color var(--transition); } details summary::-webkit-details-marker { @@ -1656,22 +1697,26 @@ details summary::after { details summary:focus { outline: none; + color: var(--accordion-active-summary-color); } details summary ~ * { - margin-top: calc(var(--spacing-typography) / 2); + margin-top: calc(var(--spacing) / 2); } details summary ~ * ~ * { margin-top: 0; } -details[open] summary { - margin-bottom: calc(var(--spacing-typography) / 4); - color: var(--muted-text); +details[open] > summary { + margin-bottom: calc(var(--spacing) / 4); } -details[open] summary::after { +details[open] > summary:not(:focus) { + color: var(--accordion-open-summary-color); +} + +details[open] > summary::after { transform: rotate(0); } @@ -1679,166 +1724,34 @@ details[open] summary::after { * Card (
) */ article { - margin: var(--spacing-block) 0; - padding: var(--spacing-block) var(--spacing-gutter); + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); 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; -} - -/** - * Card sectionning (
> header, footer, pre) - */ -article > header, -article > footer { - background-color: var(--card-sections); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); } article > header, article > footer, article > pre { - margin: calc(var(--spacing-gutter) * -1); - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - article > header, - article > footer, - 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 > header, - article > footer, - 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 > header, - article > footer, - 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 > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); } 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)); - } + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); } 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); - } + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); } /** @@ -1863,18 +1776,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing-gutter) * -0.5); + margin-left: calc(var(--spacing) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing-gutter) * -0.5); + margin-right: calc(var(--spacing) * -0.5); } nav li { display: inline-block; margin: 0; - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + padding: var(--spacing) calc(var(--spacing) / 2); } nav li > *, @@ -1884,14 +1797,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { 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; + margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); + padding: var(--spacing) calc(var(--spacing) / 2); + border-radius: var(--border-radius); + text-decoration: none; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none !important; + text-decoration: none; } aside nav, @@ -1902,12 +1815,12 @@ aside li { } aside li { - padding: calc(var(--spacing-gutter) / 2); + padding: calc(var(--spacing) / 2); } aside li a { - margin: calc(var(--spacing-gutter) * -0.5); - padding: calc(var(--spacing-gutter) / 2); + margin: calc(var(--spacing) * -0.5); + padding: calc(var(--spacing) / 2); } /** @@ -1925,30 +1838,30 @@ progress { display: inline-block; width: 100%; height: .5rem; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: calc(var(--spacing) / 2); overflow: hidden; border: 0; - border-radius: var(--block-round); - background-color: var(--muted-background); - color: var(--primary); + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); } progress::-webkit-progress-bar { - border-radius: var(--block-round); + border-radius: var(--border-radius); background: transparent; } progress[value]::-webkit-progress-value { - background-color: var(--primary); + background-color: var(--progress-color); } progress::-moz-progress-bar { - background-color: var(--primary); + background-color: var(--progress-color); } 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; + background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; + animation: progressIndeterminate 1s linear infinite; } progress:indeterminate[value]::-webkit-progress-value { @@ -1959,7 +1872,7 @@ progress:indeterminate::-moz-progress-bar { background-color: transparent; } -@keyframes progress-indeterminate { +@keyframes progressIndeterminate { 0% { background-position: 200% 0; } @@ -1990,12 +1903,12 @@ progress:indeterminate::-moz-progress-bar { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--block-round); - background: var(--contrast); - color: var(--contrast-inverse); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + color: var(--tooltip-color); font-size: .85rem; font-style: normal; - font-weight: var(--text-weight); + font-weight: var(--font-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -2012,14 +1925,14 @@ progress:indeterminate::-moz-progress-bar { border-left: .3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--contrast); + color: var(--tooltip-background-color); content: ''; } [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; - animation-duration: .2s; animation-name: slide; + animation-duration: .2s; } [data-tooltip]:focus::after, [data-tooltip]:hover::after { @@ -2028,12 +1941,12 @@ progress:indeterminate::-moz-progress-bar { @keyframes slide { from { - opacity: 0; transform: translate(-50%, 0.75rem); + opacity: 0; } to { - opacity: 1; transform: translate(-50%, -0.25rem); + opacity: 1; } } @@ -2042,12 +1955,12 @@ progress:indeterminate::-moz-progress-bar { opacity: 0; } 50% { - opacity: 0; transform: translate(-50%, -0.25rem); + opacity: 0; } to { - opacity: 1; transform: translate(-50%, 0rem); + opacity: 1; } } diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 91d01d29..666f533f 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT - */: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;--h6-size:1rem;--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[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{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.75);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 + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - Licensed under MIT + */:root{--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";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:87.5%}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}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"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-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);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(65, 84, 98, 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");--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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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=dark]{color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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")}*,: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-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal)}section{margin-bottom:var(--block-spacing-vertical)}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing) / 2) 0;color:var(--muted-color)}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(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration);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{--background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);--font-weight:unset;font-family:unset;font-size:1rem}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::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)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-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)}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{--background-color:var(--primary-hover);--border-color:var(--primary-hover);--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0))}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus)}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:none}:-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(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}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{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus-color)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)!important}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)!important}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}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}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}[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(--border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-checkbox);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=checkbox]:indeterminate{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-minus);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary-inverse);border-width:.35rem;background-image:none}[type=checkbox][role=switch]{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color);--color:var(--switch-color);width:2.25rem;height:1.25rem;border:var(--border-width) solid var(--border-color);border-radius:1.25rem;background-color:var(--background-color);line-height:1.25rem}[type=checkbox][role=switch]:focus{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color)}[type=checkbox][role=switch]:checked{--background-color:var(--switch-checked-background-color);--border-color:var(--switch-checked-background-color)}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--border-width) * 2));height:100%;border-radius:50%;background-color:var(--color);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--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(--border-radius) / 2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--border-radius) / 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]{--color:var(--muted-color);padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);margin-right:calc(var(--spacing) / 2);padding:calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-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]:active,[type=file]:focus,[type=file]:hover{--color:var(--color);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{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}[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(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--border-radius)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);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(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);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(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus,[type=range]:hover{--range-border-color:var(--range-active-border-color);--range-thumb-color:var(--range-thumb-hover-color)}[type=range]:active{--range-thumb-color:var(--range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important;background-image:var(--icon-search);background-position:center left 1.125rem;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) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}code,kbd,pre,samp{font-family:var(--font-family);font-size:.875rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-background-color);color:var(--code-color);font-weight:var(--font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--border-radius)}pre{display:block;margin-bottom:var(--spacing);padding:var(--spacing);overflow-x:auto;background:var(--code-background-color)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-tag-color);font-weight:var(--font-weight)}code i{color:var(--code-property-color);font-style:normal}code u{color:var(--code-value-color);text-decoration:none}code em{color:var(--code-comment-color);font-style:normal}kbd{background-color:var(--code-kbd-background-color);color:var(--code-kbd-color);vertical-align:middle}[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-color)}[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);padding-bottom:calc(var(--spacing) / 2);border-bottom:var(--border-width) solid var(--accordion-border-color)}details summary{color:var(--accordion-close-summary-color);line-height:1rem;list-style-type:none;list-style-type:none;cursor:pointer;transition:color var(--transition)}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;color:var(--accordion-active-summary-color)}details summary~*{margin-top:calc(var(--spacing) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing) / 4)}details[open]>summary:not(:focus){color:var(--accordion-open-summary-color)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--block-spacing-vertical) 0;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal);overflow:hidden;border-radius:var(--border-radius);background:var(--card-background-color);box-shadow:var(--card-box-shadow)}article>footer,article>header,article>pre{margin-right:calc(var(--block-spacing-horizontal) * -1);margin-left:calc(var(--block-spacing-horizontal) * -1);padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color)}article>header{margin-top:calc(var(--block-spacing-vertical) * -1);margin-bottom:var(--block-spacing-vertical);border-bottom:var(--border-width) solid var(--card-border-color)}article>footer,article>pre{margin-top:var(--block-spacing-vertical);margin-bottom:calc(var(--block-spacing-vertical) * -1);border-top:var(--border-width) solid var(--card-border-color)}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) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing) calc(var(--spacing) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);padding:var(--spacing) calc(var(--spacing) / 2);border-radius:var(--border-radius);text-decoration:none}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:calc(var(--spacing) / 2)}aside li a{margin:calc(var(--spacing) * -0.5);padding:calc(var(--spacing) / 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) / 2);overflow:hidden;border:0;border-radius:var(--border-radius);background-color:var(--progress-background-color);color:var(--progress-color)}progress::-webkit-progress-bar{border-radius:var(--border-radius);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--progress-color)}progress::-moz-progress-bar{background-color:var(--progress-color)}progress:indeterminate{background:var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;animation:progressIndeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progressIndeterminate{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(--border-radius);background:var(--tooltip-background-color);color:var(--tooltip-color);font-size:.85rem;font-style:normal;font-weight:var(--font-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(--tooltip-background-color);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-name:slide;animation-duration:.2s}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{transform:translate(-50%, 0.75rem);opacity:0}to{transform:translate(-50%, -0.25rem);opacity:1}}@keyframes slideCaret{0%{opacity:0}50%{transform:translate(-50%, -0.25rem);opacity:0}to{transform:translate(-50%, 0rem);opacity:1}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index b6ab16df..a31adcda 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT - */: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;--h6-size:1rem;--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[role=button].outline,button.outline,input[type=submit].outline{border:var(--button-border-width) solid var(--primary-border);background-color:transparent;color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline: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,input[aria-invalid],select .invalid,select .valid,select[aria-invalid],textarea .invalid,textarea .valid,textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input .valid,input[aria-invalid=false],select .valid,select[aria-invalid=false],textarea .valid,textarea[aria-invalid=false]{background-image:var(--icon-valid)}input .invalid,input[aria-invalid=true],select .invalid,select[aria-invalid=true],textarea .invalid,textarea[aria-invalid=true]{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.75);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 + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - Licensed under MIT + */:root{--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";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:87.5%}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}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"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-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);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(65, 84, 98, 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");--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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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=dark]{color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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")}*,: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-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing);padding-left:var(--spacing)}@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:var(--block-spacing-vertical)}.grid{grid-column-gap:var(--grid-spacing-horizontal);grid-row-gap:var(--grid-spacing-vertical);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) / 2) 0;color:var(--muted-color)}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(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration);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{--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{--color:var(--contrast)}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(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);--font-weight:unset;font-family:unset;font-size:1rem}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::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)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-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)}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{--background-color:var(--primary-hover);--border-color:var(--primary-hover);--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0))}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].secondary,button.secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}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=button].secondary:active,input[type=button].secondary:focus,input[type=button].secondary:hover,input[type=reset].secondary:active,input[type=reset].secondary:focus,input[type=reset].secondary:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=button].secondary:focus,input[type=reset].secondary:focus,input[type=submit].secondary:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].contrast,button.contrast,input[type=button].contrast,input[type=reset].contrast,input[type=submit].contrast{--background-color:var(--contrast);--border-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=button].contrast:active,input[type=button].contrast:focus,input[type=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);--border-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=button].contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=button].outline,input[type=reset].outline,input[type=submit].outline{--background-color:transparent;--color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=button].outline:active,input[type=button].outline:focus,input[type=button].outline:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{--background-color:transparent;--color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=button].outline.secondary,input[type=reset].outline.secondary,input[type=submit].outline.secondary{--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=button].outline.secondary:active,input[type=button].outline.secondary:focus,input[type=button].outline.secondary:hover,input[type=reset].outline.secondary:active,input[type=reset].outline.secondary:focus,input[type=reset].outline.secondary:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{--color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=button].outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{--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=button].outline.contrast:active,input[type=button].outline.contrast:focus,input[type=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{--color:var(--contrast-hover)}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:none}:-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(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}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{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus-color)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)!important}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)!important}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}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}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}[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(--border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-checkbox);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=checkbox]:indeterminate{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-minus);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary-inverse);border-width:.35rem;background-image:none}[type=checkbox][role=switch]{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color);--color:var(--switch-color);width:2.25rem;height:1.25rem;border:var(--border-width) solid var(--border-color);border-radius:1.25rem;background-color:var(--background-color);line-height:1.25rem}[type=checkbox][role=switch]:focus{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color)}[type=checkbox][role=switch]:checked{--background-color:var(--switch-checked-background-color);--border-color:var(--switch-checked-background-color)}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--border-width) * 2));height:100%;border-radius:50%;background-color:var(--color);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--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(--border-radius) / 2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--border-radius) / 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]{--color:var(--muted-color);padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);margin-right:calc(var(--spacing) / 2);padding:calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-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]:active,[type=file]:focus,[type=file]:hover{--color:var(--color);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{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}[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(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--border-radius)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);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(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);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(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus,[type=range]:hover{--range-border-color:var(--range-active-border-color);--range-thumb-color:var(--range-thumb-hover-color)}[type=range]:active{--range-thumb-color:var(--range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important;background-image:var(--icon-search);background-position:center left 1.125rem;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) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}code,kbd,pre,samp{font-family:var(--font-family);font-size:.875rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-background-color);color:var(--code-color);font-weight:var(--font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--border-radius)}pre{display:block;margin-bottom:var(--spacing);padding:var(--spacing);overflow-x:auto;background:var(--code-background-color)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-tag-color);font-weight:var(--font-weight)}code i{color:var(--code-property-color);font-style:normal}code u{color:var(--code-value-color);text-decoration:none}code em{color:var(--code-comment-color);font-style:normal}kbd{background-color:var(--code-kbd-background-color);color:var(--code-kbd-color);vertical-align:middle}[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-color)}[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);padding-bottom:calc(var(--spacing) / 2);border-bottom:var(--border-width) solid var(--accordion-border-color)}details summary{color:var(--accordion-close-summary-color);line-height:1rem;list-style-type:none;list-style-type:none;cursor:pointer;transition:color var(--transition)}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;color:var(--accordion-active-summary-color)}details summary~*{margin-top:calc(var(--spacing) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing) / 4)}details[open]>summary:not(:focus){color:var(--accordion-open-summary-color)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--block-spacing-vertical) 0;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal);overflow:hidden;border-radius:var(--border-radius);background:var(--card-background-color);box-shadow:var(--card-box-shadow)}article>footer,article>header,article>pre{margin-right:calc(var(--block-spacing-horizontal) * -1);margin-left:calc(var(--block-spacing-horizontal) * -1);padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color)}article>header{margin-top:calc(var(--block-spacing-vertical) * -1);margin-bottom:var(--block-spacing-vertical);border-bottom:var(--border-width) solid var(--card-border-color)}article>footer,article>pre{margin-top:var(--block-spacing-vertical);margin-bottom:calc(var(--block-spacing-vertical) * -1);border-top:var(--border-width) solid var(--card-border-color)}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) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing) calc(var(--spacing) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);padding:var(--spacing) calc(var(--spacing) / 2);border-radius:var(--border-radius);text-decoration:none}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:calc(var(--spacing) / 2)}aside li a{margin:calc(var(--spacing) * -0.5);padding:calc(var(--spacing) / 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) / 2);overflow:hidden;border:0;border-radius:var(--border-radius);background-color:var(--progress-background-color);color:var(--progress-color)}progress::-webkit-progress-bar{border-radius:var(--border-radius);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--progress-color)}progress::-moz-progress-bar{background-color:var(--progress-color)}progress:indeterminate{background:var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;animation:progressIndeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progressIndeterminate{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(--border-radius);background:var(--tooltip-background-color);color:var(--tooltip-color);font-size:.85rem;font-style:normal;font-weight:var(--font-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(--tooltip-background-color);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-name:slide;animation-duration:.2s}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{transform:translate(-50%, 0.75rem);opacity:0}to{transform:translate(-50%, -0.25rem);opacity:1}}@keyframes slideCaret{0%{opacity:0}50%{transform:translate(-50%, -0.25rem);opacity:0}to{transform:translate(-50%, 0rem);opacity:1}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.slim.css b/css/pico.slim.css index 66abef5d..a6af8c7e 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -1,6 +1,6 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - Licensed under MIT * * Slim version example * You can export only the modules you need @@ -9,230 +9,381 @@ * 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; - --h6-size: 1rem; - --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; + --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"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --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; + --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"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 87.5%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +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"; +} + +kbd { + --font-weight: bolder; } [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); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-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); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(65, 84, 98, 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"); + --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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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"); } @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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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="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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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"); } /** @@ -257,40 +408,16 @@ html { -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); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-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); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -310,7 +437,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) 0; + padding: var(--block-spacing-vertical) 0; } /** @@ -321,8 +448,8 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding-right: var(--spacing-gutter); - padding-left: var(--spacing-gutter); + padding-right: var(--spacing); + padding-left: var(--spacing); } @media (min-width: 576px) { @@ -351,13 +478,21 @@ body > footer { } } +/** + * Section + * Responsive spacings for section + */ +section { + margin-bottom: var(--block-spacing-vertical); +} + /** * Grid * Minimal grid system with auto-layout columns */ .grid { - grid-column-gap: var(--spacing-gutter); - grid-row-gap: var(--spacing-gutter); + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); display: grid; grid-template-columns: 1fr; margin: 0; @@ -384,8 +519,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -438,52 +573,52 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } a.secondary { - color: var(--secondary); - text-decoration: underline; + --color: var(--secondary); } a.secondary:hover, a.secondary:active, a.secondary:focus { - color: var(--secondary-hover); + --color: var(--secondary-hover); } a.secondary:focus { - background-color: var(--secondary-focus); + --background-color: var(--secondary-focus); } a.contrast { - color: var(--contrast); - text-decoration: underline; + --color: var(--contrast); } a.contrast:hover, a.contrast:active, a.contrast:focus { - color: var(--contrast-hover); + --color: var(--contrast-hover); } a.contrast:focus { - background-color: var(--contrast-focus); + --background-color: var(--contrast-focus); } h1, @@ -493,179 +628,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ 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, -p ~ h3, -pre ~ 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, -p ~ h4, -pre ~ 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, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); + --font-weight: unset; font-family: unset; - font-size: 1.125rem; - font-weight: unset; + font-size: 1rem; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } 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%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -674,21 +761,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -698,12 +785,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -778,7 +865,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -790,17 +877,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -816,30 +906,183 @@ 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); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); } 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: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); +} + +button.secondary, +input[type="submit"].secondary, +input[type="button"].secondary, +input[type="reset"].secondary, +a[role="button"].secondary { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + cursor: pointer; +} + +button.secondary:hover, button.secondary:active, button.secondary:focus, +input[type="submit"].secondary:hover, +input[type="submit"].secondary:active, +input[type="submit"].secondary:focus, +input[type="button"].secondary:hover, +input[type="button"].secondary:active, +input[type="button"].secondary:focus, +input[type="reset"].secondary:hover, +input[type="reset"].secondary:active, +input[type="reset"].secondary:focus, +a[role="button"].secondary:hover, +a[role="button"].secondary:active, +a[role="button"].secondary:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +button.secondary:focus, +input[type="submit"].secondary:focus, +input[type="button"].secondary:focus, +input[type="reset"].secondary:focus, +a[role="button"].secondary:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus); +} + +button.contrast, +input[type="submit"].contrast, +input[type="button"].contrast, +input[type="reset"].contrast, +a[role="button"].contrast { + --background-color: var(--contrast); + --border-color: var(--contrast); + --color: var(--contrast-inverse); +} + +button.contrast:hover, button.contrast:active, button.contrast:focus, +input[type="submit"].contrast:hover, +input[type="submit"].contrast:active, +input[type="submit"].contrast:focus, +input[type="button"].contrast:hover, +input[type="button"].contrast:active, +input[type="button"].contrast:focus, +input[type="reset"].contrast:hover, +input[type="reset"].contrast:active, +input[type="reset"].contrast:focus, +a[role="button"].contrast:hover, +a[role="button"].contrast:active, +a[role="button"].contrast:focus { + --background-color: var(--contrast-hover); + --border-color: var(--contrast-hover); +} + +button.contrast:focus, +input[type="submit"].contrast:focus, +input[type="button"].contrast:focus, +input[type="reset"].contrast:focus, +a[role="button"].contrast:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus); +} + +button.outline, +input[type="submit"].outline, +input[type="button"].outline, +input[type="reset"].outline, +a[role="button"].outline { + --background-color: transparent; + --color: var(--primary); +} + +button.outline:hover, button.outline:active, button.outline:focus, +input[type="submit"].outline:hover, +input[type="submit"].outline:active, +input[type="submit"].outline:focus, +input[type="button"].outline:hover, +input[type="button"].outline:active, +input[type="button"].outline:focus, +input[type="reset"].outline:hover, +input[type="reset"].outline:active, +input[type="reset"].outline:focus, +a[role="button"].outline:hover, +a[role="button"].outline:active, +a[role="button"].outline:focus { + --background-color: transparent; + --color: var(--primary-hover); +} + +button.outline.secondary, +input[type="submit"].outline.secondary, +input[type="button"].outline.secondary, +input[type="reset"].outline.secondary, +a[role="button"].outline.secondary { + --color: var(--secondary); +} + +button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, +input[type="submit"].outline.secondary:hover, +input[type="submit"].outline.secondary:active, +input[type="submit"].outline.secondary:focus, +input[type="button"].outline.secondary:hover, +input[type="button"].outline.secondary:active, +input[type="button"].outline.secondary:focus, +input[type="reset"].outline.secondary:hover, +input[type="reset"].outline.secondary:active, +input[type="reset"].outline.secondary:focus, +a[role="button"].outline.secondary:hover, +a[role="button"].outline.secondary:active, +a[role="button"].outline.secondary:focus { + --color: var(--secondary-hover); +} + +button.outline.contrast, +input[type="submit"].outline.contrast, +input[type="button"].outline.contrast, +input[type="reset"].outline.contrast, +a[role="button"].outline.contrast { + --color: var(--contrast); +} + +button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, +input[type="submit"].outline.contrast:hover, +input[type="submit"].outline.contrast:active, +input[type="submit"].outline.contrast:focus, +input[type="button"].outline.contrast:hover, +input[type="button"].outline.contrast:active, +input[type="button"].outline.contrast:focus, +input[type="reset"].outline.contrast:hover, +input[type="reset"].outline.contrast:active, +input[type="reset"].outline.contrast:focus, +a[role="button"].outline.contrast:hover, +a[role="button"].outline.contrast:active, +a[role="button"].outline.contrast:focus { + --color: var(--contrast-hover); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -915,7 +1158,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -933,12 +1176,12 @@ textarea { } 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)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -946,14 +1189,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -971,80 +1213,51 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); } -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"]) { - background-color: var(--muted-background); -} - -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } -input .valid, -input .invalid, input[aria-invalid], -select .valid, -select .invalid, +input[aria-invalid], select[aria-invalid], -textarea .valid, -textarea .invalid, textarea[aria-invalid] { padding-right: 2rem; background-position: center right .75rem; @@ -1052,32 +1265,49 @@ textarea[aria-invalid] { background-size: 1rem auto; } -input .valid, input[aria-invalid="false"], -select .valid, +input[aria-invalid="false"], select[aria-invalid="false"], -textarea .valid, textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } -input .invalid, input[aria-invalid="true"], -select .invalid, +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color); +} + +input[aria-invalid="true"], select[aria-invalid="true"], -textarea .invalid, textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color); +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + 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); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1093,21 +1323,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1123,27 +1352,20 @@ table { th, td { - 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); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** diff --git a/css/pico.slim.min.css b/css/pico.slim.min.css index c6ab055a..87e12034 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -1,7 +1,7 @@ /*! - * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Pico.css v1.3.0 (https://picocss.com) + * Copyright 2019-2021 - Licensed under MIT * * Slim version example * You can export only the modules you need - */: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;--h6-size:1rem;--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 .invalid,input .valid,input[aria-invalid],select .invalid,select .valid,select[aria-invalid],textarea .invalid,textarea .valid,textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input .valid,input[aria-invalid=false],select .valid,select[aria-invalid=false],textarea .valid,textarea[aria-invalid=false]{background-image:var(--icon-valid)}input .invalid,input[aria-invalid=true],select .invalid,select[aria-invalid=true],textarea .invalid,textarea[aria-invalid=true]{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.75);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 + */:root{--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";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:87.5%}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}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"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-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);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(65, 84, 98, 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");--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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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=dark]{color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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")}*,: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-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing);padding-left:var(--spacing)}@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:var(--block-spacing-vertical)}.grid{grid-column-gap:var(--grid-spacing-horizontal);grid-row-gap:var(--grid-spacing-vertical);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) / 2) 0;color:var(--muted-color)}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(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration)}a:active,a:focus,a:hover{--color:var(--primary-hover);--text-decoration:underline}a:focus{--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{--color:var(--contrast)}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(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);--font-weight:unset;font-family:unset;font-size:1rem}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::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)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer}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{--background-color:var(--primary-hover);--border-color:var(--primary-hover);--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0))}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].secondary,button.secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}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=button].secondary:active,input[type=button].secondary:focus,input[type=button].secondary:hover,input[type=reset].secondary:active,input[type=reset].secondary:focus,input[type=reset].secondary:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=button].secondary:focus,input[type=reset].secondary:focus,input[type=submit].secondary:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].contrast,button.contrast,input[type=button].contrast,input[type=reset].contrast,input[type=submit].contrast{--background-color:var(--contrast);--border-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=button].contrast:active,input[type=button].contrast:focus,input[type=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);--border-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=button].contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{--box-shadow:var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=button].outline,input[type=reset].outline,input[type=submit].outline{--background-color:transparent;--color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=button].outline:active,input[type=button].outline:focus,input[type=button].outline:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{--background-color:transparent;--color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=button].outline.secondary,input[type=reset].outline.secondary,input[type=submit].outline.secondary{--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=button].outline.secondary:active,input[type=button].outline.secondary:focus,input[type=button].outline.secondary:hover,input[type=reset].outline.secondary:active,input[type=reset].outline.secondary:focus,input[type=reset].outline.secondary:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{--color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=button].outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{--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=button].outline.contrast:active,input[type=button].outline.contrast:focus,input[type=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{--color:var(--contrast-hover)}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:none}:-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(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}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{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus-color)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}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}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}[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 index 85b2aace..f007edce 100644 --- a/css/themes/default.css +++ b/css/themes/default.css @@ -2,228 +2,439 @@ * 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; - --h6-size: 1rem; - --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; + --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"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --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; + --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"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 87.5%; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +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"; +} + +kbd { + --font-weight: bolder; } [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); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-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); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(65, 84, 98, 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"); + --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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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"); } @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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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="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); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --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(162, 175, 185, 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"); + --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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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"); } diff --git a/css/themes/default.min.css b/css/themes/default.min.css index 27dcae37..b83db373 100644 --- a/css/themes/default.min.css +++ b/css/themes/default.min.css @@ -1 +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;--h6-size:1rem;--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 +:root{--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";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:87.5%}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}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"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-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);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(65, 84, 98, 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");--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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(65, 84, 98, 0.999)' 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(56, 142, 60, 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(198, 40, 40, 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")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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=dark]{color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--button-box-shadow:0 0 0 rgba(0, 0, 0, 0);--button-hover-box-shadow:0 0 0 rgba(0, 0, 0, 0);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus-color:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--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(162, 175, 185, 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");--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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(162, 175, 185, 0.999)' 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(46, 125, 50, 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(183, 28, 28, 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")} \ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index b6942ad6..84f44169 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -12,20 +12,29 @@ [data-theme="light"], :root:not([data-theme="dark"]) { - --nav-background: rgba(255, 255, 255, 0.7); - --nav-border: rgba(115, 130, 140, 0.2); + --invalid-color: #C62828; + --valid-color: #388E3C; + --nav-background-color: rgba(255, 255, 255, 0.7); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #FFF; } @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); + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background-color: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; } } [data-theme="dark"] { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); --nav-background: rgba(16, 24, 30, 0.8); - --nav-border: rgba(115, 130, 140, 0.2); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; } /** @@ -39,72 +48,61 @@ html { * Docs: Main (Grid) */ 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); - } + padding-top: calc(var(--block-spacing-vertical) + 3.5rem); } @media (min-width: 992px) { body > main { - grid-column-gap: calc(var(--spacing-gutter) * 4); + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + grid-column-gap: calc(var(--block-spacing-horizontal) * 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); + --block-spacing-horizontal: calc(var(--spacing) * 2); } } -body > main > * { +body > main > aside, +body > main div[role="document"] { 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); + height: calc(2rem + 3.5rem - .5rem); + margin-top: calc(-2rem - 3.5rem + .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); + height: calc(2.5rem + 3.5rem - .5rem); + height: calc(-2.5rem - 3.5rem + .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); + height: calc(3rem + 3.5rem - .5rem); + margin-top: calc(-3rem - 3.5rem + .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); + height: calc(3.5rem + 3.5rem - .5rem); + margin-top: calc(-3.5rem - 3.5rem + .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); + height: calc(4rem + 3.5rem - .5rem); + margin-top: calc(-4rem - 3.5rem + .5rem); } } @@ -119,11 +117,6 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no content: ''; } -form.grid > input:not([type=checkbox]):not([type=radio]), -form.grid > button { - margin-bottom: 0; -} - svg { height: 1rem; } @@ -133,11 +126,11 @@ svg { */ main > aside nav { width: 100%; - margin-bottom: var(--spacing-block); + margin-bottom: var(--block-spacing-vertical); } main > aside nav h1 { - margin-bottom: var(--spacing-typography); + margin-bottom: calc(var(--typography-spacing-vertical) / 2); } @media (min-width: 992px) { @@ -184,7 +177,7 @@ main > aside details { } main > aside details summary { - color: var(--h3); + color: var(--h3-color); font-size: 14px; font-weight: 300; text-transform: uppercase; @@ -195,7 +188,7 @@ main > aside details summary::after { } main > aside details[open] summary { - color: var(--h3); + color: var(--h3-color); } /** @@ -217,8 +210,8 @@ main > aside details[open] summary { #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); + border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); } } @@ -260,10 +253,14 @@ main > aside details[open] summary { border-color: var(--primary); } +#grids { + --grid-spacing-vertical: 1rem; +} + #grids button { display: block; width: 100%; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: var(--spacing); } @media (min-width: 576px) { @@ -283,13 +280,15 @@ main > aside details[open] summary { } #grids .grid > * { - padding: calc(var(--spacing-gutter) / 2) 0; - background: var(--code-background); + padding: calc(var(--spacing) / 2) 0; + border-radius: var(--border-radius); + background: var(--code-background-color); + font-size: 87.5%; text-align: center; } #grids details { - margin-top: calc(var(--spacing-typography) * 2); + margin-top: calc(var(--typography-spacing-vertical) * 2); } #grids details svg { @@ -304,12 +303,12 @@ main > aside details[open] summary { * Docs: Typography */ section > hgroup { - margin-bottom: calc(var(--spacing-typography) * 2); + margin-bottom: calc(var(--typography-spacing-vertical) * 2); } a[role=button] { - margin-right: calc(var(--spacing-typography) / 4); - margin-bottom: var(--spacing-typography); + margin-right: calc(var(--typography-spacing-vertical) / 4); + margin-bottom: var(--typography-spacing-vertical); } [role=document] section > h1, @@ -321,28 +320,11 @@ a[role=button] { /** * Docs: Code */ -@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)); - } +section > pre { + margin: var(--block-spacing-vertical) 0; + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); + box-shadow: var(--card-box-shadow); } [data-theme="invalid"], @@ -367,8 +349,8 @@ a[role=button] { @media (min-width: 992px) { [data-theme="invalid"]:before, [data-theme="valid"]:before { - top: var(--spacing-gutter); - right: var(--spacing-gutter); + top: var(--spacing); + right: var(--spacing); } } @@ -378,12 +360,12 @@ a[role=button] { } [data-theme="invalid"]:before { - background: var(--invalid); + background: var(--invalid-color); content: 'Not so great'; } [data-theme="valid"]:before { - background: var(--valid); + background: var(--valid-color); content: 'Great'; } @@ -398,8 +380,8 @@ body > nav { right: 0; left: 0; backdrop-filter: saturate(180%) blur(20px); - background-color: var(--nav-background); - box-shadow: 0px 1px 0 var(--nav-border); + background-color: var(--nav-background-color); + box-shadow: 0px 1px 0 var(--nav-border-color); } body > nav a { @@ -413,10 +395,10 @@ body > nav svg { body > nav ul:first-of-type li:first-of-type a { width: 3.5rem; height: 3.5rem; - margin-left: calc(var(--spacing-gutter) * -1); + margin-left: calc(var(--spacing) * -1); padding: 0; - background: var(--h1); - color: var(--background); + background: var(--h1-color); + color: var(--nav-logo-color); } body > nav ul:first-of-type li:first-of-type a svg { @@ -425,8 +407,8 @@ body > nav ul:first-of-type li:first-of-type a svg { body > nav ul:first-of-type li:nth-of-type(2) { display: none; - margin-left: var(--spacing-gutter); - color: var(--h1); + margin-left: var(--spacing); + color: var(--h1-color); } @media (min-width: 992px) { @@ -440,13 +422,13 @@ body > nav ul:first-of-type li:nth-of-type(2) { */ .switcher { position: fixed; - right: calc(var(--spacing-gutter) / 2); - bottom: var(--spacing-gutter); + right: calc(var(--spacing) / 2); + bottom: var(--spacing); width: auto; margin-bottom: 0; padding: .75rem; border-radius: 2rem; - box-shadow: var(--card-shadow); + box-shadow: var(--card-box-shadow); line-height: 1; text-align: right; } @@ -484,16 +466,16 @@ body > nav ul:first-of-type li:nth-of-type(2) { .switcher:hover i { max-width: 100%; - padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); + padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4); transition: max-width var(--transition), padding var(--transition); } .switcher:focus { - box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus); } @media (min-width: 576px) { .switcher { - right: var(--spacing-gutter); + right: var(--spacing); } } diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index d7af34de..6569a567 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{--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}svg{height:1rem}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 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:first-of-type a svg{height:3.5rem}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 + */: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]{--invalid-color:#C62828;--valid-color:#388E3C;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#FFF}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}html{scroll-behavior:smooth}body>main{padding-top:calc(var(--block-spacing-vertical) + 3.5rem)}@media (min-width:992px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 1.75);grid-column-gap:calc(var(--block-spacing-horizontal) * 4);display:grid;grid-template-columns:200px auto}}@media (min-width:1200px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 2)}}body>main>aside,body>main div[role=document]{min-width:0}div[role=document]>section:before{display:block;height:calc(2rem + 3.5rem - .5rem);margin-top:calc(-2rem - 3.5rem + .5rem);content:''}@media (min-width:576px){div[role=document]>section:before{height:calc(2.5rem + 3.5rem - .5rem);height:calc(-2.5rem - 3.5rem + .5rem)}}@media (min-width:768px){div[role=document]>section:before{height:calc(3rem + 3.5rem - .5rem);margin-top:calc(-3rem - 3.5rem + .5rem)}}@media (min-width:992px){div[role=document]>section:before{height:calc(3.5rem + 3.5rem - .5rem);margin-top:calc(-3.5rem - 3.5rem + .5rem)}}@media (min-width:1200px){div[role=document]>section:before{height:calc(4rem + 3.5rem - .5rem);margin-top:calc(-4rem - 3.5rem + .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:''}svg{height:1rem}main>aside nav{width:100%;margin-bottom:var(--block-spacing-vertical)}main>aside nav h1{margin-bottom:calc(var(--typography-spacing-vertical) / 2)}@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-color);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3-color)}#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(--border-radius);border-top-left-radius:var(--border-radius)}}#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{--grid-spacing-vertical:1rem}#grids button{display:block;width:100%;margin-bottom:var(--spacing)}@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) / 2) 0;border-radius:var(--border-radius);background:var(--code-background-color);font-size:87.5%;text-align:center}#grids details{margin-top:calc(var(--typography-spacing-vertical) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical) / 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}section>pre{margin:var(--block-spacing-vertical) 0;padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color);box-shadow:var(--card-box-shadow)}[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);right:var(--spacing)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid-color);content:'Not so great'}[data-theme=valid]:before{background:var(--valid-color);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-color);box-shadow:0px 1px 0 var(--nav-border-color)}body>nav a{border-radius:0}body>nav 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) * -1);padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing);color:var(--h1-color)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing) / 2);bottom:var(--spacing);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-box-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) / 2) 0 calc(var(--spacing) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing)}} \ No newline at end of file diff --git a/docs/css/themes/docs.css b/docs/css/themes/docs.css new file mode 100644 index 00000000..72fd0945 --- /dev/null +++ b/docs/css/themes/docs.css @@ -0,0 +1,35 @@ +/** + * 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"]) { + --invalid-color: #C62828; + --valid-color: #388E3C; + --nav-background-color: rgba(255, 255, 255, 0.7); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #FFF; +} + +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background-color: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; + } +} + +[data-theme="dark"] { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; +} diff --git a/docs/css/themes/docs.min.css b/docs/css/themes/docs.min.css new file mode 100644 index 00000000..6dc3d9ae --- /dev/null +++ b/docs/css/themes/docs.min.css @@ -0,0 +1 @@ +: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]{--invalid-color:#C62828;--valid-color:#388E3C;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#FFF}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 0690f0fc..f1afd08d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -3,7 +3,7 @@ - + Pico.css • Graceful & Minimal CSS design system @@ -116,7 +116,7 @@ <html lang="en"> <head> <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"> + <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/pico.min.css"> <title>Hello, world!</title> </head> @@ -191,9 +191,60 @@ + +
// Simplified example
+:root {
+  --primary: ...;
+}
+
+
+

There are 2 ways to customize your version of Pico.css:

-

Importing SASS

+

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: ...;
+}
+
+/* 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: ...;
+  }
+}
+
+/* Dark scheme (Forced) */
+/* Enabled if forced with data-theme="dark" */
+[data-theme="dark"] {
+  --primary: ...;
+  --primary-hover: ...;
+  --primary-focus: ...;
+  --primary-inverse: ...;
+}
+
+/* (Common styles) */
+:root {
+  --form-element-active-border-color: var(--primary);
+  --form-element-focus-color: var(--primary-focus);
+  --switch-color: var(--primary-inverse);
+  --switch-checked-background-color: var(--primary);
+}
+
+ +

You can find all the CSS variables used in the default theme here: css/themes/default.css

+

Importing Pico SASS library

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.

@@ -221,66 +272,31 @@

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:      ...;
-}
-
-/* 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:    ...;
-  }
-}
-
-/* Dark scheme (Forced) */
-/* Enabled if forced with data-theme="dark" */
-[data-theme="dark"] {
-  --primary:              ...;
-  --primary-hover:        ...;
-  --primary-focus:        ...;
-  --primary-inverse:      ...;
-}
-
-/* (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

-

Class-less version

For wild HTML purists!

-

Pico provide a .classless version (Example).

+

Pico provide a .classless version (example).

In this version, <header>, <main> and <footer> act as containers to define a centered or a fluid viewport.

Usage:

Use the default .classless version if you need centered viewports:

<link rel="stylesheet" href="css/pico.classless.min.css">
-

Or use the .fluid.classless version if you need a fluid container:

+

Or use the .fluid.classless version if you need a fluid container:

<link rel="stylesheet" href="css/pico.fluid.classless.min.css">
+

These .classless versions are also available on unpkg CDN:

+ +
// Centered viewport
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.classless.min.css">
+
+ +
// Fluid viewport
+<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.fluid.classless.min.css">
+
+
@@ -297,7 +313,7 @@ <main class="container"></main> </body> -

Pico use the same breakpoints and viewports sizes as Bootstrap.

+

Pico use the same breakpoints and viewports sizes as Bootstrap.

@@ -321,7 +337,7 @@ - + @@ -452,7 +468,7 @@

Typography

-

All typographic elements are responsives, allowing text to scale gracefully across devices and viewport sizes.

+

All typographic elements are responsives, allowing text to scale gracefully across devices and viewports.

ViewportNone (auto)100% 540px 720px 960px
@@ -476,7 +492,7 @@ - + @@ -484,45 +500,53 @@ - + - - + + - + - + - + - + - - - + + + - + - - - - + + + + - + + + + + + + + +
20px
h1<h1> 32px 34px 36px40px
h2<h2> 28px 29px31.5px33.25px31.5px33.25px 35px
h3<h3> 24px25.5px25.5px 27px28.5px28.5px 30px
h4<h4> 20px21.25px22.5px23.75px21.25px22.5px23.75px 25px
h5<h5> 18px19.125px20.25px21.375px22.5px19.125px20.25px21.375px22.5px
h6<h6> 16px 17px 18px 19px 20px
<small>14px14.875px15.75px16.625px27.5px
@@ -543,7 +567,7 @@ <h6>Heading 6</h6>
-

Inside a <hgroup> all margin-bottom are collapsed and the :last-child is styled.

+

Inside a <hgroup> all margin-bottom are collapsed and the :last-child is muted.

Heading 2

@@ -656,7 +680,7 @@

Forms

-

All form elements in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewport sizes.

+

All form elements are in pure semantic HTML and fully responsives, allowing forms to scale gracefully across devices and viewports.

Input are width: 100%; by default. You can use .grid inside a form.

All natives form elements are fully customized and themables with CSS variables.

@@ -725,24 +749,28 @@

<fieldset> are unstyled and act as a container for radios and checkboxes providing a consistent margin-bottom for the set.

role="switch" on a type="checkbox" enable a custom switch.

- - + + + + + +
- Gender -
@@ -759,26 +787,26 @@ 
<!-- Select -->
-<label for="country">Country</label>
-<select id="country">
-  <option selected>Choose...</option>
+<label for="fruit">Fruit</label>
+<select id="fruit" required>
+  <option value="" selected>Select a fruit...</option>
   <option>...</option>
 </select>
 
 <!-- Radios -->
 <fieldset>
-  <legend>Gender</legend>
-  <label for="male">
-    <input type="radio" id="male" name="gender" value="male" checked>
-    Male
+  <legend>Size</legend>
+  <label for="small">
+    <input type="radio" id="small" name="size" value="small" checked>
+    Small
   </label>
-  <label for="female">
-    <input type="radio" id="female" name="gender" value="female">
-    Female
+  <label for="medium">
+    <input type="radio" id="medium" name="size" value="medium">
+    Medium
   </label>
-  <label for="other">
-    <input type="radio" id="other" name="gender" value="other">
-    Other
+  <label for="large">
+    <input type="radio" id="large" name="size" value="large">
+    Large
   </label>
 </fieldset>
 
@@ -1015,7 +1043,7 @@
           

             

               
Cards

-              
A flexible container with graceful spacings across devices and viewport sizes.

+              
A flexible container with graceful spacings across devices and viewports.

             

             

               I'm a card!
@@ -1023,11 +1051,13 @@
             
<article>I'm a card!</article>

             
You can use <header> and footer <footer> inside <article>

             

+              
Header

               Body
               
Footer

             

 
 
<article>
+  <header>Header</header>
   Body
   <footer>Footer</footer>
 </article>

diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js
index 99ea511f..8e7d610d 100644
--- a/docs/js/pico.docs.js
+++ b/docs/js/pico.docs.js
@@ -2,7 +2,7 @@
  * Add some magic to Pico docs
  *
  * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
+ * Copyright 2019-2021 - Licensed under MIT
  */
 
 // @append src/aside.js
diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js
index bfa9d77a..cfaffb92 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){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
+!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));o.currentTheme=e}var o={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(o.button.element);e.className=o.button.class,document.querySelector(o.target).appendChild(e),a(o.currentTheme);for(var t=document.querySelectorAll(o.selector),r=0;r"+(a+1)+"",r+="  <div>"+(a+1)+"</div>\n";document.querySelector(o.targetGrid).innerHTML=t,document.querySelector(o.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,o={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(o.targetButtons).before(t),document.querySelector(o.selectorAdd).addEventListener("click",function(){o.columnsCurrento.columnsMin&&(o.columnsCurrent--,e(o.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":o(t[600],.125),".c600-outline-dark":o(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 o=document.querySelectorAll(i.selectorButton),n=0;n 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()},o.interval)},!1))}();
\ No newline at end of file
diff --git a/docs/js/src/aside.js b/docs/js/src/aside.js
index 4d367f20..e752ea34 100644
--- a/docs/js/src/aside.js
+++ b/docs/js/src/aside.js
@@ -2,7 +2,7 @@
  * Aside adjustment
  *
  * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
+ * Copyright 2019-2021 - Licensed under MIT
  */
 
 (function() {
diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js
index 6489e986..43620bcb 100644
--- a/docs/js/src/color-picker.js
+++ b/docs/js/src/color-picker.js
@@ -2,7 +2,7 @@
  * Color Picker
  *
  * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
+ * Copyright 2019-2021 - Licensed under MIT
  */
 
 (function() {
@@ -291,19 +291,6 @@
         "a700": "#dd2c00",
         "inverse": "#FFF"
       },
-      /*"brown": {
-        "50": "#efebe9",
-        "100": "#d7ccc8",
-        "200": "#bcaaa4",
-        "300": "#a1887f",
-        "400": "#8d6e63",
-        "500": "#795548",
-        "600": "#6d4c41",
-        "700": "#5d4037",
-        "800": "#4e342e",
-        "900": "#3e2723",
-        "inverse": "#FFF"
-      },*/
       "grey": {
         "50": "#fafafa",
         "100": "#f5f5f5",
@@ -458,7 +445,7 @@
 
     // Update CSS Style
     var generatedStyles = '[data-theme="generated"] {'
-                        +   '--h4:' + data[700] + ';'
+                        +   '--h4-color:' + data[700] + ';'
                         +   '--primary:' + data[600] + ';'
                         +   '--primary-hover:' + data[700] + ';'
                         +   '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
@@ -467,7 +454,7 @@
 
                         + '@media only screen and (prefers-color-scheme: dark) {'
                         +    ':root:not([data-theme="light"]) [data-theme="generated"] {'
-                        +     '--h4:' + data[400] + ';'
+                        +     '--h4-color:' + data[400] + ';'
                         +     '--primary:' + data[600] + ';'
                         +     '--primary-hover:' + data[500] + ';'
                         +     '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@@ -476,7 +463,7 @@
                         + '}'
 
                         + '[data-theme="dark"] [data-theme="generated"] {'
-                        +   '--h4:' + data[500] + ';'
+                        +   '--h4-color:' + data[500] + ';'
                         +   '--primary:' + data[600] + ';'
                         +   '--primary-hover:' + data[500] + ';'
                         +   '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
@@ -484,11 +471,10 @@
                         + '}'
 
                         + '[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);'
+                        +   '--form-element-active-border-color: var(--primary);'
+                        +   '--form-element-focus-color: var(--primary-focus);'
+                        +   '--switch-color: var(--primary-inverse);'
+                        +   '--switch-checked-background-color: var(--primary);'
                         + '}';
 
     // Insert CSS Styles
diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js
index 66d37685..9ace7fdf 100644
--- a/docs/js/src/grid.js
+++ b/docs/js/src/grid.js
@@ -2,7 +2,7 @@
  * Grid Interaction
  *
  * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
+ * Copyright 2019-2021 - Licensed under MIT
  */
 
 (function() {
diff --git a/docs/js/src/scrollspy.js b/docs/js/src/scrollspy.js
index 7a0edfcc..3ba6e3ef 100644
--- a/docs/js/src/scrollspy.js
+++ b/docs/js/src/scrollspy.js
@@ -5,7 +5,7 @@
  * Require `most-visible.js` from https://github.com/andyexeter/most-visible
  *
  * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
+ * Copyright 2019-2021 - Licensed under MIT
  */
 
 (function() {
diff --git a/docs/js/src/theme-switcher.js b/docs/js/src/theme-switcher.js
index 3e7e3a5c..a8a75074 100644
--- a/docs/js/src/theme-switcher.js
+++ b/docs/js/src/theme-switcher.js
@@ -2,7 +2,7 @@
  * Theme Switcher
  *
  * Pico.css - https://picocss.com
- * Copyright 2019 - Licensed under MIT
+ * Copyright 2019-2021 - Licensed under MIT
  */
 
 (function() {
diff --git a/docs/scss/components/_nav.scss b/docs/scss/components/_nav.scss
index 3fdc9b4e..90d424d2 100644
--- a/docs/scss/components/_nav.scss
+++ b/docs/scss/components/_nav.scss
@@ -10,8 +10,8 @@ body > nav {
   right: 0;
   left: 0;
   backdrop-filter: saturate(180%) blur(20px);
-  background-color: var(--nav-background);
-  box-shadow: 0px 1px 0 var(--nav-border);
+  background-color: var(--nav-background-color);
+  box-shadow: 0px 1px 0 var(--nav-border-color);
 
   a {
     border-radius: 0;
@@ -29,10 +29,10 @@ body > nav {
       a {
         width: 3.5rem;
         height: 3.5rem;
-        margin-left: calc(var(--spacing-gutter) * -1);
+        margin-left: calc(var(--spacing) * -1);
         padding: 0;
-        background: var(--h1);
-        color: var(--background);
+        background: var(--h1-color);
+        color: var(--nav-logo-color);
 
         svg {
           height: 3.5rem;
@@ -43,8 +43,8 @@ body > nav {
     // Title
     &:nth-of-type(2) {
       display: none;
-      margin-left: var(--spacing-gutter);
-      color: var(--h1);
+      margin-left: var(--spacing);
+      color: var(--h1-color);
 
       @media (min-width: map-get($breakpoints, "lg")) {
         display: inline;
diff --git a/docs/scss/components/_theme-switcher.scss b/docs/scss/components/_theme-switcher.scss
index d5d4dff2..4924ed6e 100644
--- a/docs/scss/components/_theme-switcher.scss
+++ b/docs/scss/components/_theme-switcher.scss
@@ -4,13 +4,13 @@
 
 .switcher {
   position: fixed;
-  right: calc(var(--spacing-gutter) / 2);
-  bottom: var(--spacing-gutter);
+  right: calc(var(--spacing) / 2);
+  bottom: var(--spacing);
   width: auto;
   margin-bottom: 0;
   padding: .75rem;
   border-radius: 2rem;
-  box-shadow: var(--card-shadow);
+  box-shadow: var(--card-box-shadow);
   line-height: 1;
   text-align: right;
 
@@ -53,18 +53,17 @@
 
     i {
       max-width: 100%;
-      padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);
+      padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);
       transition: max-width var(--transition),
                   padding var(--transition);
     }
   }
 
   &:focus {
-    box-shadow: var(--card-shadow),
-                0 0 0 0.2rem var(--secondary-focus);
+    box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus);
   }
 
   @media (min-width: map-get($breakpoints, "sm")) {
-    right: var(--spacing-gutter);
+    right: var(--spacing);
   }
 }
diff --git a/docs/scss/content/_code.scss b/docs/scss/content/_code.scss
index d818b6d7..e6d1ac97 100644
--- a/docs/scss/content/_code.scss
+++ b/docs/scss/content/_code.scss
@@ -2,40 +2,12 @@
  * Docs: Code
  */
 
-// Custom spacings for 
 (vertically aligned with 
 content)
-pre {
-
-  @if map-get($breakpoints, "sm") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "sm")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
-    }
-  }
-
-  @if map-get($breakpoints, "md") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "md")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
-    }
-  }
-
-  @if map-get($breakpoints, "lg") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "lg")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
-    }
-  }
-
-  @if map-get($breakpoints, "xl") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "xl")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
-    }
-  }
+// Custom spacings for 
 (Horizontally aligned with 
 content)
+section > pre {
+  margin: var(--block-spacing-vertical) 0;
+  padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
+  background-color: var(--card-sectionning-background-color);
+  box-shadow: var(--card-box-shadow);
 }
 
 // Badge for Valid & Invalid code
@@ -57,8 +29,8 @@ pre {
     line-height: 1;
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      top: var(--spacing-gutter);
-      right: var(--spacing-gutter);
+      top: var(--spacing);
+      right: var(--spacing);
     }
   }
 
@@ -71,14 +43,14 @@ pre {
 // Color for Valid & Invalid code
 [data-theme="invalid"] {
   &:before {
-    background: var(--invalid);
+    background: var(--invalid-color);
     content: 'Not so great';
   }
 }
 
 [data-theme="valid"] {
   &:before {
-    background: var(--valid);
+    background: var(--valid-color);
     content: 'Great';
   }
 }
diff --git a/docs/scss/content/_typography.scss b/docs/scss/content/_typography.scss
index 98c9ff8d..54fa21c5 100644
--- a/docs/scss/content/_typography.scss
+++ b/docs/scss/content/_typography.scss
@@ -3,12 +3,12 @@
  */
 
 section > hgroup {
-  margin-bottom: calc(var(--spacing-typography) * 2);
+  margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
 a[role=button] {
-  margin-right: calc(var(--spacing-typography) / 4);
-  margin-bottom: var(--spacing-typography);
+  margin-right: calc(var(--typography-spacing-vertical) / 4);
+  margin-bottom: var(--typography-spacing-vertical);
 }
 
 [role=document] {
diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss
index d8ad9bd1..1c925c30 100644
--- a/docs/scss/layout/_aside.scss
+++ b/docs/scss/layout/_aside.scss
@@ -6,10 +6,10 @@ main > aside {
 
   nav {
     width: 100%;
-    margin-bottom: var(--spacing-block);
+    margin-bottom: var(--block-spacing-vertical);
 
     h1 {
-      margin-bottom: var(--spacing-typography);
+      margin-bottom: calc(var(--typography-spacing-vertical) / 2);
     }
 
     @media (min-width: map-get($breakpoints, "lg")) {
@@ -55,7 +55,7 @@ main > aside {
     border-bottom: none;
 
     summary {
-      color: var(--h3);
+      color: var(--h3-color);
       font-size: 14px;
       font-weight: 300;
       text-transform: uppercase;
@@ -66,7 +66,7 @@ main > aside {
     }
 
     &[open] summary {
-      color: var(--h3);
+      color: var(--h3-color);
     }
   }
 }
diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss
index 265b8d14..7670b248 100644
--- a/docs/scss/layout/_documentation.scss
+++ b/docs/scss/layout/_documentation.scss
@@ -3,8 +3,6 @@
  */
 
 // Docs: Themes
-// ––––––––––––––––––––
-
 #themes {
   button i {
     font-style: normal;
@@ -12,8 +10,6 @@
 }
 
 // Docs: Customization
-// ––––––––––––––––––––
-
 #customization {
 
   figure {
@@ -26,8 +22,8 @@
     @media (min-width: map-get($breakpoints, "sm")) {
       grid-template-columns: repeat(18, 1fr);
       grid-template-rows: 1fr;
-      border-top-right-radius: var(--block-round);
-      border-top-left-radius: var(--block-round);
+      border-top-right-radius: var(--border-radius);
+      border-top-left-radius: var(--border-radius);
     }
 
     ~ article {
@@ -75,14 +71,14 @@
 
 
 // Docs: Grids
-// ––––––––––––––––––––
-
 #grids {
 
+  --grid-spacing-vertical: 1rem;
+
   button {
     display: block;
     width: 100%;
-    margin-bottom: calc(var(--spacing-typography) / 2);
+    margin-bottom: var(--spacing);
 
     @media (min-width: map-get($breakpoints, "sm")) {
       display: inline-block;
@@ -99,14 +95,18 @@
     }
   }
 
-  .grid > * {
-    padding: calc(var(--spacing-gutter) / 2) 0;
-    background: var(--code-background);
-    text-align: center;
+  .grid {
+    > * {
+      padding: calc(var(--spacing) / 2) 0;
+      border-radius: var(--border-radius);
+      background: var(--code-background-color);
+      font-size: 87.5%;
+      text-align: center;
+    }
   }
 
   details {
-    margin-top: calc(var(--spacing-typography) * 2);
+    margin-top: calc(var(--typography-spacing-vertical) * 2);
 
     svg {
       vertical-align: bottom;
@@ -115,8 +115,6 @@
 }
 
 // Docs: Forms
-// ––––––––––––––––––––
-
 #forms div.grid {
   grid-row-gap: 0;
 }
diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss
index 8ae0f61b..3f8a0b0a 100644
--- a/docs/scss/layout/_main.scss
+++ b/docs/scss/layout/_main.scss
@@ -2,71 +2,73 @@
  * Docs: Main (Grid)
  */
 
+// Config
 $navHeight: 3.5rem;
 
+// Main grid
 body > main {
-  padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
 
-  @media (min-width: map-get($breakpoints, "sm")) {
-    padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
+  padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
+
+  @if map-get($breakpoints, "lg") {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+      grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
+      display: grid;
+      grid-template-columns: 200px auto;
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "md")) {
-    padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
+  @if map-get($breakpoints, "xl") {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      --block-spacing-horizontal: calc(var(--spacing) * 2);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "lg")) {
-    grid-column-gap: calc(var(--spacing-gutter) * 4);
-    display: grid;
-    grid-template-columns: 200px auto;
-    padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
-  }
-
-  @media (min-width: map-get($breakpoints, "xl")) {
-    padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
-  }
-
-  > * {
-    min-width: 0; // HACK for childs in overflow
+  > aside,
+  div[role="document"] {
+    min-width: 0;
   }
 }
 
-
 // Anchors hacks for internal links
-// ––––––––––––––––––––
-
 div[role="document"] > section::before {
+
   display: block;
-  height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
-  margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
+  height: calc(2rem + #{$navHeight} - .5rem);
+  margin-top: calc(-2rem - #{$navHeight} + .5rem);
   content: '';
 
-
-  @media (min-width: map-get($breakpoints, "sm")) {
-    height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      height: calc(2.5rem + #{$navHeight} - .5rem);
+      height: calc(-2.5rem - #{$navHeight} + .5rem);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "md")) {
-    height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
+  @if map-get($breakpoints, "md") {
+    @media (min-width: map-get($breakpoints, "md")) {
+      height: calc(3rem + #{$navHeight} - .5rem);
+      margin-top: calc(-3rem - #{$navHeight} + .5rem);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "lg")) {
-    height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
+  @if map-get($breakpoints, "lg") {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      height: calc(3.5rem + #{$navHeight} - .5rem);
+      margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "xl")) {
-    height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
+  @if map-get($breakpoints, "xl") {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      height: calc(4rem + #{$navHeight} - .5rem);
+      margin-top: calc(-4rem - #{$navHeight} + .5rem);
+    }
   }
 }
 
-
 // External links
-// ––––––––––––––––––––
-
 div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
   display: inline-block;
   width: 1rem;
@@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
   content: '';
 }
 
-
-// Form grid
-// ––––––––––––––––––––
-
-form.grid {
-  > input:not([type=checkbox]):not([type=radio]),
-  > button {
-    margin-bottom: 0;
-  }
-}
-
-
 // Embedded SVG
-// ––––––––––––––––––––
 svg {
   height: 1rem;
 }
diff --git a/docs/scss/themes/docs/_dark.scss b/docs/scss/themes/docs/_dark.scss
index cb3e0e3d..66483737 100644
--- a/docs/scss/themes/docs/_dark.scss
+++ b/docs/scss/themes/docs/_dark.scss
@@ -2,8 +2,11 @@
 // Automatically enabled if user has Dark mode enabled
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --nav-background: #{rgba(darken($grey-900, 6%), .8)};
-    --nav-border:     #{rgba($grey-500, .2)};
+    --invalid-color: #{rgba($red-900, .5)};
+    --valid-color: #{rgba($green-800, .5)};
+    --nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
+    --nav-border-color: #{rgba($grey-500, .2)};
+    --nav-logo-color: #{mix($black, $grey-900)};
   }
 }
 
@@ -12,6 +15,9 @@
 // Dark theme (Forced) [Additions for docs]
 // Enabled if forced with data-theme="dark"
 [data-theme="dark"] {
+  --invalid-color: #{rgba($red-900, .5)};
+  --valid-color: #{rgba($green-800, .5)};
   --nav-background: #{rgba(darken($grey-900, 6%), .8)};
-  --nav-border:     #{rgba($grey-500, .2)};
+  --nav-border-color: #{rgba($grey-500, .2)};
+  --nav-logo-color: #{mix($black, $grey-900)};
 }
diff --git a/docs/scss/themes/docs/_icons.scss b/docs/scss/themes/docs/_icons.scss
index 1e297bb3..1d15441d 100644
--- a/docs/scss/themes/docs/_icons.scss
+++ b/docs/scss/themes/docs/_icons.scss
@@ -1,6 +1,5 @@
 // Icons
 // Source: https://feathericons.com/
-
 :root {
   --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   --icon-check:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
diff --git a/docs/scss/themes/docs/_light.scss b/docs/scss/themes/docs/_light.scss
index f331a228..4c2f7ee5 100644
--- a/docs/scss/themes/docs/_light.scss
+++ b/docs/scss/themes/docs/_light.scss
@@ -2,6 +2,9 @@
 // Can be forced with data-theme="light"
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --nav-background: #{rgba($white, .7)};
-  --nav-border:     #{rgba($grey-500, .2)};
+  --invalid-color: #{$red-800};
+  --valid-color: #{$green-700};
+  --nav-background-color: #{rgba($white, .7)};
+  --nav-border-color: #{rgba($grey-500, .2)};
+  --nav-logo-color: #{$white};
 }
diff --git a/package.json b/package.json
index fd0858bc..3752e6d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@picocss/pico",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Graceful & Minimal CSS design system in pure semantic HTML",
   "author": "Lucas Larroche",
   "main": "css/pico.min.css",
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 779a4396..98868f54 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -7,7 +7,7 @@ $enable-semantic-container: false !default;
 // Enable .container and .container-fluid
 $enable-class-container: true !default;
 
-// Enable a centered viewport
+// Enable a centered viewport for 
, 
,