diff --git a/README.md b/README.md index f7d74b78..a177bd33 100644 --- a/README.md +++ b/README.md @@ -14,8 +14,11 @@

# 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) -`5.6 KB` minified and gzipped - **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. @@ -27,7 +30,7 @@ There are 3 ways to get started with pico.css: ### Install manually -[Download Pico](https://github.com/picocss/pico/archive/v1.0.5.zip) and link `/css/pico.min.css` in the `` of your website. +[Download Pico](https://github.com/picocss/pico/releases/latest) and link `/css/pico.min.css` in the `` of your website. ```html @@ -83,6 +86,14 @@ npm install @picocss/pico ## Copyright and license - Licensed under the [MIT License](https://github.com/picocss/pico/blob/master/LICENSE.md) -- Openly inspired by [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)), [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)), [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)), [CSS Bed](https://github.com/ubershmekel/cssbed) & [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) - Library icons by [Feather](https://github.com/feathericons/feather) ([MIT](https://github.com/feathericons/feather/blob/master/LICENSE)) - Website icons by [Font Awesome](https://github.com/FortAwesome/Font-Awesome) ([CC BY 4.0](https://fontawesome.com/license/free)) + +Openly inspired by: + +- [Bootstrap](https://github.com/twbs/bootstrap) ([MIT](https://github.com/twbs/bootstrap/blob/master/LICENSE)) +- [Spectre](https://github.com/picturepan2/spectre) ([MIT](https://github.com/picturepan2/spectre/blob/master/LICENSE)) +- [Wing](https://github.com/kbrsh/wing/) ([MIT](https://github.com/kbrsh/wing/blob/master/LICENSE)) +- [CSS Bed](https://github.com/ubershmekel/cssbed) +- [Normalize](https://github.com/necolas/normalize.css/) ([MIT](https://github.com/necolas/normalize.css/blob/master/LICENSE.md)) +- [Sanitize](https://csstools.github.io/sanitize.css/) ([CC0 1.0](https://github.com/csstools/sanitize.css/blob/master/LICENSE.md)) diff --git a/css/pico.classless.css b/css/pico.classless.css index 24da6b6a..54e0d14f 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -1,5 +1,5 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ /** @@ -155,16 +155,26 @@ box-sizing: border-box; } +::before, +::after { + 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 1.5; text-rendering: optimizeLegibility; + cursor: default; } @media (min-width: 576px) { @@ -320,15 +330,19 @@ sup { top: -0.5rem; } -img { - max-width: 100%; - height: auto; - border-style: none; +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; } -svg, -img { - vertical-align: text-bottom; +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } address, @@ -411,6 +425,84 @@ h6 { font-size: 1rem; } +address ~ h1, +blockquote ~ h1, +dl ~ h1, +figure ~ h1, +form ~ h1, +ol ~ h1, +p ~ h1, +pre ~ h1, +table ~ h1, +ul ~ h1 { + margin-top: 3rem; +} + +address ~ h2, +blockquote ~ h2, +dl ~ h2, +figure ~ h2, +form ~ h2, +ol ~ h2, +p ~ h2, +pre ~ h2, +table ~ h2, +ul ~ h2 { + margin-top: 2.625rem; +} + +address ~ h3, +blockquote ~ h3, +dl ~ h3, +figure ~ h3, +form ~ h3, +ol ~ h3, +p ~ h3, +pre ~ h3, +table ~ h3, +ul ~ h3 { + margin-top: 2.25rem; +} + +address ~ h4, +blockquote ~ h4, +dl ~ h4, +figure ~ h4, +form ~ h4, +ol ~ h4, +p ~ h4, +pre ~ h4, +table ~ h4, +ul ~ h4 { + margin-top: 1.875rem; +} + +address ~ h5, +blockquote ~ h5, +dl ~ h5, +figure ~ h5, +form ~ h5, +ol ~ h5, +p ~ h5, +pre ~ h5, +table ~ h5, +ul ~ h5 { + margin-top: 1.6875rem; +} + +address ~ h6, +blockquote ~ h6, +dl ~ h6, +figure ~ h6, +form ~ h6, +ol ~ h6, +p ~ h6, +pre ~ h6, +table ~ h6, +ul ~ h6 { + margin-top: 1.5rem; +} + hgroup { margin-bottom: 1.5rem; } @@ -509,6 +601,46 @@ del { background-color: var(--primary-focus); } +/** + * Embedded content + */ +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; +} + /** * Form elements */ @@ -519,6 +651,7 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } @@ -539,7 +672,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -547,7 +683,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -565,6 +702,29 @@ textarea { 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="color"], +[type="range"] { + padding: 0; + border-width: 0; +} + fieldset { margin: 0; margin-bottom: 1.5rem; @@ -603,9 +763,11 @@ textarea { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -input::placeholder, +input::placeholder, input::-webkit-input-placeholder, select::placeholder, -textarea::placeholder { +select::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } @@ -664,8 +826,8 @@ select::-ms-expand { background-color: transparent; } -select:not([multiple]) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' 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"); +select:not([multiple]):not([size]) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -808,8 +970,8 @@ a[role="button"] { button, input[type="submit"], a[role="button"] { - border: 1px solid transparent; padding: 0.75rem 1rem; + border: 1px solid transparent; border-radius: 0.25rem; outline: none; background-color: var(--primary); @@ -855,7 +1017,10 @@ a[role="button"][disabled] { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -863,9 +1028,9 @@ td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--table-border); color: var(--muted-text); + font-size: 0.875rem; font-weight: 400; text-align: left; - font-size: 0.875rem; } th, @@ -890,10 +1055,15 @@ pre, code, kbd, samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; } +pre { + -ms-overflow-style: scrollbar; + overflow: auto; +} + pre, code, kbd { @@ -901,7 +1071,7 @@ kbd { color: var(--code-color-1); font-size: 85%; font-weight: 400; - line-height: 1; + line-height: initial; } @media (min-width: 576px) { @@ -985,6 +1155,43 @@ kbd { font-weight: bolder; } +/** + * Accessibility & User interaction + */ +[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; +} + +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; +} + /** * Miscs */ @@ -997,6 +1204,7 @@ hr { } progress { + display: inline-block; vertical-align: baseline; } @@ -1005,6 +1213,32 @@ 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; +} + /** * Accordion (
) * Inspiration: https://codepen.io/koca/pen/RyeLLV @@ -1017,9 +1251,9 @@ details { } details summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; } details summary::-webkit-details-marker { @@ -1040,7 +1274,7 @@ details summary::after { height: 1rem; float: right; transform: rotate(-90deg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data: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.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"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; @@ -1246,6 +1480,7 @@ nav { justify-content: space-between; } +nav ol, nav ul { align-items: center; margin-bottom: 0; @@ -1253,10 +1488,12 @@ nav ul { list-style: none; } +nav ol:first-of-type, nav ul:first-of-type { margin-left: -0.5rem; } +nav ol:last-of-type, nav ul:last-of-type { margin-right: -0.5rem; } @@ -1284,6 +1521,7 @@ nav a:hover, nav a:active, nav a:focus { } aside nav, +aside ol, aside ul, aside li { display: block; @@ -1349,3 +1587,20 @@ aside li a { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; } + +/** + * Reduce Motion Features + */ +@media (prefers-reduced-motion: reduce) { + *, + ::before, + ::after { + background-attachment: initial; + animation-duration: 1ms; + animation-delay: -1ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-delay: 0s; + transition-duration: 0s; + } +} diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index dd4f6c4a..f5ec9027 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-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}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{border:1px solid transparent;padding:0.75rem 1rem;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=color],[type=range]{padding:0;border-width:0}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:-0.5rem}nav ol:last-of-type,nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial;animation-duration:1ms;animation-delay:-1ms;animation-iteration-count:1;scroll-behavior:auto;transition-delay:0s;transition-duration:0s}} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index dd0c5d98..d380420d 100644 --- a/css/pico.css +++ b/css/pico.css @@ -1,5 +1,5 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ /** @@ -155,16 +155,26 @@ box-sizing: border-box; } +::before, +::after { + 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 1.5; text-rendering: optimizeLegibility; + cursor: default; } @media (min-width: 576px) { @@ -259,9 +269,9 @@ body > footer { @media (min-width: 576px) { .container { + max-width: 510px; padding-right: 0; padding-left: 0; - max-width: 510px; } } @@ -376,15 +386,19 @@ sup { top: -0.5rem; } -img { - max-width: 100%; - height: auto; - border-style: none; +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; } -svg, -img { - vertical-align: text-bottom; +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } address, @@ -494,6 +508,84 @@ h6 { font-size: 1rem; } +address ~ h1, +blockquote ~ h1, +dl ~ h1, +figure ~ h1, +form ~ h1, +ol ~ h1, +p ~ h1, +pre ~ h1, +table ~ h1, +ul ~ h1 { + margin-top: 3rem; +} + +address ~ h2, +blockquote ~ h2, +dl ~ h2, +figure ~ h2, +form ~ h2, +ol ~ h2, +p ~ h2, +pre ~ h2, +table ~ h2, +ul ~ h2 { + margin-top: 2.625rem; +} + +address ~ h3, +blockquote ~ h3, +dl ~ h3, +figure ~ h3, +form ~ h3, +ol ~ h3, +p ~ h3, +pre ~ h3, +table ~ h3, +ul ~ h3 { + margin-top: 2.25rem; +} + +address ~ h4, +blockquote ~ h4, +dl ~ h4, +figure ~ h4, +form ~ h4, +ol ~ h4, +p ~ h4, +pre ~ h4, +table ~ h4, +ul ~ h4 { + margin-top: 1.875rem; +} + +address ~ h5, +blockquote ~ h5, +dl ~ h5, +figure ~ h5, +form ~ h5, +ol ~ h5, +p ~ h5, +pre ~ h5, +table ~ h5, +ul ~ h5 { + margin-top: 1.6875rem; +} + +address ~ h6, +blockquote ~ h6, +dl ~ h6, +figure ~ h6, +form ~ h6, +ol ~ h6, +p ~ h6, +pre ~ h6, +table ~ h6, +ul ~ h6 { + margin-top: 1.5rem; +} + hgroup { margin-bottom: 1.5rem; } @@ -592,6 +684,46 @@ del { background-color: var(--primary-focus); } +/** + * Embedded content + */ +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; +} + /** * Form elements */ @@ -602,6 +734,7 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } @@ -622,7 +755,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -630,7 +766,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -648,6 +785,29 @@ textarea { 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="color"], +[type="range"] { + padding: 0; + border-width: 0; +} + fieldset { margin: 0; margin-bottom: 1.5rem; @@ -686,9 +846,11 @@ textarea { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -input::placeholder, +input::placeholder, input::-webkit-input-placeholder, select::placeholder, -textarea::placeholder { +select::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } @@ -753,14 +915,14 @@ input:not([type="checkbox"]):not([type="radio"]).valid, select.valid, textarea.valid { border-bottom: 1px solid var(--valid); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data: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.99)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } input:not([type="checkbox"]):not([type="radio"]).invalid, select.invalid, textarea.invalid { border-bottom: 1px solid var(--invalid); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + background-image: url("data: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.99)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } input[type="color"] { @@ -772,8 +934,8 @@ select::-ms-expand { background-color: transparent; } -select:not([multiple]) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' 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"); +select:not([multiple]):not([size]) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -916,8 +1078,8 @@ a[role="button"] { button, input[type="submit"], a[role="button"] { - border: 1px solid transparent; padding: 0.75rem 1rem; + border: 1px solid transparent; border-radius: 0.25rem; outline: none; background-color: var(--primary); @@ -1101,7 +1263,10 @@ a.outline.contrast[role="button"]:focus { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -1109,9 +1274,9 @@ td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--table-border); color: var(--muted-text); + font-size: 0.875rem; font-weight: 400; text-align: left; - font-size: 0.875rem; } th, @@ -1136,10 +1301,15 @@ pre, code, kbd, samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; } +pre { + -ms-overflow-style: scrollbar; + overflow: auto; +} + pre, code, kbd { @@ -1147,7 +1317,7 @@ kbd { color: var(--code-color-1); font-size: 85%; font-weight: 400; - line-height: 1; + line-height: initial; } @media (min-width: 576px) { @@ -1231,6 +1401,43 @@ kbd { font-weight: bolder; } +/** + * Accessibility & User interaction + */ +[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; +} + +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; +} + /** * Miscs */ @@ -1243,6 +1450,7 @@ hr { } progress { + display: inline-block; vertical-align: baseline; } @@ -1251,6 +1459,32 @@ 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; +} + /** * Accordion (
) * Inspiration: https://codepen.io/koca/pen/RyeLLV @@ -1263,9 +1497,9 @@ details { } details summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; } details summary::-webkit-details-marker { @@ -1286,7 +1520,7 @@ details summary::after { height: 1rem; float: right; transform: rotate(-90deg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data: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.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"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; @@ -1492,6 +1726,7 @@ nav { justify-content: space-between; } +nav ol, nav ul { align-items: center; margin-bottom: 0; @@ -1499,10 +1734,12 @@ nav ul { list-style: none; } +nav ol:first-of-type, nav ul:first-of-type { margin-left: -0.5rem; } +nav ol:last-of-type, nav ul:last-of-type { margin-right: -0.5rem; } @@ -1534,6 +1771,7 @@ nav a.contrast:not([role="button"]), nav a.contrast:not([role="button"]):hover, } aside nav, +aside ol, aside ul, aside li { display: block; @@ -1599,3 +1837,20 @@ aside li a { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; } + +/** + * Reduce Motion Features + */ +@media (prefers-reduced-motion: reduce) { + *, + ::before, + ::after { + background-attachment: initial; + animation-duration: 1ms; + animation-delay: -1ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-delay: 0s; + transition-duration: 0s; + } +} diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index 52bc2fcd..2f6ca04c 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -1,5 +1,5 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ /** @@ -155,16 +155,26 @@ box-sizing: border-box; } +::before, +::after { + 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 1.5; text-rendering: optimizeLegibility; + cursor: default; } @media (min-width: 576px) { @@ -316,15 +326,19 @@ sup { top: -0.5rem; } -img { - max-width: 100%; - height: auto; - border-style: none; +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; } -svg, -img { - vertical-align: text-bottom; +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } address, @@ -407,6 +421,84 @@ h6 { font-size: 1rem; } +address ~ h1, +blockquote ~ h1, +dl ~ h1, +figure ~ h1, +form ~ h1, +ol ~ h1, +p ~ h1, +pre ~ h1, +table ~ h1, +ul ~ h1 { + margin-top: 3rem; +} + +address ~ h2, +blockquote ~ h2, +dl ~ h2, +figure ~ h2, +form ~ h2, +ol ~ h2, +p ~ h2, +pre ~ h2, +table ~ h2, +ul ~ h2 { + margin-top: 2.625rem; +} + +address ~ h3, +blockquote ~ h3, +dl ~ h3, +figure ~ h3, +form ~ h3, +ol ~ h3, +p ~ h3, +pre ~ h3, +table ~ h3, +ul ~ h3 { + margin-top: 2.25rem; +} + +address ~ h4, +blockquote ~ h4, +dl ~ h4, +figure ~ h4, +form ~ h4, +ol ~ h4, +p ~ h4, +pre ~ h4, +table ~ h4, +ul ~ h4 { + margin-top: 1.875rem; +} + +address ~ h5, +blockquote ~ h5, +dl ~ h5, +figure ~ h5, +form ~ h5, +ol ~ h5, +p ~ h5, +pre ~ h5, +table ~ h5, +ul ~ h5 { + margin-top: 1.6875rem; +} + +address ~ h6, +blockquote ~ h6, +dl ~ h6, +figure ~ h6, +form ~ h6, +ol ~ h6, +p ~ h6, +pre ~ h6, +table ~ h6, +ul ~ h6 { + margin-top: 1.5rem; +} + hgroup { margin-bottom: 1.5rem; } @@ -505,6 +597,46 @@ del { background-color: var(--primary-focus); } +/** + * Embedded content + */ +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; +} + /** * Form elements */ @@ -515,6 +647,7 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } @@ -535,7 +668,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -543,7 +679,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -561,6 +698,29 @@ textarea { 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="color"], +[type="range"] { + padding: 0; + border-width: 0; +} + fieldset { margin: 0; margin-bottom: 1.5rem; @@ -599,9 +759,11 @@ textarea { transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -input::placeholder, +input::placeholder, input::-webkit-input-placeholder, select::placeholder, -textarea::placeholder { +select::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } @@ -660,8 +822,8 @@ select::-ms-expand { background-color: transparent; } -select:not([multiple]) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' 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"); +select:not([multiple]):not([size]) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -804,8 +966,8 @@ a[role="button"] { button, input[type="submit"], a[role="button"] { - border: 1px solid transparent; padding: 0.75rem 1rem; + border: 1px solid transparent; border-radius: 0.25rem; outline: none; background-color: var(--primary); @@ -851,7 +1013,10 @@ a[role="button"][disabled] { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -859,9 +1024,9 @@ td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--table-border); color: var(--muted-text); + font-size: 0.875rem; font-weight: 400; text-align: left; - font-size: 0.875rem; } th, @@ -886,10 +1051,15 @@ pre, code, kbd, samp { - font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 1rem; } +pre { + -ms-overflow-style: scrollbar; + overflow: auto; +} + pre, code, kbd { @@ -897,7 +1067,7 @@ kbd { color: var(--code-color-1); font-size: 85%; font-weight: 400; - line-height: 1; + line-height: initial; } @media (min-width: 576px) { @@ -981,6 +1151,43 @@ kbd { font-weight: bolder; } +/** + * Accessibility & User interaction + */ +[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; +} + +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; +} + /** * Miscs */ @@ -993,6 +1200,7 @@ hr { } progress { + display: inline-block; vertical-align: baseline; } @@ -1001,6 +1209,32 @@ 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; +} + /** * Accordion (
) * Inspiration: https://codepen.io/koca/pen/RyeLLV @@ -1013,9 +1247,9 @@ details { } details summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; } details summary::-webkit-details-marker { @@ -1036,7 +1270,7 @@ details summary::after { height: 1rem; float: right; transform: rotate(-90deg); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data: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.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"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; @@ -1242,6 +1476,7 @@ nav { justify-content: space-between; } +nav ol, nav ul { align-items: center; margin-bottom: 0; @@ -1249,10 +1484,12 @@ nav ul { list-style: none; } +nav ol:first-of-type, nav ul:first-of-type { margin-left: -0.5rem; } +nav ol:last-of-type, nav ul:last-of-type { margin-right: -0.5rem; } @@ -1280,6 +1517,7 @@ nav a:hover, nav a:active, nav a:focus { } aside nav, +aside ol, aside ul, aside li { display: block; @@ -1345,3 +1583,20 @@ aside li a { [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after { opacity: 1; } + +/** + * Reduce Motion Features + */ +@media (prefers-reduced-motion: reduce) { + *, + ::before, + ::after { + background-attachment: initial; + animation-duration: 1ms; + animation-delay: -1ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-delay: 0s; + transition-duration: 0s; + } +} diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 7cb090cc..de2d8ff1 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-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}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{border:1px solid transparent;padding:0.75rem 1rem;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=color],[type=range]{padding:0;border-width:0}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:-0.5rem}nav ol:last-of-type,nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial;animation-duration:1ms;animation-delay:-1ms;animation-iteration-count:1;scroll-behavior:auto;transition-delay:0s;transition-duration:0s}} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index 6889e1eb..cb480bc5 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-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}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio]).invalid,input:not([type=checkbox]):not([type=radio]).valid,select.invalid,select.valid,textarea.invalid,textarea.valid{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio]).valid,select.valid,textarea.valid{border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio]).invalid,select.invalid,textarea.invalid{border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{border:1px solid transparent;padding:0.75rem 1rem;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a.secondary[role=button],button.secondary,input.secondary[type=submit],input[type=reset]{background-color:var(--secondary);color:var(--secondary-inverse)}a.secondary[role=button]:active,a.secondary[role=button]:focus,a.secondary[role=button]:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input.secondary[type=submit]:active,input.secondary[type=submit]:focus,input.secondary[type=submit]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background-color:var(--secondary-hover)}a.secondary[role=button]:focus,button.secondary:focus,input.secondary[type=submit]:focus,input[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.contrast[role=button],button.contrast,input.contrast[type=reset],input.contrast[type=submit]{background-color:var(--contrast);color:var(--contrast-inverse)}a.contrast[role=button]:active,a.contrast[role=button]:focus,a.contrast[role=button]:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input.contrast[type=reset]:active,input.contrast[type=reset]:focus,input.contrast[type=reset]:hover,input.contrast[type=submit]:active,input.contrast[type=submit]:focus,input.contrast[type=submit]:hover{background-color:var(--contrast-hover)}a.contrast[role=button]:focus,button.contrast:focus,input.contrast[type=reset]:focus,input.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline.contrast[role=button],button.outline.contrast,input.outline.contrast[type=reset],input.outline.contrast[type=submit]{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a.outline.contrast[role=button]:active,a.outline.contrast[role=button]:focus,a.outline.contrast[role=button]:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input.outline.contrast[type=reset]:active,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=reset]:hover,input.outline.contrast[type=submit]:active,input.outline.contrast[type=submit]:focus,input.outline.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a.outline.contrast[role=button]:focus,button.outline.contrast:focus,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]),nav a.contrast:not([role=button]):active,nav a.contrast:not([role=button]):focus,nav a.contrast:not([role=button]):hover{box-shadow:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=color],[type=range]{padding:0;border-width:0}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input:not([type=checkbox]):not([type=radio]).invalid,input:not([type=checkbox]):not([type=radio]).valid,select.invalid,select.valid,textarea.invalid,textarea.valid{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio]).valid,select.valid,textarea.valid{border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.99)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio]).invalid,select.invalid,textarea.invalid{border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.99)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a.secondary[role=button],button.secondary,input.secondary[type=submit],input[type=reset]{background-color:var(--secondary);color:var(--secondary-inverse)}a.secondary[role=button]:active,a.secondary[role=button]:focus,a.secondary[role=button]:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input.secondary[type=submit]:active,input.secondary[type=submit]:focus,input.secondary[type=submit]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{background-color:var(--secondary-hover)}a.secondary[role=button]:focus,button.secondary:focus,input.secondary[type=submit]:focus,input[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.contrast[role=button],button.contrast,input.contrast[type=reset],input.contrast[type=submit]{background-color:var(--contrast);color:var(--contrast-inverse)}a.contrast[role=button]:active,a.contrast[role=button]:focus,a.contrast[role=button]:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input.contrast[type=reset]:active,input.contrast[type=reset]:focus,input.contrast[type=reset]:hover,input.contrast[type=submit]:active,input.contrast[type=submit]:focus,input.contrast[type=submit]:hover{background-color:var(--contrast-hover)}a.contrast[role=button]:focus,button.contrast:focus,input.contrast[type=reset]:focus,input.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline.contrast[role=button],button.outline.contrast,input.outline.contrast[type=reset],input.outline.contrast[type=submit]{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a.outline.contrast[role=button]:active,a.outline.contrast[role=button]:focus,a.outline.contrast[role=button]:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input.outline.contrast[type=reset]:active,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=reset]:hover,input.outline.contrast[type=submit]:active,input.outline.contrast[type=submit]:focus,input.outline.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a.outline.contrast[role=button]:focus,button.outline.contrast:focus,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:-0.5rem}nav ol:last-of-type,nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]),nav a.contrast:not([role=button]):active,nav a.contrast:not([role=button]):focus,nav a.contrast:not([role=button]):hover{box-shadow:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial;animation-duration:1ms;animation-delay:-1ms;animation-iteration-count:1;scroll-behavior:auto;transition-delay:0s;transition-duration:0s}} \ No newline at end of file diff --git a/css/pico.slim.css b/css/pico.slim.css index 2bcd4a46..d8e28b3c 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -1,5 +1,5 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT * * Slim version example @@ -158,16 +158,26 @@ box-sizing: border-box; } +::before, +::after { + 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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: 16px; font-weight: 400; line-height: 1.5; text-rendering: optimizeLegibility; + cursor: default; } @media (min-width: 576px) { @@ -230,9 +240,9 @@ body > footer { @media (min-width: 576px) { .container { + max-width: 510px; padding-right: 0; padding-left: 0; - max-width: 510px; } } @@ -315,15 +325,19 @@ sup { top: -0.5rem; } -img { - max-width: 100%; - height: auto; - border-style: none; +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; } -svg, -img { - vertical-align: text-bottom; +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } address, @@ -432,6 +446,84 @@ h6 { font-size: 1rem; } +address ~ h1, +blockquote ~ h1, +dl ~ h1, +figure ~ h1, +form ~ h1, +ol ~ h1, +p ~ h1, +pre ~ h1, +table ~ h1, +ul ~ h1 { + margin-top: 3rem; +} + +address ~ h2, +blockquote ~ h2, +dl ~ h2, +figure ~ h2, +form ~ h2, +ol ~ h2, +p ~ h2, +pre ~ h2, +table ~ h2, +ul ~ h2 { + margin-top: 2.625rem; +} + +address ~ h3, +blockquote ~ h3, +dl ~ h3, +figure ~ h3, +form ~ h3, +ol ~ h3, +p ~ h3, +pre ~ h3, +table ~ h3, +ul ~ h3 { + margin-top: 2.25rem; +} + +address ~ h4, +blockquote ~ h4, +dl ~ h4, +figure ~ h4, +form ~ h4, +ol ~ h4, +p ~ h4, +pre ~ h4, +table ~ h4, +ul ~ h4 { + margin-top: 1.875rem; +} + +address ~ h5, +blockquote ~ h5, +dl ~ h5, +figure ~ h5, +form ~ h5, +ol ~ h5, +p ~ h5, +pre ~ h5, +table ~ h5, +ul ~ h5 { + margin-top: 1.6875rem; +} + +address ~ h6, +blockquote ~ h6, +dl ~ h6, +figure ~ h6, +form ~ h6, +ol ~ h6, +p ~ h6, +pre ~ h6, +table ~ h6, +ul ~ h6 { + margin-top: 1.5rem; +} + hgroup { margin-bottom: 1.5rem; } @@ -530,6 +622,46 @@ del { background-color: var(--primary-focus); } +/** + * Embedded content + */ +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; +} + /** * Form elements */ @@ -540,6 +672,7 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } @@ -560,7 +693,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -568,7 +704,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -586,6 +723,29 @@ textarea { 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="color"], +[type="range"] { + padding: 0; + border-width: 0; +} + fieldset { margin: 0; margin-bottom: 1.5rem; @@ -623,9 +783,11 @@ textarea { vertical-align: middle; } -input::placeholder, +input::placeholder, input::-webkit-input-placeholder, select::placeholder, -textarea::placeholder { +select::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } @@ -684,8 +846,8 @@ select::-ms-expand { background-color: transparent; } -select:not([multiple]) { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' 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"); +select:not([multiple]):not([size]) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -827,8 +989,8 @@ a[role="button"] { button, input[type="submit"], a[role="button"] { - border: 1px solid transparent; padding: 0.75rem 1rem; + border: 1px solid transparent; border-radius: 0.25rem; outline: none; background-color: var(--primary); @@ -873,7 +1035,10 @@ a[role="button"][disabled] { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -881,9 +1046,9 @@ td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--table-border); color: var(--muted-text); + font-size: 0.875rem; font-weight: 400; text-align: left; - font-size: 0.875rem; } th, @@ -900,3 +1065,40 @@ thead td { tbody tr:nth-child(odd) { background-color: var(--table-stripping); } + +/** + * Accessibility & User interaction + */ +[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; +} + +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; +} diff --git a/css/pico.slim.min.css b/css/pico.slim.min.css index 2631c3a9..7df2b9dc 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -1,7 +1,7 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT * * Slim version example * You can export only the modules you need - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-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}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:''}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{border:1px solid transparent;padding:0.75rem 1rem;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=color],[type=range]{padding:0;border-width:0}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}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],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.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");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1em;height:1em;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;font-size:1.125rem;vertical-align:middle;cursor:pointer;transition:none}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:1.85em;height:1em;border:2px solid var(--input-border);border-radius:1em;background-color:var(--input-border);line-height:1em}[type=checkbox][role=switch]:before{display:block;width:calc(1em - 4px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:''}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(0.925em - 2px)}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}[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/docs/index.html b/docs/index.html index 23491509..457c5508 100644 --- a/docs/index.html +++ b/docs/index.html @@ -101,7 +101,7 @@

