From 434cbe02ace4d9ecba38e269af29d16d41501174 Mon Sep 17 00:00:00 2001 From: Lucas Date: Mon, 2 Dec 2019 11:52:26 +0700 Subject: [PATCH] Scss files organization + Slim version example --- css/pico.classless.css | 79 +- css/pico.classless.min.css | 2 +- css/pico.css | 52 +- css/pico.fluid.classless.css | 79 +- css/pico.fluid.classless.min.css | 2 +- css/pico.min.css | 2 +- css/pico.slim.css | 962 ++++++++++++++++++++++++ css/pico.slim.min.css | 7 + docs/css/pico.docs.css | 11 +- docs/js/pico.docs.js | 10 +- docs/scss/pico.docs.scss | 5 +- docs/scss/themes/_docs.scss | 7 + docs/scss/themes/{ => docs}/_dark.scss | 14 +- docs/scss/themes/{ => docs}/_light.scss | 7 +- scss/_variables.scss | 3 + scss/components/_card-sectioning.scss | 2 +- scss/content/_code.scss | 2 +- scss/content/_form-checkbox-radio.scss | 91 +++ scss/content/_form.scss | 129 +--- scss/content/_table.scss | 1 - scss/content/_typography.scss | 3 +- scss/layout/_sectioning.scss | 2 - scss/pico.scss | 9 +- scss/pico.slim.scss | 41 + scss/themes/_default.scss | 7 + scss/{ => themes/default}/_colors.scss | 0 scss/themes/{ => default}/_dark.scss | 64 +- scss/themes/{ => default}/_light.scss | 36 +- 28 files changed, 1329 insertions(+), 300 deletions(-) create mode 100644 css/pico.slim.css create mode 100644 css/pico.slim.min.css create mode 100644 docs/scss/themes/_docs.scss rename docs/scss/themes/{ => docs}/_dark.scss (61%) rename docs/scss/themes/{ => docs}/_light.scss (59%) create mode 100644 scss/content/_form-checkbox-radio.scss create mode 100644 scss/pico.slim.scss create mode 100644 scss/themes/_default.scss rename scss/{ => themes/default}/_colors.scss (100%) rename scss/themes/{ => default}/_dark.scss (83%) rename scss/themes/{ => default}/_light.scss (69%) diff --git a/css/pico.classless.css b/css/pico.classless.css index e59a97f7..a544489c 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -3,8 +3,7 @@ * Copyright 2019 - Licensed under MIT */ /** - * Light theme (Default) - * Can be forced with data-theme="light" + * Theme: default */ [data-theme="light"], :root:not([data-theme="dark"]) { @@ -20,6 +19,15 @@ --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-inverse: #FFF; --input-background: #FFF; --input-border: #c8d1d8; --valid: #288a6a; @@ -34,18 +42,15 @@ --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-2: #a65980; - --code-color-3: #478085; + --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(27, 40, 50, 0.02); } -/** - * Dark theme (Auto) - * Automatically enabled if user has Dark mode enabled - */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #10181e; @@ -60,6 +65,15 @@ --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; @@ -84,10 +98,6 @@ } } -/** - * Dark theme (Forced) - * Enabled if forced with data-theme="dark" - */ [data-theme="dark"] { --background: #10181e; --text: #a2afb9; @@ -101,6 +111,15 @@ --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; @@ -732,6 +751,24 @@ select:not([multiple]) { background-size: 1rem auto; } +form small { + color: var(--muted-text); +} + +input + small { + margin-top: -1rem; + margin-bottom: 1.5rem; +} + +label > input:not([type="checkbox"]):not([type="radio"]), +label > select, +label > textarea { + margin-top: 0.125rem; +} + +/** + * Form elements + */ [type="checkbox"], [type="radio"] { display: inline-block; @@ -807,21 +844,6 @@ select:not([multiple]) { margin-left: calc(0.925rem - 2px); } -form small { - color: var(--muted-text); -} - -input + small { - margin-top: -1rem; - margin-bottom: 1.5rem; -} - -label > input:not([type="checkbox"]):not([type="radio"]), -label > select, -label > textarea { - margin-top: 0.125rem; -} - /** * Button */ @@ -932,7 +954,6 @@ td { th, thead td { color: var(--text); - font-weight: bolder; font-size: 1rem; } @@ -1186,7 +1207,7 @@ article > *:not(footer):not(pre):last-child { } /** - * Card sectionning (
> header, footer|pre) + * Card sectionning (
> header, footer, pre) */ article > header, article > footer { diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index cac43c3b..01bf0d9b 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v0.1.0 (https://picocss.com) * Copyright 2019 - 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;--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-2:#a65980;--code-color-3:#478085;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(27, 40, 50, 0.02)}@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;--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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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;--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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}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]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}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;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@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(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-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(27, 40, 50, 0.02)}@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-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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:4rem 0}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}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]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small{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:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}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;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@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(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index 8e39973e..c0afbe43 100644 --- a/css/pico.css +++ b/css/pico.css @@ -3,8 +3,7 @@ * Copyright 2019 - Licensed under MIT */ /** - * Light theme (Default) - * Can be forced with data-theme="light" + * Theme: default */ [data-theme="light"], :root:not([data-theme="dark"]) { @@ -43,18 +42,15 @@ --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-2: #a65980; - --code-color-3: #478085; + --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(27, 40, 50, 0.02); } -/** - * Dark theme (Auto) - * Automatically enabled if user has Dark mode enabled - */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #10181e; @@ -102,10 +98,6 @@ } } -/** - * Dark theme (Forced) - * Enabled if forced with data-theme="dark" - */ [data-theme="dark"] { --background: #10181e; --text: #a2afb9; @@ -840,6 +832,24 @@ select:not([multiple]) { background-size: 1rem auto; } +form small { + color: var(--muted-text); +} + +input + small { + margin-top: -1rem; + margin-bottom: 1.5rem; +} + +label > input:not([type="checkbox"]):not([type="radio"]), +label > select, +label > textarea { + margin-top: 0.125rem; +} + +/** + * Form elements + */ [type="checkbox"], [type="radio"] { display: inline-block; @@ -915,21 +925,6 @@ select:not([multiple]) { margin-left: calc(0.925rem - 2px); } -form small { - color: var(--muted-text); -} - -input + small { - margin-top: -1rem; - margin-bottom: 1.5rem; -} - -label > input:not([type="checkbox"]):not([type="radio"]), -label > select, -label > textarea { - margin-top: 0.125rem; -} - /** * Button */ @@ -1182,7 +1177,6 @@ td { th, thead td { color: var(--text); - font-weight: bolder; font-size: 1rem; } @@ -1436,7 +1430,7 @@ article > *:not(footer):not(pre):last-child { } /** - * Card sectionning (
> header, footer|pre) + * Card sectionning (
> header, footer, pre) */ article > header, article > footer { diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index ff185650..3ca5a477 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -3,8 +3,7 @@ * Copyright 2019 - Licensed under MIT */ /** - * Light theme (Default) - * Can be forced with data-theme="light" + * Theme: default */ [data-theme="light"], :root:not([data-theme="dark"]) { @@ -20,6 +19,15 @@ --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-inverse: #FFF; --input-background: #FFF; --input-border: #c8d1d8; --valid: #288a6a; @@ -34,18 +42,15 @@ --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-2: #a65980; - --code-color-3: #478085; + --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(27, 40, 50, 0.02); } -/** - * Dark theme (Auto) - * Automatically enabled if user has Dark mode enabled - */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #10181e; @@ -60,6 +65,15 @@ --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; @@ -84,10 +98,6 @@ } } -/** - * Dark theme (Forced) - * Enabled if forced with data-theme="dark" - */ [data-theme="dark"] { --background: #10181e; --text: #a2afb9; @@ -101,6 +111,15 @@ --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; @@ -728,6 +747,24 @@ select:not([multiple]) { background-size: 1rem auto; } +form small { + color: var(--muted-text); +} + +input + small { + margin-top: -1rem; + margin-bottom: 1.5rem; +} + +label > input:not([type="checkbox"]):not([type="radio"]), +label > select, +label > textarea { + margin-top: 0.125rem; +} + +/** + * Form elements + */ [type="checkbox"], [type="radio"] { display: inline-block; @@ -803,21 +840,6 @@ select:not([multiple]) { margin-left: calc(0.925rem - 2px); } -form small { - color: var(--muted-text); -} - -input + small { - margin-top: -1rem; - margin-bottom: 1.5rem; -} - -label > input:not([type="checkbox"]):not([type="radio"]), -label > select, -label > textarea { - margin-top: 0.125rem; -} - /** * Button */ @@ -928,7 +950,6 @@ td { th, thead td { color: var(--text); - font-weight: bolder; font-size: 1rem; } @@ -1182,7 +1203,7 @@ article > *:not(footer):not(pre):last-child { } /** - * Card sectionning (
> header, footer|pre) + * Card sectionning (
> header, footer, pre) */ article > header, article > footer { diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 584396d9..f5a04a47 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v0.1.0 (https://picocss.com) * Copyright 2019 - 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;--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-2:#a65980;--code-color-3:#478085;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(27, 40, 50, 0.02)}@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;--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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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;--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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}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]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}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;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@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(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-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(27, 40, 50, 0.02)}@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-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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 1rem}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 1rem}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 1rem}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 1rem}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 1rem}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.5rem;font-weight:700}h1{margin-bottom:3rem;color:var(--h1);font-size:2rem}h2{margin-bottom:2.625rem;color:var(--h2);font-size:1.75rem}h3{margin-bottom:2.25rem;color:var(--h3);font-size:1.5rem}h4{margin-bottom:1.875rem;color:var(--h4);font-size:1.25rem}h5{margin-bottom:1.6875rem;color:var(--h5);font-size:1.125rem}h6{color:var(--h6);font-size:1rem}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}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]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small{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:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}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;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@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(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index 351060c1..3afb3b9f 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v0.1.0 (https://picocss.com) * Copyright 2019 - 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-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-2:#a65980;--code-color-3:#478085;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(27, 40, 50, 0.02)}@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-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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{color:var(--contrast-hover)}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}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}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]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=checkbox],[type=radio]{display:inline-block;width:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 2px)}form small{color:var(--muted-text)}input+small{margin-top:-1rem;margin-bottom:1.5rem}label>input:not([type=checkbox]):not([type=radio]),label>select,label>textarea{margin-top:0.125rem}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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-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]{border:1px solid var(--secondary);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{border:1px solid var(--secondary-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]{border:1px solid var(--contrast);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{border:1px solid var(--contrast-hover);background-color:var(--contrast-hover)}a.contrast[role=button]:focus,button.contrast:focus,input.contrast[type=reset]:focus,input.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline.contrast[role=button],button.outline.contrast,input.outline.contrast[type=reset],input.outline.contrast[type=submit]{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a.outline.contrast[role=button]:active,a.outline.contrast[role=button]:focus,a.outline.contrast[role=button]:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input.outline.contrast[type=reset]:active,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=reset]:hover,input.outline.contrast[type=submit]:active,input.outline.contrast[type=submit]:focus,input.outline.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a.outline.contrast[role=button]:focus,button.outline.contrast:focus,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-weight:bolder;font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}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;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@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(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]){box-shadow:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-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(27, 40, 50, 0.02)}@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-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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}@media (min-width:576px){body>footer,body>header,body>main{padding:2.5rem 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:3rem 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:3.5rem 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:4rem 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:4rem}@media (min-width:576px){section{margin-bottom:5rem}}@media (min-width:768px){section{margin-bottom:6rem}}@media (min-width:992px){section{margin-bottom:7rem}}@media (min-width:1200px){section{margin-bottom:8rem}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{color:var(--contrast-hover)}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}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}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]:not(:focus),input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[invalid]:not(:focus),select[valid]:not(:focus),textarea[invalid]:not(:focus),textarea[valid]:not(:focus){padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input:not([type=checkbox]):not([type=radio])[invalid]:not(:focus),select[invalid]:not(:focus),textarea[invalid]:not(:focus){border-bottom:1px solid var(--invalid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b94646' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}input:not([type=checkbox]):not([type=radio])[valid]:not(:focus),select[valid]:not(:focus),textarea[valid]:not(:focus){border-bottom:1px solid var(--valid);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23288a6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small{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:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-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]{border:1px solid var(--secondary);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{border:1px solid var(--secondary-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]{border:1px solid var(--contrast);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{border:1px solid var(--contrast-hover);background-color:var(--contrast-hover)}a.contrast[role=button]:focus,button.contrast:focus,input.contrast[type=reset]:focus,input.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}a.outline[role=button],button.outline,input.outline[type=submit]{border:1px solid var(--primary);background-color:transparent;color:var(--primary)}a.outline[role=button]:active,a.outline[role=button]:focus,a.outline[role=button]:hover,button.outline:active,button.outline:focus,button.outline:hover,input.outline[type=submit]:active,input.outline[type=submit]:focus,input.outline[type=submit]:hover{border:1px solid var(--primary-hover);color:var(--primary-hover)}a.outline.secondary[role=button],button.outline.secondary,input.outline.secondary[type=submit],input.outline[type=reset]{border:1px solid var(--secondary);background-color:transparent;color:var(--secondary)}a.outline.secondary[role=button]:active,a.outline.secondary[role=button]:focus,a.outline.secondary[role=button]:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input.outline.secondary[type=submit]:active,input.outline.secondary[type=submit]:focus,input.outline.secondary[type=submit]:hover,input.outline[type=reset]:active,input.outline[type=reset]:focus,input.outline[type=reset]:hover{border:1px solid var(--secondary-hover);color:var(--secondary-hover)}a.outline.secondary[role=button]:focus,button.outline.secondary:focus,input.outline.secondary[type=submit]:focus,input.outline[type=reset]:focus{box-shadow:0 0 0 0.2rem var(--secondary-focus)}a.outline.contrast[role=button],button.outline.contrast,input.outline.contrast[type=reset],input.outline.contrast[type=submit]{border:1px solid var(--contrast);background-color:transparent;color:var(--contrast)}a.outline.contrast[role=button]:active,a.outline.contrast[role=button]:focus,a.outline.contrast[role=button]:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input.outline.contrast[type=reset]:active,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=reset]:hover,input.outline.contrast[type=submit]:active,input.outline.contrast[type=submit]:focus,input.outline.contrast[type=submit]:hover{border:1px solid var(--contrast-hover);color:var(--contrast-hover)}a.outline.contrast[role=button]:focus,button.outline.contrast:focus,input.outline.contrast[type=reset]:focus,input.outline.contrast[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--contrast-focus)}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1rem}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:400;line-height:1}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:0.25rem}pre{display:block;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow-x:auto;background:var(--code-background)}@media (min-width:576px){pre{margin-right:0;margin-left:0}}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:1.5}code b{color:var(--code-color-2);font-weight:normal}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}progress{vertical-align:baseline}[hidden],template{display:none}details{display:block;margin-bottom:1.5rem;padding-bottom:0.75rem;border-bottom:1px solid var(--muted-border)}details summary{list-style-type:none;cursor:pointer;line-height:1rem}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform 0.2s ease-in-out}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;margin-right:-1rem;margin-left:-1rem;padding:2rem 1rem;overflow:hidden;background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:2.5rem 0;padding:2.5rem;border-radius:0.25rem}}@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(footer):not(pre):last-child{margin-bottom:0}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:-1rem;padding:2rem 1rem}@media (min-width:576px){article>footer,article>header,article>pre{margin:-2.5rem;padding:2rem 2.5rem}}@media (min-width:768px){article>footer,article>header,article>pre{margin:-3rem;padding:2rem 3rem}}@media (min-width:992px){article>footer,article>header,article>pre{margin:-3.5rem;padding:2rem 3.5rem}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:-4rem;padding:2rem 4rem}}article>header{margin-top:-2rem;margin-bottom:2rem}@media (min-width:576px){article>header{margin-top:-2.5rem;margin-bottom:2.5rem}}@media (min-width:768px){article>header{margin-top:-3rem;margin-bottom:3rem}}@media (min-width:992px){article>header{margin-top:-3.5rem;margin-bottom:3.5rem}}@media (min-width:1200px){article>header{margin-top:-4rem;margin-bottom:4rem}}article>footer,article>pre{margin-top:2rem;margin-bottom:-2rem}@media (min-width:576px){article>footer,article>pre{margin-top:2.5rem;margin-bottom:-2.5rem}}@media (min-width:768px){article>footer,article>pre{margin-top:3rem;margin-bottom:-3rem}}@media (min-width:992px){article>footer,article>pre{margin-top:3.5rem;margin-bottom:-3.5rem}}@media (min-width:1200px){article>footer,article>pre{margin-top:4rem;margin-bottom:-4rem}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ul:first-of-type{margin-left:-0.5rem}nav ul:last-of-type{margin-right:-0.5rem}nav li{display:inline-block;margin:0;padding:1rem 0.5rem}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:-1rem -0.5rem;padding:1rem 0.5rem;border-radius:0.25rem}nav a:active,nav a:focus,nav a:hover{text-decoration:none}nav a.contrast:not([role=button]){box-shadow:none}aside li,aside nav,aside ul{display:block}aside li{padding:0.5rem}aside li a{margin:-0.5rem;padding:0.5rem}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:0.25rem;background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:normal;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1} \ No newline at end of file diff --git a/css/pico.slim.css b/css/pico.slim.css new file mode 100644 index 00000000..165270fe --- /dev/null +++ b/css/pico.slim.css @@ -0,0 +1,962 @@ +/*! + * Pico.css v0.1.0 (https://picocss.com) + * Copyright 2019 - Licensed under MIT + * + * Slim version example + * You can export only the modules you need + */ +/** + * Theme: default + */ +[data-theme="light"], +:root:not([data-theme="dark"]) { + --background: #FFF; + --text: #415462; + --h1: #1b2832; + --h2: #2c3d49; + --h3: #415462; + --h4: #596b78; + --h5: #73828c; + --h6: #8a99a3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #73828c; + --secondary-hover: #415462; + --secondary-focus: rgba(115, 130, 140, 0.125); + --secondary-inverse: #FFF; + --contrast: #2c3d49; + --contrast-hover: #0d1419; + --contrast-focus: rgba(115, 130, 140, 0.125); + --contrast-border: rgba(255, 223, 128, 0.5); + --contrast-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(27, 40, 50, 0.02); +} + +@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-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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09); + --code-background: #141d24; + --code-inlined: rgba(65, 84, 98, 0.25); + --code-color-1: #73828c; + --code-color-2: #a65980; + --code-color-3: #599fa6; + --code-color-4: #8c8473; + --code-color-5: #4d606d; + --table-border: #10181e; + --table-stripping: rgba(237, 240, 243, 0.02); +} + +/** + * Document + * Content-box & Responsive typography + */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +html { + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + background: var(--background); + color: var(--text); + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 16px; + font-weight: 400; + line-height: 1.5; + text-rendering: optimizeLegibility; +} + +@media (min-width: 576px) { + html { + font-size: 17px; + } +} + +@media (min-width: 768px) { + html { + font-size: 18px; + } +} + +@media (min-width: 992px) { + html { + font-size: 19px; + } +} + +@media (min-width: 1200px) { + html { + font-size: 20px; + } +} + +/** + * Sectioning + * Container and responsive spacings for header, main, footer + */ +main { + display: block; +} + +body { + width: 100%; + margin: 0; +} + +body > header, +body > main, +body > footer { + width: 100%; + margin-right: auto; + margin-left: auto; + padding: 2rem 0; +} + +/** + * Container + */ +.container, +.container-fluid { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 1rem; + padding-left: 1rem; +} + +@media (min-width: 576px) { + .container { + padding-right: 0; + padding-left: 0; + max-width: 510px; + } +} + +@media (min-width: 768px) { + .container { + max-width: 700px; + } +} + +@media (min-width: 992px) { + .container { + max-width: 920px; + } +} + +@media (min-width: 1200px) { + .container { + max-width: 1130px; + } +} + +/** + * Grid + * Minimal grid system with auto-layout columns + */ +.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; +} + +/** + * Horizontal scroller (
) + */ +figure { + display: block; + margin-right: -1rem; + margin-left: -1rem; + padding: 0; + overflow-x: auto; +} + +figure figcaption { + color: var(--muted-text); + font-size: 87.5%; + padding: 0.5rem 1rem; +} + +@media (min-width: 576px) { + figure { + margin-right: 0; + margin-left: 0; + } + figure figcaption { + padding: 0.5rem 0; + } +} + +/** + * Typography + */ +b, +strong { + font-weight: bolder; +} + +sub, +sup { + position: relative; + font-size: .75rem; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -0.25rem; +} + +sup { + top: -0.5rem; +} + +img { + max-width: 100%; + height: auto; + border-style: none; +} + +svg, +img { + vertical-align: text-bottom; +} + +address, +blockquote, +dl, +figure, +form, +ol, +p, +pre, +table, +ul { + margin-top: 0; + margin-bottom: 1.5rem; + color: var(--text); + font-size: 1rem; + font-style: normal; +} + +a { + background-color: transparent; + color: var(--primary); + text-decoration: none; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +a:hover, a:active, a:focus { + color: var(--primary-hover); + text-decoration: underline; +} + +a:focus { + outline: none; + background-color: var(--primary-focus); +} + +a.secondary { + color: var(--secondary); +} + +a.secondary:hover, a.secondary:active, a.secondary:focus { + 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"]):hover, a.contrast:not([role="button"]):active, a.contrast:not([role="button"]):focus { + color: var(--contrast-hover); +} + +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; +} + +header h1 { + font-size: 3rem; +} + +header h2 { + font-size: 2.625rem; +} + +header h3 { + font-size: 2.25rem; +} + +header h4 { + font-size: 1.875rem; +} + +header h5 { + font-size: 1.6875rem; +} + +header h6 { + font-size: 1.5rem; +} + +hgroup { + margin-bottom: 1.5rem; +} + +hgroup h1, +hgroup h2, +hgroup h3, +hgroup h4, +hgroup h5, +hgroup h6 { + 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%; + } +} + +ul, +ol { + padding-left: 1.5rem; +} + +ul li, +ol li { + margin-bottom: 0.75rem; +} + +ul li { + list-style: square; +} + +mark { + padding: .125rem .25rem; + background: var(--mark); + color: var(--mark-text); + vertical-align: middle; +} + +blockquote { + display: block; + margin: 3rem 0; + margin-right: -1rem; + margin-left: -1rem; + padding: 1rem; + border-left: 0.25rem solid var(--muted-border); +} + +@media (min-width: 576px) { + blockquote { + margin-right: 0; + margin-left: 0; + } +} + +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); +} + +/** + * Form elements + */ +input, +optgroup, +select, +textarea { + margin: 0; + font-family: inherit; + font-size: 1rem; + line-height: 1.5; +} + +input { + overflow: visible; +} + +select { + text-transform: none; +} + +legend { + display: table; + max-width: 100%; + padding: 0; + color: inherit; + white-space: normal; +} + +textarea { + overflow: auto; +} + +[type="checkbox"], +[type="radio"] { + padding: 0; +} + +[type="number"]::-webkit-inner-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +fieldset { + margin: 0; + margin-bottom: 1.5rem; + padding: 0; + border: 0; +} + +input:not([type="checkbox"]):not([type="radio"]), +select, +textarea, +form small { + display: block; + width: 100%; +} + +label, +fieldset legend { + display: block; + margin-bottom: 0.125rem; + vertical-align: middle; +} + +input, +select, +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: 1px solid var(--input-border); + border-radius: 0.25rem; + outline: none; + background-color: var(--input-background); + color: var(--text); + font-weight: normal; + vertical-align: middle; + transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; +} + +input::placeholder, +select::placeholder, +textarea::placeholder { + color: var(--muted-text); + opacity: 1; +} + +input:active, input:focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + border-color: var(--primary); +} + +input:focus, +select:focus, +textarea:focus { + box-shadow: 0 0 0 0.2rem var(--primary-focus); +} + +input[readonly], input[disabled], +select[readonly], +select[disabled], +textarea[readonly], +textarea[disabled] { + border-color: var(--muted-border); + box-shadow: none; +} + +input[readonly] ~ label, input[disabled] ~ label, +select[readonly] ~ label, +select[disabled] ~ label, +textarea[readonly] ~ label, +textarea[disabled] ~ label { + color: var(--muted-text); +} + +input[disabled], +select[disabled], +textarea[disabled] { + background-color: var(--muted-background); + opacity: .5; +} + +input:focus:-moz-focusring, +select:focus:-moz-focusring, +textarea:focus:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; +} + +input:not([type="checkbox"]):not([type="radio"]), +select, +textarea { + margin-bottom: 1.5rem; + padding: 0.75rem 1rem; +} + +input[type="color"] { + height: calc(3rem + 2px); +} + +select::-ms-expand { + border: 0; + background-color: transparent; +} + +select:not([multiple]) { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-position: center right .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; +} + +form small { + color: var(--muted-text); +} + +input + small { + margin-top: -1rem; + margin-bottom: 1.5rem; +} + +label > input:not([type="checkbox"]):not([type="radio"]), +label > select, +label > textarea { + margin-top: 0.125rem; +} + +/** + * Form elements + */ +[type="checkbox"], +[type="radio"] { + display: inline-block; + width: 1rem; + height: 1rem; + margin-right: .375rem; + margin-bottom: 0.125rem; + vertical-align: middle; + cursor: pointer; +} + +[type="checkbox"]::-ms-check, +[type="radio"]::-ms-check { + display: none; +} + +[type="checkbox"]:checked, +[type="radio"]:checked { + border-color: var(--primary); + background-color: var(--primary); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + background-position: center; + background-repeat: no-repeat; + background-size: .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.85rem; + height: 1rem; + border: 2px solid var(--input-border); + border-radius: 1rem; + background-color: var(--input-border); + line-height: 1rem; +} + +[type="checkbox"][role="switch"]:before { + display: block; + width: calc(1rem - 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.925rem - 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:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +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 var(--primary); + 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, border-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, +a[role="button"]:hover, +a[role="button"]:active, +a[role="button"]:focus { + border: 1px solid var(--primary-hover); + 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; +} + +/** + * Table + */ +table { + width: 100%; + border-spacing: 0; +} + +th, +td { + padding: 0.5rem 1rem; + border-bottom: 1px solid var(--table-border); + color: var(--muted-text); + font-weight: 400; + text-align: left; + font-size: 0.875rem; +} + +th, +thead td { + color: var(--text); + font-size: 1rem; +} + +thead th, +thead td { + border-bottom: 3px solid var(--table-border); +} + +tbody tr:nth-child(odd) { + background-color: var(--table-stripping); +} diff --git a/css/pico.slim.min.css b/css/pico.slim.min.css new file mode 100644 index 00000000..23cae62d --- /dev/null +++ b/css/pico.slim.min.css @@ -0,0 +1,7 @@ +/*! + * Pico.css v0.1.0 (https://picocss.com) + * Copyright 2019 - Licensed under MIT + * + * Slim version example + * You can export only the modules you need + */:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-hover:#415462;--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-hover:#0d1419;--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-border:rgba(255, 223, 128, 0.5);--contrast-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(27, 40, 50, 0.02)}@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-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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 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.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.09);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:#10181e;--table-stripping:rgba(237, 240, 243, 0.02)}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);background:var(--background);color:var(--text);font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-size:16px;font-weight:400;line-height:1.5;text-rendering:optimizeLegibility}@media (min-width:576px){html{font-size:17px}}@media (min-width:768px){html{font-size:18px}}@media (min-width:992px){html{font-size:19px}}@media (min-width:1200px){html{font-size:20px}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:2rem 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:1rem;padding-left:1rem}@media (min-width:576px){.container{padding-right:0;padding-left:0;max-width:510px}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:1rem;grid-row-gap:1rem;display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin-right:-1rem;margin-left:-1rem;padding:0;overflow-x:auto}figure figcaption{color:var(--muted-text);font-size:87.5%;padding:0.5rem 1rem}@media (min-width:576px){figure{margin-right:0;margin-left:0}figure figcaption{padding:0.5rem 0}}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}img{max-width:100%;height:auto;border-style:none}img,svg{vertical-align:text-bottom}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:1.5rem;color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration 0.2s ease-in-out, box-shadow 0.2s ease-in-out}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast:not([role=button]){box-shadow:inset 0 -0.33rem 0 var(--contrast-border);color:var(--contrast)}a.contrast:not([role=button]):active,a.contrast:not([role=button]):focus,a.contrast:not([role=button]):hover{color:var(--contrast-hover)}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}header h1{font-size:3rem}header h2{font-size:2.625rem}header h3{font-size:2.25rem}header h4{font-size:1.875rem}header h5{font-size:1.6875rem}header h6{font-size:1.5rem}hgroup{margin-bottom:1.5rem}hgroup h1,hgroup h2,hgroup h3,hgroup h4,hgroup h5,hgroup h6{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-size:1.125rem;font-weight:normal}p{margin-bottom:0.75rem}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:1.5rem}ol li,ul li{margin-bottom:0.75rem}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:3rem 0;margin-right:-1rem;margin-left:-1rem;padding:1rem;border-left:0.25rem solid var(--muted-border)}@media (min-width:576px){blockquote{margin-right:0;margin-left:0}}blockquote footer{margin-top:0.75rem;color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;line-height:1.5}input{overflow:visible}select{text-transform:none}legend{display:table;max-width:100%;padding:0;color:inherit;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}fieldset{margin:0;margin-bottom:1.5rem;padding:0;border:0}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}fieldset legend,label{display:block;margin-bottom:0.125rem;vertical-align:middle}input,select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--input-border);border-radius:0.25rem;outline:none;background-color:var(--input-background);color:var(--text);font-weight:normal;vertical-align:middle;transition:background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}input::placeholder,select::placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--primary)}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled],select[disabled],textarea[disabled]{background-color:var(--muted-background);opacity:.5}input:focus:-moz-focusring,select:focus:-moz-focusring,textarea:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #000}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:1.5rem;padding:0.75rem 1rem}input[type=color]{height:calc(3rem + 2px)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23808080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small{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:1rem;height:1rem;margin-right:.375rem;margin-bottom:0.125rem;vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=radio]:checked{border-color:var(--primary);background-color:var(--primary);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");background-position:center;background-repeat:no-repeat;background-size:.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.85rem;height:1rem;border:2px solid var(--input-border);border-radius:1rem;background-color:var(--input-border);line-height:1rem}[type=checkbox][role=switch]:before{display:block;width:calc(1rem - 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.925rem - 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}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}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 var(--primary);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, border-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{border:1px solid var(--primary-hover);background-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=submit]:focus{box-shadow:0 0 0 0.2rem var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}table{width:100%;border-spacing:0}td,th{padding:0.5rem 1rem;border-bottom:1px solid var(--table-border);color:var(--muted-text);font-weight:400;text-align:left;font-size:0.875rem}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}tbody tr:nth-child(odd){background-color:var(--table-stripping)} \ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index c0043621..733e1f66 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -2,8 +2,7 @@ * Pico: Customs styles for Docs */ /** - * Light theme (Default) [Additions for docs] - * Can be forced with data-theme="light" + * Theme: Additions for docs */ [data-theme="light"], :root:not([data-theme="dark"]) { @@ -11,10 +10,6 @@ --nav-border: rgba(115, 130, 140, 0.2); } -/** - * Dark theme (Auto) [Additions for docs] - * Automatically enabled if user has Dark mode enabled - */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-background: rgba(16, 24, 30, 0.8); @@ -22,10 +17,6 @@ } } -/** - * Dark theme (Forced) [Additions for docs] - * Enabled if forced with data-theme="dark" - */ [data-theme="dark"] { --nav-background: rgba(16, 24, 30, 0.8); --nav-border: rgba(115, 130, 140, 0.2); diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js index d15cdea2..65b63ad0 100644 --- a/docs/js/pico.docs.js +++ b/docs/js/pico.docs.js @@ -1,5 +1,5 @@ -//@prepros-append src/aside.js -//@prepros-append src/theme-switcher.js -//@prepros-append src/internal-scroll.js -//@prepros-append src/grid.js -//@prepros-append src/color-picker.js +// @prepros-append src/aside.js +// @prepros-append src/theme-switcher.js +// @prepros-append src/internal-scroll.js +// @prepros-append src/grid.js +// @prepros-append src/color-picker.js diff --git a/docs/scss/pico.docs.scss b/docs/scss/pico.docs.scss index 60f4b06b..3739b139 100644 --- a/docs/scss/pico.docs.scss +++ b/docs/scss/pico.docs.scss @@ -3,12 +3,10 @@ */ // Config -@import "../../scss/colors"; @import "../../scss/variables"; // Theming -@import "themes/light"; -@import "themes/dark"; +@import "themes/docs"; // Layout @import "layout/main"; @@ -21,5 +19,4 @@ // Components @import "components/nav"; -//@import "components/card-code"; @import "components/theme-switcher"; diff --git a/docs/scss/themes/_docs.scss b/docs/scss/themes/_docs.scss new file mode 100644 index 00000000..1a80da70 --- /dev/null +++ b/docs/scss/themes/_docs.scss @@ -0,0 +1,7 @@ +/** + * Theme: Additions for docs + */ + +@import "../../../scss/themes/default/colors"; +@import "docs/light"; +@import "docs/dark"; diff --git a/docs/scss/themes/_dark.scss b/docs/scss/themes/docs/_dark.scss similarity index 61% rename from docs/scss/themes/_dark.scss rename to docs/scss/themes/docs/_dark.scss index 56336cea..cb3e0e3d 100644 --- a/docs/scss/themes/_dark.scss +++ b/docs/scss/themes/docs/_dark.scss @@ -1,8 +1,5 @@ -/** - * Dark theme (Auto) [Additions for docs] - * Automatically enabled if user has Dark mode enabled - */ - +// Dark theme (Auto) [Additions for docs] +// Automatically enabled if user has Dark mode enabled @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-background: #{rgba(darken($grey-900, 6%), .8)}; @@ -12,11 +9,8 @@ -/** - * Dark theme (Forced) [Additions for docs] - * Enabled if forced with data-theme="dark" - */ - +// Dark theme (Forced) [Additions for docs] +// Enabled if forced with data-theme="dark" [data-theme="dark"] { --nav-background: #{rgba(darken($grey-900, 6%), .8)}; --nav-border: #{rgba($grey-500, .2)}; diff --git a/docs/scss/themes/_light.scss b/docs/scss/themes/docs/_light.scss similarity index 59% rename from docs/scss/themes/_light.scss rename to docs/scss/themes/docs/_light.scss index d7a40a4f..f331a228 100644 --- a/docs/scss/themes/_light.scss +++ b/docs/scss/themes/docs/_light.scss @@ -1,8 +1,5 @@ -/** - * Light theme (Default) [Additions for docs] - * Can be forced with data-theme="light" - */ - +// Light theme (Default) [Additions for docs] +// Can be forced with data-theme="light" [data-theme="light"], :root:not([data-theme="dark"]) { --nav-background: #{rgba($white, .7)}; diff --git a/scss/_variables.scss b/scss/_variables.scss index 2d9f8181..fab838a3 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -23,6 +23,9 @@ $enable-responsive-typography: true !default; // .classless version if disabled $enable-classes: true !default; +// Enable validation states for inputs +$enable-input-states: true !default; + // Spacings // –––––––––––––––––––– diff --git a/scss/components/_card-sectioning.scss b/scss/components/_card-sectioning.scss index c49d33b7..c50521c3 100644 --- a/scss/components/_card-sectioning.scss +++ b/scss/components/_card-sectioning.scss @@ -1,5 +1,5 @@ /** - * Card sectionning (
> header, footer|pre) + * Card sectionning (
> header, footer, pre) */ article { diff --git a/scss/content/_code.scss b/scss/content/_code.scss index 27132291..a8cb19b8 100644 --- a/scss/content/_code.scss +++ b/scss/content/_code.scss @@ -82,7 +82,7 @@ pre { } } -// Code syntax +// Code Syntax highlighting code { // Tags diff --git a/scss/content/_form-checkbox-radio.scss b/scss/content/_form-checkbox-radio.scss new file mode 100644 index 00000000..14517768 --- /dev/null +++ b/scss/content/_form-checkbox-radio.scss @@ -0,0 +1,91 @@ +/** + * Form elements + */ + +// Checkboxes & Radios +[type="checkbox"], +[type="radio"] { + display: inline-block; + width: 1rem; + height: 1rem; + margin-right: .375rem; + margin-bottom: $spacing-label-input; + vertical-align: middle; + cursor: pointer; + + &::-ms-check { + display: none; // unstyle IE checkboxes + } + + &:checked { + border-color: var(--primary); + background-color: var(--primary); + // 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='%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; + } + + & ~ label { + display: inline-block; + margin-right: .375rem; + margin-bottom: 0; + cursor: pointer; + } +} + +// Radios +[type="radio"] { + border-radius: 50%; + + &:checked { + border-width: .33rem; + border-color: var(--primary); + background-color: var(--primary-inverse); + background-image: none; + } +} + +// Switchs +[type="checkbox"][role="switch"] { + + // Config + $switch-height: 1rem; + $switch-width: 1.85rem; + $switch-border: 2px; + $switch-transition: .1s ease-in-out; + + // Styles + width: $switch-width; + height: $switch-height; + border: $switch-border solid var(--input-border); + border-radius: $switch-height; + background-color: var(--input-border); + line-height: $switch-height; + + &:before { + display: block; + width: calc(#{$switch-height} - #{$switch-border*2}); + height: 100%; + border-radius: 50%; + background-color: var(--primary-inverse); + content: ''; + transition: margin $switch-transition; + } + + &:checked { + border-color: var(--primary); + background-color: var(--primary); + // Disable if check box icon is needed + background-image: none; + // Enable if check box icon is needed + // background-position: center left $switch-width/6; + // background-size: $switch-width/5 auto; + + &::before { + margin-right: 0; + margin-left: calc(#{$switch-width/2} - #{$switch-border}); + } + } +} diff --git a/scss/content/_form.scss b/scss/content/_form.scss index cbc8b7f7..0c521ddc 100644 --- a/scss/content/_form.scss +++ b/scss/content/_form.scss @@ -172,27 +172,30 @@ textarea { margin-bottom: $spacing-typography; padding: $spacing-input-button; - // Validation states - &[invalid]:not(:focus), - &[valid]:not(:focus) { - padding-right: 2rem; - background-position: center right .75rem; - background-repeat: no-repeat; - background-size: 1rem auto; - } + @if $enable-input-states { - &[invalid]:not(:focus) { - // Source: https://feathericons.com/ - $invalid-icon-color: "b94646"; // Without '#' !important - border-bottom: 1px solid var(--invalid); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); - } + // Validation states + &[invalid]:not(:focus), + &[valid]:not(:focus) { + padding-right: 2rem; + background-position: center right .75rem; + background-repeat: no-repeat; + background-size: 1rem auto; + } - &[valid]:not(:focus) { - // Source: https://feathericons.com/ - $valid-icon-color: "288a6a"; // Without '#' !important - border-bottom: 1px solid var(--valid); - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + &[invalid]:not(:focus) { + // Source: https://feathericons.com/ + $invalid-icon-color: "b94646"; // Without '#' !important + border-bottom: 1px solid var(--invalid); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $invalid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + } + + &[valid]:not(:focus) { + // Source: https://feathericons.com/ + $valid-icon-color: "288a6a"; // Without '#' !important + border-bottom: 1px solid var(--valid); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23" + $valid-icon-color + "' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + } } } @@ -218,94 +221,6 @@ select { } } -// Checkboxes & Radios -[type="checkbox"], -[type="radio"] { - display: inline-block; - width: 1rem; - height: 1rem; - margin-right: .375rem; - margin-bottom: $spacing-label-input; - vertical-align: middle; - cursor: pointer; - - &::-ms-check { - display: none; // unstyle IE checkboxes - } - - &:checked { - border-color: var(--primary); - background-color: var(--primary); - // 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='%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; - } - - & ~ label { - display: inline-block; - margin-right: .375rem; - margin-bottom: 0; - cursor: pointer; - } -} - -// Radios -[type="radio"] { - border-radius: 50%; - - &:checked { - border-width: .33rem; - border-color: var(--primary); - background-color: var(--primary-inverse); - background-image: none; - } -} - -// Switchs -[type="checkbox"][role="switch"] { - - // Config - $switch-height: 1rem; - $switch-width: 1.85rem; - $switch-border: 2px; - $switch-transition: .1s ease-in-out; - - // Styles - width: $switch-width; - height: $switch-height; - border: $switch-border solid var(--input-border); - border-radius: $switch-height; - background-color: var(--input-border); - line-height: $switch-height; - - &:before { - display: block; - width: calc(#{$switch-height} - #{$switch-border*2}); - height: 100%; - border-radius: 50%; - background-color: var(--primary-inverse); - content: ''; - transition: margin $switch-transition; - } - - &:checked { - border-color: var(--primary); - background-color: var(--primary); - // Disable if check box icon is needed - background-image: none; - // Enable if check box icon is needed - // background-position: center left $switch-width/6; - // background-size: $switch-width/5 auto; - - &::before { - margin-right: 0; - margin-left: calc(#{$switch-width/2} - #{$switch-border}); - } - } -} - // Helper form small { color: var(--muted-text); diff --git a/scss/content/_table.scss b/scss/content/_table.scss index 5670cf23..dbba6b6c 100644 --- a/scss/content/_table.scss +++ b/scss/content/_table.scss @@ -22,7 +22,6 @@ td { th, thead td { color: var(--text); - font-weight: bolder; font-size: 1rem; } diff --git a/scss/content/_typography.scss b/scss/content/_typography.scss index 7f128961..8fe2566c 100644 --- a/scss/content/_typography.scss +++ b/scss/content/_typography.scss @@ -171,7 +171,6 @@ h6 { // Increase headings font size inside
header { - h1 { font-size: 2rem*1.5; } @@ -258,6 +257,7 @@ ol { margin-bottom: $spacing-typography/2; } } + ul li { list-style: square; } @@ -305,6 +305,7 @@ ins { color: var(--valid); text-decoration: none; } + // del del { color: var(--invalid); diff --git a/scss/layout/_sectioning.scss b/scss/layout/_sectioning.scss index 42b0854c..76a46982 100644 --- a/scss/layout/_sectioning.scss +++ b/scss/layout/_sectioning.scss @@ -107,7 +107,5 @@ body { } } } - - } } diff --git a/scss/pico.scss b/scss/pico.scss index 42d44042..17f8dc32 100644 --- a/scss/pico.scss +++ b/scss/pico.scss @@ -4,24 +4,23 @@ */ // Config -@import "colors"; @import "variables"; // Theming -@import "themes/light"; -@import "themes/dark"; +@import "themes/default"; // Layout @import "layout/document"; // html @import "layout/sectioning"; // body, header, main, footer @import "layout/container"; // .container, .container-fluid -@import "layout/section"; // main > section +@import "layout/section"; // section @import "layout/grid"; // .grid @import "layout/scroller"; // figure // Content @import "content/typography"; // a, headings, p, ul, blockquote ... @import "content/form"; // label, input, select, ... +@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch @import "content/button"; // button, a[role=button], ... @import "content/button-styles"; // .secondary, .contrast, .outline @import "content/table"; // table, tr, td, ... @@ -31,6 +30,6 @@ // Components @import "components/accordion"; // details, summary @import "components/card"; // article -@import "components/card-sectioning"; // article > header, footer|pre +@import "components/card-sectioning"; // article > header, footer, pre @import "components/nav"; // nav @import "components/tooltip"; // data-tooltip diff --git a/scss/pico.slim.scss b/scss/pico.slim.scss new file mode 100644 index 00000000..ba763713 --- /dev/null +++ b/scss/pico.slim.scss @@ -0,0 +1,41 @@ +/*! + * Pico.css v0.1.0 (https://picocss.com) + * Copyright 2019 - Licensed under MIT + * + * Slim version example + * You can export only the modules you need + */ + +$enable-responsive-spacings: false; +$enable-input-states: false; + +// Config +@import "variables"; + +// Theming +@import "themes/default"; + +// Layout +@import "layout/document"; // html +@import "layout/sectioning"; // body, header, main, footer +@import "layout/container"; // .container, .container-fluid +// @import "layout/section"; // section +@import "layout/grid"; // .grid +@import "layout/scroller"; // figure + +// Content +@import "content/typography"; // a, headings, p, ul, blockquote ... +@import "content/form"; // label, input, select, ... +@import "content/form-checkbox-radio"; // type=checkbox, type=radio, role=switch +@import "content/button"; // button, a[role=button], ... +// @import "content/button-styles"; // .secondary, .contrast, .outline +@import "content/table"; // table, tr, td, ... +// @import "content/code"; // pre, code, ... +// @import "content/miscs"; // hr, progress, template, [hidden] + +// Components +// @import "components/accordion"; // details, summary +// @import "components/card"; // article +// @import "components/card-sectioning"; // article > header, footer, pre +// @import "components/nav"; // nav +// @import "components/tooltip"; // data-tooltip diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss new file mode 100644 index 00000000..b8dde525 --- /dev/null +++ b/scss/themes/_default.scss @@ -0,0 +1,7 @@ +/** + * Theme: default + */ + +@import "default/colors"; +@import "default/light"; +@import "default/dark"; diff --git a/scss/_colors.scss b/scss/themes/default/_colors.scss similarity index 100% rename from scss/_colors.scss rename to scss/themes/default/_colors.scss diff --git a/scss/themes/_dark.scss b/scss/themes/default/_dark.scss similarity index 83% rename from scss/themes/_dark.scss rename to scss/themes/default/_dark.scss index d66e6c98..a3658dde 100644 --- a/scss/themes/_dark.scss +++ b/scss/themes/default/_dark.scss @@ -1,8 +1,5 @@ -/** - * Dark theme (Auto) - * Automatically enabled if user has Dark mode enabled - */ - +// Dark theme (Auto) +// Automatically enabled if user has Dark mode enabled @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { @@ -24,21 +21,18 @@ --primary-focus: #{rgba($primary-600, .25)}; --primary-inverse: #{$white}; - @if $enable-classes { + // // Secondary Call-to-Action, links and kbd + --secondary: #{$grey-600}; + --secondary-hover: #{$grey-500}; + --secondary-focus: #{rgba($grey-600, .25)}; + --secondary-inverse: #{$white}; - // Secondary Call-to-Action and links - --secondary: #{$grey-600}; - --secondary-hover: #{$grey-500}; - --secondary-focus: #{rgba($grey-600, .25)}; - --secondary-inverse: #{$white}; - - // Contrast Call-to-Action and Tooltips - --contrast: #{$grey-100}; - --contrast-hover: #{$white}; - --contrast-focus: #{rgba($grey-600, .25)}; - --contrast-border: #{rgba($amber-200, .33)}; // For links - --contrast-inverse: #{darken($grey-900, 6%)}; - } + // Contrast Call-to-Action and Tooltips + --contrast: #{$grey-100}; + --contrast-hover: #{$white}; + --contrast-focus: #{rgba($grey-600, .25)}; + --contrast-border: #{rgba($amber-200, .33)}; // For links + --contrast-inverse: #{darken($grey-900, 6%)}; // Form elements --input-background: #{darken($grey-900, 6%)}; @@ -75,11 +69,8 @@ -/** - * Dark theme (Forced) - * Enabled if forced with data-theme="dark" - */ - +// Dark theme (Forced) +// Enabled if forced with data-theme="dark" [data-theme="dark"] { // Document @@ -100,21 +91,18 @@ --primary-focus: #{rgba($primary-600, .25)}; --primary-inverse: #{$white}; - @if $enable-classes { + // Secondary Call-to-Action, links and kbd + --secondary: #{$grey-600}; + --secondary-hover: #{$grey-500}; + --secondary-focus: #{rgba($grey-600, .25)}; + --secondary-inverse: #{$white}; - // Secondary Call-to-Action and links - --secondary: #{$grey-600}; - --secondary-hover: #{$grey-500}; - --secondary-focus: #{rgba($grey-600, .25)}; - --secondary-inverse: #{$white}; - - // Contrast Call-to-Action and Tooltips - --contrast: #{$grey-100}; - --contrast-hover: #{$white}; - --contrast-focus: #{rgba($grey-600, .25)}; - --contrast-border: #{rgba($amber-200, .33)}; // For links - --contrast-inverse: #{darken($grey-900, 6%)}; - } + // Contrast Call-to-Action and Tooltips + --contrast: #{$grey-100}; + --contrast-hover: #{$white}; + --contrast-focus: #{rgba($grey-600, .25)}; + --contrast-border: #{rgba($amber-200, .33)}; // For links + --contrast-inverse: #{darken($grey-900, 6%)}; // Form elements --input-background: #{darken($grey-900, 6%)}; diff --git a/scss/themes/_light.scss b/scss/themes/default/_light.scss similarity index 69% rename from scss/themes/_light.scss rename to scss/themes/default/_light.scss index 8e9d6ff5..ea49656c 100644 --- a/scss/themes/_light.scss +++ b/scss/themes/default/_light.scss @@ -1,8 +1,5 @@ -/** - * Light theme (Default) - * Can be forced with data-theme="light" - */ - +// Light theme (Default) +// Can be forced with data-theme="light" [data-theme="light"], :root:not([data-theme="dark"]) { @@ -24,20 +21,18 @@ --primary-focus: #{rgba($primary-600, .125)}; --primary-inverse: #{$white}; - @if $enable-classes { - // Secondary Call-to-Action and links - --secondary: #{$grey-500}; - --secondary-hover: #{$grey-700}; - --secondary-focus: #{rgba($grey-500, .125)}; - --secondary-inverse: #{$white}; + // Secondary Call-to-Action, links and kbd + --secondary: #{$grey-500}; + --secondary-hover: #{$grey-700}; + --secondary-focus: #{rgba($grey-500, .125)}; + --secondary-inverse: #{$white}; - // Contrast Call-to-Action and Tooltips - --contrast: #{$grey-800}; - --contrast-hover: #{mix($grey-900, $black)}; - --contrast-focus: #{rgba($grey-500, .125)}; - --contrast-border: #{rgba($amber-200, .5)}; // For links - --contrast-inverse: #{$white}; - } + // Contrast Call-to-Action and Tooltips + --contrast: #{$grey-800}; + --contrast-hover: #{mix($grey-900, $black)}; + --contrast-focus: #{rgba($grey-500, .125)}; + --contrast-border: #{rgba($amber-200, .5)}; // For links + --contrast-inverse: #{$white}; // Form elements --input-background: #{$white}; @@ -60,8 +55,9 @@ // Code --code-background: #{lighten($grey-50, 2%)}; --code-inlined: #{$grey-50}; - --code-color-2: #{hsl(330, 30%, 50%)}; - --code-color-3: #{hsl(185, 30%, 40%)}; + --code-color-1: #{$grey-500)}; + --code-color-2: #{hsl(330, 40%, 50%)}; + --code-color-3: #{hsl(185, 40%, 40%)}; --code-color-4: #{hsl(40, 20%, 50%)}; --code-color-5: #{mix($grey-300, $grey-400)};