From a2404b19b5e90210f6208c01172ca3e42b98a0a8 Mon Sep 17 00:00:00 2001 From: Lucas Date: Fri, 11 Sep 2020 23:22:50 +0700 Subject: [PATCH] Add Sanitize.css https://csstools.github.io/sanitize.css/ --- README.md | 4 +- css/pico.classless.css | 219 +++++++++++++++++++++++++++--- css/pico.classless.min.css | 2 +- css/pico.css | 225 ++++++++++++++++++++++++++++--- css/pico.fluid.classless.css | 219 +++++++++++++++++++++++++++--- css/pico.fluid.classless.min.css | 2 +- css/pico.min.css | 2 +- css/pico.slim.css | 160 +++++++++++++++++++--- css/pico.slim.min.css | 2 +- scss/_variables.scss | 36 ++++- scss/components/_accordion.scss | 5 +- scss/components/_nav.scss | 2 + scss/components/_tooltip.scss | 1 - scss/content/_accessibility.scss | 51 +++++++ scss/content/_button.scss | 13 +- scss/content/_code.scss | 16 ++- scss/content/_embedded.scss | 54 ++++++++ scss/content/_form.scss | 95 +++++++++---- scss/content/_miscs.scss | 45 ++++++- scss/content/_reduce-motion.scss | 29 ++++ scss/content/_table.scss | 18 ++- scss/content/_typography.scss | 36 ++--- scss/layout/_container.scss | 2 +- scss/layout/_document.scss | 29 +++- scss/layout/_sectioning.scss | 7 +- scss/pico.scss | 9 +- scss/pico.slim.scss | 43 +++--- 27 files changed, 1141 insertions(+), 185 deletions(-) create mode 100644 scss/content/_accessibility.scss create mode 100644 scss/content/_embedded.scss create mode 100644 scss/content/_reduce-motion.scss diff --git a/README.md b/README.md index f7d74b78..a7e1cb33 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ # Pico.css -`5.6 KB` minified and gzipped +`6.2 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. @@ -83,6 +83,6 @@ 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)) +- 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)) - 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)) diff --git a/css/pico.classless.css b/css/pico.classless.css index 24da6b6a..5bc2d36c 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -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, @@ -509,6 +523,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,9 +573,14 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). + */ input { overflow: visible; } @@ -539,7 +598,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -547,7 +609,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -565,6 +628,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 +689,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 +752,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 +896,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 +943,10 @@ a[role="button"][disabled] { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -863,9 +954,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 +981,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 +997,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 +1081,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 +1130,7 @@ hr { } progress { + display: inline-block; vertical-align: baseline; } @@ -1005,6 +1139,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 +1177,9 @@ details { } details summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; } details summary::-webkit-details-marker { @@ -1040,7 +1200,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 +1406,7 @@ nav { justify-content: space-between; } +nav ol, nav ul { align-items: center; margin-bottom: 0; @@ -1253,10 +1414,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 +1447,7 @@ nav a:hover, nav a:active, nav a:focus { } aside nav, +aside ol, aside ul, aside li { display: block; @@ -1349,3 +1513,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..10953053 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) * 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}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..c6b98035 100644 --- a/css/pico.css +++ b/css/pico.css @@ -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, @@ -592,6 +606,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,9 +656,14 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). + */ input { overflow: visible; } @@ -622,7 +681,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -630,7 +692,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -648,6 +711,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 +772,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 +841,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 +860,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 +1004,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 +1189,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 +1200,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 +1227,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 +1243,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 +1327,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 +1376,7 @@ hr { } progress { + display: inline-block; vertical-align: baseline; } @@ -1251,6 +1385,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 +1423,9 @@ details { } details summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; } details summary::-webkit-details-marker { @@ -1286,7 +1446,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 +1652,7 @@ nav { justify-content: space-between; } +nav ol, nav ul { align-items: center; margin-bottom: 0; @@ -1499,10 +1660,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 +1697,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 +1763,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..62cecc36 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -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, @@ -505,6 +519,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,9 +569,14 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). + */ input { overflow: visible; } @@ -535,7 +594,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -543,7 +605,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -561,6 +624,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 +685,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 +748,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 +892,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 +939,10 @@ a[role="button"][disabled] { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -859,9 +950,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 +977,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 +993,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 +1077,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 +1126,7 @@ hr { } progress { + display: inline-block; vertical-align: baseline; } @@ -1001,6 +1135,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 +1173,9 @@ details { } details summary { + line-height: 1rem; list-style-type: none; cursor: pointer; - line-height: 1rem; } details summary::-webkit-details-marker { @@ -1036,7 +1196,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 +1402,7 @@ nav { justify-content: space-between; } +nav ol, nav ul { align-items: center; margin-bottom: 0; @@ -1249,10 +1410,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 +1443,7 @@ nav a:hover, nav a:active, nav a:focus { } aside nav, +aside ol, aside ul, aside li { display: block; @@ -1345,3 +1509,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..a222ff96 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) * 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}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..a8698c43 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.0.5 (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}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..73980d7f 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -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, @@ -530,6 +544,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,9 +594,14 @@ textarea { margin: 0; font-family: inherit; font-size: 1rem; + letter-spacing: inherit; line-height: 1.5; } +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). + */ input { overflow: visible; } @@ -560,7 +619,10 @@ legend { } textarea { + margin: 0; overflow: auto; + resize: vertical; + resize: block; } [type="checkbox"], @@ -568,7 +630,8 @@ textarea { padding: 0; } -[type="number"]::-webkit-inner-spin-button { +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { height: auto; } @@ -586,6 +649,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 +709,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 +772,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 +915,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 +961,10 @@ a[role="button"][disabled] { */ table { width: 100%; + border-color: inherit; + border-collapse: collapse; border-spacing: 0; + text-indent: 0; } th, @@ -881,9 +972,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 +991,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..350d360b 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -4,4 +4,4 @@ * * Slim version example * You can export only the modules you need - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#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}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/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..0edbf1a2 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,23 +17,29 @@ textarea { margin: 0; // 2 font-family: inherit; // 1 font-size: 1rem; // 1 + letter-spacing: inherit; // 2 line-height: $line-height; // 1 } +/** + * 1. Change the inconsistent appearance in all browsers (opinionated). + * 2. Add typography inheritance in all browsers (opinionated). + */ + // Show the overflow in IE. 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 +48,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 +173,8 @@ textarea { box-shadow $transition; } - &::placeholder { + &::placeholder, + &::-webkit-input-placeholder { color: var(--muted-text); opacity: 1; } @@ -181,17 +223,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 +250,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..887f2785 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); @@ -258,7 +264,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..50813d13 100644 --- a/scss/pico.scss +++ b/scss/pico.scss @@ -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..2d3d5c06 100644 --- a/scss/pico.slim.scss +++ b/scss/pico.slim.scss @@ -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