There are 3 ways to get started with pico.css:

Install manually

- Download Pico and link /css/pico.min.css in the <head> of your website. +

Download Pico and link /css/pico.min.css in the <head> of your website.

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

Install from CDN

Alternatively, you can use the unpkg CDN to link pico.css

@@ -365,6 +365,8 @@ Heading Heading Heading + Heading + Heading @@ -377,6 +379,8 @@ Cell Cell Cell + Cell + Cell 2 @@ -387,6 +391,8 @@ Cell Cell Cell + Cell + Cell 3 @@ -397,6 +403,8 @@ Cell Cell Cell + Cell + Cell @@ -945,7 +953,7 @@

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

diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js index 6a717cb1..99ea511f 100644 --- a/docs/js/pico.docs.js +++ b/docs/js/pico.docs.js @@ -5,9 +5,9 @@ * Copyright 2019 - Licensed under MIT */ -// @prepros-append src/aside.js -// @prepros-append src/theme-switcher.js -// @prepros-append src/grid.js -// @prepros-append src/color-picker.js -// @prepros-append src/most-visible.js -// @prepros-append src/scrollspy.js +// @append src/aside.js +// @append src/theme-switcher.js +// @append src/grid.js +// @append src/color-picker.js +// @append src/most-visible.js +// @append src/scrollspy.js diff --git a/package.json b/package.json index 566da84c..e6947ac9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@picocss/pico", - "version": "1.0.5", + "version": "1.0.6", "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 6b0815eb..6ad0c1c7 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -54,14 +54,38 @@ $spacing-input-button: .75rem 1rem !default; // –––––––––––––––––––– // Sans serif native font stack -$sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, - "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol", "Noto Color Emoji" !default; +// Source: github.com/csstools/sanitize.css/blob/master/typography.css +$sans-serif: + system-ui, + -apple-system, // macOS 10.11-10.12 + "Segoe UI", // Windows 6+ + "Roboto", // Android 4+ + "Ubuntu", // Ubuntu 10.10+ + "Cantarell", // Gnome 3+ + "Noto Sans", // KDE Plasma 5+ + sans-serif, // Fallback + "Apple Color Emoji", // macOS emoji + "Segoe UI Emoji", // Windows emoji + "Segoe UI Symbol", // Windows emoji + "Noto Color Emoji" // Linux emoji + !default; // Monospace native font stack -$monospace: SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New", monospace !default; +// // Source: github.com/csstools/sanitize.css/blob/master/typography.css +$monospace: + "Menlo", // macOS 10.10+ + "Consolas", // Windows 6+ + "Roboto Mono", // Android 4+ + "Ubuntu Monospace", // Ubuntu 10.10+ + "Noto Mono", // KDE Plasma 5+ + "Oxygen Mono", // KDE Plasma 4+ + "Liberation Mono", // Linux/OpenOffice fallback + monospace, // Fallback + "Apple Color Emoji", // macOS emoji + "Segoe UI Emoji", // Windows emoji + "Segoe UI Symbol", // Windows emoji + "Noto Color Emoji" // Linux emoji + !default; $line-height: 1.5 !default; $text-weight: 400 !default; diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index b687322c..78036c63 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -10,9 +10,9 @@ details { border-bottom: 1px solid var(--muted-border); summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; // Reset marker &::-webkit-details-marker { @@ -27,14 +27,13 @@ details { // Marker &::after { - $caret-icon-color: "808080"; // Without '#' !important display: inline-block; width: 1rem; height: 1rem; float: right; transform: rotate(-90deg); // Source: https://feathericons.com/ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data: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, .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"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; diff --git a/scss/components/_nav.scss b/scss/components/_nav.scss index 7e9f5537..81e16db9 100644 --- a/scss/components/_nav.scss +++ b/scss/components/_nav.scss @@ -11,6 +11,7 @@ nav ul { nav { justify-content: space-between; + ol, ul { align-items: center; margin-bottom: 0; @@ -65,6 +66,7 @@ nav { aside { nav, + ol, ul, li { display: block; diff --git a/scss/components/_tooltip.scss b/scss/components/_tooltip.scss index 3e3071a7..bac617ef 100644 --- a/scss/components/_tooltip.scss +++ b/scss/components/_tooltip.scss @@ -54,6 +54,5 @@ &::after { opacity: 1; } - } } diff --git a/scss/content/_accessibility.scss b/scss/content/_accessibility.scss new file mode 100644 index 00000000..188b3082 --- /dev/null +++ b/scss/content/_accessibility.scss @@ -0,0 +1,51 @@ +/** + * Accessibility & User interaction + */ + + +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css +// –––––––––––––––––––– + +// Accessibility + +// Change the cursor on busy elements in all browsers (opinionated) +[aria-busy="true"] { + cursor: progress; +} + +// Change the cursor on control elements in all browsers (opinionated) +[aria-controls] { + cursor: pointer; +} + +// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated) +[aria-disabled="true"], +[disabled] { + cursor: not-allowed; +} + +// Change the display on visually hidden accessible elements in all browsers (opinionated) +[aria-hidden="false"][hidden] { + display: initial; +} + +[aria-hidden="false"][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + position: absolute; +} + +// User interaction +// Remove the tapping delay in IE 10 +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; +} diff --git a/scss/content/_button.scss b/scss/content/_button.scss index e4cd815a..c99bc3b4 100644 --- a/scss/content/_button.scss +++ b/scss/content/_button.scss @@ -3,11 +3,12 @@ */ -// Reboot -// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// 1. Change the font styles in all browsers. +// 1. Change the font styles in all browsers // 2. Remove the margin in Firefox and Safari // 3. Show the overflow in Edge button { @@ -17,7 +18,7 @@ button { text-transform: none; // 1 } -// Correct the inability to style clickable types in iOS and Safari. +// Correct the inability to style clickable types in iOS and Safari button, [type="button"], [type="reset"], @@ -25,7 +26,7 @@ button, -webkit-appearance: button; } -// Remove the inner border and padding in Firefox. +// Remove the inner border and padding in Firefox button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, @@ -52,8 +53,8 @@ a[role="button"] { button, input[type="submit"], a[role="button"] { - border: 1px solid transparent; padding: $spacing-input-button; + border: 1px solid transparent; border-radius: $round; outline: none; background-color: var(--primary); diff --git a/scss/content/_code.scss b/scss/content/_code.scss index fa1061a4..578995cb 100644 --- a/scss/content/_code.scss +++ b/scss/content/_code.scss @@ -3,11 +3,13 @@ */ -// Reboot +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// 1. Correct the inheritance and scaling of font size in all browsers. -// 2. Correct the odd `em` font sizing in all browsers. +// 1. Correct the inheritance and scaling of font size in all browsers +// 2. Correct the odd `em` font sizing in all browsers pre, code, kbd, @@ -16,6 +18,12 @@ samp { font-size: 1rem; // 2 } +// Prevent overflow of the container in all browsers (opinionated) +pre { + -ms-overflow-style: scrollbar; + overflow: auto; +} + // Pico // –––––––––––––––––––– @@ -27,7 +35,7 @@ kbd { color: var(--code-color-1); font-size: 85%; font-weight: 400; - line-height: 1; + line-height: initial; @if map-get($breakpoints, "sm") and $enable-responsive-typography { @media (min-width: map-get($breakpoints, "sm")) { diff --git a/scss/content/_embedded.scss b/scss/content/_embedded.scss new file mode 100644 index 00000000..50bf7820 --- /dev/null +++ b/scss/content/_embedded.scss @@ -0,0 +1,54 @@ +/** + * Embedded content + */ + + +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css +// –––––––––––––––––––– + +// Change the alignment on media elements in all browsers (opinionated) +audio, +canvas, +iframe, +img, +svg, +video { + vertical-align: middle; +} + +// Add the correct display in IE 9- +audio, +video { + display: inline-block; +} + +// Add the correct display in iOS 4-7 +audio:not([controls]) { + display: none; + height: 0; +} + +// Remove the border on iframes in all browsers (opinionated) +iframe { + border-style: none; +} + +// 1. Remove the border on images inside links in IE 10. +// 2. Responsive by default +img { + max-width: 100%; // 2 + height: auto; // 2 + border-style: none; // 1 +} + +// Change the fill color to match the text color in all browsers (opinionated) +svg:not([fill]) { + fill: currentColor; +} + +// Hide the overflow in IE +svg:not(:root) { + overflow: hidden; +} diff --git a/scss/content/_form.scss b/scss/content/_form.scss index 15f7e78d..d6d1d08e 100644 --- a/scss/content/_form.scss +++ b/scss/content/_form.scss @@ -3,12 +3,13 @@ */ -// Reboot -// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// 1. Change the font styles in all browsers. -// 2. Remove the margin in Firefox and Safari. +// 1. Change the font styles in all browsers +// 2. Remove the margin in Firefox and Safari input, optgroup, select, @@ -16,6 +17,7 @@ textarea { margin: 0; // 2 font-family: inherit; // 1 font-size: 1rem; // 1 + letter-spacing: inherit; // 2 line-height: $line-height; // 1 } @@ -24,15 +26,15 @@ input { overflow: visible; } -// Remove the inheritance of text transform in Edge, Firefox, and IE. +// Remove the inheritance of text transform in Edge, Firefox, and IE select { text-transform: none; } -// 1. Correct the text wrapping in Edge and IE. -// 2. Correct the color inheritance from `fieldset` elements in IE. +// 1. Correct the text wrapping in Edge and IE +// 2. Correct the color inheritance from `fieldset` elements in IE // 3. Remove the padding so developers are not caught out when they zero out -// `fieldset` elements in all browsers. +// `fieldset` elements in all browsers legend { display: table; // 1 max-width: 100%; // 1 @@ -41,41 +43,75 @@ legend { white-space: normal; // 1 } -// Remove the default vertical scrollbar in IE 10+. +// 1. Remove the margin in Firefox and Safari +// 2. Remove the default vertical scrollbar in IE +// 3. Change the resize direction in all browsers (opinionated) textarea { - overflow: auto; + margin: 0; // 1 + overflow: auto; // 2 + resize: vertical; // 3 + resize: block; // 3 } -// Remove the padding in IE 10. +// Remove the padding in IE 10 [type="checkbox"], [type="radio"] { padding: 0; } -// Correct the cursor style of increment and decrement buttons in Chrome. -[type="number"]::-webkit-inner-spin-button { +// Correct the cursor style of increment and decrement buttons in Safari +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } -// 1. Correct the odd appearance in Chrome and Safari. -// 2. Correct the outline style in Safari. +// 1. Correct the odd appearance in Chrome and Safari +// 2. Correct the outline style in Safari [type="search"] { -webkit-appearance: textfield; // 1 outline-offset: -2px; // 2 } -// Remove the inner padding in Chrome and Safari on macOS. +// Remove the inner padding in Chrome and Safari on macOS [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } -// 1. Correct the inability to style clickable types in iOS and Safari. -// 2. Change font properties to `inherit` in Safari. +// 1. Correct the inability to style clickable types in iOS and Safari +// 2. Change font properties to `inherit` in Safari ::-webkit-file-upload-button { -webkit-appearance: button; // 1 font: inherit; // 2 } +// Remove the inner border and padding of focus outlines in Firefox +::-moz-focus-inner { + padding: 0; + border-style: none; +} + +// Restore the focus outline styles unset by the previous rule in Firefox +:-moz-focusring { + outline: 1px dotted ButtonText; +} + +// Remove the additional :invalid styles in Firefox +:-moz-ui-invalid { + box-shadow: none; +} + +// Change the inconsistent appearance in IE (opinionated) +::-ms-expand { + display: none; +} + +// Remove the border and padding in all browsers (opinionated) +[type="color"], +[type="range"] { + padding: 0; + border-width: 0; +} + // Pico // –––––––––––––––––––– @@ -132,7 +168,8 @@ textarea { box-shadow $transition; } - &::placeholder { + &::placeholder, + &::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } @@ -181,17 +218,15 @@ textarea { } &.valid { - // Source: https://feathericons.com/ - $valid-icon-color: "288a6a"; // Without '#' !important border-bottom: 1px solid var(--valid); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + // Source: https://feathericons.com/ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($green-600, .99)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } &.invalid { - // Source: https://feathericons.com/ - $invalid-icon-color: "b94646"; // Without '#' !important border-bottom: 1px solid var(--invalid); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' 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"); + // Source: https://feathericons.com/ + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($red-700, .99)}' 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"); } } } @@ -210,10 +245,9 @@ select { background-color: transparent; } - &:not([multiple]) { + &:not([multiple]):not([size]) { // Source: https://feathericons.com/ - $caret-icon-color: "808080"; // Without '#' !important - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $caret-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data: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, .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"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; diff --git a/scss/content/_miscs.scss b/scss/content/_miscs.scss index 50793ecb..700811b5 100644 --- a/scss/content/_miscs.scss +++ b/scss/content/_miscs.scss @@ -3,12 +3,13 @@ */ -// Reboot -// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// 1. Add the correct box sizing in Firefox. -// 2. Show the overflow in Edge and IE. +// 1. Add the correct box sizing in Firefox +// 2. Show the overflow in Edge and IE hr { box-sizing: content-box; // 1 height: 0; // 1 @@ -17,13 +18,43 @@ hr { border-top: 1px solid var(--muted-border); } -// Add the correct vertical alignment in Chrome, Firefox, and Opera. +// 1. Add the correct display in Edge 18- and IE +// 2. Add the correct vertical alignment in Chrome, Edge, and Firefox progress { - vertical-align: baseline; + display: inline-block; // 1 + vertical-align: baseline; // 2 } -// Add the correct display in IE 10+. +// Add the correct display in IE 10+ [hidden], template { display: none; } + +// Add the correct styles in Edge 18-, IE, and Safari +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; +} + +// Add the correct display in IE 9- +canvas { + display: inline-block; +} diff --git a/scss/content/_reduce-motion.scss b/scss/content/_reduce-motion.scss new file mode 100644 index 00000000..8f39f9b8 --- /dev/null +++ b/scss/content/_reduce-motion.scss @@ -0,0 +1,29 @@ +@if $enable-transitions { + + /** + * Reduce Motion Features + */ + + + // Based on : + // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css + // –––––––––––––––––––– + + // 1. Remove animations when motion is reduced (opinionated) + // 2. Remove fixed background attachments when motion is reduced (opinionated) + // 3. Remove timed scrolling behaviors when motion is reduced (opinionated) + // 4. Remove transitions when motion is reduced (opinionated) + @media (prefers-reduced-motion: reduce) { + *, + ::before, + ::after { + background-attachment: initial; // 2 + animation-duration: 1ms; // 1 + animation-delay: -1ms; // 1 + animation-iteration-count: 1; // 1 + scroll-behavior: auto; // 3 + transition-delay: 0s; // 4 + transition-duration: 0s; // 4 + } + } +} diff --git a/scss/content/_table.scss b/scss/content/_table.scss index dbba6b6c..65be9418 100644 --- a/scss/content/_table.scss +++ b/scss/content/_table.scss @@ -2,20 +2,36 @@ * Table */ + +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css +// –––––––––––––––––––– + +// 1. Collapse border spacing in all browsers (opinionated). +// 2. Correct table border color inheritance in all Chrome, Edge, and Safari. +// 3. Remove text indentation from table contents in Chrome, Edge, and Safari. table { width: 100%; + border-color: inherit; // 2 + border-collapse: collapse; // 1 border-spacing: 0; + text-indent: 0; // 3 } + +// Pico +// –––––––––––––––––––– + // Cells th, td { padding: ($spacing-gutter/2) $spacing-gutter; border-bottom: 1px solid var(--table-border); color: var(--muted-text); + font-size: 0.875rem; font-weight: $text-weight; text-align: left; - font-size: 0.875rem; } // Titles diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index 65edf731..4c3c8c07 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -3,17 +3,18 @@ */ -// Reboot -// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// Add the correct font weight in Chrome, Edge, and Safari. +// Add the correct font weight in Chrome, Edge, and Safari b, strong { font-weight: bolder; } -// Prevent `sub` and `sup` elements from affecting the line height in all browsers. +// Prevent `sub` and `sup` elements from affecting the line height in all browsers sub, sup { position: relative; @@ -28,16 +29,21 @@ sup { top: -0.5rem; } -// 1. Remove the border on images inside links in IE 10. -// 2. Responsive by default -img { - max-width: 100%; // 2 - height: auto; // 2 - border-style: none; // 1 +// Remove the margin on nested lists in Chrome, Edge, IE, and Safari +dl dl, +dl ol, +dl ul, +ol dl, +ul dl { + margin: 0; } -svg, -img { - vertical-align: text-bottom; + +// Remove the margin on nested lists in Edge 18- and IE +ol ol, +ol ul, +ul ol, +ul ul { + margin: 0; } @@ -62,7 +68,7 @@ ul { } // Links -// 1. Remove the gray background on active links in IE 10. +// 1. Remove the gray background on active links in IE 10 a { background-color: transparent; // 1 color: var(--primary); @@ -174,6 +180,43 @@ h6 { font-size: 1rem; } +// Margin-top for headings after a typography block +address, +blockquote, +dl, +figure, +form, +ol, +p, +pre, +table, +ul { + & ~ h1 { + margin-top: $spacing-typography*2; + } + + & ~ h2 { + margin-top: $spacing-typography*1.75; + } + + & ~ h3 { + margin-top: $spacing-typography*1.5; + } + + & ~ h4 { + margin-top: $spacing-typography*1.25; + } + + & ~ h5 { + margin-top: $spacing-typography*1.125; + } + + & ~ h6 { + margin-top: $spacing-typography; + } +} + + // Multi-level heading hgroup { margin-bottom: $spacing-typography; @@ -258,7 +301,7 @@ blockquote { } // Abbreviations -// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari. +// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari abbr[title] { border-bottom: 1px dotted; text-decoration: none; // 1 diff --git a/scss/layout/_container.scss b/scss/layout/_container.scss index 08ba2dba..d80b72f3 100644 --- a/scss/layout/_container.scss +++ b/scss/layout/_container.scss @@ -17,9 +17,9 @@ @if map-get($breakpoints, "sm") and $enable-viewport { @media (min-width: map-get($breakpoints, "sm")) { + max-width: map-get($viewports, "sm"); padding-right: 0; padding-left: 0; - max-width: map-get($viewports, "sm"); } } diff --git a/scss/layout/_document.scss b/scss/layout/_document.scss index 3a34408e..1b9bb2da 100644 --- a/scss/layout/_document.scss +++ b/scss/layout/_document.scss @@ -4,23 +4,38 @@ */ -// Reboot -// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`. +// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border` *, *::before, *::after { box-sizing: border-box; // 1 } -// 1. Correct the line height in all browsers. -// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. -// 3. Change the default tap highlight to be completely transparent in iOS. +// 1. Add text decoration inheritance in all browsers (opinionated) +// 2. Add vertical alignment inheritance in all browsers (opinionated) +::before, +::after { + text-decoration: inherit; // 1 + vertical-align: inherit; // 2 +} + +// 1. Correct the line height in all browsers +// 2. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS +// 3. Change the default tap highlight to be completely transparent in iOS +// 4. Use the default cursor in all browsers (opinionated) +// 5. Use a 4-space tab width in all browsers (opinionated) +// 6. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS html { -webkit-text-size-adjust: 100%; // 2 -webkit-tap-highlight-color: rgba(0,0,0,0); // 3 + -moz-tab-size: 4; // 5 + -ms-text-size-adjust: 100%; // 6 + -webkit-text-size-adjust: 100%; // 6 background: var(--background); color: var(--text); font-family: $sans-serif; @@ -28,6 +43,7 @@ html { font-weight: $text-weight; line-height: $line-height; // 1 text-rendering: optimizeLegibility; + cursor: default; // 4 @if map-get($breakpoints, "sm") and map-get($base-font, "sm") and @@ -64,5 +80,4 @@ html { font-size: map-get($base-font, "xl"); } } - } diff --git a/scss/layout/_sectioning.scss b/scss/layout/_sectioning.scss index e79526e2..a6170370 100644 --- a/scss/layout/_sectioning.scss +++ b/scss/layout/_sectioning.scss @@ -4,11 +4,12 @@ */ -// Reboot -// Based on normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css // –––––––––––––––––––– -// Render the `main` element consistently in IE. +// Render the `main` element consistently in IE main { display: block; } diff --git a/scss/pico.scss b/scss/pico.scss index 14b4dd1b..29a48f21 100644 --- a/scss/pico.scss +++ b/scss/pico.scss @@ -1,5 +1,5 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT */ @@ -18,14 +18,16 @@ @import "layout/scroller"; // figure // Content -@import "content/typography"; // a, headings, p, ul, blockquote ... +@import "content/typography"; // a, headings, p, ul, blockquote, ... +@import "content/embedded"; // audio, canvas, iframe, img, svg, video @import "content/form"; // label, input, select, ... @import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch @import "content/button"; // button, a[role=button], ... @import "content/button-styles"; // .secondary, .contrast, .outline @import "content/table"; // table, tr, td, ... @import "content/code"; // pre, code, ... -@import "content/miscs"; // hr, progress, template, [hidden] +@import "content/accessibility"; // -ms-touch-action, aria-* +@import "content/miscs"; // hr, progress, template, [hidden], dialog, canvas // Components @import "components/accordion"; // details, summary @@ -33,3 +35,6 @@ @import "components/card-sectioning"; // article > header, footer, pre @import "components/nav"; // nav @import "components/tooltip"; // data-tooltip + +// Reduce motion +@import "content/reduce-motion"; // prefers-reduced-motion diff --git a/scss/pico.slim.scss b/scss/pico.slim.scss index 6425b8ab..8ce6415d 100644 --- a/scss/pico.slim.scss +++ b/scss/pico.slim.scss @@ -1,5 +1,5 @@ /*! - * Pico.css v1.0.5 (https://picocss.com) + * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT * * Slim version example @@ -30,26 +30,31 @@ $enable-transitions: false; @import "themes/default"; // Layout -@import "layout/document"; // html -@import "layout/sectioning"; // body, header, main, footer -@import "layout/container"; // .container, .container-fluid -// @import "layout/section"; // section -@import "layout/grid"; // .grid -@import "layout/scroller"; // figure +@import "layout/document"; // html +@import "layout/sectioning"; // body, header, main, footer +@import "layout/container"; // .container, .container-fluid +// @import "layout/section"; // section +@import "layout/grid"; // .grid +@import "layout/scroller"; // figure // Content -@import "content/typography"; // a, headings, p, ul, blockquote ... -@import "content/form"; // label, input, select, ... -@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch -@import "content/button"; // button, a[role=button], ... -// @import "content/button-styles"; // .secondary, .contrast, .outline -@import "content/table"; // table, tr, td, ... -// @import "content/code"; // pre, code, ... -// @import "content/miscs"; // hr, progress, template, [hidden] +@import "content/typography"; // a, headings, p, ul, blockquote, ... +@import "content/embedded"; // audio, canvas, iframe, img, svg, video +@import "content/form"; // label, input, select, ... +@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch +@import "content/button"; // button, a[role=button], ... +// @import "content/button-styles"; // .secondary, .contrast, .outline +@import "content/table"; // table, tr, td, ... +// @import "content/code"; // pre, code, ... +@import "content/accessibility"; // -ms-touch-action, aria-* +// @import "content/miscs"; // hr, progress, template, [hidden], dialog // Components -// @import "components/accordion"; // details, summary -// @import "components/card"; // article -// @import "components/card-sectioning"; // article > header, footer, pre -// @import "components/nav"; // nav -// @import "components/tooltip"; // data-tooltip +// @import "components/accordion"; // details, summary +// @import "components/card"; // article +// @import "components/card-sectioning"; // article > header, footer, pre +// @import "components/nav"; // nav +// @import "components/tooltip"; // data-tooltip + +// Reduce motion +// @import "content/reduce-motion"; // prefers-reduced-motion