From 456539a52e04027b4b60b40a69e52c48f72a3f7a Mon Sep 17 00:00:00 2001 From: Lucas Date: Thu, 24 Sep 2020 22:35:30 +0700 Subject: [PATCH] New form elements - CSS icons color dynamization in `_color.scss` - Bigger Checkboxes and Radio buttons - Small refactoring for Checkboxes and Radio buttons in `_form.scss` and `form-checkbox-radio.scss` - Styles for new form elements: `type=date`, `type=datetime-local`, `type=month`, `type=time`, `type=week`, `type=range`, `type=search` - Reordering @import in `pico.scss` and `pico.slim.scss` --- css/pico.classless.css | 389 +++++++++++---- css/pico.classless.min.css | 2 +- css/pico.css | 617 ++++++++++++++++-------- css/pico.fluid.classless.css | 389 +++++++++++---- css/pico.fluid.classless.min.css | 2 +- css/pico.min.css | 2 +- css/pico.slim.css | 214 ++++---- css/pico.slim.min.css | 2 +- docs/css/pico.docs.css | 2 +- docs/css/pico.docs.min.css | 2 +- docs/scss/layout/_main.scss | 2 +- scss/_variables.scss | 3 +- scss/components/_accordion.scss | 2 +- scss/content/_button-styles.scss | 24 +- scss/content/_button.scss | 5 +- scss/content/_form-alt-input-types.scss | 268 ++++++++++ scss/content/_form-checkbox-radio.scss | 21 +- scss/content/_form.scss | 31 +- scss/pico.scss | 45 +- scss/pico.slim.scss | 45 +- scss/themes/default/_colors.scss | 6 + 21 files changed, 1518 insertions(+), 555 deletions(-) create mode 100644 scss/content/_form-alt-input-types.scss diff --git a/css/pico.classless.css b/css/pico.classless.css index ee1d289f..e6d53e86 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -641,6 +641,98 @@ svg:not(:root) { overflow: hidden; } +/** + * Button + */ +button { + margin: 0; + overflow: visible; + font-family: inherit; + text-transform: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-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; +} + +button, +input[type="submit"], +input[type="button"], +[type="file"]::-webkit-file-upload-button, +a[role="button"] { + 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; +} + +button:hover, button:active, button:focus, +input[type="submit"]:hover, +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="button"]:hover, +input[type="button"]:active, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:hover, +[type="file"]::-webkit-file-upload-button:active, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:hover, +a[role="button"]:active, +a[role="button"]:focus { + background-color: var(--primary-hover); +} + +button:focus, +input[type="submit"]:focus, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:focus { + box-shadow: 0 0 0 0.2rem var(--primary-focus); +} + +input[type="reset"] { + cursor: pointer; +} + +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +a[role="button"][disabled] { + opacity: .5; + pointer-events: none; +} + /** * Form elements */ @@ -760,7 +852,7 @@ textarea { 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; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } input::placeholder, input::-webkit-input-placeholder, @@ -803,31 +895,34 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { + background-color: var(--muted-background); +} + input[disabled], select[disabled], textarea[disabled] { - background-color: var(--muted-background); + cursor: not-allowed; opacity: .5; } -input:not([type="checkbox"]):not([type="radio"]), +input, 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"); + padding-right: 2.5rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -844,7 +939,7 @@ textarea + small { margin-bottom: 1.5rem; } -label > input:not([type="checkbox"]):not([type="radio"]), +label > input, label > select, label > textarea { margin-top: 0.125rem; @@ -852,19 +947,17 @@ label > textarea { /** * Form elements + * Checkboxes & Radios */ [type="checkbox"], [type="radio"] { display: inline-block; - width: 1em; - height: 1em; + width: 1.25rem; + height: 1.25rem; 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, @@ -879,7 +972,7 @@ label > textarea { 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; + background-size: .75rem auto; } [type="checkbox"] ~ label, @@ -902,17 +995,17 @@ label > textarea { } [type="checkbox"][role="switch"] { - width: 1.85em; - height: 1em; - border: 2px solid var(--input-border); - border-radius: 1em; + width: 2.25rem; + height: 1.25rem; + border: 3px solid var(--input-border); + border-radius: 1.25rem; background-color: var(--input-border); - line-height: 1em; + line-height: 1.25rem; } [type="checkbox"][role="switch"]:before { display: block; - width: calc(1em - 4px); + width: calc(1.25rem - 6px); height: 100%; border-radius: 50%; background-color: var(--primary-inverse); @@ -928,88 +1021,222 @@ label > textarea { [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(0.925em - 2px); + margin-left: calc(1.125rem - 3px); } /** - * Button + * Form elements + * Alternatives input types (Not Checkboxes & Radios) */ -button { - margin: 0; - overflow: visible; - font-family: inherit; - text-transform: none; +[type="color"], +[type="date"], +[type="datetime-local"], +[type="month"], +[type="time"], +[type="week"], +[type="search"] { + height: calc(1.5rem + 1.5rem + 2px); } -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type="color"] { + position: relative; padding: 0; - border-style: none; + overflow: hidden; } -button { +[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; +} + +[type="color"]::-moz-focus-inner { + padding: 0; +} + +[type="color"]::-webkit-color-swatch { + border: none; +} + +[type="color"]::-moz-color-swatch { + border: none; +} + +[type="date"], +[type="datetime-local"], +[type="month"], +[type="time"], +[type="week"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-position: center right .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +[type="date"]::-webkit-calendar-picker-indicator, +[type="datetime-local"]::-webkit-calendar-picker-indicator, +[type="month"]::-webkit-calendar-picker-indicator, +[type="time"]::-webkit-calendar-picker-indicator, +[type="week"]::-webkit-calendar-picker-indicator { + opacity: 0; +} + +[type="time"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); +} + +[type="file"] { + padding: 0.5rem 0; + border: none; + border-radius: 0; + background: none; + color: var(--muted-text); +} + +[type="file"]::-webkit-file-upload-button { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + background-color: var(--secondary); + color: var(--secondary-inverse); +} + +[type="file"]:hover, [type="file"]:active, [type="file"]:focus { + border: none; +} + +[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { + background-color: var(--secondary-hover); +} + +[type="file"]:focus { + box-shadow: none; +} + +[type="file"]:focus::-webkit-file-upload-button { + box-shadow: 0 0 0 0.2rem var(--secondary-focus); +} + +[type="range"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; display: block; width: 100%; - margin-bottom: 1.5rem; + height: 1.25rem; + background: transparent; } -a[role="button"] { - display: inline-block; - text-decoration: none; -} - -button, -input[type="submit"], -a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; +[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 0.25rem; 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; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -button:hover, button:active, button:focus, -input[type="submit"]:hover, -input[type="submit"]:active, -input[type="submit"]:focus, -a[role="button"]:hover, -a[role="button"]:active, -a[role="button"]:focus { +[type="range"]::-moz-range-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +[type="range"]::-ms-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +[type="range"]::-ms-fill-lower { + background-color: var(--input-border); +} + +[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border: 2px solid var(--background); + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +[type="range"]::-moz-range-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +[type="range"]::-ms-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +[type="range"]:focus::-webkit-slider-runnable-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-moz-range-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-ms-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-ms-fill-lower { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:active::-webkit-slider-thumb { + transform: scale(1.25); background-color: var(--primary-hover); } -button:focus, -input[type="submit"]:focus, -a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); +[type="range"]:active::-moz-range-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); } -input[type="reset"] { - cursor: pointer; +[type="range"]:active::-ms-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); } -button[disabled], -input[type="submit"][disabled], -input[type="reset"][disabled], -a[role="button"][disabled] { - opacity: .5; - pointer-events: none; +[type="range"]:focus { + box-shadow: none; +} + +[type="search"] { + padding-left: 2.5rem; + border-radius: 3rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + background-position: center left .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + display: none; } /** @@ -1274,7 +1501,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='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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index f35d8a0f..24ccdbc3 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}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 + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=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, 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]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input,select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}[type=color],[type=date],[type=datetime-local],[type=month],[type=search],[type=time],[type=week]{height:calc(1.5rem + 1.5rem + 2px)}[type=color]{position:relative;padding:0;overflow:hidden}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none}[type=color]::-moz-color-swatch{border:none}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E")}[type=file]{padding:0.5rem 0;border:none;border-radius:0;background:none;color:var(--muted-text)}[type=file]::-webkit-file-upload-button{padding-top:0.5rem;padding-bottom:0.5rem;background-color:var(--secondary);color:var(--secondary-inverse)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:0 0 0 0.2rem var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border:2px solid var(--background);border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]:focus::-webkit-slider-runnable-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-moz-range-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-fill-lower{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{padding-left:2.5rem;border-radius:3rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}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 28fd7b1c..f738f24c 100644 --- a/css/pico.css +++ b/css/pico.css @@ -724,6 +724,236 @@ svg:not(:root) { overflow: hidden; } +/** + * Button + */ +button { + margin: 0; + overflow: visible; + font-family: inherit; + text-transform: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-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; +} + +button, +input[type="submit"], +input[type="button"], +[type="file"]::-webkit-file-upload-button, +a[role="button"] { + 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; +} + +button:hover, button:active, button:focus, +input[type="submit"]:hover, +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="button"]:hover, +input[type="button"]:active, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:hover, +[type="file"]::-webkit-file-upload-button:active, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:hover, +a[role="button"]:active, +a[role="button"]:focus { + background-color: var(--primary-hover); +} + +button:focus, +input[type="submit"]:focus, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:focus { + box-shadow: 0 0 0 0.2rem var(--primary-focus); +} + +input[type="reset"] { + cursor: pointer; +} + +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +a[role="button"][disabled] { + opacity: .5; + pointer-events: none; +} + +/** + * Button Styles + */ +button.secondary, +input[type="submit"].secondary, +input[type="reset"], +a[role="button"].secondary { + background-color: var(--secondary); + color: var(--secondary-inverse); +} + +button.secondary:hover, button.secondary:active, button.secondary:focus, +input[type="submit"].secondary:hover, +input[type="submit"].secondary:active, +input[type="submit"].secondary:focus, +input[type="reset"]:hover, +input[type="reset"]:active, +input[type="reset"]:focus, +a[role="button"].secondary:hover, +a[role="button"].secondary:active, +a[role="button"].secondary:focus { + background-color: var(--secondary-hover); +} + +button.secondary:focus, +input[type="submit"].secondary:focus, +input[type="reset"]:focus, +a[role="button"].secondary:focus { + box-shadow: 0 0 0 0.2rem var(--secondary-focus); +} + +button.contrast, +input[type="submit"].contrast, +input[type="reset"].contrast, +a[role="button"].contrast { + background-color: var(--contrast); + color: var(--contrast-inverse); +} + +button.contrast:hover, button.contrast:active, button.contrast:focus, +input[type="submit"].contrast:hover, +input[type="submit"].contrast:active, +input[type="submit"].contrast:focus, +input[type="reset"].contrast:hover, +input[type="reset"].contrast:active, +input[type="reset"].contrast:focus, +a[role="button"].contrast:hover, +a[role="button"].contrast:active, +a[role="button"].contrast:focus { + background-color: var(--contrast-hover); +} + +button.contrast:focus, +input[type="submit"].contrast:focus, +input[type="reset"].contrast:focus, +a[role="button"].contrast:focus { + box-shadow: 0 0 0 0.2rem var(--contrast-focus); +} + +button.outline, +input[type="submit"].outline, +a.outline[role="button"] { + border: 1px solid var(--primary); + background-color: transparent; + color: var(--primary); +} + +button.outline:hover, button.outline:active, button.outline:focus, +input[type="submit"].outline:hover, +input[type="submit"].outline:active, +input[type="submit"].outline:focus, +a.outline[role="button"]:hover, +a.outline[role="button"]:active, +a.outline[role="button"]:focus { + border: 1px solid var(--primary-hover); + color: var(--primary-hover); +} + +button.outline.secondary, +input[type="submit"].outline.secondary, +input[type="reset"].outline, +a[role="button"].outline.secondary { + border: 1px solid var(--secondary); + background-color: transparent; + color: var(--secondary); +} + +button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, +input[type="submit"].outline.secondary:hover, +input[type="submit"].outline.secondary:active, +input[type="submit"].outline.secondary:focus, +input[type="reset"].outline:hover, +input[type="reset"].outline:active, +input[type="reset"].outline:focus, +a[role="button"].outline.secondary:hover, +a[role="button"].outline.secondary:active, +a[role="button"].outline.secondary:focus { + border: 1px solid var(--secondary-hover); + color: var(--secondary-hover); +} + +button.outline.secondary:focus, +input[type="submit"].outline.secondary:focus, +input[type="reset"].outline:focus, +a[role="button"].outline.secondary:focus { + box-shadow: 0 0 0 0.2rem var(--secondary-focus); +} + +button.outline.contrast, +input[type="submit"].outline.contrast, +input[type="reset"].outline.contrast, +a[role="button"].outline.contrast { + border: 1px solid var(--contrast); + background-color: transparent; + color: var(--contrast); +} + +button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, +input[type="submit"].outline.contrast:hover, +input[type="submit"].outline.contrast:active, +input[type="submit"].outline.contrast:focus, +input[type="reset"].outline.contrast:hover, +input[type="reset"].outline.contrast:active, +input[type="reset"].outline.contrast:focus, +a[role="button"].outline.contrast:hover, +a[role="button"].outline.contrast:active, +a[role="button"].outline.contrast:focus { + border: 1px solid var(--contrast-hover); + color: var(--contrast-hover); +} + +button.outline.contrast:focus, +input[type="submit"].outline.contrast:focus, +input[type="reset"].outline.contrast:focus, +a[role="button"].outline.contrast:focus { + box-shadow: 0 0 0 0.2rem var(--contrast-focus); +} + /** * Form elements */ @@ -843,7 +1073,7 @@ textarea { 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; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } input::placeholder, input::-webkit-input-placeholder, @@ -886,21 +1116,27 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { + background-color: var(--muted-background); +} + input[disabled], select[disabled], textarea[disabled] { - background-color: var(--muted-background); + cursor: not-allowed; opacity: .5; } -input:not([type="checkbox"]):not([type="radio"]), +input, select, textarea { margin-bottom: 1.5rem; padding: 0.75rem 1rem; } -input:not([type="checkbox"]):not([type="radio"]).valid, input:not([type="checkbox"]):not([type="radio"]).invalid, +input.valid, input.invalid, select.valid, select.invalid, textarea.valid, @@ -911,22 +1147,16 @@ textarea.invalid { background-size: 1rem auto; } -input:not([type="checkbox"]):not([type="radio"]).valid, +input.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"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); } -input:not([type="checkbox"]):not([type="radio"]).invalid, +input.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); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } select::-ms-expand { @@ -935,7 +1165,8 @@ select::-ms-expand { } 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"); + padding-right: 2.5rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -952,7 +1183,7 @@ textarea + small { margin-bottom: 1.5rem; } -label > input:not([type="checkbox"]):not([type="radio"]), +label > input, label > select, label > textarea { margin-top: 0.125rem; @@ -960,19 +1191,17 @@ label > textarea { /** * Form elements + * Checkboxes & Radios */ [type="checkbox"], [type="radio"] { display: inline-block; - width: 1em; - height: 1em; + width: 1.25rem; + height: 1.25rem; 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, @@ -987,7 +1216,7 @@ label > textarea { 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; + background-size: .75rem auto; } [type="checkbox"] ~ label, @@ -1010,17 +1239,17 @@ label > textarea { } [type="checkbox"][role="switch"] { - width: 1.85em; - height: 1em; - border: 2px solid var(--input-border); - border-radius: 1em; + width: 2.25rem; + height: 1.25rem; + border: 3px solid var(--input-border); + border-radius: 1.25rem; background-color: var(--input-border); - line-height: 1em; + line-height: 1.25rem; } [type="checkbox"][role="switch"]:before { display: block; - width: calc(1em - 4px); + width: calc(1.25rem - 6px); height: 100%; border-radius: 50%; background-color: var(--primary-inverse); @@ -1036,226 +1265,222 @@ label > textarea { [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(0.925em - 2px); + margin-left: calc(1.125rem - 3px); } /** - * Button + * Form elements + * Alternatives input types (Not Checkboxes & Radios) */ -button { - margin: 0; - overflow: visible; - font-family: inherit; - text-transform: none; +[type="color"], +[type="date"], +[type="datetime-local"], +[type="month"], +[type="time"], +[type="week"], +[type="search"] { + height: calc(1.5rem + 1.5rem + 2px); } -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type="color"] { + position: relative; padding: 0; - border-style: none; + overflow: hidden; } -button { - display: block; - width: 100%; - margin-bottom: 1.5rem; +[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; } -a[role="button"] { - display: inline-block; - text-decoration: none; +[type="color"]::-moz-focus-inner { + padding: 0; } -button, -input[type="submit"], -a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; - border-radius: 0.25rem; - outline: none; - background-color: var(--primary); - color: var(--primary-inverse); - font-size: 1rem; - font-weight: normal; - line-height: 1.5; - text-align: center; - cursor: pointer; - transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +[type="color"]::-webkit-color-swatch { + border: none; } -button:hover, button:active, button:focus, -input[type="submit"]:hover, -input[type="submit"]:active, -input[type="submit"]:focus, -a[role="button"]:hover, -a[role="button"]:active, -a[role="button"]:focus { - background-color: var(--primary-hover); +[type="color"]::-moz-color-swatch { + border: none; } -button:focus, -input[type="submit"]:focus, -a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); +[type="date"], +[type="datetime-local"], +[type="month"], +[type="time"], +[type="week"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-position: center right .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; } -input[type="reset"] { - cursor: pointer; +[type="date"]::-webkit-calendar-picker-indicator, +[type="datetime-local"]::-webkit-calendar-picker-indicator, +[type="month"]::-webkit-calendar-picker-indicator, +[type="time"]::-webkit-calendar-picker-indicator, +[type="week"]::-webkit-calendar-picker-indicator { + opacity: 0; } -button[disabled], -input[type="submit"][disabled], -input[type="reset"][disabled], -a[role="button"][disabled] { - opacity: .5; - pointer-events: none; +[type="time"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); } -/** - * Button Styles - */ -button.secondary, -input.secondary[type="submit"], -input[type="reset"], -a.secondary[role="button"] { +[type="file"] { + padding: 0.5rem 0; + border: none; + border-radius: 0; + background: none; + color: var(--muted-text); +} + +[type="file"]::-webkit-file-upload-button { + padding-top: 0.5rem; + padding-bottom: 0.5rem; background-color: var(--secondary); color: var(--secondary-inverse); } -button.secondary:hover, button.secondary:active, button.secondary:focus, -input.secondary[type="submit"]:hover, -input.secondary[type="submit"]:active, -input.secondary[type="submit"]:focus, -input[type="reset"]:hover, -input[type="reset"]:active, -input[type="reset"]:focus, -a.secondary[role="button"]:hover, -a.secondary[role="button"]:active, -a.secondary[role="button"]:focus { +[type="file"]:hover, [type="file"]:active, [type="file"]:focus { + border: none; +} + +[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { background-color: var(--secondary-hover); } -button.secondary:focus, -input.secondary[type="submit"]:focus, -input[type="reset"]:focus, -a.secondary[role="button"]:focus { +[type="file"]:focus { + box-shadow: none; +} + +[type="file"]:focus::-webkit-file-upload-button { box-shadow: 0 0 0 0.2rem var(--secondary-focus); } -button.contrast, -input.contrast[type="submit"], -input.contrast[type="reset"], -a.contrast[role="button"] { - background-color: var(--contrast); - color: var(--contrast-inverse); +[type="range"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + display: block; + width: 100%; + height: 1.25rem; + background: transparent; } -button.contrast:hover, button.contrast:active, button.contrast:focus, -input.contrast[type="submit"]:hover, -input.contrast[type="submit"]:active, -input.contrast[type="submit"]:focus, -input.contrast[type="reset"]:hover, -input.contrast[type="reset"]:active, -input.contrast[type="reset"]:focus, -a.contrast[role="button"]:hover, -a.contrast[role="button"]:active, -a.contrast[role="button"]:focus { - background-color: var(--contrast-hover); +[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -button.contrast:focus, -input.contrast[type="submit"]:focus, -input.contrast[type="reset"]:focus, -a.contrast[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--contrast-focus); +[type="range"]::-moz-range-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -button.outline, -input.outline[type="submit"], -a.outline[role="button"] { - border: 1px solid var(--primary); - background-color: transparent; - color: var(--primary); +[type="range"]::-ms-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -button.outline:hover, button.outline:active, button.outline:focus, -input.outline[type="submit"]:hover, -input.outline[type="submit"]:active, -input.outline[type="submit"]:focus, -a.outline[role="button"]:hover, -a.outline[role="button"]:active, -a.outline[role="button"]:focus { - border: 1px solid var(--primary-hover); - color: var(--primary-hover); +[type="range"]::-ms-fill-lower { + background-color: var(--input-border); } -button.outline.secondary, -input.outline.secondary[type="submit"], -input.outline[type="reset"], -a.outline.secondary[role="button"] { - border: 1px solid var(--secondary); - background-color: transparent; - color: var(--secondary); +[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border: 2px solid var(--background); + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; } -button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, -input.outline.secondary[type="submit"]:hover, -input.outline.secondary[type="submit"]:active, -input.outline.secondary[type="submit"]:focus, -input.outline[type="reset"]:hover, -input.outline[type="reset"]:active, -input.outline[type="reset"]:focus, -a.outline.secondary[role="button"]:hover, -a.outline.secondary[role="button"]:active, -a.outline.secondary[role="button"]:focus { - border: 1px solid var(--secondary-hover); - color: var(--secondary-hover); +[type="range"]::-moz-range-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; } -button.outline.secondary:focus, -input.outline.secondary[type="submit"]:focus, -input.outline[type="reset"]:focus, -a.outline.secondary[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--secondary-focus); +[type="range"]::-ms-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; } -button.outline.contrast, -input.outline.contrast[type="submit"], -input.outline.contrast[type="reset"], -a.outline.contrast[role="button"] { - border: 1px solid var(--contrast); - background-color: transparent; - color: var(--contrast); +[type="range"]:focus::-webkit-slider-runnable-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); } -button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, -input.outline.contrast[type="submit"]:hover, -input.outline.contrast[type="submit"]:active, -input.outline.contrast[type="submit"]:focus, -input.outline.contrast[type="reset"]:hover, -input.outline.contrast[type="reset"]:active, -input.outline.contrast[type="reset"]:focus, -a.outline.contrast[role="button"]:hover, -a.outline.contrast[role="button"]:active, -a.outline.contrast[role="button"]:focus { - border: 1px solid var(--contrast-hover); - color: var(--contrast-hover); +[type="range"]:focus::-moz-range-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); } -button.outline.contrast:focus, -input.outline.contrast[type="submit"]:focus, -input.outline.contrast[type="reset"]:focus, -a.outline.contrast[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--contrast-focus); +[type="range"]:focus::-ms-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-ms-fill-lower { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:active::-webkit-slider-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); +} + +[type="range"]:active::-moz-range-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); +} + +[type="range"]:active::-ms-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); +} + +[type="range"]:focus { + box-shadow: none; +} + +[type="search"] { + padding-left: 2.5rem; + border-radius: 3rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + background-position: center left .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + display: none; } /** @@ -1520,7 +1745,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='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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index fe8852c2..3bf1a555 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -637,6 +637,98 @@ svg:not(:root) { overflow: hidden; } +/** + * Button + */ +button { + margin: 0; + overflow: visible; + font-family: inherit; + text-transform: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-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; +} + +button, +input[type="submit"], +input[type="button"], +[type="file"]::-webkit-file-upload-button, +a[role="button"] { + 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; +} + +button:hover, button:active, button:focus, +input[type="submit"]:hover, +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="button"]:hover, +input[type="button"]:active, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:hover, +[type="file"]::-webkit-file-upload-button:active, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:hover, +a[role="button"]:active, +a[role="button"]:focus { + background-color: var(--primary-hover); +} + +button:focus, +input[type="submit"]:focus, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:focus { + box-shadow: 0 0 0 0.2rem var(--primary-focus); +} + +input[type="reset"] { + cursor: pointer; +} + +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +a[role="button"][disabled] { + opacity: .5; + pointer-events: none; +} + /** * Form elements */ @@ -756,7 +848,7 @@ textarea { 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; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } input::placeholder, input::-webkit-input-placeholder, @@ -799,31 +891,34 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { + background-color: var(--muted-background); +} + input[disabled], select[disabled], textarea[disabled] { - background-color: var(--muted-background); + cursor: not-allowed; opacity: .5; } -input:not([type="checkbox"]):not([type="radio"]), +input, 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"); + padding-right: 2.5rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -840,7 +935,7 @@ textarea + small { margin-bottom: 1.5rem; } -label > input:not([type="checkbox"]):not([type="radio"]), +label > input, label > select, label > textarea { margin-top: 0.125rem; @@ -848,19 +943,17 @@ label > textarea { /** * Form elements + * Checkboxes & Radios */ [type="checkbox"], [type="radio"] { display: inline-block; - width: 1em; - height: 1em; + width: 1.25rem; + height: 1.25rem; 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, @@ -875,7 +968,7 @@ label > textarea { 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; + background-size: .75rem auto; } [type="checkbox"] ~ label, @@ -898,17 +991,17 @@ label > textarea { } [type="checkbox"][role="switch"] { - width: 1.85em; - height: 1em; - border: 2px solid var(--input-border); - border-radius: 1em; + width: 2.25rem; + height: 1.25rem; + border: 3px solid var(--input-border); + border-radius: 1.25rem; background-color: var(--input-border); - line-height: 1em; + line-height: 1.25rem; } [type="checkbox"][role="switch"]:before { display: block; - width: calc(1em - 4px); + width: calc(1.25rem - 6px); height: 100%; border-radius: 50%; background-color: var(--primary-inverse); @@ -924,88 +1017,222 @@ label > textarea { [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(0.925em - 2px); + margin-left: calc(1.125rem - 3px); } /** - * Button + * Form elements + * Alternatives input types (Not Checkboxes & Radios) */ -button { - margin: 0; - overflow: visible; - font-family: inherit; - text-transform: none; +[type="color"], +[type="date"], +[type="datetime-local"], +[type="month"], +[type="time"], +[type="week"], +[type="search"] { + height: calc(1.5rem + 1.5rem + 2px); } -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type="color"] { + position: relative; padding: 0; - border-style: none; + overflow: hidden; } -button { +[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; +} + +[type="color"]::-moz-focus-inner { + padding: 0; +} + +[type="color"]::-webkit-color-swatch { + border: none; +} + +[type="color"]::-moz-color-swatch { + border: none; +} + +[type="date"], +[type="datetime-local"], +[type="month"], +[type="time"], +[type="week"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + background-position: center right .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +[type="date"]::-webkit-calendar-picker-indicator, +[type="datetime-local"]::-webkit-calendar-picker-indicator, +[type="month"]::-webkit-calendar-picker-indicator, +[type="time"]::-webkit-calendar-picker-indicator, +[type="week"]::-webkit-calendar-picker-indicator { + opacity: 0; +} + +[type="time"] { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); +} + +[type="file"] { + padding: 0.5rem 0; + border: none; + border-radius: 0; + background: none; + color: var(--muted-text); +} + +[type="file"]::-webkit-file-upload-button { + padding-top: 0.5rem; + padding-bottom: 0.5rem; + background-color: var(--secondary); + color: var(--secondary-inverse); +} + +[type="file"]:hover, [type="file"]:active, [type="file"]:focus { + border: none; +} + +[type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { + background-color: var(--secondary-hover); +} + +[type="file"]:focus { + box-shadow: none; +} + +[type="file"]:focus::-webkit-file-upload-button { + box-shadow: 0 0 0 0.2rem var(--secondary-focus); +} + +[type="range"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; display: block; width: 100%; - margin-bottom: 1.5rem; + height: 1.25rem; + background: transparent; } -a[role="button"] { - display: inline-block; - text-decoration: none; -} - -button, -input[type="submit"], -a[role="button"] { - padding: 0.75rem 1rem; - border: 1px solid transparent; +[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 0.25rem; 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; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } -button:hover, button:active, button:focus, -input[type="submit"]:hover, -input[type="submit"]:active, -input[type="submit"]:focus, -a[role="button"]:hover, -a[role="button"]:active, -a[role="button"]:focus { +[type="range"]::-moz-range-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +[type="range"]::-ms-track { + width: 100%; + height: 0.25rem; + border-radius: 0.25rem; + background-color: var(--input-border); + transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +[type="range"]::-ms-fill-lower { + background-color: var(--input-border); +} + +[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border: 2px solid var(--background); + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +[type="range"]::-moz-range-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +[type="range"]::-ms-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 0; + border-radius: 50%; + background-color: var(--text); + transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out; +} + +[type="range"]:focus::-webkit-slider-runnable-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-moz-range-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-ms-track { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:focus::-ms-fill-lower { + background-color: var(--muted-text); + box-shadow: 0 0 0 0.1rem var(--primary-focus); +} + +[type="range"]:active::-webkit-slider-thumb { + transform: scale(1.25); background-color: var(--primary-hover); } -button:focus, -input[type="submit"]:focus, -a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); +[type="range"]:active::-moz-range-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); } -input[type="reset"] { - cursor: pointer; +[type="range"]:active::-ms-thumb { + transform: scale(1.25); + background-color: var(--primary-hover); } -button[disabled], -input[type="submit"][disabled], -input[type="reset"][disabled], -a[role="button"][disabled] { - opacity: .5; - pointer-events: none; +[type="range"]:focus { + box-shadow: none; +} + +[type="search"] { + padding-left: 2.5rem; + border-radius: 3rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + background-position: center left .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + display: none; } /** @@ -1270,7 +1497,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='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-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 1rem auto; diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 5e5ec98f..9f5b1b5d 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}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 + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=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, 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]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input,select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}[type=color],[type=date],[type=datetime-local],[type=month],[type=search],[type=time],[type=week]{height:calc(1.5rem + 1.5rem + 2px)}[type=color]{position:relative;padding:0;overflow:hidden}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none}[type=color]::-moz-color-swatch{border:none}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E")}[type=file]{padding:0.5rem 0;border:none;border-radius:0;background:none;color:var(--muted-text)}[type=file]::-webkit-file-upload-button{padding-top:0.5rem;padding-bottom:0.5rem;background-color:var(--secondary);color:var(--secondary-inverse)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:0 0 0 0.2rem var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border:2px solid var(--background);border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]:focus::-webkit-slider-runnable-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-moz-range-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-fill-lower{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{padding-left:2.5rem;border-radius:3rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}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 04ddc68a..8544bdca 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.0.6 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}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 + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a[role=button].secondary,button.secondary,input[type=reset],input[type=submit].secondary{background-color:var(--secondary);color:var(--secondary-inverse)}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{background-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=reset]:focus,input[type=submit].secondary:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a[role=button].contrast,button.contrast,input[type=reset].contrast,input[type=submit].contrast{background-color:var(--contrast);color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{background-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input[type=submit].outline{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=reset].outline,input[type=submit].outline.secondary{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a[role=button].outline.secondary:focus,button.outline.secondary:focus,input[type=reset].outline:focus,input[type=submit].outline.secondary:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a[role=button].outline.contrast,button.outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a[role=button].outline.contrast:focus,button.outline.contrast:focus,input[type=reset].outline.contrast:focus,input[type=submit].outline.contrast:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=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, 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]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input,select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input.invalid,input.valid,select.invalid,select.valid,textarea.invalid,textarea.valid{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input.valid,select.valid,textarea.valid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input.invalid,select.invalid,textarea.invalid{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}[type=color],[type=date],[type=datetime-local],[type=month],[type=search],[type=time],[type=week]{height:calc(1.5rem + 1.5rem + 2px)}[type=color]{position:relative;padding:0;overflow:hidden}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none}[type=color]::-moz-color-swatch{border:none}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E")}[type=file]{padding:0.5rem 0;border:none;border-radius:0;background:none;color:var(--muted-text)}[type=file]::-webkit-file-upload-button{padding-top:0.5rem;padding-bottom:0.5rem;background-color:var(--secondary);color:var(--secondary-inverse)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{background-color:var(--secondary-hover)}[type=file]:focus{box-shadow:none}[type=file]:focus::-webkit-file-upload-button{box-shadow:0 0 0 0.2rem var(--secondary-focus)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:0.25rem;background-color:var(--input-border);transition:background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border:2px solid var(--background);border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:0;border-radius:50%;background-color:var(--text);transition:background-color 0.2s ease-in-out, transform 0.2s ease-in-out}[type=range]:focus::-webkit-slider-runnable-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-moz-range-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-track{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:focus::-ms-fill-lower{background-color:var(--muted-text);box-shadow:0 0 0 0.1rem var(--primary-focus)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary-hover)}[type=range]:focus{box-shadow:none}[type=search]{padding-left:2.5rem;border-radius:3rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-bottom:2rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{display:inline-block;vertical-align:baseline}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:''}details summary:focus{outline:none}details summary~*{margin-top:0.75rem}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:0.375rem;color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:2rem 0;padding:2rem 1rem;overflow:hidden;border-radius:0.25rem;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem}}@media (min-width:768px){article{margin:3rem 0;padding:3rem}}@media (min-width:992px){article{margin:3.5rem 0;padding:3.5rem}}@media (min-width:1200px){article{margin:4rem 0;padding:4rem}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0}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 a160d7d8..f4d86868 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -662,6 +662,97 @@ svg:not(:root) { overflow: hidden; } +/** + * Button + */ +button { + margin: 0; + overflow: visible; + font-family: inherit; + text-transform: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-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; +} + +button, +input[type="submit"], +input[type="button"], +[type="file"]::-webkit-file-upload-button, +a[role="button"] { + 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; +} + +button:hover, button:active, button:focus, +input[type="submit"]:hover, +input[type="submit"]:active, +input[type="submit"]:focus, +input[type="button"]:hover, +input[type="button"]:active, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:hover, +[type="file"]::-webkit-file-upload-button:active, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:hover, +a[role="button"]:active, +a[role="button"]:focus { + background-color: var(--primary-hover); +} + +button:focus, +input[type="submit"]:focus, +input[type="button"]:focus, +[type="file"]::-webkit-file-upload-button:focus, +a[role="button"]:focus { + box-shadow: 0 0 0 0.2rem var(--primary-focus); +} + +input[type="reset"] { + cursor: pointer; +} + +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +a[role="button"][disabled] { + opacity: .5; + pointer-events: none; +} + /** * Form elements */ @@ -823,31 +914,34 @@ textarea[disabled] ~ label { color: var(--muted-text); } +input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), +textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { + background-color: var(--muted-background); +} + input[disabled], select[disabled], textarea[disabled] { - background-color: var(--muted-background); + cursor: not-allowed; opacity: .5; } -input:not([type="checkbox"]):not([type="radio"]), +input, 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"); + padding-right: 2.5rem; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: center right .75rem; background-repeat: no-repeat; background-size: 1rem auto; @@ -864,7 +958,7 @@ textarea + small { margin-bottom: 1.5rem; } -label > input:not([type="checkbox"]):not([type="radio"]), +label > input, label > select, label > textarea { margin-top: 0.125rem; @@ -872,19 +966,17 @@ label > textarea { /** * Form elements + * Checkboxes & Radios */ [type="checkbox"], [type="radio"] { display: inline-block; - width: 1em; - height: 1em; + width: 1.25rem; + height: 1.25rem; 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, @@ -899,7 +991,7 @@ label > textarea { 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; + background-size: .75rem auto; } [type="checkbox"] ~ label, @@ -922,17 +1014,17 @@ label > textarea { } [type="checkbox"][role="switch"] { - width: 1.85em; - height: 1em; - border: 2px solid var(--input-border); - border-radius: 1em; + width: 2.25rem; + height: 1.25rem; + border: 3px solid var(--input-border); + border-radius: 1.25rem; background-color: var(--input-border); - line-height: 1em; + line-height: 1.25rem; } [type="checkbox"][role="switch"]:before { display: block; - width: calc(1em - 4px); + width: calc(1.25rem - 6px); height: 100%; border-radius: 50%; background-color: var(--primary-inverse); @@ -947,87 +1039,7 @@ label > textarea { [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(0.925em - 2px); -} - -/** - * Button - */ -button { - margin: 0; - overflow: visible; - font-family: inherit; - text-transform: none; -} - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-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; -} - -button, -input[type="submit"], -a[role="button"] { - 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; -} - -button:hover, button:active, button:focus, -input[type="submit"]:hover, -input[type="submit"]:active, -input[type="submit"]:focus, -a[role="button"]:hover, -a[role="button"]:active, -a[role="button"]:focus { - background-color: var(--primary-hover); -} - -button:focus, -input[type="submit"]:focus, -a[role="button"]:focus { - box-shadow: 0 0 0 0.2rem var(--primary-focus); -} - -input[type="reset"] { - cursor: pointer; -} - -button[disabled], -input[type="submit"][disabled], -input[type="reset"][disabled], -a[role="button"][disabled] { - opacity: .5; - pointer-events: none; + margin-left: calc(1.125rem - 3px); } /** diff --git a/css/pico.slim.min.css b/css/pico.slim.min.css index 9dddafda..26368938 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -4,4 +4,4 @@ * * Slim version example * You can export only the modules you need - */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}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 + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-border-h:#ffdf80;--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.5);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.04)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-border-h:rgba(255, 223, 128, 0.5);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-hover:#FFF;--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-border:rgba(255, 223, 128, 0.33);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.5);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#10181e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.06);--table-stripping:rgba(115, 130, 140, 0.02)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:0.5rem 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{box-shadow:inset 0 -0.33rem 0 var(--contrast-border-h);color:var(--contrast-hover);text-decoration:none}a.contrast:not([role=button]):focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:3rem}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:2.625rem}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:2.25rem}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:1.875rem}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:1.6875rem}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:1.5rem}hgroup{margin-bottom:1.5rem}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.375rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;padding:1rem;border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:1.5rem}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=submit]{padding:0.75rem 1rem;border:1px solid transparent;border-radius:0.25rem;outline:none;background-color:var(--primary);color:var(--primary-inverse);font-size:1rem;font-weight:normal;line-height:1.5;text-align:center;cursor:pointer}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{background-color:var(--primary-hover)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=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]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed;opacity:.5}input,select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:2.5rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:-1rem;margin-bottom:1.5rem}label>input,label>select,label>textarea{margin-top:0.125rem}[type=checkbox],[type=radio]{display:inline-block;width:1.25rem;height:1.25rem;margin-right:.375rem;margin-bottom:0.125rem;border-width:2px;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--primary);background-color:var(--primary-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:3px solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - 6px);height:100%;border-radius:50%;background-color:var(--primary-inverse);content:''}[type=checkbox][role=switch]:checked{border-color:var(--primary);background-color:var(--primary);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - 3px)}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:400;text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation} \ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index f300383a..be7ce84c 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -106,7 +106,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no display: inline-block; width: 1rem; height: 1rem; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); background-position: top center; background-repeat: no-repeat; background-size: .66rem auto; diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index 781b19db..410313d5 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles for Docs - */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.66)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:1rem}} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:4.5rem}@media (min-width:576px){body>main{padding-top:4.75rem}}@media (min-width:768px){body>main{padding-top:5rem}}@media (min-width:992px){body>main{grid-column-gap:4rem;display:grid;grid-template-columns:200px auto;padding-top:5.25rem}}@media (min-width:1200px){body>main{padding-top:5.5rem}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:4.5rem;margin-top:-4.5rem;content:''}@media (min-width:576px){div[role=document]>section:before{height:4.75rem;margin-top:-4.75rem}}@media (min-width:768px){div[role=document]>section:before{height:5rem;margin-top:-5rem}}@media (min-width:992px){div[role=document]>section:before{height:5.25rem;margin-top:-5.25rem}}@media (min-width:1200px){div[role=document]>section:before{height:5.5rem;margin-top:-5.5rem}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}main>aside nav{width:100%;margin-bottom:2rem}main>aside nav h1{margin-bottom:1.5rem}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:0.25rem;border-top-left-radius:0.25rem}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232c4049' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}#customization h4{transition:color 0.2s ease-in-out}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:0.75rem}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:3px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:0.5rem 0;background:var(--code-background);text-align:center}#grids details{margin-top:3rem}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:3rem}a[role=button]{margin-right:0.25rem;margin-bottom:1.5rem}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:2rem 2.5rem}}@media (min-width:768px){pre{padding:2rem 3rem}}@media (min-width:992px){pre{padding:2rem 3.5rem}}@media (min-width:1200px){pre{padding:2rem 4rem}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:1rem;right:1rem}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav a svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:-1rem;padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:1rem;color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:0.5rem;bottom:1rem;width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;line-height:1;text-align:right;box-shadow:var(--card-shadow)}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform 0.2s ease-in-out}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 0.5rem 0 0.25rem;transition:max-width 0.2s ease-in-out, padding 0.2s ease-in-out}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:1rem}} \ No newline at end of file diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss index 5266dea7..0ea607dd 100644 --- a/docs/scss/layout/_main.scss +++ b/docs/scss/layout/_main.scss @@ -72,7 +72,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no width: 1rem; height: 1rem; // Source: https://feathericons.com/ - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .66)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{$icon-color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); background-position: top center; background-repeat: no-repeat; background-size: .66rem auto; diff --git a/scss/_variables.scss b/scss/_variables.scss index 6ad0c1c7..30a0f610 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -47,7 +47,8 @@ $spacing-block: 2rem !default; $spacing-typography: 1.5rem !default; // Padding for and