From 6971460bcaa9d0c43486da7cab154ffb2f8a59f7 Mon Sep 17 00:00:00 2001 From: Damien Guard Date: Sat, 14 Nov 2020 21:13:25 +0000 Subject: [PATCH 1/9] Update article example to use a header --- docs/index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/index.html b/docs/index.html index 0690f0fc0..26a29c8e2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1023,11 +1023,13 @@

A flexible container with graceful spacings across devices and viewport size 
<article>I'm a card!</article>

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

+
Header
Body
Footer
<article>
+  <header>Header</header>
   Body
   <footer>Footer</footer>
 </article>
From 14460576bff4d35e900a29a5109bf7395c6fbc22 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Wed, 30 Jun 2021 11:52:49 +0700 Subject: [PATCH 2/9] Fix in nested accordions #15 --- css/pico.classless.css | 4 ++-- css/pico.classless.min.css | 2 +- css/pico.css | 4 ++-- css/pico.fluid.classless.css | 4 ++-- css/pico.fluid.classless.min.css | 2 +- css/pico.min.css | 2 +- scss/components/_accordion.scss | 2 +- 7 files changed, 10 insertions(+), 10 deletions(-) diff --git a/css/pico.classless.css b/css/pico.classless.css index a9ac3d55c..1b8d9fe86 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -1670,12 +1670,12 @@ details summary ~ * ~ * { margin-top: 0; } -details[open] summary { +details[open] > summary { margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } -details[open] summary::after { +details[open] > summary::after { transform: rotate(0); } diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index debb545ec..652cdfe89 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.2.1 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index e89e4c48a..6eee6e117 100644 --- a/css/pico.css +++ b/css/pico.css @@ -1874,12 +1874,12 @@ details summary ~ * ~ * { margin-top: 0; } -details[open] summary { +details[open] > summary { margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } -details[open] summary::after { +details[open] > summary::after { transform: rotate(0); } diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index 418a09570..892fa78ee 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -1666,12 +1666,12 @@ details summary ~ * ~ * { margin-top: 0; } -details[open] summary { +details[open] > summary { margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); } -details[open] summary::after { +details[open] > summary::after { transform: rotate(0); } diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 91d01d29e..68904c49f 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.2.1 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter)}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter)}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter)}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter)}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter)}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter)}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter)}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter)}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index b6ab16df6..b0db09437 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.2.1 (https://picocss.com) * Copyright 2020 - Licensed under MIT - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) 0}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing-gutter);padding-left:var(--spacing-gutter)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}.grid{grid-column-gap:var(--spacing-gutter);grid-row-gap:var(--spacing-gutter);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary);text-decoration:underline}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast{color:var(--contrast);text-decoration:underline}a.contrast:active,a.contrast:focus,a.contrast:hover{color:var(--contrast-hover)}a.contrast:focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a[role=button].secondary,button.secondary,input[type=reset],input[type=submit].secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=reset]:focus,input[type=submit].secondary:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}a[role=button].contrast,button.contrast,input[type=reset].contrast,input[type=submit].contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:var(--contrast);color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{border-color:var(--contrast-hover-border);background-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=submit].outline{border:var(--button-border-width) solid var(--primary-border);background-color:transparent;color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{border:var(--button-border-width) solid var(--primary-hover-border);color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=reset].outline,input[type=submit].outline.secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:transparent;color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{border:var(--button-border-width) solid var(--secondary-hover-border);color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:transparent;color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{border:var(--button-border-width) solid var(--contrast-hover-border);color:var(--contrast-hover)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input .invalid,input .valid,input[aria-invalid],select .invalid,select .valid,select[aria-invalid],textarea .invalid,textarea .valid,textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input .valid,input[aria-invalid=false],select .valid,select[aria-invalid=false],textarea .valid,textarea[aria-invalid=false]{background-image:var(--icon-valid)}input .invalid,input[aria-invalid=true],select .invalid,select[aria-invalid=true],textarea .invalid,textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open] summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open] summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) 0}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing-gutter);padding-left:var(--spacing-gutter)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}.grid{grid-column-gap:var(--spacing-gutter);grid-row-gap:var(--spacing-gutter);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary);text-decoration:underline}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast{color:var(--contrast);text-decoration:underline}a.contrast:active,a.contrast:focus,a.contrast:hover{color:var(--contrast-hover)}a.contrast:focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a[role=button].secondary,button.secondary,input[type=reset],input[type=submit].secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=reset]:focus,input[type=submit].secondary:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}a[role=button].contrast,button.contrast,input[type=reset].contrast,input[type=submit].contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:var(--contrast);color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{border-color:var(--contrast-hover-border);background-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=submit].outline{border:var(--button-border-width) solid var(--primary-border);background-color:transparent;color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{border:var(--button-border-width) solid var(--primary-hover-border);color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=reset].outline,input[type=submit].outline.secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:transparent;color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{border:var(--button-border-width) solid var(--secondary-hover-border);color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:transparent;color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{border:var(--button-border-width) solid var(--contrast-hover-border);color:var(--contrast-hover)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input .invalid,input .valid,input[aria-invalid],select .invalid,select .valid,select[aria-invalid],textarea .invalid,textarea .valid,textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input .valid,input[aria-invalid=false],select .valid,select[aria-invalid=false],textarea .valid,textarea[aria-invalid=false]{background-image:var(--icon-valid)}input .invalid,input[aria-invalid=true],select .invalid,select[aria-invalid=true],textarea .invalid,textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/scss/components/_accordion.scss b/scss/components/_accordion.scss index 7c306081f..3dcc63e54 100644 --- a/scss/components/_accordion.scss +++ b/scss/components/_accordion.scss @@ -59,7 +59,7 @@ details { // Open &[open] { - summary { + > summary { margin-bottom: calc(var(--spacing-typography) / 4); color: var(--muted-text); From d12af72cabc63d15de1ef6bb9a1d9ed650fca088 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Fri, 2 Jul 2021 16:54:41 +0700 Subject: [PATCH 3/9] CSS Vars refactoring --- LICENSE.md | 2 +- css/pico.classless.css | 1581 +++++++++---------- css/pico.classless.min.css | 4 +- css/pico.css | 1738 ++++++++++----------- css/pico.fluid.classless.css | 1607 +++++++++---------- css/pico.fluid.classless.min.css | 4 +- css/pico.min.css | 4 +- css/pico.slim.css | 1215 ++++++++------ css/pico.slim.min.css | 4 +- css/themes/default.css | 625 +++++--- css/themes/default.min.css | 2 +- docs/css/pico.docs.css | 160 +- docs/css/pico.docs.min.css | 2 +- docs/css/themes/docs.css | 35 + docs/index.html | 186 +-- docs/js/pico.docs.js | 2 +- docs/js/pico.docs.min.js | 2 +- docs/js/src/aside.js | 2 +- docs/js/src/color-picker.js | 30 +- docs/js/src/grid.js | 2 +- docs/js/src/scrollspy.js | 2 +- docs/js/src/theme-switcher.js | 2 +- docs/scss/components/_nav.scss | 14 +- docs/scss/components/_theme-switcher.scss | 13 +- docs/scss/content/_code.scss | 50 +- docs/scss/content/_typography.scss | 6 +- docs/scss/layout/_aside.scss | 8 +- docs/scss/layout/_documentation.scss | 30 +- docs/scss/layout/_main.scss | 91 +- docs/scss/themes/docs/_dark.scss | 12 +- docs/scss/themes/docs/_icons.scss | 1 - docs/scss/themes/docs/_light.scss | 7 +- scss/_variables.scss | 11 +- scss/components/_accordion.scss | 21 +- scss/components/_card-sectioning.scss | 133 -- scss/components/_card.scss | 69 +- scss/components/_nav.scss | 35 +- scss/components/_progress.scss | 17 +- scss/components/_tooltip.scss | 11 +- scss/content/_accessibility.scss | 2 +- scss/content/_button-styles.scss | 133 -- scss/content/_button.scss | 130 +- scss/content/_code.scss | 60 +- scss/content/_form-alt-input-types.scss | 115 +- scss/content/_form-checkbox-radio.scss | 59 +- scss/content/_form.scss | 184 +-- scss/content/_miscs.scss | 2 +- scss/content/_table.scss | 36 +- scss/content/_typography.scss | 197 +-- scss/layout/_container.scss | 12 +- scss/layout/_document.scss | 42 +- scss/layout/_grid.scss | 4 +- scss/layout/_scroller.scss | 4 +- scss/layout/_section.scss | 34 +- scss/layout/_sectioning.scss | 91 +- scss/pico.fluid.classless.scss | 2 +- scss/pico.scss | 4 +- scss/pico.slim.scss | 13 +- scss/themes/default.scss | 21 +- scss/themes/default/_colors.scss | 44 +- scss/themes/default/_dark.scss | 272 ++-- scss/themes/default/_icons.scss | 13 - scss/themes/default/_light.scss | 183 ++- scss/themes/default/_styles.scss | 273 +++- 64 files changed, 4800 insertions(+), 4870 deletions(-) create mode 100644 docs/css/themes/docs.css delete mode 100644 scss/components/_card-sectioning.scss delete mode 100644 scss/content/_button-styles.scss delete mode 100644 scss/themes/default/_icons.scss diff --git a/LICENSE.md b/LICENSE.md index 00a92421e..d256abcb9 100644 --- a/LICENSE.md +++ b/LICENSE.md @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2019-2020 Pico +Copyright (c) 2019-2021 Pico Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/css/pico.classless.css b/css/pico.classless.css index 1b8d9fe86..a1fafccea 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -1,235 +1,440 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ /** * Theme: default */ :root { - --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --titles-font: var(--text-font); - --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --line-height: 1.5; - --text-weight: 400; - --titles-weight: 700; - --form-element-weight: var(--text-weight); - --buttons-weight: var(--text-weight); - --code-weight: var(--text-weight); - --base-font-xs: 16px; - --base-font-sm: 17px; - --base-font-md: 18px; - --base-font-lg: 19px; - --base-font-xl: 20px; - --h1-size: 2rem; - --h2-size: 1.75rem; - --h3-size: 1.5rem; - --h4-size: 1.25rem; - --h5-size: 1.125rem; - --h6-size: 1rem; - --block-round: .25rem; - --form-element-border-width: 1px; - --form-element-outline-width: 3px; - --checkbox-radio-border-width: 2px; - --switch-border-width: 3px; - --form-element-spacing-vertical: .75rem; + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: .75rem; --form-element-spacing-horizontal: 1rem; - --button-round: var(--block-round); - --button-border-width: var(--form-element-border-width); - --button-outline-width: var(--form-element-outline-width); - --button-spacing-vertical: var(--form-element-spacing-vertical); - --button-spacing-horizontal: var(--form-element-spacing-horizontal); - --spacing-gutter: 1rem; - --spacing-block: 2rem; - --spacing-factor-xs: 1; - --spacing-factor-sm: 1.25; - --spacing-factor-md: 1.5; - --spacing-factor-lg: 1.75; - --spacing-factor-xl: 2; - --spacing-typography: 1.5rem; - --spacing-form-element: .25rem; - --transition: .2s ease-in-out; + --transition: .2s ease-in-out; } -:root { - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 0.875rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; } [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #08769b; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-border: var(--secondary); - --secondary-hover: #415462; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-border: var(--contrast); - --contrast-hover: #0d1419; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.33); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.075); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } } -[data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); +[data-theme="dark"] :root:not([data-theme="light"]) { + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } /** @@ -254,40 +459,16 @@ html { -moz-tab-size: 4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - background: var(--background); - color: var(--text); - font-family: var(--text-font); - font-size: var(--base-font-xs); - font-weight: var(--text-weight); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } -@media (min-width: 576px) { - html { - font-size: var(--base-font-sm); - } -} - -@media (min-width: 768px) { - html { - font-size: var(--base-font-md); - } -} - -@media (min-width: 992px) { - html { - font-size: var(--base-font-lg); - } -} - -@media (min-width: 1200px) { - html { - font-size: var(--base-font-xl); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -307,7 +488,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) var(--spacing-gutter); + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); } @media (min-width: 576px) { @@ -315,7 +496,8 @@ body > footer { body > main, body > footer { max-width: 510px; - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; + padding-right: 0; + padding-left: 0; } } @@ -324,7 +506,6 @@ body > footer { body > main, body > footer { max-width: 700px; - padding: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; } } @@ -333,7 +514,6 @@ body > footer { body > main, body > footer { max-width: 920px; - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; } } @@ -342,7 +522,6 @@ body > footer { body > main, body > footer { max-width: 1130px; - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; } } @@ -351,31 +530,7 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); -} - -@media (min-width: 576px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2); - } -} - -@media (min-width: 768px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2); - } -} - -@media (min-width: 992px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2); - } -} - -@media (min-width: 1200px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2); - } + margin-bottom: var(--block-spacing-vertical); } /** @@ -389,8 +544,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -443,27 +598,29 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } h1, @@ -473,179 +630,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ h2, -table ~ h2, -ul ~ h2 { - margin-top: calc(var(--spacing-typography) * 1.75); -} - address ~ h3, -blockquote ~ h3, -dl ~ h3, -figure ~ h3, -form ~ h3, -ol ~ h3, -p ~ h3, -pre ~ h3, -table ~ h3, -ul ~ h3 { - margin-top: calc(var(--spacing-typography) * 1.5); -} - address ~ h4, -blockquote ~ h4, -dl ~ h4, -figure ~ h4, -form ~ h4, -ol ~ h4, -p ~ h4, -pre ~ h4, -table ~ h4, -ul ~ h4 { - margin-top: calc(var(--spacing-typography) * 1.25); -} - address ~ h5, -blockquote ~ h5, -dl ~ h5, -figure ~ h5, -form ~ h5, -ol ~ h5, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); font-family: unset; - font-size: 1.125rem; + font-size: 1rem; font-weight: unset; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } small { - font-size: 85%; -} - -@media (min-width: 576px) { - small { - font-size: 83%; - } -} - -@media (min-width: 768px) { - small { - font-size: 81%; - } -} - -@media (min-width: 992px) { - small { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - small { - font-size: 77%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -654,21 +763,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -678,12 +787,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -758,7 +867,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -770,17 +879,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: none; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -797,30 +909,37 @@ input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:hover, -[type="file"]::-webkit-file-upload-button:active, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { - border-color: var(--primary-hover-border); - background-color: var(--primary-hover); - box-shadow: var(--button-hover-shadow); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -830,21 +949,6 @@ a[role="button"][disabled] { pointer-events: none; } -input[type="reset"] { - border: var(--button-border-width) solid var(--secondary-border); - background-color: var(--secondary); - color: var(--secondary-inverse); -} - -input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { - border-color: var(--secondary-hover-border); - background-color: var(--secondary-hover); -} - -input[type="reset"]:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important; -} - /** * Form elements */ @@ -911,7 +1015,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -929,12 +1033,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -942,14 +1046,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -967,72 +1070,48 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; -} - -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); -} - -input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, -select[readonly]:active, -select[readonly]:focus, -select[disabled]:active, -select[disabled]:focus, -textarea[readonly]:active, -textarea[readonly]:focus, -textarea[disabled]:active, -textarea[disabled]:focus { - box-shadow: none !important; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { - background-color: var(--muted-background); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); } -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } input[aria-invalid], @@ -1047,25 +1126,46 @@ textarea[aria-invalid] { input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color) !important; +} + input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color) !important; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: var(--spacing-typography); -} - -input:not([type="range"]):not([type="file"]):focus, -select:focus, -textarea:focus { - box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1081,21 +1181,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1112,7 +1211,7 @@ label > textarea { height: 1.25rem; margin-top: -.125rem; margin-right: .375rem; - border-width: var(--checkbox-radio-border-width); + border-width: var(--border-width); vertical-align: middle; cursor: pointer; } @@ -1122,22 +1221,18 @@ label > textarea { display: none; } -[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, -[type="radio"]:indeterminate { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); background-image: var(--icon-checkbox); background-position: center; background-repeat: no-repeat; background-size: .75rem auto; } -[type="checkbox"]:indeterminate, -[type="radio"]:indeterminate { - background-image: var(--icon-minus); -} - [type="checkbox"] ~ label, [type="radio"] ~ label { display: inline-block; @@ -1146,45 +1241,64 @@ label > textarea { cursor: pointer; } +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-repeat: no-repeat; + background-size: .75rem auto; +} + [type="radio"] { border-radius: 50%; } -[type="radio"]:checked { - border-width: .33rem; - border-color: var(--input-hover-border); - background-color: var(--input-inverse); +[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: .35rem; background-image: none; } [type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); width: 2.25rem; height: 1.25rem; - border: var(--switch-border-width) solid var(--input-border); + border: var(--border-width) solid var(--border-color); border-radius: 1.25rem; - background-color: var(--input-border); + background-color: var(--background-color); line-height: 1.25rem; } +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} + +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} + [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - (var(--switch-border-width)*2)); + width: calc(1.25rem - (var(--border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--input-inverse); + background-color: var(--color); content: ''; transition: margin 0.1s ease-in-out; } [type="checkbox"][role="switch"]:checked { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); background-image: none; } [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(1.125rem - var(--switch-border-width)); + margin-left: calc(1.125rem - var(--border-width)); } /** @@ -1201,12 +1315,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="date"], @@ -1233,6 +1347,7 @@ label > textarea { } [type="file"] { + --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; @@ -1240,26 +1355,34 @@ label > textarea { } [type="file"]::-webkit-file-upload-button { - padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); - border: var(--button-border-width) solid var(--secondary-border); - background-color: var(--secondary); - box-shadow: var(--button-shadow); - color: var(--secondary-inverse); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-size: 1rem; + font-weight: var(--font-weight); + line-height: var(--line-height); + text-align: center; + cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } [type="file"]:hover, [type="file"]:active, [type="file"]:focus { border: none; background: none; + --color: var(--color); } [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { - border-color: var(--secondary-hover-border); - background-color: var(--secondary-hover); -} - -[type="file"]:focus::-webkit-file-upload-button { - box-shadow: none; + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } [type="range"] { @@ -1275,29 +1398,29 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { - background-color: var(--input-border); + background-color: var(--border-radius); } [type="range"]::-webkit-slider-thumb { @@ -1305,9 +1428,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1317,9 +1440,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1329,61 +1452,39 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } -[type="range"]:focus { - background: transparent !important; -} - -[type="range"]:focus::-webkit-slider-runnable-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-moz-range-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-ms-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-ms-fill-lower { - box-shadow: 0 0 0 0.1rem var(--input-focus); +[type="range"]:hover, [type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); } [type="range"]:active { - background: transparent !important; + --range-thumb-color: var(--range-thumb-active-color); } [type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); - background-color: var(--primary); } [type="range"]:active::-moz-range-thumb { transform: scale(1.25); - background-color: var(--primary); } [type="range"]:active::-ms-thumb { transform: scale(1.25); - background-color: var(--primary); -} - -[type="range"]:focus { - box-shadow: none; } [type="search"] { border-radius: 5rem; - padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); - background-position: center left .75rem; + background-position: center left 1.125rem; background-repeat: no-repeat; background-size: 1rem auto; } @@ -1406,27 +1507,20 @@ table { th, td { - padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); - border-bottom: 1px solid var(--table-border); - color: var(--muted-text); - font-size: 0.875rem; - font-weight: var(--text-weight); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** @@ -1436,8 +1530,8 @@ pre, code, kbd, samp { - font-family: var(--code-font); - font-size: 1rem; + font-family: var(--font-family); + font-size: .875rem; } pre { @@ -1448,58 +1542,25 @@ pre { pre, code, kbd { - background: var(--code-inlined); - color: var(--code-color-1); - font-size: 85%; - font-weight: var(--code-weight); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); line-height: initial; } -@media (min-width: 576px) { - pre, - code, - kbd { - font-size: 83%; - } -} - -@media (min-width: 768px) { - pre, - code, - kbd { - font-size: 81%; - } -} - -@media (min-width: 992px) { - pre, - code, - kbd { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - pre, - code, - kbd { - font-size: 77%; - } -} - code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: var(--block-round); + border-radius: var(--border-radius); } pre { display: block; - margin-bottom: var(--spacing-block); - padding: var(--spacing-block) var(--spacing-gutter); + margin-bottom: var(--spacing); + padding: var(--spacing); overflow-x: auto; - background: var(--code-background); + background: var(--code-background-color); } pre > code { @@ -1511,29 +1572,29 @@ pre > code { } code b { - color: var(--code-color-2); - font-weight: var(--code-weight); + color: var(--code-tag-color); + font-weight: var(--font-weight); } code i { - color: var(--code-color-3); + color: var(--code-property-color); font-style: normal; } code u { - color: var(--code-color-4); + color: var(--code-value-color); text-decoration: none; } code em { - color: var(--code-color-5); + color: var(--code-comment-color); font-style: normal; } kbd { - background-color: var(--secondary); - color: var(--secondary-inverse); - font-weight: bolder; + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: middle; } /** @@ -1581,7 +1642,7 @@ hr { height: 0; overflow: visible; border: none; - border-top: 1px solid var(--muted-border); + border-top: 1px solid var(--muted-border-color); } [hidden], @@ -1621,15 +1682,17 @@ canvas { */ details { display: block; - margin-bottom: var(--spacing-typography); - padding-bottom: calc(var(--spacing-typography) / 2); - border-bottom: 1px solid var(--muted-border); + margin-bottom: var(--spacing); + padding-bottom: calc(var(--spacing) / 2); + border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { + color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; cursor: pointer; + transition: color var(--transition); } details summary::-webkit-details-marker { @@ -1659,11 +1722,12 @@ details summary::after { } details summary:focus { + color: var(--accordion-active-summary-color); outline: none; } details summary ~ * { - margin-top: calc(var(--spacing-typography) / 2); + margin-top: calc(var(--spacing) / 2); } details summary ~ * ~ * { @@ -1671,8 +1735,11 @@ details summary ~ * ~ * { } details[open] > summary { - margin-bottom: calc(var(--spacing-typography) / 4); - color: var(--muted-text); + margin-bottom: calc(var(--spacing) / 4); +} + +details[open] > summary:not(:focus) { + color: var(--accordion-open-summary-color); } details[open] > summary::after { @@ -1683,166 +1750,34 @@ details[open] > summary::after { * Card (
) */ article { - margin: var(--spacing-block) 0; - padding: var(--spacing-block) var(--spacing-gutter); + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); overflow: hidden; - border-radius: var(--block-round); - background: var(--card-background); - box-shadow: var(--card-shadow); -} - -@media (min-width: 576px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)); - } -} - -article > *:not(header):not(footer):not(pre):last-child { - margin-bottom: 0 !important; -} - -/** - * Card sectionning (
> header, footer, pre) - */ -article > header, -article > footer { - background-color: var(--card-sections); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); } article > header, article > footer, article > pre { - margin: calc(var(--spacing-gutter) * -1); - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); } article > header { - margin-top: calc(var(--spacing-gutter) * -2); - margin-bottom: var(--spacing-block); -} - -@media (min-width: 576px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); } article > footer, article > pre { - margin-top: var(--spacing-block); - margin-bottom: calc(var(--spacing-gutter) * -2); -} - -@media (min-width: 576px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - } -} - -@media (min-width: 768px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-md)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - } -} - -@media (min-width: 992px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - } -} - -@media (min-width: 1200px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - } + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); } /** @@ -1867,18 +1802,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing-gutter) * -0.5); + margin-left: calc(var(--spacing) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing-gutter) * -0.5); + margin-right: calc(var(--spacing) * -0.5); } nav li { display: inline-block; margin: 0; - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + padding: var(--spacing) calc(var(--spacing) / 2); } nav li > *, @@ -1888,14 +1823,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { nav a { display: block; - margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); - border-radius: var(--block-round); - text-decoration: none !important; + margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); + padding: var(--spacing) calc(var(--spacing) / 2); + border-radius: var(--border-radius); + text-decoration: none; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none !important; + text-decoration: none; } aside nav, @@ -1906,12 +1841,12 @@ aside li { } aside li { - padding: calc(var(--spacing-gutter) / 2); + padding: calc(var(--spacing) / 2); } aside li a { - margin: calc(var(--spacing-gutter) * -0.5); - padding: calc(var(--spacing-gutter) / 2); + margin: calc(var(--spacing) * -0.5); + padding: calc(var(--spacing) / 2); } /** @@ -1929,29 +1864,29 @@ progress { display: inline-block; width: 100%; height: .5rem; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: calc(var(--spacing) / 2); overflow: hidden; border: 0; - border-radius: var(--block-round); - background-color: var(--muted-background); - color: var(--primary); + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); } progress::-webkit-progress-bar { - border-radius: var(--block-round); + border-radius: var(--border-radius); background: transparent; } progress[value]::-webkit-progress-value { - background-color: var(--primary); + background-color: var(--progress-color); } progress::-moz-progress-bar { - background-color: var(--primary); + background-color: var(--progress-color); } progress:indeterminate { - background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat; + background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; animation: progress-indeterminate 1s linear infinite; } @@ -1994,12 +1929,12 @@ progress:indeterminate::-moz-progress-bar { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--block-round); - background: var(--contrast); - color: var(--contrast-inverse); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + color: var(--tooltip-color); font-size: .85rem; font-style: normal; - font-weight: var(--text-weight); + font-weight: var(--font-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -2016,7 +1951,7 @@ progress:indeterminate::-moz-progress-bar { border-left: .3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--contrast); + color: var(--tooltip-background-color); content: ''; } diff --git a/css/pico.classless.min.css b/css/pico.classless.min.css index 652cdfe89..277fc8fa0 100644 --- a/css/pico.classless.min.css +++ b/css/pico.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px;padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px;padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px;padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + * Copyright 2019-2021 - Licensed under MIT + */:root{--font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:0.875rem}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}code,kbd,pre,samp{--font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}}[data-theme=dark] :root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal)}@media (min-width:576px){body>footer,body>header,body>main{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){body>footer,body>header,body>main{max-width:700px}}@media (min-width:992px){body>footer,body>header,body>main{max-width:920px}}@media (min-width:1200px){body>footer,body>header,body>main{max-width:1130px}}section{margin-bottom:var(--block-spacing-vertical)}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing) / 2) 0;color:var(--muted-color)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration);transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{--color:var(--primary-hover);--text-decoration:underline}a:focus{--background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);font-family:unset;font-size:1rem;font-weight:unset}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{--background-color:var(--primary-hover);--border-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:none}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)!important}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)!important}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=checkbox]:indeterminate{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-minus);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary-inverse);border-width:.35rem;background-image:none}[type=checkbox][role=switch]{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color);--color:var(--switch-color);width:2.25rem;height:1.25rem;border:var(--border-width) solid var(--border-color);border-radius:1.25rem;background-color:var(--background-color);line-height:1.25rem}[type=checkbox][role=switch]:focus{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color)}[type=checkbox][role=switch]:checked{--background-color:var(--switch-checked-background-color);--border-color:var(--switch-checked-background-color)}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--border-width) * 2));height:100%;border-radius:50%;background-color:var(--color);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--border-radius) / 2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--border-radius) / 2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{--color:var(--muted-color);padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);margin-right:calc(var(--spacing) / 2);padding:calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none;--color:var(--color)}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--border-radius)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus,[type=range]:hover{--range-border-color:var(--range-active-border-color);--range-thumb-color:var(--range-thumb-hover-color)}[type=range]:active{--range-thumb-color:var(--range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important;background-image:var(--icon-search);background-position:center left 1.125rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}code,kbd,pre,samp{font-family:var(--font-family);font-size:.875rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-background-color);color:var(--code-color);font-weight:var(--font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--border-radius)}pre{display:block;margin-bottom:var(--spacing);padding:var(--spacing);overflow-x:auto;background:var(--code-background-color)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-tag-color);font-weight:var(--font-weight)}code i{color:var(--code-property-color);font-style:normal}code u{color:var(--code-value-color);text-decoration:none}code em{color:var(--code-comment-color);font-style:normal}kbd{background-color:var(--code-kbd-background-color);color:var(--code-kbd-color);vertical-align:middle}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border-color)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing);padding-bottom:calc(var(--spacing) / 2);border-bottom:var(--border-width) solid var(--accordion-border-color)}details summary{color:var(--accordion-close-summary-color);line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--transition)}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{color:var(--accordion-active-summary-color);outline:none}details summary~*{margin-top:calc(var(--spacing) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing) / 4)}details[open]>summary:not(:focus){color:var(--accordion-open-summary-color)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--block-spacing-vertical) 0;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal);overflow:hidden;border-radius:var(--border-radius);background:var(--card-background-color);box-shadow:var(--card-box-shadow)}article>footer,article>header,article>pre{margin-right:calc(var(--block-spacing-horizontal) * -1);margin-left:calc(var(--block-spacing-horizontal) * -1);padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color)}article>header{margin-top:calc(var(--block-spacing-vertical) * -1);margin-bottom:var(--block-spacing-vertical);border-bottom:var(--border-width) solid var(--card-border-color)}article>footer,article>pre{margin-top:var(--block-spacing-vertical);margin-bottom:calc(var(--block-spacing-vertical) * -1);border-top:var(--border-width) solid var(--card-border-color)}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing) calc(var(--spacing) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);padding:var(--spacing) calc(var(--spacing) / 2);border-radius:var(--border-radius);text-decoration:none}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing) / 2)}aside li a{margin:calc(var(--spacing) * -0.5);padding:calc(var(--spacing) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing) / 2);overflow:hidden;border:0;border-radius:var(--border-radius);background-color:var(--progress-background-color);color:var(--progress-color)}progress::-webkit-progress-bar{border-radius:var(--border-radius);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--progress-color)}progress::-moz-progress-bar{background-color:var(--progress-color)}progress:indeterminate{background:var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--border-radius);background:var(--tooltip-background-color);color:var(--tooltip-color);font-size:.85rem;font-style:normal;font-weight:var(--font-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--tooltip-background-color);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.css b/css/pico.css index 6eee6e117..4ae4e102b 100644 --- a/css/pico.css +++ b/css/pico.css @@ -1,235 +1,440 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ /** * Theme: default */ :root { - --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --titles-font: var(--text-font); - --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --line-height: 1.5; - --text-weight: 400; - --titles-weight: 700; - --form-element-weight: var(--text-weight); - --buttons-weight: var(--text-weight); - --code-weight: var(--text-weight); - --base-font-xs: 16px; - --base-font-sm: 17px; - --base-font-md: 18px; - --base-font-lg: 19px; - --base-font-xl: 20px; - --h1-size: 2rem; - --h2-size: 1.75rem; - --h3-size: 1.5rem; - --h4-size: 1.25rem; - --h5-size: 1.125rem; - --h6-size: 1rem; - --block-round: .25rem; - --form-element-border-width: 1px; - --form-element-outline-width: 3px; - --checkbox-radio-border-width: 2px; - --switch-border-width: 3px; - --form-element-spacing-vertical: .75rem; + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: .75rem; --form-element-spacing-horizontal: 1rem; - --button-round: var(--block-round); - --button-border-width: var(--form-element-border-width); - --button-outline-width: var(--form-element-outline-width); - --button-spacing-vertical: var(--form-element-spacing-vertical); - --button-spacing-horizontal: var(--form-element-spacing-horizontal); - --spacing-gutter: 1rem; - --spacing-block: 2rem; - --spacing-factor-xs: 1; - --spacing-factor-sm: 1.25; - --spacing-factor-md: 1.5; - --spacing-factor-lg: 1.75; - --spacing-factor-xl: 2; - --spacing-typography: 1.5rem; - --spacing-form-element: .25rem; - --transition: .2s ease-in-out; + --transition: .2s ease-in-out; } -:root { - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 0.875rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; } [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #08769b; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-border: var(--secondary); - --secondary-hover: #415462; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-border: var(--contrast); - --contrast-hover: #0d1419; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.33); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.075); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } } -[data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); +[data-theme="dark"] :root:not([data-theme="light"]) { + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } /** @@ -254,40 +459,16 @@ html { -moz-tab-size: 4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - background: var(--background); - color: var(--text); - font-family: var(--text-font); - font-size: var(--base-font-xs); - font-weight: var(--text-weight); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } -@media (min-width: 576px) { - html { - font-size: var(--base-font-sm); - } -} - -@media (min-width: 768px) { - html { - font-size: var(--base-font-md); - } -} - -@media (min-width: 992px) { - html { - font-size: var(--base-font-lg); - } -} - -@media (min-width: 1200px) { - html { - font-size: var(--base-font-xl); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -307,39 +488,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) 0; -} - -@media (min-width: 576px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; - } -} - -@media (min-width: 768px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; - } -} - -@media (min-width: 992px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; - } -} - -@media (min-width: 1200px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; - } + padding: var(--block-spacing-vertical) 0; } /** @@ -350,8 +499,8 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding-right: var(--spacing-gutter); - padding-left: var(--spacing-gutter); + padding-right: var(--spacing); + padding-left: var(--spacing); } @media (min-width: 576px) { @@ -385,31 +534,7 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); -} - -@media (min-width: 576px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2); - } -} - -@media (min-width: 768px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2); - } -} - -@media (min-width: 992px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2); - } -} - -@media (min-width: 1200px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2); - } + margin-bottom: var(--block-spacing-vertical); } /** @@ -417,8 +542,8 @@ section { * Minimal grid system with auto-layout columns */ .grid { - grid-column-gap: var(--spacing-gutter); - grid-row-gap: var(--spacing-gutter); + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); display: grid; grid-template-columns: 1fr; margin: 0; @@ -445,8 +570,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -499,53 +624,53 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } a.secondary { - color: var(--secondary); - text-decoration: underline; + --color: var(--secondary); } a.secondary:hover, a.secondary:active, a.secondary:focus { - color: var(--secondary-hover); + --color: var(--secondary-hover); } a.secondary:focus { - background-color: var(--secondary-focus); + --background-color: var(--secondary-focus); } a.contrast { - color: var(--contrast); - text-decoration: underline; + --color: var(--contrast); } a.contrast:hover, a.contrast:active, a.contrast:focus { - color: var(--contrast-hover); + --color: var(--contrast-hover); } a.contrast:focus { - background-color: var(--contrast-focus); + --background-color: var(--contrast-focus); } h1, @@ -555,179 +680,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ h2, -table ~ h2, -ul ~ h2 { - margin-top: calc(var(--spacing-typography) * 1.75); -} - address ~ h3, -blockquote ~ h3, -dl ~ h3, -figure ~ h3, -form ~ h3, -ol ~ h3, -p ~ h3, -pre ~ h3, -table ~ h3, -ul ~ h3 { - margin-top: calc(var(--spacing-typography) * 1.5); -} - address ~ h4, -blockquote ~ h4, -dl ~ h4, -figure ~ h4, -form ~ h4, -ol ~ h4, -p ~ h4, -pre ~ h4, -table ~ h4, -ul ~ h4 { - margin-top: calc(var(--spacing-typography) * 1.25); -} - address ~ h5, -blockquote ~ h5, -dl ~ h5, -figure ~ h5, -form ~ h5, -ol ~ h5, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); font-family: unset; - font-size: 1.125rem; + font-size: 1rem; font-weight: unset; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } small { - font-size: 85%; -} - -@media (min-width: 576px) { - small { - font-size: 83%; - } -} - -@media (min-width: 768px) { - small { - font-size: 81%; - } -} - -@media (min-width: 992px) { - small { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - small { - font-size: 77%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -736,21 +813,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -760,12 +837,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -840,7 +917,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -852,17 +929,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: none; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -879,165 +959,189 @@ input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:hover, -[type="file"]::-webkit-file-upload-button:active, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { - border-color: var(--primary-hover-border); - background-color: var(--primary-hover); - box-shadow: var(--button-hover-shadow); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } -button[disabled], -input[type="submit"][disabled], -input[type="button"][disabled], -input[type="reset"][disabled], -a[role="button"][disabled] { - opacity: .5; - pointer-events: none; +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); } -/** - * Button Styles - */ button.secondary, input[type="submit"].secondary, -input[type="reset"], +input[type="button"].secondary, +input[type="reset"].secondary, a[role="button"].secondary { - border: var(--button-border-width) solid var(--secondary-border); - background-color: var(--secondary); - color: var(--secondary-inverse); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + cursor: pointer; } button.secondary:hover, button.secondary:active, button.secondary:focus, input[type="submit"].secondary:hover, input[type="submit"].secondary:active, input[type="submit"].secondary:focus, -input[type="reset"]:hover, -input[type="reset"]:active, -input[type="reset"]:focus, +input[type="button"].secondary:hover, +input[type="button"].secondary:active, +input[type="button"].secondary:focus, +input[type="reset"].secondary:hover, +input[type="reset"].secondary:active, +input[type="reset"].secondary:focus, a[role="button"].secondary:hover, a[role="button"].secondary:active, a[role="button"].secondary:focus { - border-color: var(--secondary-hover-border); - background-color: var(--secondary-hover); + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } button.secondary:focus, input[type="submit"].secondary:focus, -input[type="reset"]:focus, +input[type="button"].secondary:focus, +input[type="reset"].secondary:focus, a[role="button"].secondary:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important; + --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); } button.contrast, input[type="submit"].contrast, +input[type="button"].contrast, input[type="reset"].contrast, a[role="button"].contrast { - border: var(--button-border-width) solid var(--contrast-border); - background-color: var(--contrast); - color: var(--contrast-inverse); + --background-color: var(--contrast); + --border-color: var(--contrast); + --color: var(--contrast-inverse); } button.contrast:hover, button.contrast:active, button.contrast:focus, input[type="submit"].contrast:hover, input[type="submit"].contrast:active, input[type="submit"].contrast:focus, +input[type="button"].contrast:hover, +input[type="button"].contrast:active, +input[type="button"].contrast:focus, input[type="reset"].contrast:hover, input[type="reset"].contrast:active, input[type="reset"].contrast:focus, a[role="button"].contrast:hover, a[role="button"].contrast:active, a[role="button"].contrast:focus { - border-color: var(--contrast-hover-border); - background-color: var(--contrast-hover); + --background-color: var(--contrast-hover); + --border-color: var(--contrast-hover); } button.contrast:focus, input[type="submit"].contrast:focus, +input[type="button"].contrast:focus, input[type="reset"].contrast:focus, a[role="button"].contrast:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus); + --box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus); } button.outline, input[type="submit"].outline, +input[type="button"].outline, +input[type="reset"].outline, a[role="button"].outline { - border: var(--button-border-width) solid var(--primary-border); - background-color: transparent; - color: var(--primary); + --background-color: transparent; + --color: var(--primary); } button.outline:hover, button.outline:active, button.outline:focus, input[type="submit"].outline:hover, input[type="submit"].outline:active, input[type="submit"].outline:focus, +input[type="button"].outline:hover, +input[type="button"].outline:active, +input[type="button"].outline:focus, +input[type="reset"].outline:hover, +input[type="reset"].outline:active, +input[type="reset"].outline:focus, a[role="button"].outline:hover, a[role="button"].outline:active, a[role="button"].outline:focus { - border: var(--button-border-width) solid var(--primary-hover-border); - color: var(--primary-hover); + --background-color: transparent; + --color: var(--primary-hover); } button.outline.secondary, input[type="submit"].outline.secondary, -input[type="reset"].outline, +input[type="button"].outline.secondary, +input[type="reset"].outline.secondary, a[role="button"].outline.secondary { - border: var(--button-border-width) solid var(--secondary-border); - background-color: transparent; - color: var(--secondary); + --color: var(--secondary); } button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, input[type="submit"].outline.secondary:hover, input[type="submit"].outline.secondary:active, input[type="submit"].outline.secondary:focus, -input[type="reset"].outline:hover, -input[type="reset"].outline:active, -input[type="reset"].outline:focus, +input[type="button"].outline.secondary:hover, +input[type="button"].outline.secondary:active, +input[type="button"].outline.secondary:focus, +input[type="reset"].outline.secondary:hover, +input[type="reset"].outline.secondary:active, +input[type="reset"].outline.secondary:focus, a[role="button"].outline.secondary:hover, a[role="button"].outline.secondary:active, a[role="button"].outline.secondary:focus { - border: var(--button-border-width) solid var(--secondary-hover-border); - color: var(--secondary-hover); + --color: var(--secondary-hover); } button.outline.contrast, input[type="submit"].outline.contrast, +input[type="button"].outline.contrast, input[type="reset"].outline.contrast, a[role="button"].outline.contrast { - border: var(--button-border-width) solid var(--contrast-border); - background-color: transparent; - color: var(--contrast); + --color: var(--contrast); } button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, input[type="submit"].outline.contrast:hover, input[type="submit"].outline.contrast:active, input[type="submit"].outline.contrast:focus, +input[type="button"].outline.contrast:hover, +input[type="button"].outline.contrast:active, +input[type="button"].outline.contrast:focus, input[type="reset"].outline.contrast:hover, input[type="reset"].outline.contrast:active, input[type="reset"].outline.contrast:focus, a[role="button"].outline.contrast:hover, a[role="button"].outline.contrast:active, a[role="button"].outline.contrast:focus { - border: var(--button-border-width) solid var(--contrast-hover-border); - color: var(--contrast-hover); + --color: var(--contrast-hover); +} + +button[disabled], +input[type="submit"][disabled], +input[type="button"][disabled], +input[type="reset"][disabled], +a[role="button"][disabled] { + opacity: .5; + pointer-events: none; } /** @@ -1106,7 +1210,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -1124,12 +1228,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -1137,14 +1241,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -1162,81 +1265,52 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; -} - -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); -} - -input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, -select[readonly]:active, -select[readonly]:focus, -select[disabled]:active, -select[disabled]:focus, -textarea[readonly]:active, -textarea[readonly]:focus, -textarea[disabled]:active, -textarea[disabled]:focus { - box-shadow: none !important; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { - background-color: var(--muted-background); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); } -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } -input .valid, -input .invalid, input[aria-invalid], -select .valid, -select .invalid, +input[aria-invalid], select[aria-invalid], -textarea .valid, -textarea .invalid, textarea[aria-invalid] { padding-right: 2rem; background-position: center right .75rem; @@ -1244,32 +1318,49 @@ textarea[aria-invalid] { background-size: 1rem auto; } -input .valid, input[aria-invalid="false"], -select .valid, +input[aria-invalid="false"], select[aria-invalid="false"], -textarea .valid, textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } -input .invalid, input[aria-invalid="true"], -select .invalid, +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color) !important; +} + +input[aria-invalid="true"], select[aria-invalid="true"], -textarea .invalid, textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color) !important; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: var(--spacing-typography); -} - -input:not([type="range"]):not([type="file"]):focus, -select:focus, -textarea:focus { - box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1285,21 +1376,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1316,7 +1406,7 @@ label > textarea { height: 1.25rem; margin-top: -.125rem; margin-right: .375rem; - border-width: var(--checkbox-radio-border-width); + border-width: var(--border-width); vertical-align: middle; cursor: pointer; } @@ -1326,22 +1416,18 @@ label > textarea { display: none; } -[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, -[type="radio"]:indeterminate { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); background-image: var(--icon-checkbox); background-position: center; background-repeat: no-repeat; background-size: .75rem auto; } -[type="checkbox"]:indeterminate, -[type="radio"]:indeterminate { - background-image: var(--icon-minus); -} - [type="checkbox"] ~ label, [type="radio"] ~ label { display: inline-block; @@ -1350,45 +1436,64 @@ label > textarea { cursor: pointer; } +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-repeat: no-repeat; + background-size: .75rem auto; +} + [type="radio"] { border-radius: 50%; } -[type="radio"]:checked { - border-width: .33rem; - border-color: var(--input-hover-border); - background-color: var(--input-inverse); +[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: .35rem; background-image: none; } [type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); width: 2.25rem; height: 1.25rem; - border: var(--switch-border-width) solid var(--input-border); + border: var(--border-width) solid var(--border-color); border-radius: 1.25rem; - background-color: var(--input-border); + background-color: var(--background-color); line-height: 1.25rem; } +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} + +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} + [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - (var(--switch-border-width)*2)); + width: calc(1.25rem - (var(--border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--input-inverse); + background-color: var(--color); content: ''; transition: margin 0.1s ease-in-out; } [type="checkbox"][role="switch"]:checked { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); background-image: none; } [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(1.125rem - var(--switch-border-width)); + margin-left: calc(1.125rem - var(--border-width)); } /** @@ -1405,12 +1510,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="date"], @@ -1437,6 +1542,7 @@ label > textarea { } [type="file"] { + --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; @@ -1444,26 +1550,34 @@ label > textarea { } [type="file"]::-webkit-file-upload-button { - padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); - border: var(--button-border-width) solid var(--secondary-border); - background-color: var(--secondary); - box-shadow: var(--button-shadow); - color: var(--secondary-inverse); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-size: 1rem; + font-weight: var(--font-weight); + line-height: var(--line-height); + text-align: center; + cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } [type="file"]:hover, [type="file"]:active, [type="file"]:focus { border: none; background: none; + --color: var(--color); } [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { - border-color: var(--secondary-hover-border); - background-color: var(--secondary-hover); -} - -[type="file"]:focus::-webkit-file-upload-button { - box-shadow: none; + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } [type="range"] { @@ -1479,29 +1593,29 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { - background-color: var(--input-border); + background-color: var(--border-radius); } [type="range"]::-webkit-slider-thumb { @@ -1509,9 +1623,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1521,9 +1635,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1533,61 +1647,39 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } -[type="range"]:focus { - background: transparent !important; -} - -[type="range"]:focus::-webkit-slider-runnable-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-moz-range-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-ms-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-ms-fill-lower { - box-shadow: 0 0 0 0.1rem var(--input-focus); +[type="range"]:hover, [type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); } [type="range"]:active { - background: transparent !important; + --range-thumb-color: var(--range-thumb-active-color); } [type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); - background-color: var(--primary); } [type="range"]:active::-moz-range-thumb { transform: scale(1.25); - background-color: var(--primary); } [type="range"]:active::-ms-thumb { transform: scale(1.25); - background-color: var(--primary); -} - -[type="range"]:focus { - box-shadow: none; } [type="search"] { border-radius: 5rem; - padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); - background-position: center left .75rem; + background-position: center left 1.125rem; background-repeat: no-repeat; background-size: 1rem auto; } @@ -1610,27 +1702,20 @@ table { th, td { - padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); - border-bottom: 1px solid var(--table-border); - color: var(--muted-text); - font-size: 0.875rem; - font-weight: var(--text-weight); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** @@ -1640,8 +1725,8 @@ pre, code, kbd, samp { - font-family: var(--code-font); - font-size: 1rem; + font-family: var(--font-family); + font-size: .875rem; } pre { @@ -1652,58 +1737,25 @@ pre { pre, code, kbd { - background: var(--code-inlined); - color: var(--code-color-1); - font-size: 85%; - font-weight: var(--code-weight); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); line-height: initial; } -@media (min-width: 576px) { - pre, - code, - kbd { - font-size: 83%; - } -} - -@media (min-width: 768px) { - pre, - code, - kbd { - font-size: 81%; - } -} - -@media (min-width: 992px) { - pre, - code, - kbd { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - pre, - code, - kbd { - font-size: 77%; - } -} - code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: var(--block-round); + border-radius: var(--border-radius); } pre { display: block; - margin-bottom: var(--spacing-block); - padding: var(--spacing-block) var(--spacing-gutter); + margin-bottom: var(--spacing); + padding: var(--spacing); overflow-x: auto; - background: var(--code-background); + background: var(--code-background-color); } pre > code { @@ -1715,29 +1767,29 @@ pre > code { } code b { - color: var(--code-color-2); - font-weight: var(--code-weight); + color: var(--code-tag-color); + font-weight: var(--font-weight); } code i { - color: var(--code-color-3); + color: var(--code-property-color); font-style: normal; } code u { - color: var(--code-color-4); + color: var(--code-value-color); text-decoration: none; } code em { - color: var(--code-color-5); + color: var(--code-comment-color); font-style: normal; } kbd { - background-color: var(--secondary); - color: var(--secondary-inverse); - font-weight: bolder; + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: middle; } /** @@ -1785,7 +1837,7 @@ hr { height: 0; overflow: visible; border: none; - border-top: 1px solid var(--muted-border); + border-top: 1px solid var(--muted-border-color); } [hidden], @@ -1825,15 +1877,17 @@ canvas { */ details { display: block; - margin-bottom: var(--spacing-typography); - padding-bottom: calc(var(--spacing-typography) / 2); - border-bottom: 1px solid var(--muted-border); + margin-bottom: var(--spacing); + padding-bottom: calc(var(--spacing) / 2); + border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { + color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; cursor: pointer; + transition: color var(--transition); } details summary::-webkit-details-marker { @@ -1863,11 +1917,12 @@ details summary::after { } details summary:focus { + color: var(--accordion-active-summary-color); outline: none; } details summary ~ * { - margin-top: calc(var(--spacing-typography) / 2); + margin-top: calc(var(--spacing) / 2); } details summary ~ * ~ * { @@ -1875,8 +1930,11 @@ details summary ~ * ~ * { } details[open] > summary { - margin-bottom: calc(var(--spacing-typography) / 4); - color: var(--muted-text); + margin-bottom: calc(var(--spacing) / 4); +} + +details[open] > summary:not(:focus) { + color: var(--accordion-open-summary-color); } details[open] > summary::after { @@ -1887,166 +1945,34 @@ details[open] > summary::after { * Card (
) */ article { - margin: var(--spacing-block) 0; - padding: var(--spacing-block) var(--spacing-gutter); + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); overflow: hidden; - border-radius: var(--block-round); - background: var(--card-background); - box-shadow: var(--card-shadow); -} - -@media (min-width: 576px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)); - } -} - -article > *:not(header):not(footer):not(pre):last-child { - margin-bottom: 0 !important; -} - -/** - * Card sectionning (
> header, footer, pre) - */ -article > header, -article > footer { - background-color: var(--card-sections); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); } article > header, article > footer, article > pre { - margin: calc(var(--spacing-gutter) * -1); - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); } article > header { - margin-top: calc(var(--spacing-gutter) * -2); - margin-bottom: var(--spacing-block); -} - -@media (min-width: 576px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); } article > footer, article > pre { - margin-top: var(--spacing-block); - margin-bottom: calc(var(--spacing-gutter) * -2); -} - -@media (min-width: 576px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - } -} - -@media (min-width: 768px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-md)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - } -} - -@media (min-width: 992px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - } -} - -@media (min-width: 1200px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - } + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); } /** @@ -2071,18 +1997,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing-gutter) * -0.5); + margin-left: calc(var(--spacing) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing-gutter) * -0.5); + margin-right: calc(var(--spacing) * -0.5); } nav li { display: inline-block; margin: 0; - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + padding: var(--spacing) calc(var(--spacing) / 2); } nav li > *, @@ -2092,14 +2018,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { nav a { display: block; - margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); - border-radius: var(--block-round); - text-decoration: none !important; + margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); + padding: var(--spacing) calc(var(--spacing) / 2); + border-radius: var(--border-radius); + text-decoration: none; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none !important; + text-decoration: none; } aside nav, @@ -2110,12 +2036,12 @@ aside li { } aside li { - padding: calc(var(--spacing-gutter) / 2); + padding: calc(var(--spacing) / 2); } aside li a { - margin: calc(var(--spacing-gutter) * -0.5); - padding: calc(var(--spacing-gutter) / 2); + margin: calc(var(--spacing) * -0.5); + padding: calc(var(--spacing) / 2); } /** @@ -2133,29 +2059,29 @@ progress { display: inline-block; width: 100%; height: .5rem; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: calc(var(--spacing) / 2); overflow: hidden; border: 0; - border-radius: var(--block-round); - background-color: var(--muted-background); - color: var(--primary); + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); } progress::-webkit-progress-bar { - border-radius: var(--block-round); + border-radius: var(--border-radius); background: transparent; } progress[value]::-webkit-progress-value { - background-color: var(--primary); + background-color: var(--progress-color); } progress::-moz-progress-bar { - background-color: var(--primary); + background-color: var(--progress-color); } progress:indeterminate { - background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat; + background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; animation: progress-indeterminate 1s linear infinite; } @@ -2198,12 +2124,12 @@ progress:indeterminate::-moz-progress-bar { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--block-round); - background: var(--contrast); - color: var(--contrast-inverse); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + color: var(--tooltip-color); font-size: .85rem; font-style: normal; - font-weight: var(--text-weight); + font-weight: var(--font-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -2220,7 +2146,7 @@ progress:indeterminate::-moz-progress-bar { border-left: .3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--contrast); + color: var(--tooltip-background-color); content: ''; } diff --git a/css/pico.fluid.classless.css b/css/pico.fluid.classless.css index 892fa78ee..994c87983 100644 --- a/css/pico.fluid.classless.css +++ b/css/pico.fluid.classless.css @@ -1,235 +1,440 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ /** * Theme: default */ :root { - --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --titles-font: var(--text-font); - --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --line-height: 1.5; - --text-weight: 400; - --titles-weight: 700; - --form-element-weight: var(--text-weight); - --buttons-weight: var(--text-weight); - --code-weight: var(--text-weight); - --base-font-xs: 16px; - --base-font-sm: 17px; - --base-font-md: 18px; - --base-font-lg: 19px; - --base-font-xl: 20px; - --h1-size: 2rem; - --h2-size: 1.75rem; - --h3-size: 1.5rem; - --h4-size: 1.25rem; - --h5-size: 1.125rem; - --h6-size: 1rem; - --block-round: .25rem; - --form-element-border-width: 1px; - --form-element-outline-width: 3px; - --checkbox-radio-border-width: 2px; - --switch-border-width: 3px; - --form-element-spacing-vertical: .75rem; + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: .75rem; --form-element-spacing-horizontal: 1rem; - --button-round: var(--block-round); - --button-border-width: var(--form-element-border-width); - --button-outline-width: var(--form-element-outline-width); - --button-spacing-vertical: var(--form-element-spacing-vertical); - --button-spacing-horizontal: var(--form-element-spacing-horizontal); - --spacing-gutter: 1rem; - --spacing-block: 2rem; - --spacing-factor-xs: 1; - --spacing-factor-sm: 1.25; - --spacing-factor-md: 1.5; - --spacing-factor-lg: 1.75; - --spacing-factor-xl: 2; - --spacing-typography: 1.5rem; - --spacing-form-element: .25rem; - --transition: .2s ease-in-out; + --transition: .2s ease-in-out; } -:root { - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 0.875rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; } [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #08769b; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-border: var(--secondary); - --secondary-hover: #415462; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-border: var(--contrast); - --contrast-hover: #0d1419; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.33); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.075); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } } -[data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); +[data-theme="dark"] :root:not([data-theme="light"]) { + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } /** @@ -254,40 +459,16 @@ html { -moz-tab-size: 4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - background: var(--background); - color: var(--text); - font-family: var(--text-font); - font-size: var(--base-font-xs); - font-weight: var(--text-weight); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } -@media (min-width: 576px) { - html { - font-size: var(--base-font-sm); - } -} - -@media (min-width: 768px) { - html { - font-size: var(--base-font-md); - } -} - -@media (min-width: 992px) { - html { - font-size: var(--base-font-lg); - } -} - -@media (min-width: 1200px) { - html { - font-size: var(--base-font-xl); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -307,39 +488,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter); - } -} - -@media (min-width: 768px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter); - } -} - -@media (min-width: 992px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter); - } -} - -@media (min-width: 1200px) { - body > header, - body > main, - body > footer { - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter); - } + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); } /** @@ -347,31 +496,7 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xs) * 2); -} - -@media (min-width: 576px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * 2); - } -} - -@media (min-width: 768px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * 2); - } -} - -@media (min-width: 992px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * 2); - } -} - -@media (min-width: 1200px) { - section { - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * 2); - } + margin-bottom: var(--block-spacing-vertical); } /** @@ -385,8 +510,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -439,27 +564,29 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } h1, @@ -469,179 +596,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ h2, -table ~ h2, -ul ~ h2 { - margin-top: calc(var(--spacing-typography) * 1.75); -} - address ~ h3, -blockquote ~ h3, -dl ~ h3, -figure ~ h3, -form ~ h3, -ol ~ h3, -p ~ h3, -pre ~ h3, -table ~ h3, -ul ~ h3 { - margin-top: calc(var(--spacing-typography) * 1.5); -} - address ~ h4, -blockquote ~ h4, -dl ~ h4, -figure ~ h4, -form ~ h4, -ol ~ h4, -p ~ h4, -pre ~ h4, -table ~ h4, -ul ~ h4 { - margin-top: calc(var(--spacing-typography) * 1.25); -} - address ~ h5, -blockquote ~ h5, -dl ~ h5, -figure ~ h5, -form ~ h5, -ol ~ h5, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); font-family: unset; - font-size: 1.125rem; + font-size: 1rem; font-weight: unset; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } small { - font-size: 85%; -} - -@media (min-width: 576px) { - small { - font-size: 83%; - } -} - -@media (min-width: 768px) { - small { - font-size: 81%; - } -} - -@media (min-width: 992px) { - small { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - small { - font-size: 77%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -650,21 +729,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -674,12 +753,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -754,7 +833,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -766,17 +845,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: none; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -793,30 +875,37 @@ input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:hover, -[type="file"]::-webkit-file-upload-button:active, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { - border-color: var(--primary-hover-border); - background-color: var(--primary-hover); - box-shadow: var(--button-hover-shadow); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -826,21 +915,6 @@ a[role="button"][disabled] { pointer-events: none; } -input[type="reset"] { - border: var(--button-border-width) solid var(--secondary-border); - background-color: var(--secondary); - color: var(--secondary-inverse); -} - -input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { - border-color: var(--secondary-hover-border); - background-color: var(--secondary-hover); -} - -input[type="reset"]:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus) !important; -} - /** * Form elements */ @@ -907,7 +981,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -925,12 +999,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -938,14 +1012,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -963,72 +1036,48 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); + --background-color: var(--form-element-active-background-color); } -input[readonly], input[disabled], -select[readonly], -select[disabled], -textarea[readonly], -textarea[disabled] { - border-color: var(--muted-border); - box-shadow: none; -} - -input[readonly] ~ label, input[disabled] ~ label, -select[readonly] ~ label, -select[disabled] ~ label, -textarea[readonly] ~ label, -textarea[disabled] ~ label { - color: var(--muted-text); -} - -input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, -select[readonly]:active, -select[readonly]:focus, -select[disabled]:active, -select[disabled]:focus, -textarea[readonly]:active, -textarea[readonly]:focus, -textarea[disabled]:active, -textarea[disabled]:focus { - box-shadow: none !important; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { - background-color: var(--muted-background); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); } -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } input[aria-invalid], @@ -1043,25 +1092,46 @@ textarea[aria-invalid] { input[aria-invalid="false"], select[aria-invalid="false"], textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color) !important; +} + input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color) !important; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: var(--spacing-typography); -} - -input:not([type="range"]):not([type="file"]):focus, -select:focus, -textarea:focus { - box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1077,21 +1147,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1108,7 +1177,7 @@ label > textarea { height: 1.25rem; margin-top: -.125rem; margin-right: .375rem; - border-width: var(--checkbox-radio-border-width); + border-width: var(--border-width); vertical-align: middle; cursor: pointer; } @@ -1118,22 +1187,18 @@ label > textarea { display: none; } -[type="checkbox"]:checked, [type="checkbox"]:indeterminate, +[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, -[type="radio"]:indeterminate { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); background-image: var(--icon-checkbox); background-position: center; background-repeat: no-repeat; background-size: .75rem auto; } -[type="checkbox"]:indeterminate, -[type="radio"]:indeterminate { - background-image: var(--icon-minus); -} - [type="checkbox"] ~ label, [type="radio"] ~ label { display: inline-block; @@ -1142,45 +1207,64 @@ label > textarea { cursor: pointer; } +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-repeat: no-repeat; + background-size: .75rem auto; +} + [type="radio"] { border-radius: 50%; } -[type="radio"]:checked { - border-width: .33rem; - border-color: var(--input-hover-border); - background-color: var(--input-inverse); +[type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: .35rem; background-image: none; } [type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); width: 2.25rem; height: 1.25rem; - border: var(--switch-border-width) solid var(--input-border); + border: var(--border-width) solid var(--border-color); border-radius: 1.25rem; - background-color: var(--input-border); + background-color: var(--background-color); line-height: 1.25rem; } +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} + +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} + [type="checkbox"][role="switch"]:before { display: block; - width: calc(1.25rem - (var(--switch-border-width)*2)); + width: calc(1.25rem - (var(--border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--input-inverse); + background-color: var(--color); content: ''; transition: margin 0.1s ease-in-out; } [type="checkbox"][role="switch"]:checked { - border-color: var(--input-hover-border); - background-color: var(--input-hover-border); background-image: none; } [type="checkbox"][role="switch"]:checked::before { margin-right: 0; - margin-left: calc(1.125rem - var(--switch-border-width)); + margin-left: calc(1.125rem - var(--border-width)); } /** @@ -1197,12 +1281,12 @@ label > textarea { [type="color"]::-webkit-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="color"]::-moz-color-swatch { border: none; - border-radius: calc(var(--block-round)/2); + border-radius: calc(var(--border-radius) / 2); } [type="date"], @@ -1229,6 +1313,7 @@ label > textarea { } [type="file"] { + --color: var(--muted-color); padding: calc(var(--form-element-spacing-vertical)/2) 0; border: none; border-radius: 0; @@ -1236,26 +1321,34 @@ label > textarea { } [type="file"]::-webkit-file-upload-button { - padding: calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2); - border: var(--button-border-width) solid var(--secondary-border); - background-color: var(--secondary); - box-shadow: var(--button-shadow); - color: var(--secondary-inverse); + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-size: 1rem; + font-weight: var(--font-weight); + line-height: var(--line-height); + text-align: center; + cursor: pointer; transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); } [type="file"]:hover, [type="file"]:active, [type="file"]:focus { border: none; background: none; + --color: var(--color); } [type="file"]:hover::-webkit-file-upload-button, [type="file"]:active::-webkit-file-upload-button, [type="file"]:focus::-webkit-file-upload-button { - border-color: var(--secondary-hover-border); - background-color: var(--secondary-hover); -} - -[type="file"]:focus::-webkit-file-upload-button { - box-shadow: none; + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); } [type="range"] { @@ -1271,29 +1364,29 @@ label > textarea { [type="range"]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-track { width: 100%; height: 0.25rem; - border-radius: var(--block-round); - background-color: var(--input-border); + border-radius: var(--border-radius); + background-color: var(--range-border-color); transition: background-color var(--transition), box-shadow var(--transition); } [type="range"]::-ms-fill-lower { - background-color: var(--input-border); + background-color: var(--border-radius); } [type="range"]::-webkit-slider-thumb { @@ -1301,9 +1394,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1313,9 +1406,9 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } @@ -1325,61 +1418,39 @@ label > textarea { width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--input-background); + border: 2px solid var(--range-thumb-border-color); border-radius: 50%; - background-color: var(--text); + background-color: var(--range-thumb-color); cursor: pointer; transition: background-color var(--transition), transform var(--transition); } -[type="range"]:focus { - background: transparent !important; -} - -[type="range"]:focus::-webkit-slider-runnable-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-moz-range-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-ms-track { - box-shadow: 0 0 0 0.1rem var(--input-focus); -} - -[type="range"]:focus::-ms-fill-lower { - box-shadow: 0 0 0 0.1rem var(--input-focus); +[type="range"]:hover, [type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); } [type="range"]:active { - background: transparent !important; + --range-thumb-color: var(--range-thumb-active-color); } [type="range"]:active::-webkit-slider-thumb { transform: scale(1.25); - background-color: var(--primary); } [type="range"]:active::-moz-range-thumb { transform: scale(1.25); - background-color: var(--primary); } [type="range"]:active::-ms-thumb { transform: scale(1.25); - background-color: var(--primary); -} - -[type="range"]:focus { - box-shadow: none; } [type="search"] { border-radius: 5rem; - padding-left: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + padding-left: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; background-image: var(--icon-search); - background-position: center left .75rem; + background-position: center left 1.125rem; background-repeat: no-repeat; background-size: 1rem auto; } @@ -1402,27 +1473,20 @@ table { th, td { - padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); - border-bottom: 1px solid var(--table-border); - color: var(--muted-text); - font-size: 0.875rem; - font-weight: var(--text-weight); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** @@ -1432,8 +1496,8 @@ pre, code, kbd, samp { - font-family: var(--code-font); - font-size: 1rem; + font-family: var(--font-family); + font-size: .875rem; } pre { @@ -1444,58 +1508,25 @@ pre { pre, code, kbd { - background: var(--code-inlined); - color: var(--code-color-1); - font-size: 85%; - font-weight: var(--code-weight); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); line-height: initial; } -@media (min-width: 576px) { - pre, - code, - kbd { - font-size: 83%; - } -} - -@media (min-width: 768px) { - pre, - code, - kbd { - font-size: 81%; - } -} - -@media (min-width: 992px) { - pre, - code, - kbd { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - pre, - code, - kbd { - font-size: 77%; - } -} - code, kbd { display: inline-block; padding: .375rem .5rem; - border-radius: var(--block-round); + border-radius: var(--border-radius); } pre { display: block; - margin-bottom: var(--spacing-block); - padding: var(--spacing-block) var(--spacing-gutter); + margin-bottom: var(--spacing); + padding: var(--spacing); overflow-x: auto; - background: var(--code-background); + background: var(--code-background-color); } pre > code { @@ -1507,29 +1538,29 @@ pre > code { } code b { - color: var(--code-color-2); - font-weight: var(--code-weight); + color: var(--code-tag-color); + font-weight: var(--font-weight); } code i { - color: var(--code-color-3); + color: var(--code-property-color); font-style: normal; } code u { - color: var(--code-color-4); + color: var(--code-value-color); text-decoration: none; } code em { - color: var(--code-color-5); + color: var(--code-comment-color); font-style: normal; } kbd { - background-color: var(--secondary); - color: var(--secondary-inverse); - font-weight: bolder; + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: middle; } /** @@ -1577,7 +1608,7 @@ hr { height: 0; overflow: visible; border: none; - border-top: 1px solid var(--muted-border); + border-top: 1px solid var(--muted-border-color); } [hidden], @@ -1617,15 +1648,17 @@ canvas { */ details { display: block; - margin-bottom: var(--spacing-typography); - padding-bottom: calc(var(--spacing-typography) / 2); - border-bottom: 1px solid var(--muted-border); + margin-bottom: var(--spacing); + padding-bottom: calc(var(--spacing) / 2); + border-bottom: var(--border-width) solid var(--accordion-border-color); } details summary { + color: var(--accordion-close-summary-color); line-height: 1rem; list-style-type: none; cursor: pointer; + transition: color var(--transition); } details summary::-webkit-details-marker { @@ -1655,11 +1688,12 @@ details summary::after { } details summary:focus { + color: var(--accordion-active-summary-color); outline: none; } details summary ~ * { - margin-top: calc(var(--spacing-typography) / 2); + margin-top: calc(var(--spacing) / 2); } details summary ~ * ~ * { @@ -1667,8 +1701,11 @@ details summary ~ * ~ * { } details[open] > summary { - margin-bottom: calc(var(--spacing-typography) / 4); - color: var(--muted-text); + margin-bottom: calc(var(--spacing) / 4); +} + +details[open] > summary:not(:focus) { + color: var(--accordion-open-summary-color); } details[open] > summary::after { @@ -1679,166 +1716,34 @@ details[open] > summary::after { * Card (
) */ article { - margin: var(--spacing-block) 0; - padding: var(--spacing-block) var(--spacing-gutter); + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); overflow: hidden; - border-radius: var(--block-round); - background: var(--card-background); - box-shadow: var(--card-shadow); -} - -@media (min-width: 576px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-sm)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-md)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-lg)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl)) 0; - padding: calc(var(--spacing-block) * var(--spacing-factor-xl)); - } -} - -article > *:not(header):not(footer):not(pre):last-child { - margin-bottom: 0 !important; -} - -/** - * Card sectionning (
> header, footer, pre) - */ -article > header, -article > footer { - background-color: var(--card-sections); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); } article > header, article > footer, article > pre { - margin: calc(var(--spacing-gutter) * -1); - padding: var(--spacing-block) var(--spacing-gutter); -} - -@media (min-width: 576px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article > header, - article > footer, - article > pre { - margin: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); } article > header { - margin-top: calc(var(--spacing-gutter) * -2); - margin-bottom: var(--spacing-block); -} - -@media (min-width: 576px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md)); - } -} - -@media (min-width: 992px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - article > header { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl)); - } + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); } article > footer, article > pre { - margin-top: var(--spacing-block); - margin-bottom: calc(var(--spacing-gutter) * -2); -} - -@media (min-width: 576px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-sm)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-sm) * -1); - } -} - -@media (min-width: 768px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-md)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-md) * -1); - } -} - -@media (min-width: 992px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-lg)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-lg) * -1); - } -} - -@media (min-width: 1200px) { - article > footer, - article > pre { - margin-top: calc(var(--spacing-block) * var(--spacing-factor-xl)); - margin-bottom: calc(var(--spacing-block) * var(--spacing-factor-xl) * -1); - } + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); } /** @@ -1863,18 +1768,18 @@ nav ul { nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--spacing-gutter) * -0.5); + margin-left: calc(var(--spacing) * -0.5); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--spacing-gutter) * -0.5); + margin-right: calc(var(--spacing) * -0.5); } nav li { display: inline-block; margin: 0; - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); + padding: var(--spacing) calc(var(--spacing) / 2); } nav li > *, @@ -1884,14 +1789,14 @@ nav li > input:not([type="checkbox"]):not([type="radio"]) { nav a { display: block; - margin: calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5); - padding: var(--spacing-gutter) calc(var(--spacing-gutter) / 2); - border-radius: var(--block-round); - text-decoration: none !important; + margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5); + padding: var(--spacing) calc(var(--spacing) / 2); + border-radius: var(--border-radius); + text-decoration: none; } nav a:hover, nav a:active, nav a:focus { - text-decoration: none !important; + text-decoration: none; } aside nav, @@ -1902,12 +1807,12 @@ aside li { } aside li { - padding: calc(var(--spacing-gutter) / 2); + padding: calc(var(--spacing) / 2); } aside li a { - margin: calc(var(--spacing-gutter) * -0.5); - padding: calc(var(--spacing-gutter) / 2); + margin: calc(var(--spacing) * -0.5); + padding: calc(var(--spacing) / 2); } /** @@ -1925,29 +1830,29 @@ progress { display: inline-block; width: 100%; height: .5rem; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: calc(var(--spacing) / 2); overflow: hidden; border: 0; - border-radius: var(--block-round); - background-color: var(--muted-background); - color: var(--primary); + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); } progress::-webkit-progress-bar { - border-radius: var(--block-round); + border-radius: var(--border-radius); background: transparent; } progress[value]::-webkit-progress-value { - background-color: var(--primary); + background-color: var(--progress-color); } progress::-moz-progress-bar { - background-color: var(--primary); + background-color: var(--progress-color); } progress:indeterminate { - background: var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat; + background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; animation: progress-indeterminate 1s linear infinite; } @@ -1990,12 +1895,12 @@ progress:indeterminate::-moz-progress-bar { padding: .25rem .5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--block-round); - background: var(--contrast); - color: var(--contrast-inverse); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + color: var(--tooltip-color); font-size: .85rem; font-style: normal; - font-weight: var(--text-weight); + font-weight: var(--font-weight); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; @@ -2012,7 +1917,7 @@ progress:indeterminate::-moz-progress-bar { border-left: .3rem solid transparent; border-radius: 0; background-color: transparent; - color: var(--contrast); + color: var(--tooltip-background-color); content: ''; } diff --git a/css/pico.fluid.classless.min.css b/css/pico.fluid.classless.min.css index 68904c49f..3c69c903b 100644 --- a/css/pico.fluid.classless.min.css +++ b/css/pico.fluid.classless.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) var(--spacing-gutter)}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) var(--spacing-gutter)}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) var(--spacing-gutter)}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) var(--spacing-gutter)}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input[type=reset]{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}input[type=reset]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{background-image:var(--icon-valid)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + * Copyright 2019-2021 - Licensed under MIT + */:root{--font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:0.875rem}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}code,kbd,pre,samp{--font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}}[data-theme=dark] :root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal)}section{margin-bottom:var(--block-spacing-vertical)}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing) / 2) 0;color:var(--muted-color)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration);transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{--color:var(--primary-hover);--text-decoration:underline}a:focus{--background-color:var(--primary-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);font-family:unset;font-size:1rem;font-weight:unset}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{--background-color:var(--primary-hover);--border-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:none}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)!important}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)!important}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=checkbox]:indeterminate{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-minus);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary-inverse);border-width:.35rem;background-image:none}[type=checkbox][role=switch]{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color);--color:var(--switch-color);width:2.25rem;height:1.25rem;border:var(--border-width) solid var(--border-color);border-radius:1.25rem;background-color:var(--background-color);line-height:1.25rem}[type=checkbox][role=switch]:focus{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color)}[type=checkbox][role=switch]:checked{--background-color:var(--switch-checked-background-color);--border-color:var(--switch-checked-background-color)}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--border-width) * 2));height:100%;border-radius:50%;background-color:var(--color);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--border-radius) / 2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--border-radius) / 2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{--color:var(--muted-color);padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);margin-right:calc(var(--spacing) / 2);padding:calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none;--color:var(--color)}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--border-radius)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus,[type=range]:hover{--range-border-color:var(--range-active-border-color);--range-thumb-color:var(--range-thumb-hover-color)}[type=range]:active{--range-thumb-color:var(--range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important;background-image:var(--icon-search);background-position:center left 1.125rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}code,kbd,pre,samp{font-family:var(--font-family);font-size:.875rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-background-color);color:var(--code-color);font-weight:var(--font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--border-radius)}pre{display:block;margin-bottom:var(--spacing);padding:var(--spacing);overflow-x:auto;background:var(--code-background-color)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-tag-color);font-weight:var(--font-weight)}code i{color:var(--code-property-color);font-style:normal}code u{color:var(--code-value-color);text-decoration:none}code em{color:var(--code-comment-color);font-style:normal}kbd{background-color:var(--code-kbd-background-color);color:var(--code-kbd-color);vertical-align:middle}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border-color)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing);padding-bottom:calc(var(--spacing) / 2);border-bottom:var(--border-width) solid var(--accordion-border-color)}details summary{color:var(--accordion-close-summary-color);line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--transition)}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{color:var(--accordion-active-summary-color);outline:none}details summary~*{margin-top:calc(var(--spacing) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing) / 4)}details[open]>summary:not(:focus){color:var(--accordion-open-summary-color)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--block-spacing-vertical) 0;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal);overflow:hidden;border-radius:var(--border-radius);background:var(--card-background-color);box-shadow:var(--card-box-shadow)}article>footer,article>header,article>pre{margin-right:calc(var(--block-spacing-horizontal) * -1);margin-left:calc(var(--block-spacing-horizontal) * -1);padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color)}article>header{margin-top:calc(var(--block-spacing-vertical) * -1);margin-bottom:var(--block-spacing-vertical);border-bottom:var(--border-width) solid var(--card-border-color)}article>footer,article>pre{margin-top:var(--block-spacing-vertical);margin-bottom:calc(var(--block-spacing-vertical) * -1);border-top:var(--border-width) solid var(--card-border-color)}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing) calc(var(--spacing) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);padding:var(--spacing) calc(var(--spacing) / 2);border-radius:var(--border-radius);text-decoration:none}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing) / 2)}aside li a{margin:calc(var(--spacing) * -0.5);padding:calc(var(--spacing) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing) / 2);overflow:hidden;border:0;border-radius:var(--border-radius);background-color:var(--progress-background-color);color:var(--progress-color)}progress::-webkit-progress-bar{border-radius:var(--border-radius);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--progress-color)}progress::-moz-progress-bar{background-color:var(--progress-color)}progress:indeterminate{background:var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--border-radius);background:var(--tooltip-background-color);color:var(--tooltip-color);font-size:.85rem;font-style:normal;font-weight:var(--font-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--tooltip-background-color);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.min.css b/css/pico.min.css index b0db09437..123017e5a 100644 --- a/css/pico.min.css +++ b/css/pico.min.css @@ -1,4 +1,4 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) 0}@media (min-width:576px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0}}@media (min-width:768px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-md)) 0}}@media (min-width:992px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0}}@media (min-width:1200px){body>footer,body>header,body>main{padding:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0}}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing-gutter);padding-left:var(--spacing-gutter)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xs) * 2)}@media (min-width:576px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * 2)}}@media (min-width:768px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * 2)}}@media (min-width:992px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * 2)}}@media (min-width:1200px){section{margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * 2)}}.grid{grid-column-gap:var(--spacing-gutter);grid-row-gap:var(--spacing-gutter);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none;transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary);text-decoration:underline}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast{color:var(--contrast);text-decoration:underline}a.contrast:active,a.contrast:focus,a.contrast:hover{color:var(--contrast-hover)}a.contrast:focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}a[role=button].secondary,button.secondary,input[type=reset],input[type=submit].secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);color:var(--secondary-inverse)}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=reset]:focus,input[type=submit].secondary:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--secondary-focus)!important}a[role=button].contrast,button.contrast,input[type=reset].contrast,input[type=submit].contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:var(--contrast);color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{border-color:var(--contrast-hover-border);background-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=submit].outline{border:var(--button-border-width) solid var(--primary-border);background-color:transparent;color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{border:var(--button-border-width) solid var(--primary-hover-border);color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=reset].outline,input[type=submit].outline.secondary{border:var(--button-border-width) solid var(--secondary-border);background-color:transparent;color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{border:var(--button-border-width) solid var(--secondary-hover-border);color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{border:var(--button-border-width) solid var(--contrast-border);background-color:transparent;color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{border:var(--button-border-width) solid var(--contrast-hover-border);color:var(--contrast-hover)}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none!important}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input .invalid,input .valid,input[aria-invalid],select .invalid,select .valid,select[aria-invalid],textarea .invalid,textarea .valid,textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input .valid,input[aria-invalid=false],select .valid,select[aria-invalid=false],textarea .valid,textarea[aria-invalid=false]{background-image:var(--icon-valid)}input .invalid,input[aria-invalid=true],select .invalid,select[aria-invalid=true],textarea .invalid,textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--checkbox-radio-border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:indeterminate,[type=radio]:checked,[type=radio]:indeterminate{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]:indeterminate,[type=radio]:indeterminate{background-image:var(--icon-minus)}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=radio]{border-radius:50%}[type=radio]:checked{border-width:.33rem;border-color:var(--input-hover-border);background-color:var(--input-inverse);background-image:none}[type=checkbox][role=switch]{width:2.25rem;height:1.25rem;border:var(--switch-border-width) solid var(--input-border);border-radius:1.25rem;background-color:var(--input-border);line-height:1.25rem}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--switch-border-width)*2));height:100%;border-radius:50%;background-color:var(--input-inverse);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{border-color:var(--input-hover-border);background-color:var(--input-hover-border);background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--switch-border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--block-round)/2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{padding:calc(var(--form-element-spacing-vertical)/2) calc(var(--form-element-spacing-horizontal)/2);border:var(--button-border-width) solid var(--secondary-border);background-color:var(--secondary);box-shadow:var(--button-shadow);color:var(--secondary-inverse);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{border-color:var(--secondary-hover-border);background-color:var(--secondary-hover)}[type=file]:focus::-webkit-file-upload-button{box-shadow:none}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--block-round);background-color:var(--input-border);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--input-border)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--input-background);border-radius:50%;background-color:var(--text);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus{background:transparent!important}[type=range]:focus::-webkit-slider-runnable-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-moz-range-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-track{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:focus::-ms-fill-lower{box-shadow:0 0 0 0.1rem var(--input-focus)}[type=range]:active{background:transparent!important}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-moz-range-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:active::-ms-thumb{transform:scale(1.25);background-color:var(--primary)}[type=range]:focus{box-shadow:none}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.5rem)!important;background-image:var(--icon-search);background-position:center left .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}code,kbd,pre,samp{font-family:var(--code-font);font-size:1rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-inlined);color:var(--code-color-1);font-size:85%;font-weight:var(--code-weight);line-height:initial}@media (min-width:576px){code,kbd,pre{font-size:83%}}@media (min-width:768px){code,kbd,pre{font-size:81%}}@media (min-width:992px){code,kbd,pre{font-size:79%}}@media (min-width:1200px){code,kbd,pre{font-size:77%}}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--block-round)}pre{display:block;margin-bottom:var(--spacing-block);padding:var(--spacing-block) var(--spacing-gutter);overflow-x:auto;background:var(--code-background)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-color-2);font-weight:var(--code-weight)}code i{color:var(--code-color-3);font-style:normal}code u{color:var(--code-color-4);text-decoration:none}code em{color:var(--code-color-5);font-style:normal}kbd{background-color:var(--secondary);color:var(--secondary-inverse);font-weight:bolder}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing-typography);padding-bottom:calc(var(--spacing-typography) / 2);border-bottom:1px solid var(--muted-border)}details summary{line-height:1rem;list-style-type:none;cursor:pointer}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{outline:none}details summary~*{margin-top:calc(var(--spacing-typography) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing-typography) / 4);color:var(--muted-text)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--spacing-block) 0;padding:var(--spacing-block) var(--spacing-gutter);overflow:hidden;border-radius:var(--block-round);background:var(--card-background);box-shadow:var(--card-shadow)}@media (min-width:576px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-sm)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-md)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-lg)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article{margin:calc(var(--spacing-block) * var(--spacing-factor-xl)) 0;padding:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>:not(header):not(footer):not(pre):last-child{margin-bottom:0!important}article>footer,article>header{background-color:var(--card-sections)}article>footer,article>header,article>pre{margin:calc(var(--spacing-gutter) * -1);padding:var(--spacing-block) var(--spacing-gutter)}@media (min-width:576px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>footer,article>header,article>pre{margin:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>header{margin-top:calc(var(--spacing-gutter) * -2);margin-bottom:var(--spacing-block)}@media (min-width:576px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){article>header{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1);margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl))}}article>footer,article>pre{margin-top:var(--spacing-block);margin-bottom:calc(var(--spacing-gutter) * -2)}@media (min-width:576px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-sm));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-sm) * -1)}}@media (min-width:768px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-md));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-md) * -1)}}@media (min-width:992px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-lg));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-lg) * -1)}}@media (min-width:1200px){article>footer,article>pre{margin-top:calc(var(--spacing-block) * var(--spacing-factor-xl));margin-bottom:calc(var(--spacing-block) * var(--spacing-factor-xl) * -1)}}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing-gutter) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing-gutter) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing-gutter) * -1) calc(var(--spacing-gutter) * -0.5);padding:var(--spacing-gutter) calc(var(--spacing-gutter) / 2);border-radius:var(--block-round);text-decoration:none!important}nav a:active,nav a:focus,nav a:hover{text-decoration:none!important}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing-gutter) / 2)}aside li a{margin:calc(var(--spacing-gutter) * -0.5);padding:calc(var(--spacing-gutter) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing-typography) / 2);overflow:hidden;border:0;border-radius:var(--block-round);background-color:var(--muted-background);color:var(--primary)}progress::-webkit-progress-bar{border-radius:var(--block-round);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--primary)}progress::-moz-progress-bar{background-color:var(--primary)}progress:indeterminate{background:var(--muted-background) linear-gradient(to right, var(--primary) 30%, var(--muted-background) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--block-round);background:var(--contrast);color:var(--contrast-inverse);font-size:.85rem;font-style:normal;font-weight:var(--text-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--contrast);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file + * Copyright 2019-2021 - Licensed under MIT + */:root{--font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:0.875rem}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}code,kbd,pre,samp{--font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}}[data-theme=dark] :root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing);padding-left:var(--spacing)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:var(--block-spacing-vertical)}.grid{grid-column-gap:var(--grid-spacing-horizontal);grid-row-gap:var(--grid-spacing-vertical);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing) / 2) 0;color:var(--muted-color)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration);transition:background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition)}a:active,a:focus,a:hover{--color:var(--primary-hover);--text-decoration:underline}a:focus{--background-color:var(--primary-focus)}a.secondary{--color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{--color:var(--secondary-hover)}a.secondary:focus{--background-color:var(--secondary-focus)}a.contrast{--color:var(--contrast)}a.contrast:active,a.contrast:focus,a.contrast:hover{--color:var(--contrast-hover)}a.contrast:focus{--background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);font-family:unset;font-size:1rem;font-weight:unset}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{--background-color:var(--primary-hover);--border-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].secondary,button.secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=button].secondary:active,input[type=button].secondary:focus,input[type=button].secondary:hover,input[type=reset].secondary:active,input[type=reset].secondary:focus,input[type=reset].secondary:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=button].secondary:focus,input[type=reset].secondary:focus,input[type=submit].secondary:focus{--box-shadow:0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].contrast,button.contrast,input[type=button].contrast,input[type=reset].contrast,input[type=submit].contrast{--background-color:var(--contrast);--border-color:var(--contrast);--color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=button].contrast:active,input[type=button].contrast:focus,input[type=button].contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{--background-color:var(--contrast-hover);--border-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=button].contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{--box-shadow:0 0 0 var(--outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=button].outline,input[type=reset].outline,input[type=submit].outline{--background-color:transparent;--color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=button].outline:active,input[type=button].outline:focus,input[type=button].outline:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{--background-color:transparent;--color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=button].outline.secondary,input[type=reset].outline.secondary,input[type=submit].outline.secondary{--color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=button].outline.secondary:active,input[type=button].outline.secondary:focus,input[type=button].outline.secondary:hover,input[type=reset].outline.secondary:active,input[type=reset].outline.secondary:focus,input[type=reset].outline.secondary:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{--color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=button].outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{--color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=button].outline.contrast:active,input[type=button].outline.contrast:focus,input[type=button].outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{--color:var(--contrast-hover)}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:none}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight);transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)!important}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)!important}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}[type=checkbox],[type=radio]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:1.25rem;height:1.25rem;margin-top:-.125rem;margin-right:.375rem;border-width:var(--border-width);vertical-align:middle;cursor:pointer}[type=checkbox]::-ms-check,[type=radio]::-ms-check{display:none}[type=checkbox]:checked,[type=checkbox]:checked:active,[type=checkbox]:checked:focus,[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-checkbox);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=checkbox]~label,[type=radio]~label{display:inline-block;margin-right:.375rem;margin-bottom:0;cursor:pointer}[type=checkbox]:indeterminate{--background-color:var(--primary);--border-color:var(--primary);background-image:var(--icon-minus);background-position:center;background-repeat:no-repeat;background-size:.75rem auto}[type=radio]{border-radius:50%}[type=radio]:checked,[type=radio]:checked:active,[type=radio]:checked:focus{--background-color:var(--primary-inverse);border-width:.35rem;background-image:none}[type=checkbox][role=switch]{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color);--color:var(--switch-color);width:2.25rem;height:1.25rem;border:var(--border-width) solid var(--border-color);border-radius:1.25rem;background-color:var(--background-color);line-height:1.25rem}[type=checkbox][role=switch]:focus{--background-color:var(--switch-background-color);--border-color:var(--switch-background-color)}[type=checkbox][role=switch]:checked{--background-color:var(--switch-checked-background-color);--border-color:var(--switch-checked-background-color)}[type=checkbox][role=switch]:before{display:block;width:calc(1.25rem - (var(--border-width) * 2));height:100%;border-radius:50%;background-color:var(--color);content:'';transition:margin 0.1s ease-in-out}[type=checkbox][role=switch]:checked{background-image:none}[type=checkbox][role=switch]:checked:before{margin-right:0;margin-left:calc(1.125rem - var(--border-width))}[type=color]::-webkit-color-swatch-wrapper{padding:0}[type=color]::-moz-focus-inner{padding:0}[type=color]::-webkit-color-swatch{border:none;border-radius:calc(var(--border-radius) / 2)}[type=color]::-moz-color-swatch{border:none;border-radius:calc(var(--border-radius) / 2)}[type=date],[type=datetime-local],[type=month],[type=time],[type=week]{background-image:var(--icon-date);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}[type=date]::-webkit-calendar-picker-indicator,[type=datetime-local]::-webkit-calendar-picker-indicator,[type=month]::-webkit-calendar-picker-indicator,[type=time]::-webkit-calendar-picker-indicator,[type=week]::-webkit-calendar-picker-indicator{opacity:0}[type=time]{background-image:var(--icon-time)}[type=file]{--color:var(--muted-color);padding:calc(var(--form-element-spacing-vertical)/2) 0;border:none;border-radius:0;background:none}[type=file]::-webkit-file-upload-button{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);margin-right:calc(var(--spacing) / 2);padding:calc(var(--form-element-spacing-vertical) / 2) calc(var(--form-element-spacing-horizontal) / 2);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}[type=file]:active,[type=file]:focus,[type=file]:hover{border:none;background:none;--color:var(--color)}[type=file]:active::-webkit-file-upload-button,[type=file]:focus::-webkit-file-upload-button,[type=file]:hover::-webkit-file-upload-button{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;height:1.25rem;background:transparent}[type=range]::-webkit-slider-runnable-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-moz-range-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-track{width:100%;height:0.25rem;border-radius:var(--border-radius);background-color:var(--range-border-color);transition:background-color var(--transition), box-shadow var(--transition)}[type=range]::-ms-fill-lower{background-color:var(--border-radius)}[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-moz-range-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]::-ms-thumb{-webkit-appearance:none;width:1.25rem;height:1.25rem;margin-top:-0.5rem;border:2px solid var(--range-thumb-border-color);border-radius:50%;background-color:var(--range-thumb-color);cursor:pointer;transition:background-color var(--transition), transform var(--transition)}[type=range]:focus,[type=range]:hover{--range-border-color:var(--range-active-border-color);--range-thumb-color:var(--range-thumb-hover-color)}[type=range]:active{--range-thumb-color:var(--range-thumb-active-color)}[type=range]:active::-webkit-slider-thumb{transform:scale(1.25)}[type=range]:active::-moz-range-thumb{transform:scale(1.25)}[type=range]:active::-ms-thumb{transform:scale(1.25)}[type=search]{border-radius:5rem;padding-left:calc(var(--form-element-spacing-horizontal) + 1.75rem)!important;background-image:var(--icon-search);background-position:center left 1.125rem;background-repeat:no-repeat;background-size:1rem auto}[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;display:none}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}code,kbd,pre,samp{font-family:var(--font-family);font-size:.875rem}pre{-ms-overflow-style:scrollbar;overflow:auto}code,kbd,pre{background:var(--code-background-color);color:var(--code-color);font-weight:var(--font-weight);line-height:initial}code,kbd{display:inline-block;padding:.375rem .5rem;border-radius:var(--border-radius)}pre{display:block;margin-bottom:var(--spacing);padding:var(--spacing);overflow-x:auto;background:var(--code-background-color)}pre>code{display:block;padding:0;background:transparent;font-size:14px;line-height:var(--line-height)}code b{color:var(--code-tag-color);font-weight:var(--font-weight)}code i{color:var(--code-property-color);font-style:normal}code u{color:var(--code-value-color);text-decoration:none}code em{color:var(--code-comment-color);font-style:normal}kbd{background-color:var(--code-kbd-background-color);color:var(--code-kbd-color);vertical-align:middle}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation}hr{box-sizing:content-box;height:0;overflow:visible;border:none;border-top:1px solid var(--muted-border-color)}[hidden],template{display:none}dialog{display:block;position:absolute;right:0;left:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;padding:1em;border:solid;background-color:white;color:black}dialog:not([open]){display:none}canvas{display:inline-block}details{display:block;margin-bottom:var(--spacing);padding-bottom:calc(var(--spacing) / 2);border-bottom:var(--border-width) solid var(--accordion-border-color)}details summary{color:var(--accordion-close-summary-color);line-height:1rem;list-style-type:none;cursor:pointer;transition:color var(--transition)}details summary::-webkit-details-marker{display:none}details summary::marker{display:none}details summary::-moz-list-bullet{list-style-type:none}details summary:after{display:inline-block;width:1rem;height:1rem;float:right;transform:rotate(-90deg);background-image:var(--icon-chevron);background-position:center;background-repeat:no-repeat;background-size:1rem auto;content:'';transition:transform var(--transition)}details summary:focus{color:var(--accordion-active-summary-color);outline:none}details summary~*{margin-top:calc(var(--spacing) / 2)}details summary~*~*{margin-top:0}details[open]>summary{margin-bottom:calc(var(--spacing) / 4)}details[open]>summary:not(:focus){color:var(--accordion-open-summary-color)}details[open]>summary:after{transform:rotate(0)}article{margin:var(--block-spacing-vertical) 0;padding:var(--block-spacing-vertical) var(--block-spacing-horizontal);overflow:hidden;border-radius:var(--border-radius);background:var(--card-background-color);box-shadow:var(--card-box-shadow)}article>footer,article>header,article>pre{margin-right:calc(var(--block-spacing-horizontal) * -1);margin-left:calc(var(--block-spacing-horizontal) * -1);padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color)}article>header{margin-top:calc(var(--block-spacing-vertical) * -1);margin-bottom:var(--block-spacing-vertical);border-bottom:var(--border-width) solid var(--card-border-color)}article>footer,article>pre{margin-top:var(--block-spacing-vertical);margin-bottom:calc(var(--block-spacing-vertical) * -1);border-top:var(--border-width) solid var(--card-border-color)}nav,nav ul{display:flex}nav{justify-content:space-between}nav ol,nav ul{align-items:center;margin-bottom:0;padding:0;list-style:none}nav ol:first-of-type,nav ul:first-of-type{margin-left:calc(var(--spacing) * -0.5)}nav ol:last-of-type,nav ul:last-of-type{margin-right:calc(var(--spacing) * -0.5)}nav li{display:inline-block;margin:0;padding:var(--spacing) calc(var(--spacing) / 2)}nav li>*,nav li>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}nav a{display:block;margin:calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);padding:var(--spacing) calc(var(--spacing) / 2);border-radius:var(--border-radius);text-decoration:none}nav a:active,nav a:focus,nav a:hover{text-decoration:none}aside li,aside nav,aside ol,aside ul{display:block}aside li{padding:calc(var(--spacing) / 2)}aside li a{margin:calc(var(--spacing) * -0.5);padding:calc(var(--spacing) / 2)}progress{display:inline-block;vertical-align:baseline}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;width:100%;height:.5rem;margin-bottom:calc(var(--spacing) / 2);overflow:hidden;border:0;border-radius:var(--border-radius);background-color:var(--progress-background-color);color:var(--progress-color)}progress::-webkit-progress-bar{border-radius:var(--border-radius);background:transparent}progress[value]::-webkit-progress-value{background-color:var(--progress-color)}progress::-moz-progress-bar{background-color:var(--progress-color)}progress:indeterminate{background:var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;animation:progress-indeterminate 1s linear infinite}progress:indeterminate[value]::-webkit-progress-value{background-color:transparent}progress:indeterminate::-moz-progress-bar{background-color:transparent}@keyframes progress-indeterminate{0%{background-position:200% 0}to{background-position:-200% 0}}[data-tooltip]{position:relative}[data-tooltip]:not(a):not(button):not(input){border-bottom:1px dotted;text-decoration:none;cursor:help}[data-tooltip]:after,[data-tooltip]:before{display:block;z-index:99;position:absolute;bottom:100%;left:50%;padding:.25rem .5rem;overflow:hidden;transform:translate(-50%, -0.25rem);border-radius:var(--border-radius);background:var(--tooltip-background-color);color:var(--tooltip-color);font-size:.85rem;font-style:normal;font-weight:var(--font-weight);text-decoration:none;text-overflow:ellipsis;white-space:nowrap;content:attr(data-tooltip);opacity:0;pointer-events:none}[data-tooltip]:after{padding:0;transform:translate(-50%, 0rem);border-top:.3rem solid;border-right:.3rem solid transparent;border-left:.3rem solid transparent;border-radius:0;background-color:transparent;color:var(--tooltip-background-color);content:''}[data-tooltip]:focus:after,[data-tooltip]:focus:before,[data-tooltip]:hover:after,[data-tooltip]:hover:before{opacity:1;animation-duration:.2s;animation-name:slide}[data-tooltip]:focus:after,[data-tooltip]:hover:after{animation-name:slideCaret}@keyframes slide{0%{opacity:0;transform:translate(-50%, 0.75rem)}to{opacity:1;transform:translate(-50%, -0.25rem)}}@keyframes slideCaret{0%{opacity:0}50%{opacity:0;transform:translate(-50%, -0.25rem)}to{opacity:1;transform:translate(-50%, 0rem)}}@media (prefers-reduced-motion:reduce){*,:after,:before{background-attachment:initial!important;animation-duration:1ms!important;animation-delay:-1ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0s!important;transition-duration:0s!important}} \ No newline at end of file diff --git a/css/pico.slim.css b/css/pico.slim.css index 66abef5df..b61edba26 100644 --- a/css/pico.slim.css +++ b/css/pico.slim.css @@ -1,6 +1,6 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT * * Slim version example * You can export only the modules you need @@ -9,230 +9,375 @@ * Theme: default */ :root { - --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --titles-font: var(--text-font); - --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --line-height: 1.5; - --text-weight: 400; - --titles-weight: 700; - --form-element-weight: var(--text-weight); - --buttons-weight: var(--text-weight); - --code-weight: var(--text-weight); - --base-font-xs: 16px; - --base-font-sm: 17px; - --base-font-md: 18px; - --base-font-lg: 19px; - --base-font-xl: 20px; - --h1-size: 2rem; - --h2-size: 1.75rem; - --h3-size: 1.5rem; - --h4-size: 1.25rem; - --h5-size: 1.125rem; - --h6-size: 1rem; - --block-round: .25rem; - --form-element-border-width: 1px; - --form-element-outline-width: 3px; - --checkbox-radio-border-width: 2px; - --switch-border-width: 3px; - --form-element-spacing-vertical: .75rem; + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: .75rem; --form-element-spacing-horizontal: 1rem; - --button-round: var(--block-round); - --button-border-width: var(--form-element-border-width); - --button-outline-width: var(--form-element-outline-width); - --button-spacing-vertical: var(--form-element-spacing-vertical); - --button-spacing-horizontal: var(--form-element-spacing-horizontal); - --spacing-gutter: 1rem; - --spacing-block: 2rem; - --spacing-factor-xs: 1; - --spacing-factor-sm: 1.25; - --spacing-factor-md: 1.5; - --spacing-factor-lg: 1.75; - --spacing-factor-xl: 2; - --spacing-typography: 1.5rem; - --spacing-form-element: .25rem; - --transition: .2s ease-in-out; + --transition: .2s ease-in-out; } -:root { - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 0.875rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; } [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #08769b; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-border: var(--secondary); - --secondary-hover: #415462; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-border: var(--contrast); - --contrast-hover: #0d1419; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.33); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.075); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } } -[data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); +[data-theme="dark"] :root:not([data-theme="light"]) { + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } /** @@ -257,40 +402,16 @@ html { -moz-tab-size: 4; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; - background: var(--background); - color: var(--text); - font-family: var(--text-font); - font-size: var(--base-font-xs); - font-weight: var(--text-weight); + background-color: var(--background-color); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); line-height: var(--line-height); text-rendering: optimizeLegibility; cursor: default; } -@media (min-width: 576px) { - html { - font-size: var(--base-font-sm); - } -} - -@media (min-width: 768px) { - html { - font-size: var(--base-font-md); - } -} - -@media (min-width: 992px) { - html { - font-size: var(--base-font-lg); - } -} - -@media (min-width: 1200px) { - html { - font-size: var(--base-font-xl); - } -} - /** * Sectioning * Container and responsive spacings for header, main, footer @@ -310,7 +431,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--spacing-block) 0; + padding: var(--block-spacing-vertical) 0; } /** @@ -321,8 +442,8 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding-right: var(--spacing-gutter); - padding-left: var(--spacing-gutter); + padding-right: var(--spacing); + padding-left: var(--spacing); } @media (min-width: 576px) { @@ -351,13 +472,21 @@ body > footer { } } +/** + * Section + * Responsive spacings for section + */ +section { + margin-bottom: var(--block-spacing-vertical); +} + /** * Grid * Minimal grid system with auto-layout columns */ .grid { - grid-column-gap: var(--spacing-gutter); - grid-row-gap: var(--spacing-gutter); + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); display: grid; grid-template-columns: 1fr; margin: 0; @@ -384,8 +513,8 @@ figure { } figure figcaption { - padding: calc(var(--spacing-gutter) / 2) 0; - color: var(--muted-text); + padding: calc(var(--spacing) / 2) 0; + color: var(--muted-color); } /** @@ -438,52 +567,52 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--spacing-typography); - color: var(--text); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); font-size: 1rem; font-style: normal; } a { - background-color: transparent; - color: var(--primary); - text-decoration: none; + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + text-decoration: var(--text-decoration); } a:hover, a:active, a:focus { - color: var(--primary-hover); - text-decoration: underline; + --color: var(--primary-hover); + --text-decoration: underline; } a:focus { - outline: none; - background-color: var(--primary-focus); + --background-color: var(--primary-focus); } a.secondary { - color: var(--secondary); - text-decoration: underline; + --color: var(--secondary); } a.secondary:hover, a.secondary:active, a.secondary:focus { - color: var(--secondary-hover); + --color: var(--secondary-hover); } a.secondary:focus { - background-color: var(--secondary-focus); + --background-color: var(--secondary-focus); } a.contrast { - color: var(--contrast); - text-decoration: underline; + --color: var(--contrast); } a.contrast:hover, a.contrast:active, a.contrast:focus { - color: var(--contrast-hover); + --color: var(--contrast-hover); } a.contrast:focus { - background-color: var(--contrast-focus); + --background-color: var(--contrast-focus); } h1, @@ -493,179 +622,131 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--spacing-typography); - font-family: var(--titles-font); - font-weight: var(--titles-weight); + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-family: var(--font-family); + font-size: var(--font-size); + font-weight: var(--font-weight); } h1 { - margin-bottom: calc(var(--spacing-typography) * 2); - color: var(--h1); - font-size: var(--h1-size); + --color: var(--h1-color); } h2 { - margin-bottom: calc(var(--spacing-typography) * 1.75); - color: var(--h2); - font-size: var(--h2-size); + --color: var(--h2-color); } h3 { - margin-bottom: calc(var(--spacing-typography) * 1.5); - color: var(--h3); - font-size: var(--h3-size); + --color: var(--h3-color); } h4 { - margin-bottom: calc(var(--spacing-typography) * 1.25); - color: var(--h4); - font-size: var(--h4-size); + --color: var(--h4-color); } h5 { - margin-bottom: calc(var(--spacing-typography) * 1.125); - color: var(--h5); - font-size: var(--h5-size); + --color: var(--h5-color); } h6 { - color: var(--h6); - font-size: var(--h6-size); + --color: var(--h6-color); } address ~ h1, -blockquote ~ h1, -dl ~ h1, -figure ~ h1, -form ~ h1, -ol ~ h1, -p ~ h1, -pre ~ h1, -table ~ h1, -ul ~ h1 { - margin-top: calc(var(--spacing-typography) * 2); -} - address ~ h2, -blockquote ~ h2, -dl ~ h2, -figure ~ h2, -form ~ h2, -ol ~ h2, -p ~ h2, -pre ~ h2, -table ~ h2, -ul ~ h2 { - margin-top: calc(var(--spacing-typography) * 1.75); -} - address ~ h3, -blockquote ~ h3, -dl ~ h3, -figure ~ h3, -form ~ h3, -ol ~ h3, -p ~ h3, -pre ~ h3, -table ~ h3, -ul ~ h3 { - margin-top: calc(var(--spacing-typography) * 1.5); -} - address ~ h4, -blockquote ~ h4, -dl ~ h4, -figure ~ h4, -form ~ h4, -ol ~ h4, -p ~ h4, -pre ~ h4, -table ~ h4, -ul ~ h4 { - margin-top: calc(var(--spacing-typography) * 1.25); -} - address ~ h5, -blockquote ~ h5, -dl ~ h5, -figure ~ h5, -form ~ h5, -ol ~ h5, -p ~ h5, -pre ~ h5, -table ~ h5, -ul ~ h5 { - margin-top: calc(var(--spacing-typography) * 1.125); -} - address ~ h6, +blockquote ~ h1, +blockquote ~ h2, +blockquote ~ h3, +blockquote ~ h4, +blockquote ~ h5, blockquote ~ h6, +dl ~ h1, +dl ~ h2, +dl ~ h3, +dl ~ h4, +dl ~ h5, dl ~ h6, +figure ~ h1, +figure ~ h2, +figure ~ h3, +figure ~ h4, +figure ~ h5, figure ~ h6, +form ~ h1, +form ~ h2, +form ~ h3, +form ~ h4, +form ~ h5, form ~ h6, +ol ~ h1, +ol ~ h2, +ol ~ h3, +ol ~ h4, +ol ~ h5, ol ~ h6, +p ~ h1, +p ~ h2, +p ~ h3, +p ~ h4, +p ~ h5, p ~ h6, +pre ~ h1, +pre ~ h2, +pre ~ h3, +pre ~ h4, +pre ~ h5, pre ~ h6, +table ~ h1, +table ~ h2, +table ~ h3, +table ~ h4, +table ~ h5, table ~ h6, +ul ~ h1, +ul ~ h2, +ul ~ h3, +ul ~ h4, +ul ~ h5, ul ~ h6 { - margin-top: calc(var(--spacing-typography)); + margin-top: var(--typography-spacing-vertical); } hgroup { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } -hgroup * { +hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - color: var(--muted-text); + --color: var(--muted-color); font-family: unset; - font-size: 1.125rem; + font-size: 1rem; font-weight: unset; } p { - margin-bottom: var(--spacing-typography); + margin-bottom: var(--typography-spacing-vertical); } small { - font-size: 85%; -} - -@media (min-width: 576px) { - small { - font-size: 83%; - } -} - -@media (min-width: 768px) { - small { - font-size: 81%; - } -} - -@media (min-width: 992px) { - small { - font-size: 79%; - } -} - -@media (min-width: 1200px) { - small { - font-size: 77%; - } + font-size: var(--font-size); } ul, ol { - padding-left: var(--spacing-typography); + padding-left: var(--spacing); } ul li, ol li { - margin-bottom: calc(var(--spacing-typography) / 4); + margin-bottom: calc(var(--typography-spacing-vertical) / 4); } ul li { @@ -674,21 +755,21 @@ ul li { mark { padding: .125rem .25rem; - background: var(--mark); - color: var(--mark-text); + background-color: var(--mark-background-color); + color: var(--mark-color); vertical-align: middle; } blockquote { display: block; - margin: var(--spacing-typography) 0; - padding: var(--spacing-gutter); - border-left: 0.25rem solid var(--muted-border); + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-left: 0.25rem solid var(--blockquote-border-color); } blockquote footer { - margin-top: calc(var(--spacing-typography) / 2); - color: var(--muted-text); + margin-top: calc(var(--typography-spacing-vertical) / 2); + color: var(--blockquote-footer-color); } abbr[title] { @@ -698,12 +779,12 @@ abbr[title] { } ins { - color: var(--valid); + color: var(--ins-color); text-decoration: none; } del { - color: var(--invalid); + color: var(--del-color); } ::selection { @@ -778,7 +859,7 @@ button::-moz-focus-inner, button { display: block; width: 100%; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); } a[role="button"] { @@ -790,17 +871,20 @@ button, input[type="submit"], input[type="button"], input[type="reset"], -[type="file"]::-webkit-file-upload-button, a[role="button"] { - padding: var(--button-spacing-vertical) var(--button-spacing-horizontal); - border: var(--button-border-width) solid var(--primary-border); - border-radius: var(--button-round); + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: none; + padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--primary); - box-shadow: var(--button-shadow); - color: var(--primary-inverse); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); font-size: 1rem; - font-weight: var(--buttons-weight); + font-weight: var(--font-weight); line-height: var(--line-height); text-align: center; cursor: pointer; @@ -816,30 +900,182 @@ input[type="button"]:focus, input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:hover, -[type="file"]::-webkit-file-upload-button:active, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:hover, a[role="button"]:active, a[role="button"]:focus { - border-color: var(--primary-hover-border); - background-color: var(--primary-hover); - box-shadow: var(--button-hover-shadow); + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); } button:focus, input[type="submit"]:focus, input[type="button"]:focus, input[type="reset"]:focus, -[type="file"]::-webkit-file-upload-button:focus, a[role="button"]:focus { - box-shadow: var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus); + --box-shadow: 0 0 0 var(--outline-width) var(--primary-focus); } input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); cursor: pointer; } +input[type="reset"]:hover, input[type="reset"]:active, input[type="reset"]:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +input[type="reset"]:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); +} + +button.secondary, +input[type="submit"].secondary, +input[type="button"].secondary, +input[type="reset"].secondary, +a[role="button"].secondary { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + cursor: pointer; +} + +button.secondary:hover, button.secondary:active, button.secondary:focus, +input[type="submit"].secondary:hover, +input[type="submit"].secondary:active, +input[type="submit"].secondary:focus, +input[type="button"].secondary:hover, +input[type="button"].secondary:active, +input[type="button"].secondary:focus, +input[type="reset"].secondary:hover, +input[type="reset"].secondary:active, +input[type="reset"].secondary:focus, +a[role="button"].secondary:hover, +a[role="button"].secondary:active, +a[role="button"].secondary:focus { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +button.secondary:focus, +input[type="submit"].secondary:focus, +input[type="button"].secondary:focus, +input[type="reset"].secondary:focus, +a[role="button"].secondary:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--secondary-focus); +} + +button.contrast, +input[type="submit"].contrast, +input[type="button"].contrast, +input[type="reset"].contrast, +a[role="button"].contrast { + --background-color: var(--contrast); + --border-color: var(--contrast); + --color: var(--contrast-inverse); +} + +button.contrast:hover, button.contrast:active, button.contrast:focus, +input[type="submit"].contrast:hover, +input[type="submit"].contrast:active, +input[type="submit"].contrast:focus, +input[type="button"].contrast:hover, +input[type="button"].contrast:active, +input[type="button"].contrast:focus, +input[type="reset"].contrast:hover, +input[type="reset"].contrast:active, +input[type="reset"].contrast:focus, +a[role="button"].contrast:hover, +a[role="button"].contrast:active, +a[role="button"].contrast:focus { + --background-color: var(--contrast-hover); + --border-color: var(--contrast-hover); +} + +button.contrast:focus, +input[type="submit"].contrast:focus, +input[type="button"].contrast:focus, +input[type="reset"].contrast:focus, +a[role="button"].contrast:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--contrast-focus); +} + +button.outline, +input[type="submit"].outline, +input[type="button"].outline, +input[type="reset"].outline, +a[role="button"].outline { + --background-color: transparent; + --color: var(--primary); +} + +button.outline:hover, button.outline:active, button.outline:focus, +input[type="submit"].outline:hover, +input[type="submit"].outline:active, +input[type="submit"].outline:focus, +input[type="button"].outline:hover, +input[type="button"].outline:active, +input[type="button"].outline:focus, +input[type="reset"].outline:hover, +input[type="reset"].outline:active, +input[type="reset"].outline:focus, +a[role="button"].outline:hover, +a[role="button"].outline:active, +a[role="button"].outline:focus { + --background-color: transparent; + --color: var(--primary-hover); +} + +button.outline.secondary, +input[type="submit"].outline.secondary, +input[type="button"].outline.secondary, +input[type="reset"].outline.secondary, +a[role="button"].outline.secondary { + --color: var(--secondary); +} + +button.outline.secondary:hover, button.outline.secondary:active, button.outline.secondary:focus, +input[type="submit"].outline.secondary:hover, +input[type="submit"].outline.secondary:active, +input[type="submit"].outline.secondary:focus, +input[type="button"].outline.secondary:hover, +input[type="button"].outline.secondary:active, +input[type="button"].outline.secondary:focus, +input[type="reset"].outline.secondary:hover, +input[type="reset"].outline.secondary:active, +input[type="reset"].outline.secondary:focus, +a[role="button"].outline.secondary:hover, +a[role="button"].outline.secondary:active, +a[role="button"].outline.secondary:focus { + --color: var(--secondary-hover); +} + +button.outline.contrast, +input[type="submit"].outline.contrast, +input[type="button"].outline.contrast, +input[type="reset"].outline.contrast, +a[role="button"].outline.contrast { + --color: var(--contrast); +} + +button.outline.contrast:hover, button.outline.contrast:active, button.outline.contrast:focus, +input[type="submit"].outline.contrast:hover, +input[type="submit"].outline.contrast:active, +input[type="submit"].outline.contrast:focus, +input[type="button"].outline.contrast:hover, +input[type="button"].outline.contrast:active, +input[type="button"].outline.contrast:focus, +input[type="reset"].outline.contrast:hover, +input[type="reset"].outline.contrast:active, +input[type="reset"].outline.contrast:focus, +a[role="button"].outline.contrast:hover, +a[role="button"].outline.contrast:active, +a[role="button"].outline.contrast:focus { + --color: var(--contrast-hover); +} + button[disabled], input[type="submit"][disabled], input[type="button"][disabled], @@ -915,7 +1151,7 @@ textarea { } :-moz-focusring { - outline: 1px dotted ButtonText; + outline: none; } :-moz-ui-invalid { @@ -933,12 +1169,12 @@ textarea { } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]) { - height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2)); + height: calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2)); } fieldset { margin: 0; - margin-bottom: var(--spacing-typography); + margin-bottom: var(--spacing); padding: 0; border: 0; } @@ -946,14 +1182,13 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: var(--spacing-form-element); + margin-bottom: calc(var(--spacing) / 4); vertical-align: middle; } input:not([type="checkbox"]):not([type="radio"]), select, -textarea, -form small { +textarea { display: block; width: 100%; } @@ -971,80 +1206,51 @@ textarea { input, select, textarea { - border: var(--form-element-border-width) solid var(--input-border); - border-radius: var(--block-round); + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); outline: none; - background-color: var(--input-background); - color: var(--text); - font-weight: var(--form-element-weight); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); } -input::placeholder, input::-webkit-input-placeholder, -select::placeholder, -select::-webkit-input-placeholder, -textarea::placeholder, -textarea::-webkit-input-placeholder { - color: var(--muted-text); - opacity: 1; -} - -input:active, input:focus, +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([readonly]):focus, select:active, select:focus, textarea:active, textarea:focus { - border-color: var(--input-hover-border); - background-color: var(--input-hover-background); -} - -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); + --background-color: var(--form-element-active-background-color); } -input[readonly]:active, input[readonly]:focus, input[disabled]:active, input[disabled]:focus, -select[readonly]:active, -select[readonly]:focus, -select[disabled]:active, -select[disabled]:focus, -textarea[readonly]:active, -textarea[readonly]:focus, -textarea[disabled]:active, -textarea[disabled]:focus { - box-shadow: none; +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):active, input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([role="switch"]):not([readonly]):focus, +select:active, +select:focus, +textarea:active, +textarea:focus { + --border-color: var(--form-element-active-border-color); } -input[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -select[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]), -textarea[disabled]:not([type="reset"]):not([type="submit"]):not([type="button"]) { - background-color: var(--muted-background); +input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="range"]):not([type="file"]):not([readonly]):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus); } -input[disabled], +input:not([type="submit"]):not([type="button"]):not([type="reset"])[disabled], select[disabled], textarea[disabled] { - opacity: .66; + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: .375; } -input .valid, -input .invalid, input[aria-invalid], -select .valid, -select .invalid, +input[aria-invalid], select[aria-invalid], -textarea .valid, -textarea .invalid, textarea[aria-invalid] { padding-right: 2rem; background-position: center right .75rem; @@ -1052,32 +1258,49 @@ textarea[aria-invalid] { background-size: 1rem auto; } -input .valid, input[aria-invalid="false"], -select .valid, +input[aria-invalid="false"], select[aria-invalid="false"], -textarea .valid, textarea[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); background-image: var(--icon-valid); } -input .invalid, input[aria-invalid="true"], -select .invalid, +input[aria-invalid="false"]:active, input[aria-invalid="false"]:focus, +select[aria-invalid="false"]:active, +select[aria-invalid="false"]:focus, +textarea[aria-invalid="false"]:active, +textarea[aria-invalid="false"]:focus { + --border-color: var(--form-element-valid-active-border-color); +} + +input[aria-invalid="true"], select[aria-invalid="true"], -textarea .invalid, textarea[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); background-image: var(--icon-invalid); } +input[aria-invalid="true"]:active, input[aria-invalid="true"]:focus, +select[aria-invalid="true"]:active, +select[aria-invalid="true"]:focus, +textarea[aria-invalid="true"]:active, +textarea[aria-invalid="true"]:focus { + --border-color: var(--form-element-invalid-active-border-color); +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + input:not([type="checkbox"]):not([type="radio"]), select, textarea { - margin-bottom: var(--spacing-typography); -} - -input:not([type="range"]):not([type="file"]):focus, -select:focus, -textarea:focus { - box-shadow: 0 0 0 var(--form-element-outline-width) var(--input-focus); + margin-bottom: var(--spacing); } select::-ms-expand { @@ -1093,21 +1316,20 @@ select:not([multiple]):not([size]) { background-size: 1rem auto; } -form small { - color: var(--muted-text); -} - input + small, select + small, textarea + small { - margin-top: calc(var(--spacing-typography) * -0.75); - margin-bottom: var(--spacing-typography); + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); } label > input, label > select, label > textarea { - margin-top: var(--spacing-form-element); + margin-top: calc(var(--spacing) / 4); } /** @@ -1123,27 +1345,20 @@ table { th, td { - padding: calc(var(--spacing-gutter) / 2) var(--spacing-gutter); - border-bottom: 1px solid var(--table-border); - color: var(--muted-text); - font-size: 0.875rem; - font-weight: var(--text-weight); + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-size: var(--font-size); + font-weight: var(--font-weight); text-align: left; } -th, -thead td { - color: var(--text); - font-size: 1rem; -} - -thead th, -thead td { - border-bottom: 3px solid var(--table-border); +tr { + background-color: var(--background-color); } table[role="grid"] tbody tr:nth-child(odd) { - background-color: var(--table-stripping); + --background-color: var(--table-row-stripped-background-color); } /** diff --git a/css/pico.slim.min.css b/css/pico.slim.min.css index c6ab055a4..a56349104 100644 --- a/css/pico.slim.min.css +++ b/css/pico.slim.min.css @@ -1,7 +1,7 @@ /*! * Pico.css v1.2.1 (https://picocss.com) - * Copyright 2020 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT * * Slim version example * You can export only the modules you need - */:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background:var(--background);color:var(--text);font-family:var(--text-font);font-size:var(--base-font-xs);font-weight:var(--text-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}@media (min-width:576px){html{font-size:var(--base-font-sm)}}@media (min-width:768px){html{font-size:var(--base-font-md)}}@media (min-width:992px){html{font-size:var(--base-font-lg)}}@media (min-width:1200px){html{font-size:var(--base-font-xl)}}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--spacing-block) 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing-gutter);padding-left:var(--spacing-gutter)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}.grid{grid-column-gap:var(--spacing-gutter);grid-row-gap:var(--spacing-gutter);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing-gutter) / 2) 0;color:var(--muted-text)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--spacing-typography);color:var(--text);font-size:1rem;font-style:normal}a{background-color:transparent;color:var(--primary);text-decoration:none}a:active,a:focus,a:hover{color:var(--primary-hover);text-decoration:underline}a:focus{outline:none;background-color:var(--primary-focus)}a.secondary{color:var(--secondary);text-decoration:underline}a.secondary:active,a.secondary:focus,a.secondary:hover{color:var(--secondary-hover)}a.secondary:focus{background-color:var(--secondary-focus)}a.contrast{color:var(--contrast);text-decoration:underline}a.contrast:active,a.contrast:focus,a.contrast:hover{color:var(--contrast-hover)}a.contrast:focus{background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--spacing-typography);font-family:var(--titles-font);font-weight:var(--titles-weight)}h1{margin-bottom:calc(var(--spacing-typography) * 2);color:var(--h1);font-size:var(--h1-size)}h2{margin-bottom:calc(var(--spacing-typography) * 1.75);color:var(--h2);font-size:var(--h2-size)}h3{margin-bottom:calc(var(--spacing-typography) * 1.5);color:var(--h3);font-size:var(--h3-size)}h4{margin-bottom:calc(var(--spacing-typography) * 1.25);color:var(--h4);font-size:var(--h4-size)}h5{margin-bottom:calc(var(--spacing-typography) * 1.125);color:var(--h5);font-size:var(--h5-size)}h6{color:var(--h6);font-size:var(--h6-size)}address~h1,blockquote~h1,dl~h1,figure~h1,form~h1,ol~h1,pre~h1,p~h1,table~h1,ul~h1{margin-top:calc(var(--spacing-typography) * 2)}address~h2,blockquote~h2,dl~h2,figure~h2,form~h2,ol~h2,pre~h2,p~h2,table~h2,ul~h2{margin-top:calc(var(--spacing-typography) * 1.75)}address~h3,blockquote~h3,dl~h3,figure~h3,form~h3,ol~h3,pre~h3,p~h3,table~h3,ul~h3{margin-top:calc(var(--spacing-typography) * 1.5)}address~h4,blockquote~h4,dl~h4,figure~h4,form~h4,ol~h4,pre~h4,p~h4,table~h4,ul~h4{margin-top:calc(var(--spacing-typography) * 1.25)}address~h5,blockquote~h5,dl~h5,figure~h5,form~h5,ol~h5,pre~h5,p~h5,table~h5,ul~h5{margin-top:calc(var(--spacing-typography) * 1.125)}address~h6,blockquote~h6,dl~h6,figure~h6,form~h6,ol~h6,pre~h6,p~h6,table~h6,ul~h6{margin-top:calc(var(--spacing-typography))}hgroup{margin-bottom:var(--spacing-typography)}hgroup *{margin-bottom:0}hgroup>:last-child{color:var(--muted-text);font-family:unset;font-size:1.125rem;font-weight:unset}p{margin-bottom:var(--spacing-typography)}small{font-size:85%}@media (min-width:576px){small{font-size:83%}}@media (min-width:768px){small{font-size:81%}}@media (min-width:992px){small{font-size:79%}}@media (min-width:1200px){small{font-size:77%}}ol,ul{padding-left:var(--spacing-typography)}ol li,ul li{margin-bottom:calc(var(--spacing-typography) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background:var(--mark);color:var(--mark-text);vertical-align:middle}blockquote{display:block;margin:var(--spacing-typography) 0;padding:var(--spacing-gutter);border-left:0.25rem solid var(--muted-border)}blockquote footer{margin-top:calc(var(--spacing-typography) / 2);color:var(--muted-text)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--valid);text-decoration:none}del{color:var(--invalid)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing-typography)}a[role=button]{display:inline-block;text-decoration:none}[type=file]::-webkit-file-upload-button,a[role=button],button,input[type=button],input[type=reset],input[type=submit]{padding:var(--button-spacing-vertical) var(--button-spacing-horizontal);border:var(--button-border-width) solid var(--primary-border);border-radius:var(--button-round);outline:none;background-color:var(--primary);box-shadow:var(--button-shadow);color:var(--primary-inverse);font-size:1rem;font-weight:var(--buttons-weight);line-height:var(--line-height);text-align:center;cursor:pointer}[type=file]::-webkit-file-upload-button:active,[type=file]::-webkit-file-upload-button:focus,[type=file]::-webkit-file-upload-button:hover,a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{border-color:var(--primary-hover-border);background-color:var(--primary-hover);box-shadow:var(--button-hover-shadow)}[type=file]::-webkit-file-upload-button:focus,a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--button-hover-shadow), 0 0 0 var(--button-outline-width) var(--primary-focus)}input[type=reset]{cursor:pointer}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--form-element-border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing-typography);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:var(--spacing-form-element);vertical-align:middle}form small,input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{border:var(--form-element-border-width) solid var(--input-border);border-radius:var(--block-round);outline:none;background-color:var(--input-background);color:var(--text);font-weight:var(--form-element-weight)}input::-webkit-input-placeholder,input::placeholder,select::-webkit-input-placeholder,select::placeholder,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--muted-text);opacity:1}input:active,input:focus,select:active,select:focus,textarea:active,textarea:focus{border-color:var(--input-hover-border);background-color:var(--input-hover-background)}input[disabled],input[readonly],select[disabled],select[readonly],textarea[disabled],textarea[readonly]{border-color:var(--muted-border);box-shadow:none}input[disabled]~label,input[readonly]~label,select[disabled]~label,select[readonly]~label,textarea[disabled]~label,textarea[readonly]~label{color:var(--muted-text)}input[disabled]:active,input[disabled]:focus,input[readonly]:active,input[readonly]:focus,select[disabled]:active,select[disabled]:focus,select[readonly]:active,select[readonly]:focus,textarea[disabled]:active,textarea[disabled]:focus,textarea[readonly]:active,textarea[readonly]:focus{box-shadow:none}input[disabled]:not([type=reset]):not([type=submit]):not([type=button]),select[disabled]:not([type=reset]):not([type=submit]):not([type=button]),textarea[disabled]:not([type=reset]):not([type=submit]):not([type=button]){background-color:var(--muted-background)}input[disabled],select[disabled],textarea[disabled]{opacity:.66}input .invalid,input .valid,input[aria-invalid],select .invalid,select .valid,select[aria-invalid],textarea .invalid,textarea .valid,textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input .valid,input[aria-invalid=false],select .valid,select[aria-invalid=false],textarea .valid,textarea[aria-invalid=false]{background-image:var(--icon-valid)}input .invalid,input[aria-invalid=true],select .invalid,select[aria-invalid=true],textarea .invalid,textarea[aria-invalid=true]{background-image:var(--icon-invalid)}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing-typography)}input:not([type=range]):not([type=file]):focus,select:focus,textarea:focus{box-shadow:0 0 0 var(--form-element-outline-width) var(--input-focus)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}form small{color:var(--muted-text)}input+small,select+small,textarea+small{margin-top:calc(var(--spacing-typography) * -0.75);margin-bottom:var(--spacing-typography)}label>input,label>select,label>textarea{margin-top:var(--spacing-form-element)}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing-gutter) / 2) var(--spacing-gutter);border-bottom:1px solid var(--table-border);color:var(--muted-text);font-size:0.875rem;font-weight:var(--text-weight);text-align:left}th,thead td{color:var(--text);font-size:1rem}thead td,thead th{border-bottom:3px solid var(--table-border)}table[role=grid] tbody tr:nth-child(odd){background-color:var(--table-stripping)}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation} \ No newline at end of file + */:root{--font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:0.875rem}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}code,kbd,pre,samp{--font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}}[data-theme=dark] :root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}*,:after,:before{box-sizing:border-box}:after,:before{text-decoration:inherit;vertical-align:inherit}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-moz-tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:var(--background-color);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);text-rendering:optimizeLegibility;cursor:default}main{display:block}body{width:100%;margin:0}body>footer,body>header,body>main{width:100%;margin-right:auto;margin-left:auto;padding:var(--block-spacing-vertical) 0}.container,.container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--spacing);padding-left:var(--spacing)}@media (min-width:576px){.container{max-width:510px;padding-right:0;padding-left:0}}@media (min-width:768px){.container{max-width:700px}}@media (min-width:992px){.container{max-width:920px}}@media (min-width:1200px){.container{max-width:1130px}}section{margin-bottom:var(--block-spacing-vertical)}.grid{grid-column-gap:var(--grid-spacing-horizontal);grid-row-gap:var(--grid-spacing-vertical);display:grid;grid-template-columns:1fr;margin:0}@media (min-width:992px){.grid{grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))}}.grid>*{min-width:0}figure{display:block;margin:0;padding:0;overflow-x:auto}figure figcaption{padding:calc(var(--spacing) / 2) 0;color:var(--muted-color)}b,strong{font-weight:bolder}sub,sup{position:relative;font-size:.75rem;line-height:0;vertical-align:baseline}sub{bottom:-0.25rem}sup{top:-0.5rem}dl dl,dl ol,dl ul,ol dl,ul dl{margin:0}ol ol,ol ul,ul ol,ul ul{margin:0}address,blockquote,dl,figure,form,ol,p,pre,table,ul{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-size:1rem;font-style:normal}a{--color:var(--primary);--background-color:transparent;outline:none;background-color:var(--background-color);color:var(--color);text-decoration:var(--text-decoration)}a:active,a:focus,a:hover{--color:var(--primary-hover);--text-decoration:underline}a:focus{--background-color:var(--primary-focus)}a.secondary{--color:var(--secondary)}a.secondary:active,a.secondary:focus,a.secondary:hover{--color:var(--secondary-hover)}a.secondary:focus{--background-color:var(--secondary-focus)}a.contrast{--color:var(--contrast)}a.contrast:active,a.contrast:focus,a.contrast:hover{--color:var(--contrast-hover)}a.contrast:focus{--background-color:var(--contrast-focus)}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:var(--typography-spacing-vertical);color:var(--color);font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight)}h1{--color:var(--h1-color)}h2{--color:var(--h2-color)}h3{--color:var(--h3-color)}h4{--color:var(--h4-color)}h5{--color:var(--h5-color)}h6{--color:var(--h6-color)}address~h1,address~h2,address~h3,address~h4,address~h5,address~h6,blockquote~h1,blockquote~h2,blockquote~h3,blockquote~h4,blockquote~h5,blockquote~h6,dl~h1,dl~h2,dl~h3,dl~h4,dl~h5,dl~h6,figure~h1,figure~h2,figure~h3,figure~h4,figure~h5,figure~h6,form~h1,form~h2,form~h3,form~h4,form~h5,form~h6,ol~h1,ol~h2,ol~h3,ol~h4,ol~h5,ol~h6,pre~h1,pre~h2,pre~h3,pre~h4,pre~h5,pre~h6,p~h1,p~h2,p~h3,p~h4,p~h5,p~h6,table~h1,table~h2,table~h3,table~h4,table~h5,table~h6,ul~h1,ul~h2,ul~h3,ul~h4,ul~h5,ul~h6{margin-top:var(--typography-spacing-vertical)}hgroup{margin-bottom:var(--typography-spacing-vertical)}hgroup>*{margin-bottom:0}hgroup>:last-child{--color:var(--muted-color);font-family:unset;font-size:1rem;font-weight:unset}p{margin-bottom:var(--typography-spacing-vertical)}small{font-size:var(--font-size)}ol,ul{padding-left:var(--spacing)}ol li,ul li{margin-bottom:calc(var(--typography-spacing-vertical) / 4)}ul li{list-style:square}mark{padding:.125rem .25rem;background-color:var(--mark-background-color);color:var(--mark-color);vertical-align:middle}blockquote{display:block;margin:var(--typography-spacing-vertical) 0;padding:var(--spacing);border-left:0.25rem solid var(--blockquote-border-color)}blockquote footer{margin-top:calc(var(--typography-spacing-vertical) / 2);color:var(--blockquote-footer-color)}abbr[title]{border-bottom:1px dotted;text-decoration:none;cursor:help}ins{color:var(--ins-color);text-decoration:none}del{color:var(--del-color)}::selection{background-color:var(--primary-focus)}audio,canvas,iframe,img,svg,video{vertical-align:middle}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}iframe{border-style:none}img{max-width:100%;height:auto;border-style:none}svg:not([fill]){fill:currentColor}svg:not(:root){overflow:hidden}button{margin:0;overflow:visible;font-family:inherit;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}button{display:block;width:100%;margin-bottom:var(--spacing)}a[role=button]{display:inline-block;text-decoration:none}a[role=button],button,input[type=button],input[type=reset],input[type=submit]{--background-color:var(--primary);--border-color:var(--primary);--color:var(--primary-inverse);--box-shadow:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-size:1rem;font-weight:var(--font-weight);line-height:var(--line-height);text-align:center;cursor:pointer}a[role=button]:active,a[role=button]:focus,a[role=button]:hover,button:active,button:focus,button:hover,input[type=button]:active,input[type=button]:focus,input[type=button]:hover,input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover,input[type=submit]:active,input[type=submit]:focus,input[type=submit]:hover{--background-color:var(--primary-hover);--border-color:var(--primary-hover)}a[role=button]:focus,button:focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{--box-shadow:0 0 0 var(--outline-width) var(--primary-focus)}input[type=reset]{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}input[type=reset]:active,input[type=reset]:focus,input[type=reset]:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}input[type=reset]:focus{--box-shadow:0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].secondary,button.secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{--background-color:var(--secondary);--border-color:var(--secondary);--color:var(--secondary-inverse);cursor:pointer}a[role=button].secondary:active,a[role=button].secondary:focus,a[role=button].secondary:hover,button.secondary:active,button.secondary:focus,button.secondary:hover,input[type=button].secondary:active,input[type=button].secondary:focus,input[type=button].secondary:hover,input[type=reset].secondary:active,input[type=reset].secondary:focus,input[type=reset].secondary:hover,input[type=submit].secondary:active,input[type=submit].secondary:focus,input[type=submit].secondary:hover{--background-color:var(--secondary-hover);--border-color:var(--secondary-hover)}a[role=button].secondary:focus,button.secondary:focus,input[type=button].secondary:focus,input[type=reset].secondary:focus,input[type=submit].secondary:focus{--box-shadow:0 0 0 var(--outline-width) var(--secondary-focus)}a[role=button].contrast,button.contrast,input[type=button].contrast,input[type=reset].contrast,input[type=submit].contrast{--background-color:var(--contrast);--border-color:var(--contrast);--color:var(--contrast-inverse)}a[role=button].contrast:active,a[role=button].contrast:focus,a[role=button].contrast:hover,button.contrast:active,button.contrast:focus,button.contrast:hover,input[type=button].contrast:active,input[type=button].contrast:focus,input[type=button].contrast:hover,input[type=reset].contrast:active,input[type=reset].contrast:focus,input[type=reset].contrast:hover,input[type=submit].contrast:active,input[type=submit].contrast:focus,input[type=submit].contrast:hover{--background-color:var(--contrast-hover);--border-color:var(--contrast-hover)}a[role=button].contrast:focus,button.contrast:focus,input[type=button].contrast:focus,input[type=reset].contrast:focus,input[type=submit].contrast:focus{--box-shadow:0 0 0 var(--outline-width) var(--contrast-focus)}a[role=button].outline,button.outline,input[type=button].outline,input[type=reset].outline,input[type=submit].outline{--background-color:transparent;--color:var(--primary)}a[role=button].outline:active,a[role=button].outline:focus,a[role=button].outline:hover,button.outline:active,button.outline:focus,button.outline:hover,input[type=button].outline:active,input[type=button].outline:focus,input[type=button].outline:hover,input[type=reset].outline:active,input[type=reset].outline:focus,input[type=reset].outline:hover,input[type=submit].outline:active,input[type=submit].outline:focus,input[type=submit].outline:hover{--background-color:transparent;--color:var(--primary-hover)}a[role=button].outline.secondary,button.outline.secondary,input[type=button].outline.secondary,input[type=reset].outline.secondary,input[type=submit].outline.secondary{--color:var(--secondary)}a[role=button].outline.secondary:active,a[role=button].outline.secondary:focus,a[role=button].outline.secondary:hover,button.outline.secondary:active,button.outline.secondary:focus,button.outline.secondary:hover,input[type=button].outline.secondary:active,input[type=button].outline.secondary:focus,input[type=button].outline.secondary:hover,input[type=reset].outline.secondary:active,input[type=reset].outline.secondary:focus,input[type=reset].outline.secondary:hover,input[type=submit].outline.secondary:active,input[type=submit].outline.secondary:focus,input[type=submit].outline.secondary:hover{--color:var(--secondary-hover)}a[role=button].outline.contrast,button.outline.contrast,input[type=button].outline.contrast,input[type=reset].outline.contrast,input[type=submit].outline.contrast{--color:var(--contrast)}a[role=button].outline.contrast:active,a[role=button].outline.contrast:focus,a[role=button].outline.contrast:hover,button.outline.contrast:active,button.outline.contrast:focus,button.outline.contrast:hover,input[type=button].outline.contrast:active,input[type=button].outline.contrast:focus,input[type=button].outline.contrast:hover,input[type=reset].outline.contrast:active,input[type=reset].outline.contrast:focus,input[type=reset].outline.contrast:hover,input[type=submit].outline.contrast:active,input[type=submit].outline.contrast:focus,input[type=submit].outline.contrast:hover{--color:var(--contrast-hover)}a[role=button][disabled],button[disabled],input[type=button][disabled],input[type=reset][disabled],input[type=submit][disabled]{opacity:.5;pointer-events:none}input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:1rem;letter-spacing:inherit;line-height:var(--line-height)}input{overflow:visible}select{text-transform:none}legend{max-width:100%;padding:0;color:inherit;white-space:normal}textarea{margin:0;overflow:auto;resize:vertical;resize:block}[type=checkbox],[type=radio]{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{padding:0;border-style:none}:-moz-focusring{outline:none}:-moz-ui-invalid{box-shadow:none}::-ms-expand{display:none}[type=file],[type=range]{padding:0;border-width:0}input:not([type=checkbox]):not([type=radio]):not([type=range]){height:calc( (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) + (var(--border-width) * 2))}fieldset{margin:0;margin-bottom:var(--spacing);padding:0;border:0}fieldset legend,label{display:block;margin-bottom:calc(var(--spacing) / 4);vertical-align:middle}input:not([type=checkbox]):not([type=radio]),select,textarea{display:block;width:100%}input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);vertical-align:middle}input,select,textarea{--background-color:var(--form-element-background-color);--border-color:var(--form-element-border-color);--color:var(--form-element-color);--box-shadow:none;border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);outline:none;background-color:var(--background-color);box-shadow:var(--box-shadow);color:var(--color);font-weight:var(--font-weight)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--background-color:var(--form-element-active-background-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):active,input:not([type=submit]):not([type=button]):not([type=reset]):not([role=switch]):not([readonly]):focus,select:active,select:focus,textarea:active,textarea:focus{--border-color:var(--form-element-active-border-color)}input:not([type=submit]):not([type=button]):not([type=reset]):not([type=range]):not([type=file]):not([readonly]):focus,select:focus,textarea:focus{--box-shadow:0 0 0 var(--outline-width) var(--form-element-focus)}input:not([type=submit]):not([type=button]):not([type=reset])[disabled],select[disabled],textarea[disabled]{--background-color:var(--form-element-disabled-background-color);--border-color:var(--form-element-disabled-border-color);opacity:.375}input[aria-invalid],select[aria-invalid],textarea[aria-invalid]{padding-right:2rem;background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input[aria-invalid=false],select[aria-invalid=false],textarea[aria-invalid=false]{--border-color:var(--form-element-valid-border-color);background-image:var(--icon-valid)}input[aria-invalid=false]:active,input[aria-invalid=false]:focus,select[aria-invalid=false]:active,select[aria-invalid=false]:focus,textarea[aria-invalid=false]:active,textarea[aria-invalid=false]:focus{--border-color:var(--form-element-valid-active-border-color)}input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true]{--border-color:var(--form-element-invalid-border-color);background-image:var(--icon-invalid)}input[aria-invalid=true]:active,input[aria-invalid=true]:focus,select[aria-invalid=true]:active,select[aria-invalid=true]:focus,textarea[aria-invalid=true]:active,textarea[aria-invalid=true]:focus{--border-color:var(--form-element-invalid-active-border-color)}input::-webkit-input-placeholder,input::placeholder,select:invalid,textarea::-webkit-input-placeholder,textarea::placeholder{color:var(--form-element-placeholder-color);opacity:1}input:not([type=checkbox]):not([type=radio]),select,textarea{margin-bottom:var(--spacing)}select::-ms-expand{border:0;background-color:transparent}select:not([multiple]):not([size]){padding-right:calc(var(--form-element-spacing-horizontal) + 1.5rem);background-image:var(--icon-chevron);background-position:center right .75rem;background-repeat:no-repeat;background-size:1rem auto}input+small,select+small,textarea+small{display:block;width:100%;margin-top:calc(var(--spacing) * -0.75);margin-bottom:var(--spacing);color:var(--muted-color)}label>input,label>select,label>textarea{margin-top:calc(var(--spacing) / 4)}table{width:100%;border-color:inherit;border-collapse:collapse;border-spacing:0;text-indent:0}td,th{padding:calc(var(--spacing) / 2) var(--spacing);border-bottom:var(--border-width) solid var(--table-border-color);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-align:left}tr{background-color:var(--background-color)}table[role=grid] tbody tr:nth-child(odd){--background-color:var(--table-row-stripped-background-color)}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}[aria-hidden=false][hidden]{display:initial}[aria-hidden=false][hidden]:not(:focus){clip:rect(0, 0, 0, 0);position:absolute}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation} \ No newline at end of file diff --git a/css/themes/default.css b/css/themes/default.css index 85b2aace3..6a400bf3d 100644 --- a/css/themes/default.css +++ b/css/themes/default.css @@ -2,228 +2,433 @@ * Theme: default */ :root { - --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --titles-font: var(--text-font); - --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --line-height: 1.5; - --text-weight: 400; - --titles-weight: 700; - --form-element-weight: var(--text-weight); - --buttons-weight: var(--text-weight); - --code-weight: var(--text-weight); - --base-font-xs: 16px; - --base-font-sm: 17px; - --base-font-md: 18px; - --base-font-lg: 19px; - --base-font-xl: 20px; - --h1-size: 2rem; - --h2-size: 1.75rem; - --h3-size: 1.5rem; - --h4-size: 1.25rem; - --h5-size: 1.125rem; - --h6-size: 1rem; - --block-round: .25rem; - --form-element-border-width: 1px; - --form-element-outline-width: 3px; - --checkbox-radio-border-width: 2px; - --switch-border-width: 3px; - --form-element-spacing-vertical: .75rem; + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: .25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: .75rem; --form-element-spacing-horizontal: 1rem; - --button-round: var(--block-round); - --button-border-width: var(--form-element-border-width); - --button-outline-width: var(--form-element-outline-width); - --button-spacing-vertical: var(--form-element-spacing-vertical); - --button-spacing-horizontal: var(--form-element-spacing-horizontal); - --spacing-gutter: 1rem; - --spacing-block: 2rem; - --spacing-factor-xs: 1; - --spacing-factor-sm: 1.25; - --spacing-factor-md: 1.5; - --spacing-factor-lg: 1.75; - --spacing-factor-xl: 2; - --spacing-typography: 1.5rem; - --spacing-form-element: .25rem; - --transition: .2s ease-in-out; + --transition: .2s ease-in-out; } -:root { - --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); - --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); - --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); - --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} + +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} + +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} + +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} + +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} + +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} + +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} + +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} + +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +a { + --text-decoration: none; +} + +a.secondary, a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 0.875rem; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +table thead th, +table thead td { + --border-width: 3px; +} + +table :not(thead) td { + --font-size: 0.875rem; +} + +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; } [data-theme="light"], :root:not([data-theme="dark"]) { - --background: #FFF; - --text: #415462; - --h1: #1b2832; - --h2: #2c3d49; - --h3: #415462; - --h4: #596b78; - --h5: #73828c; - --h6: #8a99a3; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #08769b; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #FFF; - --secondary: #73828c; - --secondary-border: var(--secondary); - --secondary-hover: #415462; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(115, 130, 140, 0.125); - --secondary-inverse: #FFF; - --contrast: #2c3d49; - --contrast-border: var(--contrast); - --contrast-hover: #0d1419; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(115, 130, 140, 0.125); - --contrast-inverse: #FFF; - --input-background: #FFF; - --input-border: #c8d1d8; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #288a6a; - --invalid: #b94646; - --mark: rgba(255, 223, 128, 0.33); - --mark-text: #2c3d49; - --muted-text: #7e8d98; - --muted-background: #edf0f3; - --muted-border: #edf0f3; - --card-background: #FFF; - --card-sections: #f3f5f7; - --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); - --code-background: #f3f5f7; - --code-inlined: #edf0f3; - --code-color-1: #73828c; - --code-color-2: #b34d80; - --code-color-3: #3d888f; - --code-color-4: #998866; - --code-color-5: #96a4ae; - --table-border: rgba(237, 240, 243, 0.75); - --table-stripping: rgba(115, 130, 140, 0.075); + color-scheme: light; + --background-color: #FFF; + --color: #415462; + --h1-color: #1b2832; + --h2-color: #23333e; + --h3-color: #2c3d49; + --h4-color: #374956; + --h5-color: #415462; + --h6-color: #4d606d; + --muted-color: #73828c; + --muted-border-color: #edf0f3; + --primary: #1095c1; + --primary-hover: #08769b; + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #415462; + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #FFF; + --contrast: #1b2832; + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #FFF; + --mark-background-color: #fff2ca; + --mark-color: #543a25; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: transparent; + --form-element-border-color: #a2afb9; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #d5dce2; + --form-element-disabled-border-color: #a2afb9; + --form-element-invalid-border-color: #C62828; + --form-element-invalid-active-border-color: #B71C1C; + --form-element-valid-border-color: #388E3C; + --form-element-valid-active-border-color: #2E7D32; + --switch-background-color: #bbc6ce; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #d5dce2; + --range-active-border-color: #bbc6ce; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color:#f6f8f9; + --code-background-color: #edf0f3; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #b34d80; + --code-property-color: #3d888f; + --code-value-color: #998866; + --code-comment-color: #a2afb9; + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); + --card-sectionning-background-color: #fafbfc; + --progress-background-color: #d5dce2; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } } -[data-theme="dark"] { - --background: #10181e; - --text: #a2afb9; - --h1: #edf0f3; - --h2: #d5dce2; - --h3: #bbc6ce; - --h4: #a2afb9; - --h5: #8a99a3; - --h6: #73828c; - --primary: #1095c1; - --primary-border: var(--primary); - --primary-hover: #1ab3e6; - --primary-hover-border: var(--primary-hover); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #FFF; - --secondary: #596b78; - --secondary-border: var(--secondary); - --secondary-hover: #73828c; - --secondary-hover-border: var(--secondary-hover); - --secondary-focus: rgba(89, 107, 120, 0.25); - --secondary-inverse: #FFF; - --contrast: #d5dce2; - --contrast-border: var(--contrast); - --contrast-hover: #FFF; - --contrast-hover-border: var(--contrast-hover); - --contrast-focus: rgba(89, 107, 120, 0.25); - --contrast-inverse: #10181e; - --input-background: #10181e; - --input-border: #374956; - --input-hover-background: var(--input-background); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); - --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); - --valid: #1f7a5c; - --invalid: #943838; - --mark: rgba(255, 223, 128, 0.1875); - --mark-text: #FFF; - --muted-text: #73828c; - --muted-background: #23333e; - --muted-border: #23333e; - --card-background: #17232b; - --card-sections: #141d24; - --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); - --code-background: #141d24; - --code-inlined: rgba(65, 84, 98, 0.25); - --code-color-1: #73828c; - --code-color-2: #a65980; - --code-color-3: #599fa6; - --code-color-4: #8c8473; - --code-color-5: #4d606d; - --table-border: rgba(115, 130, 140, 0.075); - --table-stripping: rgba(115, 130, 140, 0.05); +[data-theme="dark"] :root:not([data-theme="light"]) { + color-scheme: dark; + --background-color: #11191f; + --color: #bbc6ce; + --h1-color: #edf0f3; + --h2-color: #e1e6ea; + --h3-color: #d5dce2; + --h4-color: #c8d1d8; + --h5-color: #bbc6ce; + --h6-color: #aebbc3; + --muted-color: #73828c; + --muted-border-color: #1f2d38; + --primary: #1095c1; + --primary-hover: #1ab3e6; + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #FFF; + --secondary: #596b78; + --secondary-hover: #73828c; + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #FFF; + --contrast: #edf0f3; + --contrast-hover: #FFF; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d0c284; + --mark-color: #11191f; + --ins-color: #388E3C; + --del-color: #C62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus: var(--primary-focus); + --form-element-disabled-background-color: #2c3d49; + --form-element-disabled-border-color: #415462; + --form-element-invalid-border-color: #B71C1C; + --form-element-invalid-active-border-color: #C62828; + --form-element-valid-border-color: #2E7D32; + --form-element-valid-active-border-color: #388E3C; + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #23333e; + --range-active-border-color: #2c3d49; + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #17232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: #a65980; + --code-property-color: #599fa6; + --code-value-color: #8c8473; + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e25; + --card-border-color: #11191f; + --card-box-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036); + --card-sectionning-background-color: #17232c; + --progress-background-color: #23333e; + --progress-color: var(--primary); + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } diff --git a/css/themes/default.min.css b/css/themes/default.min.css index 27dcae377..b32f30d3d 100644 --- a/css/themes/default.min.css +++ b/css/themes/default.min.css @@ -1 +1 @@ -:root{--text-font:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--titles-font:var(--text-font);--code-font:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--text-weight:400;--titles-weight:700;--form-element-weight:var(--text-weight);--buttons-weight:var(--text-weight);--code-weight:var(--text-weight);--base-font-xs:16px;--base-font-sm:17px;--base-font-md:18px;--base-font-lg:19px;--base-font-xl:20px;--h1-size:2rem;--h2-size:1.75rem;--h3-size:1.5rem;--h4-size:1.25rem;--h5-size:1.125rem;--h6-size:1rem;--block-round:.25rem;--form-element-border-width:1px;--form-element-outline-width:3px;--checkbox-radio-border-width:2px;--switch-border-width:3px;--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--button-round:var(--block-round);--button-border-width:var(--form-element-border-width);--button-outline-width:var(--form-element-outline-width);--button-spacing-vertical:var(--form-element-spacing-vertical);--button-spacing-horizontal:var(--form-element-spacing-horizontal);--spacing-gutter:1rem;--spacing-block:2rem;--spacing-factor-xs:1;--spacing-factor-sm:1.25;--spacing-factor-md:1.5;--spacing-factor-lg:1.75;--spacing-factor-xl:2;--spacing-typography:1.5rem;--spacing-form-element:.25rem;--transition:.2s ease-in-out}:root{--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--background:#FFF;--text:#415462;--h1:#1b2832;--h2:#2c3d49;--h3:#415462;--h4:#596b78;--h5:#73828c;--h6:#8a99a3;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#08769b;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#73828c;--secondary-border:var(--secondary);--secondary-hover:#415462;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(115, 130, 140, 0.125);--secondary-inverse:#FFF;--contrast:#2c3d49;--contrast-border:var(--contrast);--contrast-hover:#0d1419;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(115, 130, 140, 0.125);--contrast-inverse:#FFF;--input-background:#FFF;--input-border:#c8d1d8;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#288a6a;--invalid:#b94646;--mark:rgba(255, 223, 128, 0.33);--mark-text:#2c3d49;--muted-text:#7e8d98;--muted-background:#edf0f3;--muted-border:#edf0f3;--card-background:#FFF;--card-sections:#f3f5f7;--card-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--code-background:#f3f5f7;--code-inlined:#edf0f3;--code-color-1:#73828c;--code-color-2:#b34d80;--code-color-3:#3d888f;--code-color-4:#998866;--code-color-5:#96a4ae;--table-border:rgba(237, 240, 243, 0.75);--table-stripping:rgba(115, 130, 140, 0.075)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)}}[data-theme=dark]{--background:#10181e;--text:#a2afb9;--h1:#edf0f3;--h2:#d5dce2;--h3:#bbc6ce;--h4:#a2afb9;--h5:#8a99a3;--h6:#73828c;--primary:#1095c1;--primary-border:var(--primary);--primary-hover:#1ab3e6;--primary-hover-border:var(--primary-hover);--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-border:var(--secondary);--secondary-hover:#73828c;--secondary-hover-border:var(--secondary-hover);--secondary-focus:rgba(89, 107, 120, 0.25);--secondary-inverse:#FFF;--contrast:#d5dce2;--contrast-border:var(--contrast);--contrast-hover:#FFF;--contrast-hover-border:var(--contrast-hover);--contrast-focus:rgba(89, 107, 120, 0.25);--contrast-inverse:#10181e;--input-background:#10181e;--input-border:#374956;--input-hover-background:var(--input-background);--input-hover-border:var(--primary);--input-focus:var(--primary-focus);--input-inverse:var(--primary-inverse);--button-shadow:0 0 0 0 rgba(0, 0, 0, 0);--button-hover-shadow:0 0 0 0 rgba(0, 0, 0, 0);--valid:#1f7a5c;--invalid:#943838;--mark:rgba(255, 223, 128, 0.1875);--mark-text:#FFF;--muted-text:#73828c;--muted-background:#23333e;--muted-border:#23333e;--card-background:#17232b;--card-sections:#141d24;--card-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1);--code-background:#141d24;--code-inlined:rgba(65, 84, 98, 0.25);--code-color-1:#73828c;--code-color-2:#a65980;--code-color-3:#599fa6;--code-color-4:#8c8473;--code-color-5:#4d606d;--table-border:rgba(115, 130, 140, 0.075);--table-stripping:rgba(115, 130, 140, 0.05)} \ No newline at end of file +:root{--font-family:system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--line-height:1.5;--font-weight:400;--font-size:16px;--border-radius:.25rem;--border-width:1px;--outline-width:3px;--spacing:1rem;--typography-spacing-vertical:1.5rem;--block-spacing-vertical:calc(var(--spacing) * 2);--block-spacing-horizontal:var(--spacing);--grid-spacing-vertical:0;--grid-spacing-horizontal:var(--spacing);--form-element-spacing-vertical:.75rem;--form-element-spacing-horizontal:1rem;--transition:.2s ease-in-out}@media (min-width:576px){:root{--font-size:17px}}@media (min-width:768px){:root{--font-size:18px}}@media (min-width:992px){:root{--font-size:19px}}@media (min-width:1200px){:root{--font-size:20px}}@media (min-width:576px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 2.5)}}@media (min-width:768px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3)}}@media (min-width:992px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 3.5)}}@media (min-width:1200px){body>footer,body>header,body>main,section{--block-spacing-vertical:calc(var(--spacing) * 4)}}@media (min-width:576px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.25)}}@media (min-width:768px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.5)}}@media (min-width:992px){article{--block-spacing-horizontal:calc(var(--spacing) * 1.75)}}@media (min-width:1200px){article{--block-spacing-horizontal:calc(var(--spacing) * 2)}}a{--text-decoration:none}a.contrast,a.secondary{--text-decoration:underline}small{--font-size:0.875rem}h1,h2,h3,h4,h5,h6{--font-weight:700}h1{--font-size:2rem;--typography-spacing-vertical:3rem}h2{--font-size:1.75rem;--typography-spacing-vertical:2.625rem}h3{--font-size:1.5rem;--typography-spacing-vertical:2.25rem}h4{--font-size:1.25rem;--typography-spacing-vertical:1.874rem}h5{--font-size:1.125rem;--typography-spacing-vertical:1.6875rem}[type=checkbox],[type=radio]{--border-width:2px}[type=checkbox][role=switch]{--border-width:3px}table thead td,table thead th{--border-width:3px}table :not(thead) td{--font-size:0.875rem}code,kbd,pre,samp{--font-family:"Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"}kbd{--font-weight:bolder}:root:not([data-theme=dark]),[data-theme=light]{color-scheme:light;--background-color:#FFF;--color:#415462;--h1-color:#1b2832;--h2-color:#23333e;--h3-color:#2c3d49;--h4-color:#374956;--h5-color:#415462;--h6-color:#4d606d;--muted-color:#73828c;--muted-border-color:#edf0f3;--primary:#1095c1;--primary-hover:#08769b;--primary-focus:rgba(16, 149, 193, 0.125);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#415462;--secondary-focus:rgba(89, 107, 120, 0.125);--secondary-inverse:#FFF;--contrast:#1b2832;--contrast-hover:#000;--contrast-focus:rgba(89, 107, 120, 0.125);--contrast-inverse:#FFF;--mark-background-color:#fff2ca;--mark-color:#543a25;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:transparent;--form-element-border-color:#a2afb9;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:transparent;--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#d5dce2;--form-element-disabled-border-color:#a2afb9;--form-element-invalid-border-color:#C62828;--form-element-invalid-active-border-color:#B71C1C;--form-element-valid-border-color:#388E3C;--form-element-valid-active-border-color:#2E7D32;--switch-background-color:#bbc6ce;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#d5dce2;--range-active-border-color:#bbc6ce;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:#f6f8f9;--code-background-color:#edf0f3;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#b34d80;--code-property-color:#3d888f;--code-value-color:#998866;--code-comment-color:#a2afb9;--accordion-border-color:var(--muted-border-color);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:var(--background-color);--card-border-color:var(--muted-border-color);--card-box-shadow:0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);--card-sectionning-background-color:#fafbfc;--progress-background-color:#d5dce2;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(65, 84, 98, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(198, 40, 40, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")}}[data-theme=dark] :root:not([data-theme=light]){color-scheme:dark;--background-color:#11191f;--color:#bbc6ce;--h1-color:#edf0f3;--h2-color:#e1e6ea;--h3-color:#d5dce2;--h4-color:#c8d1d8;--h5-color:#bbc6ce;--h6-color:#aebbc3;--muted-color:#73828c;--muted-border-color:#1f2d38;--primary:#1095c1;--primary-hover:#1ab3e6;--primary-focus:rgba(16, 149, 193, 0.25);--primary-inverse:#FFF;--secondary:#596b78;--secondary-hover:#73828c;--secondary-focus:rgba(115, 130, 140, 0.25);--secondary-inverse:#FFF;--contrast:#edf0f3;--contrast-hover:#FFF;--contrast-focus:rgba(115, 130, 140, 0.25);--contrast-inverse:#000;--mark-background-color:#d0c284;--mark-color:#11191f;--ins-color:#388E3C;--del-color:#C62828;--blockquote-border-color:var(--muted-border-color);--blockquote-footer-color:var(--muted-color);--form-element-background-color:#11191f;--form-element-border-color:#374956;--form-element-color:var(--color);--form-element-placeholder-color:var(--muted-color);--form-element-active-background-color:var(--form-element-background-color);--form-element-active-border-color:var(--primary);--form-element-focus:var(--primary-focus);--form-element-disabled-background-color:#2c3d49;--form-element-disabled-border-color:#415462;--form-element-invalid-border-color:#B71C1C;--form-element-invalid-active-border-color:#C62828;--form-element-valid-border-color:#2E7D32;--form-element-valid-active-border-color:#388E3C;--switch-background-color:#374956;--switch-color:var(--primary-inverse);--switch-checked-background-color:var(--primary);--range-border-color:#23333e;--range-active-border-color:#2c3d49;--range-thumb-border-color:var(--background-color);--range-thumb-color:var(--secondary);--range-thumb-hover-color:var(--secondary-hover);--range-thumb-active-color:var(--primary);--table-border-color:var(--muted-border-color);--table-row-stripped-background-color:rgba(115, 130, 140, 0.05);--code-background-color:#17232c;--code-color:var(--muted-color);--code-kbd-background-color:var(--contrast);--code-kbd-color:var(--contrast-inverse);--code-tag-color:#a65980;--code-property-color:#599fa6;--code-value-color:#8c8473;--code-comment-color:#4d606d;--accordion-border-color:var(--muted-border-color);--accordion-active-summary-color:var(--primary);--accordion-close-summary-color:var(--color);--accordion-open-summary-color:var(--muted-color);--card-background-color:#141e25;--card-border-color:#11191f;--card-box-shadow:0 0.125rem 1rem rgba(0, 0, 0, 0.06), 0 0.125rem 2rem rgba(0, 0, 0, 0.12), 0 0 0 0.0625rem rgba(0, 0, 0, 0.036);--card-sectionning-background-color:#17232c;--progress-background-color:#23333e;--progress-color:var(--primary);--tooltip-background-color:var(--contrast);--tooltip-color:var(--contrast-inverse);--icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");--icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");--icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");--icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(162, 175, 185, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");--icon-checkbox:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-minus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");--icon-valid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(46, 125, 50, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-invalid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(183, 28, 28, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E")} \ No newline at end of file diff --git a/docs/css/pico.docs.css b/docs/css/pico.docs.css index b6942ad61..fe737785b 100644 --- a/docs/css/pico.docs.css +++ b/docs/css/pico.docs.css @@ -12,20 +12,29 @@ [data-theme="light"], :root:not([data-theme="dark"]) { - --nav-background: rgba(255, 255, 255, 0.7); - --nav-border: rgba(115, 130, 140, 0.2); + --invalid-color: #C62828; + --valid-color: #388E3C; + --nav-background-color: rgba(255, 255, 255, 0.7); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #FFF; } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --nav-background: rgba(16, 24, 30, 0.8); - --nav-border: rgba(115, 130, 140, 0.2); + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background-color: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; } } [data-theme="dark"] { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); --nav-background: rgba(16, 24, 30, 0.8); - --nav-border: rgba(115, 130, 140, 0.2); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; } /** @@ -39,72 +48,61 @@ html { * Docs: Main (Grid) */ body > main { - padding-top: calc(1rem * var(--spacing-factor-xs) + 3.5rem); -} - -@media (min-width: 576px) { - body > main { - padding-top: calc(1rem * var(--spacing-factor-sm) + 3.5rem); - } -} - -@media (min-width: 768px) { - body > main { - padding-top: calc(1rem * var(--spacing-factor-md) + 3.5rem); - } + padding-top: calc(var(--block-spacing-vertical) + 3.5rem); } @media (min-width: 992px) { body > main { - grid-column-gap: calc(var(--spacing-gutter) * 4); + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + grid-column-gap: calc(var(--block-spacing-horizontal) * 4); display: grid; grid-template-columns: 200px auto; - padding-top: calc(1rem * var(--spacing-factor-lg) + 3.5rem); } } @media (min-width: 1200px) { body > main { - padding-top: calc(1rem * var(--spacing-factor-xl) + 3.5rem); + --block-spacing-horizontal: calc(var(--spacing) * 2); } } -body > main > * { +body > main > aside, +body > main div[role="document"] { min-width: 0; } div[role="document"] > section::before { display: block; - height: calc(1rem * var(--spacing-factor-xs) + 3.5rem); - margin-top: calc(-1rem * var(--spacing-factor-xs) - 3.5rem); + height: calc(2rem + 3.5rem - .5rem); + margin-top: calc(-2rem - 3.5rem + .5rem); content: ''; } @media (min-width: 576px) { div[role="document"] > section::before { - height: calc(1rem * var(--spacing-factor-sm) + 3.5rem); - margin-top: calc(-1rem * var(--spacing-factor-sm) - 3.5rem); + height: calc(2.5rem + 3.5rem - .5rem); + height: calc(-2.5rem - 3.5rem + .5rem); } } @media (min-width: 768px) { div[role="document"] > section::before { - height: calc(1rem * var(--spacing-factor-md) + 3.5rem); - margin-top: calc(-1rem * var(--spacing-factor-md) - 3.5rem); + height: calc(3rem + 3.5rem - .5rem); + margin-top: calc(-3rem - 3.5rem + .5rem); } } @media (min-width: 992px) { div[role="document"] > section::before { - height: calc(1rem * var(--spacing-factor-lg) + 3.5rem); - margin-top: calc(-1rem * var(--spacing-factor-lg) - 3.5rem); + height: calc(3.5rem + 3.5rem - .5rem); + margin-top: calc(-3.5rem - 3.5rem + .5rem); } } @media (min-width: 1200px) { div[role="document"] > section::before { - height: calc(1rem * var(--spacing-factor-xl) + 3.5rem); - margin-top: calc(-1rem * var(--spacing-factor-xl) - 3.5rem); + height: calc(4rem + 3.5rem - .5rem); + margin-top: calc(-4rem - 3.5rem + .5rem); } } @@ -119,11 +117,6 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no content: ''; } -form.grid > input:not([type=checkbox]):not([type=radio]), -form.grid > button { - margin-bottom: 0; -} - svg { height: 1rem; } @@ -133,11 +126,11 @@ svg { */ main > aside nav { width: 100%; - margin-bottom: var(--spacing-block); + margin-bottom: var(--block-spacing-vertical); } main > aside nav h1 { - margin-bottom: var(--spacing-typography); + margin-bottom: calc(var(--typography-spacing-vertical) / 2); } @media (min-width: 992px) { @@ -184,7 +177,7 @@ main > aside details { } main > aside details summary { - color: var(--h3); + color: var(--h3-color); font-size: 14px; font-weight: 300; text-transform: uppercase; @@ -195,7 +188,7 @@ main > aside details summary::after { } main > aside details[open] summary { - color: var(--h3); + color: var(--h3-color); } /** @@ -217,8 +210,8 @@ main > aside details[open] summary { #customization figure { grid-template-columns: repeat(18, 1fr); grid-template-rows: 1fr; - border-top-right-radius: var(--block-round); - border-top-left-radius: var(--block-round); + border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); } } @@ -260,10 +253,14 @@ main > aside details[open] summary { border-color: var(--primary); } +#grids { + --grid-spacing-vertical: 1rem; +} + #grids button { display: block; width: 100%; - margin-bottom: calc(var(--spacing-typography) / 2); + margin-bottom: var(--spacing); } @media (min-width: 576px) { @@ -283,13 +280,15 @@ main > aside details[open] summary { } #grids .grid > * { - padding: calc(var(--spacing-gutter) / 2) 0; - background: var(--code-background); + padding: calc(var(--spacing) / 2) 0; + background: var(--secondary); + color: var(--secondary-inverse); text-align: center; + opacity: .5; } #grids details { - margin-top: calc(var(--spacing-typography) * 2); + margin-top: calc(var(--typography-spacing-vertical) * 2); } #grids details svg { @@ -304,12 +303,12 @@ main > aside details[open] summary { * Docs: Typography */ section > hgroup { - margin-bottom: calc(var(--spacing-typography) * 2); + margin-bottom: calc(var(--typography-spacing-vertical) * 2); } a[role=button] { - margin-right: calc(var(--spacing-typography) / 4); - margin-bottom: var(--spacing-typography); + margin-right: calc(var(--typography-spacing-vertical) / 4); + margin-bottom: var(--typography-spacing-vertical); } [role=document] section > h1, @@ -321,28 +320,15 @@ a[role=button] { /** * Docs: Code */ -@media (min-width: 576px) { - pre { - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm)); - } -} - -@media (min-width: 768px) { - pre { - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md)); - } +code { + --font-weight: 400; } -@media (min-width: 992px) { - pre { - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg)); - } -} - -@media (min-width: 1200px) { - pre { - padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl)); - } +section > pre { + margin: var(--block-spacing-vertical) 0; + padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); + box-shadow: var(--card-box-shadow); } [data-theme="invalid"], @@ -367,8 +353,8 @@ a[role=button] { @media (min-width: 992px) { [data-theme="invalid"]:before, [data-theme="valid"]:before { - top: var(--spacing-gutter); - right: var(--spacing-gutter); + top: var(--spacing); + right: var(--spacing); } } @@ -378,12 +364,12 @@ a[role=button] { } [data-theme="invalid"]:before { - background: var(--invalid); + background: var(--invalid-color); content: 'Not so great'; } [data-theme="valid"]:before { - background: var(--valid); + background: var(--valid-color); content: 'Great'; } @@ -398,8 +384,8 @@ body > nav { right: 0; left: 0; backdrop-filter: saturate(180%) blur(20px); - background-color: var(--nav-background); - box-shadow: 0px 1px 0 var(--nav-border); + background-color: var(--nav-background-color); + box-shadow: 0px 1px 0 var(--nav-border-color); } body > nav a { @@ -413,10 +399,10 @@ body > nav svg { body > nav ul:first-of-type li:first-of-type a { width: 3.5rem; height: 3.5rem; - margin-left: calc(var(--spacing-gutter) * -1); + margin-left: calc(var(--spacing) * -1); padding: 0; - background: var(--h1); - color: var(--background); + background: var(--h1-color); + color: var(--nav-logo-color); } body > nav ul:first-of-type li:first-of-type a svg { @@ -425,8 +411,8 @@ body > nav ul:first-of-type li:first-of-type a svg { body > nav ul:first-of-type li:nth-of-type(2) { display: none; - margin-left: var(--spacing-gutter); - color: var(--h1); + margin-left: var(--spacing); + color: var(--h1-color); } @media (min-width: 992px) { @@ -440,13 +426,13 @@ body > nav ul:first-of-type li:nth-of-type(2) { */ .switcher { position: fixed; - right: calc(var(--spacing-gutter) / 2); - bottom: var(--spacing-gutter); + right: calc(var(--spacing) / 2); + bottom: var(--spacing); width: auto; margin-bottom: 0; padding: .75rem; border-radius: 2rem; - box-shadow: var(--card-shadow); + box-shadow: var(--card-box-shadow); line-height: 1; text-align: right; } @@ -484,16 +470,16 @@ body > nav ul:first-of-type li:nth-of-type(2) { .switcher:hover i { max-width: 100%; - padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); + padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4); transition: max-width var(--transition), padding var(--transition); } .switcher:focus { - box-shadow: var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus); } @media (min-width: 576px) { .switcher { - right: var(--spacing-gutter); + right: var(--spacing); } } diff --git a/docs/css/pico.docs.min.css b/docs/css/pico.docs.min.css index d7af34de9..cbffbd42c 100644 --- a/docs/css/pico.docs.min.css +++ b/docs/css/pico.docs.min.css @@ -1,3 +1,3 @@ /*! * Pico: Customs styles for Docs - */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--nav-background:rgba(255, 255, 255, 0.7);--nav-border:rgba(115, 130, 140, 0.2)}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}}[data-theme=dark]{--nav-background:rgba(16, 24, 30, 0.8);--nav-border:rgba(115, 130, 140, 0.2)}html{scroll-behavior:smooth}body>main{padding-top:calc(1rem * var(--spacing-factor-xs) + 3.5rem)}@media (min-width:576px){body>main{padding-top:calc(1rem * var(--spacing-factor-sm) + 3.5rem)}}@media (min-width:768px){body>main{padding-top:calc(1rem * var(--spacing-factor-md) + 3.5rem)}}@media (min-width:992px){body>main{grid-column-gap:calc(var(--spacing-gutter) * 4);display:grid;grid-template-columns:200px auto;padding-top:calc(1rem * var(--spacing-factor-lg) + 3.5rem)}}@media (min-width:1200px){body>main{padding-top:calc(1rem * var(--spacing-factor-xl) + 3.5rem)}}body>main>*{min-width:0}div[role=document]>section:before{display:block;height:calc(1rem * var(--spacing-factor-xs) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xs) - 3.5rem);content:''}@media (min-width:576px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-sm) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-sm) - 3.5rem)}}@media (min-width:768px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-md) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-md) - 3.5rem)}}@media (min-width:992px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-lg) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-lg) - 3.5rem)}}@media (min-width:1200px){div[role=document]>section:before{height:calc(1rem * var(--spacing-factor-xl) + 3.5rem);margin-top:calc(-1rem * var(--spacing-factor-xl) - 3.5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}form.grid>button,form.grid>input:not([type=checkbox]):not([type=radio]){margin-bottom:0}svg{height:1rem}main>aside nav{width:100%;margin-bottom:var(--spacing-block)}main>aside nav h1{margin-bottom:var(--spacing-typography)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--block-round);border-top-left-radius:var(--block-round)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids button{display:block;width:100%;margin-bottom:calc(var(--spacing-typography) / 2)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing-gutter) / 2) 0;background:var(--code-background);text-align:center}#grids details{margin-top:calc(var(--spacing-typography) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--spacing-typography) * 2)}a[role=button]{margin-right:calc(var(--spacing-typography) / 4);margin-bottom:var(--spacing-typography)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}@media (min-width:576px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm))}}@media (min-width:768px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md))}}@media (min-width:992px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg))}}@media (min-width:1200px){pre{padding:var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl))}}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing-gutter);right:var(--spacing-gutter)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid);content:'Not so great'}[data-theme=valid]:before{background:var(--valid);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background);box-shadow:0px 1px 0 var(--nav-border)}body>nav a{border-radius:0}body>nav svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing-gutter) * -1);padding:0;background:var(--h1);color:var(--background)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing-gutter);color:var(--h1)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing-gutter) / 2);bottom:var(--spacing-gutter);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-shadow);line-height:1;text-align:right}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing-gutter)}} \ No newline at end of file + */:root{--icon-external:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");--icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");--icon-check-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")}:root:not([data-theme=dark]),[data-theme=light]{--invalid-color:#C62828;--valid-color:#388E3C;--nav-background-color:rgba(255, 255, 255, 0.7);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#FFF}@media only screen and (prefers-color-scheme:dark){:root:not([data-theme=light]){--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background-color:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}}[data-theme=dark]{--invalid-color:rgba(183, 28, 28, 0.5);--valid-color:rgba(46, 125, 50, 0.5);--nav-background:rgba(16, 24, 30, 0.8);--nav-border-color:rgba(115, 130, 140, 0.2);--nav-logo-color:#0d1419}html{scroll-behavior:smooth}body>main{padding-top:calc(var(--block-spacing-vertical) + 3.5rem)}@media (min-width:992px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 1.75);grid-column-gap:calc(var(--block-spacing-horizontal) * 4);display:grid;grid-template-columns:200px auto}}@media (min-width:1200px){body>main{--block-spacing-horizontal:calc(var(--spacing) * 2)}}body>main>aside,body>main div[role=document]{min-width:0}div[role=document]>section:before{display:block;height:calc(2rem + 3.5rem - .5rem);margin-top:calc(-2rem - 3.5rem + .5rem);content:''}@media (min-width:576px){div[role=document]>section:before{height:calc(2.5rem + 3.5rem - .5rem);height:calc(-2.5rem - 3.5rem + .5rem)}}@media (min-width:768px){div[role=document]>section:before{height:calc(3rem + 3.5rem - .5rem);margin-top:calc(-3rem - 3.5rem + .5rem)}}@media (min-width:992px){div[role=document]>section:before{height:calc(3.5rem + 3.5rem - .5rem);margin-top:calc(-3.5rem - 3.5rem + .5rem)}}@media (min-width:1200px){div[role=document]>section:before{height:calc(4rem + 3.5rem - .5rem);margin-top:calc(-4rem - 3.5rem + .5rem)}}div[role=document] section a[href*="//"]:not([href*="https://picocss.com"]):not([role]):after{display:inline-block;width:1rem;height:1rem;background-image:var(--icon-external);background-position:top center;background-repeat:no-repeat;background-size:.66rem auto;content:''}svg{height:1rem}main>aside nav{width:100%;margin-bottom:var(--block-spacing-vertical)}main>aside nav h1{margin-bottom:calc(var(--typography-spacing-vertical) / 2)}@media (min-width:992px){main>aside nav{position:fixed;width:200px;max-height:calc(100vh - 5.5rem);margin-bottom:0;overflow-x:hidden;overflow-y:auto}main>aside nav h1{display:none}}main>aside li,main>aside summary{padding-top:0;padding-bottom:0;font-size:16px}main>aside li a{padding:0.375rem 0.5rem}main>aside li a svg{vertical-align:middle}main>aside a.secondary:focus{background-color:transparent;color:var(--primary-hover)}main>aside a.active,main>aside a.active:hover{color:var(--primary)}main>aside details{padding-bottom:.25rem;border-bottom:none}main>aside details summary{color:var(--h3-color);font-size:14px;font-weight:300;text-transform:uppercase}main>aside details summary:after{display:none}main>aside details[open] summary{color:var(--h3-color)}#themes button i{font-style:normal}#customization figure{display:grid;grid-template-columns:repeat(9, 1fr);grid-template-rows:repeat(2, 1fr);margin-bottom:0;overflow:hidden}@media (min-width:576px){#customization figure{grid-template-columns:repeat(18, 1fr);grid-template-rows:1fr;border-top-right-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}}#customization figure~article{margin-top:0;border-top-right-radius:0;border-top-left-radius:0}#customization figure button{margin-bottom:0;padding:0;padding-top:100%;border:none;border-radius:0}#customization figure button:focus{box-shadow:none}#customization figure button.picked{background-image:var(--icon-check);background-position:center;background-repeat:no-repeat;background-size:.66rem auto;box-shadow:inset 0 0 1rem 0 rgba(0, 0, 0, 0.25)}#customization figure button[data-color=amber].picked,#customization figure button[data-color=lime].picked,#customization figure button[data-color=yellow].picked{background-image:var(--icon-check-dark)}#customization h4{transition:color var(--transition)}#customization pre[data-theme=generated]{border-color:var(--primary)}#grids{--grid-spacing-vertical:1rem}#grids button{display:block;width:100%;margin-bottom:var(--spacing)}@media (min-width:576px){#grids button{display:inline-block;width:auto;margin-right:.5rem}}#grids button svg{stroke:var(--secondary);margin-right:.5rem;border:2px solid currentColor;border-radius:1rem;background:currentColor}#grids .grid>*{padding:calc(var(--spacing) / 2) 0;background:var(--secondary);color:var(--secondary-inverse);text-align:center;opacity:.5}#grids details{margin-top:calc(var(--typography-spacing-vertical) * 2)}#grids details svg{vertical-align:bottom}#forms div.grid{grid-row-gap:0}section>hgroup{margin-bottom:calc(var(--typography-spacing-vertical) * 2)}a[role=button]{margin-right:calc(var(--typography-spacing-vertical) / 4);margin-bottom:var(--typography-spacing-vertical)}[role=document] section>h1,[role=document] section>h2,[role=document] section>h3{line-height:1}code{--font-weight:400}section>pre{margin:var(--block-spacing-vertical) 0;padding:calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);background-color:var(--card-sectionning-background-color);box-shadow:var(--card-box-shadow)}[data-theme=invalid],[data-theme=valid]{position:relative;margin-bottom:0!important}[data-theme=invalid]:before,[data-theme=valid]:before{display:block;position:absolute;top:0;right:0;padding:.375rem .75rem;border-radius:0;color:var(--primary-inverse);font-size:14px;line-height:1}@media (min-width:992px){[data-theme=invalid]:before,[data-theme=valid]:before{top:var(--spacing);right:var(--spacing)}}[data-theme=invalid] code,[data-theme=valid] code{padding:1rem 0}[data-theme=invalid]:before{background:var(--invalid-color);content:'Not so great'}[data-theme=valid]:before{background:var(--valid-color);content:'Great'}body>nav{-webkit-backdrop-filter:saturate(180%) blur(20px);z-index:99;position:fixed;top:0;right:0;left:0;backdrop-filter:saturate(180%) blur(20px);background-color:var(--nav-background-color);box-shadow:0px 1px 0 var(--nav-border-color)}body>nav a{border-radius:0}body>nav svg{vertical-align:text-bottom}body>nav ul:first-of-type li:first-of-type a{width:3.5rem;height:3.5rem;margin-left:calc(var(--spacing) * -1);padding:0;background:var(--h1-color);color:var(--nav-logo-color)}body>nav ul:first-of-type li:first-of-type a svg{height:3.5rem}body>nav ul:first-of-type li:nth-of-type(2){display:none;margin-left:var(--spacing);color:var(--h1-color)}@media (min-width:992px){body>nav ul:first-of-type li:nth-of-type(2){display:inline}}.switcher{position:fixed;right:calc(var(--spacing) / 2);bottom:var(--spacing);width:auto;margin-bottom:0;padding:.75rem;border-radius:2rem;box-shadow:var(--card-box-shadow);line-height:1;text-align:right}.switcher:after{display:inline-block;width:1rem;height:1rem;border:0.15rem solid currentColor;border-radius:50%;background:linear-gradient(to right, currentColor 0%, currentColor 50%, transparent 50%);vertical-align:bottom;content:'';transition:transform var(--transition)}.switcher i{display:inline-block;max-width:0;padding:0;overflow:hidden;font-size:.875rem;font-style:normal;white-space:nowrap}.switcher:focus,.switcher:hover{max-width:100%;transition:background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition)}.switcher:hover:after{transform:rotate(180deg)}.switcher:hover i{max-width:100%;padding:0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4);transition:max-width var(--transition), padding var(--transition)}.switcher:focus{box-shadow:var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus)}@media (min-width:576px){.switcher{right:var(--spacing)}} \ No newline at end of file diff --git a/docs/css/themes/docs.css b/docs/css/themes/docs.css new file mode 100644 index 000000000..72fd0945c --- /dev/null +++ b/docs/css/themes/docs.css @@ -0,0 +1,35 @@ +/** + * Theme: Additions for docs + */ +:root { + --icon-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E"); + --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-check-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(0, 0, 0, 0.75)' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); +} + +[data-theme="light"], +:root:not([data-theme="dark"]) { + --invalid-color: #C62828; + --valid-color: #388E3C; + --nav-background-color: rgba(255, 255, 255, 0.7); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #FFF; +} + +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background-color: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; + } +} + +[data-theme="dark"] { + --invalid-color: rgba(183, 28, 28, 0.5); + --valid-color: rgba(46, 125, 50, 0.5); + --nav-background: rgba(16, 24, 30, 0.8); + --nav-border-color: rgba(115, 130, 140, 0.2); + --nav-logo-color: #0d1419; +} diff --git a/docs/index.html b/docs/index.html index 26a29c8e2..b8f23806e 100644 --- a/docs/index.html +++ b/docs/index.html @@ -191,36 +191,17 @@

Custom theme

-
-

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

-

Importing SASS

-

It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.

-

Compile the SASS file to CSS to get a custom version of Pico.

-
/* Custom  version */
-
-// Override default variables
-$primary-500: ...;
-$primary-600: ...;
-$primary-700: ...;
-
-// Import full Pico source code
-@import "path/pico";
- -

Alternatively, you can create a custom theme and import it in your project with the components you need.

- -
/* Custom  version */
+
// Simplified example
+:root {
+  --primary: ...;
+}
+

 
-// Custom theme
-@import "path/themes/custom";
+
-// Import needed components -@import "path/layout/document"; -@import "path/layout/sectioning"; -... - -

This allows to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

+

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

Overriding CSS variables

All Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of Pico.

@@ -228,43 +209,70 @@

Overriding CSS variables

/* Can be forced with data-theme="light" */ [data-theme="light"], :root:not([data-theme="dark"]) { - --primary: ...; - --primary-hover: ...; - --primary-focus: ...; - --primary-inverse: ...; + --primary: ...; + --primary-hover: ...; + --primary-focus: ...; + --primary-inverse: ...; } /* Dark scheme (Auto) */ /* Automatically enabled if user has Dark mode enabled */ @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { - --primary: ...; - --primary-hover: ...; - --primary-focus: ...; - --primary-inverse: ...; + --primary: ...; + --primary-hover: ...; + --primary-focus: ...; + --primary-inverse: ...; } } /* Dark scheme (Forced) */ /* Enabled if forced with data-theme="dark" */ [data-theme="dark"] { - --primary: ...; - --primary-hover: ...; - --primary-focus: ...; - --primary-inverse: ...; + --primary: ...; + --primary-hover: ...; + --primary-focus: ...; + --primary-inverse: ...; } /* (Common styles) */ :root { - --primary-border: var(--primary); - --primary-hover-border: var(--primary-hover); - --input-hover-border: var(--primary); - --input-focus: var(--primary-focus); - --input-inverse: var(--primary-inverse); + --form-element-active-border-color: var(--primary); + --form-element-focus:: var(--primary-focus); + --switch-color: var(--primary-inverse); + --switch-checked-background-color:: var(--primary); } -

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

+

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

+

Importing Pico SASS library

+

It is recommended to customize Pico by importing SASS source files in your project. This way you can keep Pico up to date without conflicts since Pico code and your custom code are separated.

+

Compile the SASS file to CSS to get a custom version of Pico.

+ +
/* Custom  version */
+
+// Override default variables
+$primary-500: ...;
+$primary-600: ...;
+$primary-700: ...;
+
+// Import full Pico source code
+@import "path/pico";
+ +

Alternatively, you can create a custom theme and import it in your project with the components you need.

+ +
/* Custom  version */
+
+// Custom theme
+@import "path/themes/custom";
+
+// Import needed components
+@import "path/layout/document";
+@import "path/layout/sectioning";
+...
+
+ +

This allows to create a lighter version with only the components that are useful to you. Example here: scss/pico.slim.scss.

@@ -313,19 +321,19 @@

Breakpoint - <576px - ≥576px - ≥768px - ≥992px - ≥1200px + <576px + ≥576px + ≥768px + ≥992px + ≥1200px Viewport None (auto) - 540px - 720px - 960px - 1140px + 540px + 720px + 960px + 1140px @@ -469,59 +477,59 @@

All typographic elements are responsives, allowing text to scale gracefully Base font - 16px - 17px - 18px - 19px - 20px + 16px + 17px + 18px + 19px + 20px h1 - 32px - 34px - 36px - 38px - 40px + 32px + 34px + 36px + 38px + 40px h2 - 28px - 29px - 31.5px - 33.25px - 35px + 28px + 29px + 31.5px + 33.25px + 35px h3 - 24px - 25.5px - 27px - 28.5px - 30px + 24px + 25.5px + 27px + 28.5px + 30px h4 - 20px - 21.25px - 22.5px - 23.75px - 25px + 20px + 21.25px + 22.5px + 23.75px + 25px h5 - 18px - 19.125px - 20.25px - 21.375px - 22.5px + 18px + 19.125px + 20.25px + 21.375px + 22.5px h6 - 16px - 17px - 18px - 19px - 20px + 16px + 17px + 18px + 19px + 20px @@ -543,7 +551,7 @@

Heading 6
<h6>Heading 6</h6>
-

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

+

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

Heading 2

diff --git a/docs/js/pico.docs.js b/docs/js/pico.docs.js index 99ea511fc..8e7d610da 100644 --- a/docs/js/pico.docs.js +++ b/docs/js/pico.docs.js @@ -2,7 +2,7 @@ * Add some magic to Pico docs * * Pico.css - https://picocss.com - * Copyright 2019 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ // @append src/aside.js diff --git a/docs/js/pico.docs.min.js b/docs/js/pico.docs.min.js index bfa9d77ae..5d3b6dcf7 100644 --- a/docs/js/pico.docs.min.js +++ b/docs/js/pico.docs.min.js @@ -1 +1 @@ -!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));n.currentTheme=e}var n={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(n.button.element);e.className=n.button.class,document.querySelector(n.target).appendChild(e),a(n.currentTheme);for(var t=document.querySelectorAll(n.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(n.targetGrid).innerHTML=t,document.querySelector(n.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,n={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(n.targetButtons).before(t),document.querySelector(n.selectorAdd).addEventListener("click",function(){n.columnsCurrentn.columnsMin&&(n.columnsCurrent--,e(n.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){var a={".name":e.charAt(0).toUpperCase()+e.substring(1)+" ",".c500":t[500],".c600":t[600],".c700":t[700],".c600-outline-light":n(t[600],.125),".c600-outline-dark":n(t[600],.25),".inverse":t.inverse};Object.keys(a).forEach(function(e){for(var t=document.querySelectorAll(i.selectorTheme+" "+e),r=0;r>16&255,r>>8&255,255&r].join(", ")+", "+t+")";throw new Error("Bad Hex")}var i={target:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',i.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(i.target).before(a);for(var n=document.querySelectorAll(i.selectorButton),f=0;f section',nav:"main aside nav",active:"active"};window.matchMedia("(min-width: 992px)").matches&&(e(),t=function(){e()},window.addEventListener("scroll",function(e){window.clearTimeout(r),r=setTimeout(function(){t()},n.interval)},!1))}(); \ No newline at end of file +!function(){if(window.matchMedia("(min-width: 992px)").matches){var e=document.querySelector("aside nav"),t=document.querySelectorAll("aside details");if(e.clientHeight]*>?/gm,""));o.currentTheme=e}var o={button:{element:"BUTTON",class:"contrast switcher theme-switcher",on:"Turn on dark mode",off:"Turn off dark mode"},target:"body",selector:"button.theme-switcher",currentTheme:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"};!function(){var e=document.createElement(o.button.element);e.className=o.button.class,document.querySelector(o.target).appendChild(e),a(o.currentTheme);for(var t=document.querySelectorAll(o.selector),r=0;r"+(a+1)+"",r+=" <div>"+(a+1)+"</div>\n";document.querySelector(o.targetGrid).innerHTML=t,document.querySelector(o.targetCode).innerHTML='<div class="grid">\n'+r+"</div>"}var t,o={columnsCurrent:4,columnsMin:1,columnsMax:12,targetButtons:"#grids article",targetGrid:"#grids .grid",targetCode:"#grids pre code",selectorAdd:"#grids button.add",selectorRemove:"#grids button.remove"};(t=document.createElement("P")).innerHTML='',document.querySelector(o.targetButtons).before(t),document.querySelector(o.selectorAdd).addEventListener("click",function(){o.columnsCurrento.columnsMin&&(o.columnsCurrent--,e(o.columnsCurrent))},!1)}(),function(){function c(e,t){!function(e,t){var a={".name":e.charAt(0).toUpperCase()+e.substring(1)+" ",".c500":t[500],".c600":t[600],".c700":t[700],".c600-outline-light":o(t[600],.125),".c600-outline-dark":o(t[600],.25),".inverse":t.inverse};Object.keys(a).forEach(function(e){for(var t=document.querySelectorAll(i.selectorTheme+" "+e),r=0;r>16&255,r>>8&255,255&r].join(", ")+", "+t+")";throw new Error("Bad Hex")}var i={target:'#customization article[data-theme="generated"]',selectorButton:"#customization button[data-color]",selectorTheme:"#customization",styles:"",system:{red:{50:"#ffebee",100:"#ffcdd2",200:"#ef9a9a",300:"#e57373",400:"#ef5350",500:"#f44336",600:"#e53935",700:"#d32f2f",800:"#c62828",900:"#b71c1c",a100:"#ff8a80",a200:"#ff5252",a400:"#ff1744",a700:"#d50000",inverse:"#FFF"},pink:{50:"#fce4ec",100:"#f8bbd0",200:"#f48fb1",300:"#f06292",400:"#ec407a",500:"#e91e63",600:"#d81b60",700:"#c2185b",800:"#ad1457",900:"#880e4f",a100:"#ff80ab",a200:"#ff4081",a400:"#f50057",a700:"#c51162",inverse:"#FFF"},purple:{50:"#f3e5f5",100:"#e1bee7",200:"#ce93d8",300:"#ba68c8",400:"#ab47bc",500:"#9c27b0",600:"#8e24aa",700:"#7b1fa2",800:"#6a1b9a",900:"#4a148c",a100:"#ea80fc",a200:"#e040fb",a400:"#d500f9",a700:"#aa00ff",inverse:"#FFF"},"deep-purple":{50:"#ede7f6",100:"#d1c4e9",200:"#b39ddb",300:"#9575cd",400:"#7e57c2",500:"#673ab7",600:"#5e35b1",700:"#512da8",800:"#4527a0",900:"#311b92",a100:"#b388ff",a200:"#7c4dff",a400:"#651fff",a700:"#6200ea",inverse:"#FFF"},indigo:{50:"#e8eaf6",100:"#c5cae9",200:"#9fa8da",300:"#7986cb",400:"#5c6bc0",500:"#3f51b5",600:"#3949ab",700:"#303f9f",800:"#283593",900:"#1a237e",a100:"#8c9eff",a200:"#536dfe",a400:"#3d5afe",a700:"#304ffe",inverse:"#FFF"},blue:{50:"#e3f2fd",100:"#bbdefb",200:"#90caf9",300:"#64b5f6",400:"#42a5f5",500:"#2196f3",600:"#1e88e5",700:"#1976d2",800:"#1565c0",900:"#0d47a1",a100:"#82b1ff",a200:"#448aff",a400:"#2979ff",a700:"#2962ff",inverse:"#FFF"},"light-blue":{50:"#e1f5fe",100:"#b3e5fc",200:"#81d4fa",300:"#4fc3f7",400:"#29b6f6",500:"#03a9f4",600:"#039be5",700:"#0288d1",800:"#0277bd",900:"#01579b",a100:"#80d8ff",a200:"#40c4ff",a400:"#00b0ff",a700:"#0091ea",inverse:"#FFF"},cyan:{50:"#e0f7fa",100:"#b2ebf2",200:"#80deea",300:"#4dd0e1",400:"#26c6da",500:"#00bcd4",600:"#00acc1",700:"#0097a7",800:"#00838f",900:"#006064",a100:"#84ffff",a200:"#18ffff",a400:"#00e5ff",a700:"#00b8d4",inverse:"#FFF"},teal:{50:"#e0f2f1",100:"#b2dfdb",200:"#80cbc4",300:"#4db6ac",400:"#26a69a",500:"#009688",600:"#00897b",700:"#00796b",800:"#00695c",900:"#004d40",a100:"#a7ffeb",a200:"#64ffda",a400:"#1de9b6",a700:"#00bfa5",inverse:"#FFF"},green:{50:"#e8f5e9",100:"#c8e6c9",200:"#a5d6a7",300:"#81c784",400:"#66bb6a",500:"#4caf50",600:"#43a047",700:"#388e3c",800:"#2e7d32",900:"#1b5e20",a100:"#b9f6ca",a200:"#69f0ae",a400:"#00e676",a700:"#00c853",inverse:"#FFF"},"light-green":{50:"#f1f8e9",100:"#dcedc8",200:"#c5e1a5",300:"#aed581",400:"#9ccc65",500:"#8bc34a",600:"#7cb342",700:"#689f38",800:"#558b2f",900:"#33691e",a100:"#ccff90",a200:"#b2ff59",a400:"#76ff03",a700:"#64dd17",inverse:"#FFF"},lime:{50:"#f9fbe7",100:"#f0f4c3",200:"#e6ee9c",300:"#dce775",400:"#d4e157",500:"#cddc39",600:"#c0ca33",700:"#afb42b",800:"#9e9d24",900:"#827717",a100:"#f4ff81",a200:"#eeff41",a400:"#c6ff00",a700:"#aeea00",inverse:"rgba(0, 0, 0, 0.75)"},yellow:{50:"#fffde7",100:"#fff9c4",200:"#fff59d",300:"#fff176",400:"#ffee58",500:"#ffeb3b",600:"#fdd835",700:"#fbc02d",800:"#f9a825",900:"#f57f17",a100:"#ffff8d",a200:"#ffff00",a400:"#ffea00",a700:"#ffd600",inverse:"rgba(0, 0, 0, 0.75)"},amber:{50:"#fff8e1",100:"#ffecb3",200:"#ffe082",300:"#ffd54f",400:"#ffca28",500:"#ffc107",600:"#ffb300",700:"#ffa000",800:"#ff8f00",900:"#ff6f00",a100:"#ffe57f",a200:"#ffd740",a400:"#ffc400",a700:"#ffab00",inverse:"rgba(0, 0, 0, 0.75)"},orange:{50:"#fff3e0",100:"#ffe0b2",200:"#ffcc80",300:"#ffb74d",400:"#ffa726",500:"#ff9800",600:"#fb8c00",700:"#f57c00",800:"#ef6c00",900:"#e65100",a100:"#ffd180",a200:"#ffab40",a400:"#ff9100",a700:"#ff6d00",inverse:"#FFF"},"deep-orange":{50:"#fbe9e7",100:"#ffccbc",200:"#ffab91",300:"#ff8a65",400:"#ff7043",500:"#ff5722",600:"#f4511e",700:"#e64a19",800:"#d84315",900:"#bf360c",a100:"#ff9e80",a200:"#ff6e40",a400:"#ff3d00",a700:"#dd2c00",inverse:"#FFF"},grey:{50:"#fafafa",100:"#f5f5f5",200:"#eeeeee",300:"#e0e0e0",400:"#bdbdbd",500:"#9e9e9e",600:"#757575",700:"#616161",800:"#424242",900:"#212121",inverse:"#FFF"},"blue-grey":{50:"#eceff1",100:"#cfd8dc",200:"#b0bec5",300:"#90a4ae",400:"#78909c",500:"#607d8b",600:"#546e7a",700:"#455a64",800:"#37474f",900:"#263238",inverse:"#FFF"}}};!function(t){var e="";for(var r in t)t.hasOwnProperty(r)&&(e+='',i.styles+='button[data-color="'+r+'"] {background-color: '+t[r][600]+'; }[data-theme="light"] button[data-color="'+r+'"]:hover, [data-theme="light"] button[data-color="'+r+'"]:active, [data-theme="light"] button[data-color="'+r+'"]:focus {background-color: '+t[r][700]+'; }[data-theme="dark"] button[data-color="'+r+'"]:hover, [data-theme="dark"] button[data-color="'+r+'"]:active, [data-theme="dark"] button[data-color="'+r+'"]:focus {background-color: '+t[r][500]+"; }");var a=document.createElement("FIGURE");a.innerHTML=e,document.querySelector(i.target).before(a);for(var o=document.querySelectorAll(i.selectorButton),n=0;n section',nav:"main aside nav",active:"active"};window.matchMedia("(min-width: 992px)").matches&&(e(),t=function(){e()},window.addEventListener("scroll",function(e){window.clearTimeout(r),r=setTimeout(function(){t()},o.interval)},!1))}(); \ No newline at end of file diff --git a/docs/js/src/aside.js b/docs/js/src/aside.js index 4d367f20d..e752ea343 100644 --- a/docs/js/src/aside.js +++ b/docs/js/src/aside.js @@ -2,7 +2,7 @@ * Aside adjustment * * Pico.css - https://picocss.com - * Copyright 2019 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ (function() { diff --git a/docs/js/src/color-picker.js b/docs/js/src/color-picker.js index 6489e9869..acda458b8 100644 --- a/docs/js/src/color-picker.js +++ b/docs/js/src/color-picker.js @@ -2,7 +2,7 @@ * Color Picker * * Pico.css - https://picocss.com - * Copyright 2019 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ (function() { @@ -291,19 +291,6 @@ "a700": "#dd2c00", "inverse": "#FFF" }, - /*"brown": { - "50": "#efebe9", - "100": "#d7ccc8", - "200": "#bcaaa4", - "300": "#a1887f", - "400": "#8d6e63", - "500": "#795548", - "600": "#6d4c41", - "700": "#5d4037", - "800": "#4e342e", - "900": "#3e2723", - "inverse": "#FFF" - },*/ "grey": { "50": "#fafafa", "100": "#f5f5f5", @@ -458,7 +445,7 @@ // Update CSS Style var generatedStyles = '[data-theme="generated"] {' - + '--h4:' + data[700] + ';' + + '--h4-color:' + data[700] + ';' + '--primary:' + data[600] + ';' + '--primary-hover:' + data[700] + ';' + '--primary-focus:' + hexToRgbA(data[600], .125) + ';' @@ -467,7 +454,7 @@ + '@media only screen and (prefers-color-scheme: dark) {' + ':root:not([data-theme="light"]) [data-theme="generated"] {' - + '--h4:' + data[400] + ';' + + '--h4-color:' + data[400] + ';' + '--primary:' + data[600] + ';' + '--primary-hover:' + data[500] + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';' @@ -476,7 +463,7 @@ + '}' + '[data-theme="dark"] [data-theme="generated"] {' - + '--h4:' + data[500] + ';' + + '--h4-color:' + data[500] + ';' + '--primary:' + data[600] + ';' + '--primary-hover:' + data[500] + ';' + '--primary-focus:' + hexToRgbA(data[600], .25) + ';' @@ -484,11 +471,10 @@ + '}' + '[data-theme="generated"] {' - + '--primary-border: var(--primary);' - + '--primary-hover-border: var(--primary-hover);' - + '--input-hover-border: var(--primary);' - + '--input-focus: var(--primary-focus);' - + '--input-inverse: var(--primary-inverse);' + + '--form-element-active-border-color: var(--primary);' + + '--form-element-focus: var(--primary-focus);' + + '--switch-color: var(--primary-inverse);' + + '--switch-checked-background-color: var(--primary);' + '}'; // Insert CSS Styles diff --git a/docs/js/src/grid.js b/docs/js/src/grid.js index 66d376850..9ace7fdf3 100644 --- a/docs/js/src/grid.js +++ b/docs/js/src/grid.js @@ -2,7 +2,7 @@ * Grid Interaction * * Pico.css - https://picocss.com - * Copyright 2019 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ (function() { diff --git a/docs/js/src/scrollspy.js b/docs/js/src/scrollspy.js index 7a0edfcca..3ba6e3ef9 100644 --- a/docs/js/src/scrollspy.js +++ b/docs/js/src/scrollspy.js @@ -5,7 +5,7 @@ * Require `most-visible.js` from https://github.com/andyexeter/most-visible * * Pico.css - https://picocss.com - * Copyright 2019 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ (function() { diff --git a/docs/js/src/theme-switcher.js b/docs/js/src/theme-switcher.js index 3e7e3a5cd..a8a750745 100644 --- a/docs/js/src/theme-switcher.js +++ b/docs/js/src/theme-switcher.js @@ -2,7 +2,7 @@ * Theme Switcher * * Pico.css - https://picocss.com - * Copyright 2019 - Licensed under MIT + * Copyright 2019-2021 - Licensed under MIT */ (function() { diff --git a/docs/scss/components/_nav.scss b/docs/scss/components/_nav.scss index 3fdc9b4e1..90d424d26 100644 --- a/docs/scss/components/_nav.scss +++ b/docs/scss/components/_nav.scss @@ -10,8 +10,8 @@ body > nav { right: 0; left: 0; backdrop-filter: saturate(180%) blur(20px); - background-color: var(--nav-background); - box-shadow: 0px 1px 0 var(--nav-border); + background-color: var(--nav-background-color); + box-shadow: 0px 1px 0 var(--nav-border-color); a { border-radius: 0; @@ -29,10 +29,10 @@ body > nav { a { width: 3.5rem; height: 3.5rem; - margin-left: calc(var(--spacing-gutter) * -1); + margin-left: calc(var(--spacing) * -1); padding: 0; - background: var(--h1); - color: var(--background); + background: var(--h1-color); + color: var(--nav-logo-color); svg { height: 3.5rem; @@ -43,8 +43,8 @@ body > nav { // Title &:nth-of-type(2) { display: none; - margin-left: var(--spacing-gutter); - color: var(--h1); + margin-left: var(--spacing); + color: var(--h1-color); @media (min-width: map-get($breakpoints, "lg")) { display: inline; diff --git a/docs/scss/components/_theme-switcher.scss b/docs/scss/components/_theme-switcher.scss index d5d4dff23..4924ed6e1 100644 --- a/docs/scss/components/_theme-switcher.scss +++ b/docs/scss/components/_theme-switcher.scss @@ -4,13 +4,13 @@ .switcher { position: fixed; - right: calc(var(--spacing-gutter) / 2); - bottom: var(--spacing-gutter); + right: calc(var(--spacing) / 2); + bottom: var(--spacing); width: auto; margin-bottom: 0; padding: .75rem; border-radius: 2rem; - box-shadow: var(--card-shadow); + box-shadow: var(--card-box-shadow); line-height: 1; text-align: right; @@ -53,18 +53,17 @@ i { max-width: 100%; - padding: 0 calc(var(--spacing-gutter) / 2) 0 calc(var(--spacing-gutter) / 4); + padding: 0 calc(var(--spacing) / 2) 0 calc(var(--spacing) / 4); transition: max-width var(--transition), padding var(--transition); } } &:focus { - box-shadow: var(--card-shadow), - 0 0 0 0.2rem var(--secondary-focus); + box-shadow: var(--card-box-shadow), 0 0 0 0.2rem var(--secondary-focus); } @media (min-width: map-get($breakpoints, "sm")) { - right: var(--spacing-gutter); + right: var(--spacing); } } diff --git a/docs/scss/content/_code.scss b/docs/scss/content/_code.scss index d818b6d7e..a8220419d 100644 --- a/docs/scss/content/_code.scss +++ b/docs/scss/content/_code.scss @@ -2,40 +2,16 @@ * Docs: Code */ -// Custom spacings for 
 (vertically aligned with 
 content)
-pre {
-
-  @if map-get($breakpoints, "sm") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "sm")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-sm));
-    }
-  }
-
-  @if map-get($breakpoints, "md") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "md")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-md));
-    }
-  }
-
-  @if map-get($breakpoints, "lg") and
-    $enable-responsive-spacings {
-
-    @media (min-width: map-get($breakpoints, "lg")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-lg));
-    }
-  }
-
-  @if map-get($breakpoints, "xl") and
-    $enable-responsive-spacings {
+code {
+  --font-weight: 400;
+}
 
-    @media (min-width: map-get($breakpoints, "xl")) {
-      padding: var(--spacing-block) calc(var(--spacing-block) * var(--spacing-factor-xl));
-    }
-  }
+// Custom spacings for 
 (Horizontally aligned with 
 content)
+section > pre {
+  margin: var(--block-spacing-vertical) 0;
+  padding: calc(var(--block-spacing-vertical) / 1.5) var(--block-spacing-horizontal);
+  background-color: var(  --card-sectionning-background-color);
+  box-shadow: var(--card-box-shadow);
 }
 
 // Badge for Valid & Invalid code
@@ -57,8 +33,8 @@ pre {
     line-height: 1;
 
     @media (min-width: map-get($breakpoints, "lg")) {
-      top: var(--spacing-gutter);
-      right: var(--spacing-gutter);
+      top: var(--spacing);
+      right: var(--spacing);
     }
   }
 
@@ -71,14 +47,14 @@ pre {
 // Color for Valid & Invalid code
 [data-theme="invalid"] {
   &:before {
-    background: var(--invalid);
+    background: var(--invalid-color);
     content: 'Not so great';
   }
 }
 
 [data-theme="valid"] {
   &:before {
-    background: var(--valid);
+    background: var(--valid-color);
     content: 'Great';
   }
 }
diff --git a/docs/scss/content/_typography.scss b/docs/scss/content/_typography.scss
index 98c9ff8d7..54fa21c50 100644
--- a/docs/scss/content/_typography.scss
+++ b/docs/scss/content/_typography.scss
@@ -3,12 +3,12 @@
  */
 
 section > hgroup {
-  margin-bottom: calc(var(--spacing-typography) * 2);
+  margin-bottom: calc(var(--typography-spacing-vertical) * 2);
 }
 
 a[role=button] {
-  margin-right: calc(var(--spacing-typography) / 4);
-  margin-bottom: var(--spacing-typography);
+  margin-right: calc(var(--typography-spacing-vertical) / 4);
+  margin-bottom: var(--typography-spacing-vertical);
 }
 
 [role=document] {
diff --git a/docs/scss/layout/_aside.scss b/docs/scss/layout/_aside.scss
index d8ad9bd18..1c925c305 100644
--- a/docs/scss/layout/_aside.scss
+++ b/docs/scss/layout/_aside.scss
@@ -6,10 +6,10 @@ main > aside {
 
   nav {
     width: 100%;
-    margin-bottom: var(--spacing-block);
+    margin-bottom: var(--block-spacing-vertical);
 
     h1 {
-      margin-bottom: var(--spacing-typography);
+      margin-bottom: calc(var(--typography-spacing-vertical) / 2);
     }
 
     @media (min-width: map-get($breakpoints, "lg")) {
@@ -55,7 +55,7 @@ main > aside {
     border-bottom: none;
 
     summary {
-      color: var(--h3);
+      color: var(--h3-color);
       font-size: 14px;
       font-weight: 300;
       text-transform: uppercase;
@@ -66,7 +66,7 @@ main > aside {
     }
 
     &[open] summary {
-      color: var(--h3);
+      color: var(--h3-color);
     }
   }
 }
diff --git a/docs/scss/layout/_documentation.scss b/docs/scss/layout/_documentation.scss
index 265b8d147..025dc1387 100644
--- a/docs/scss/layout/_documentation.scss
+++ b/docs/scss/layout/_documentation.scss
@@ -3,8 +3,6 @@
  */
 
 // Docs: Themes
-// ––––––––––––––––––––
-
 #themes {
   button i {
     font-style: normal;
@@ -12,8 +10,6 @@
 }
 
 // Docs: Customization
-// ––––––––––––––––––––
-
 #customization {
 
   figure {
@@ -26,8 +22,8 @@
     @media (min-width: map-get($breakpoints, "sm")) {
       grid-template-columns: repeat(18, 1fr);
       grid-template-rows: 1fr;
-      border-top-right-radius: var(--block-round);
-      border-top-left-radius: var(--block-round);
+      border-top-right-radius: var(--border-radius);
+      border-top-left-radius: var(--border-radius);
     }
 
     ~ article {
@@ -75,14 +71,14 @@
 
 
 // Docs: Grids
-// ––––––––––––––––––––
-
 #grids {
 
+  --grid-spacing-vertical: 1rem;
+
   button {
     display: block;
     width: 100%;
-    margin-bottom: calc(var(--spacing-typography) / 2);
+    margin-bottom: var(--spacing);
 
     @media (min-width: map-get($breakpoints, "sm")) {
       display: inline-block;
@@ -99,14 +95,18 @@
     }
   }
 
-  .grid > * {
-    padding: calc(var(--spacing-gutter) / 2) 0;
-    background: var(--code-background);
-    text-align: center;
+  .grid {
+    > * {
+      padding: calc(var(--spacing) / 2) 0;
+      background: var(--secondary);
+      color: var(--secondary-inverse);
+      text-align: center;
+      opacity: .5;
+    }
   }
 
   details {
-    margin-top: calc(var(--spacing-typography) * 2);
+    margin-top: calc(var(--typography-spacing-vertical) * 2);
 
     svg {
       vertical-align: bottom;
@@ -115,8 +115,6 @@
 }
 
 // Docs: Forms
-// ––––––––––––––––––––
-
 #forms div.grid {
   grid-row-gap: 0;
 }
diff --git a/docs/scss/layout/_main.scss b/docs/scss/layout/_main.scss
index 8ae0f61b4..3f8a0b0ab 100644
--- a/docs/scss/layout/_main.scss
+++ b/docs/scss/layout/_main.scss
@@ -2,71 +2,73 @@
  * Docs: Main (Grid)
  */
 
+// Config
 $navHeight: 3.5rem;
 
+// Main grid
 body > main {
-  padding-top: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
 
-  @media (min-width: map-get($breakpoints, "sm")) {
-    padding-top: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
-  }
-
-  @media (min-width: map-get($breakpoints, "md")) {
-    padding-top: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
-  }
+  padding-top: calc(var(--block-spacing-vertical) + #{$navHeight});
 
-  @media (min-width: map-get($breakpoints, "lg")) {
-    grid-column-gap: calc(var(--spacing-gutter) * 4);
-    display: grid;
-    grid-template-columns: 200px auto;
-    padding-top: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
+  @if map-get($breakpoints, "lg") {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      --block-spacing-horizontal: calc(var(--spacing) * 1.75);
+      grid-column-gap: calc(var(--block-spacing-horizontal) * 4);
+      display: grid;
+      grid-template-columns: 200px auto;
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "xl")) {
-    padding-top: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
+  @if map-get($breakpoints, "xl") {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      --block-spacing-horizontal: calc(var(--spacing) * 2);
+    }
   }
 
-  > * {
-    min-width: 0; // HACK for childs in overflow
+  > aside,
+  div[role="document"] {
+    min-width: 0;
   }
 }
 
-
 // Anchors hacks for internal links
-// ––––––––––––––––––––
-
 div[role="document"] > section::before {
+
   display: block;
-  height: calc(1rem * var(--spacing-factor-xs) + #{$navHeight});
-  margin-top: calc(-1rem * var(--spacing-factor-xs) - #{$navHeight});
+  height: calc(2rem + #{$navHeight} - .5rem);
+  margin-top: calc(-2rem - #{$navHeight} + .5rem);
   content: '';
 
-
-  @media (min-width: map-get($breakpoints, "sm")) {
-    height: calc(1rem * var(--spacing-factor-sm) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-sm) - #{$navHeight});
+  @if map-get($breakpoints, "sm") {
+    @media (min-width: map-get($breakpoints, "sm")) {
+      height: calc(2.5rem + #{$navHeight} - .5rem);
+      height: calc(-2.5rem - #{$navHeight} + .5rem);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "md")) {
-    height: calc(1rem * var(--spacing-factor-md) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-md) - #{$navHeight});
+  @if map-get($breakpoints, "md") {
+    @media (min-width: map-get($breakpoints, "md")) {
+      height: calc(3rem + #{$navHeight} - .5rem);
+      margin-top: calc(-3rem - #{$navHeight} + .5rem);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "lg")) {
-    height: calc(1rem * var(--spacing-factor-lg) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-lg) - #{$navHeight});
+  @if map-get($breakpoints, "lg") {
+    @media (min-width: map-get($breakpoints, "lg")) {
+      height: calc(3.5rem + #{$navHeight} - .5rem);
+      margin-top: calc(-3.5rem - #{$navHeight} + .5rem);
+    }
   }
 
-  @media (min-width: map-get($breakpoints, "xl")) {
-    height: calc(1rem * var(--spacing-factor-xl) + #{$navHeight});
-    margin-top: calc(-1rem * var(--spacing-factor-xl) - #{$navHeight});
+  @if map-get($breakpoints, "xl") {
+    @media (min-width: map-get($breakpoints, "xl")) {
+      height: calc(4rem + #{$navHeight} - .5rem);
+      margin-top: calc(-4rem - #{$navHeight} + .5rem);
+    }
   }
 }
 
-
 // External links
-// ––––––––––––––––––––
-
 div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):not([role])::after {
   display: inline-block;
   width: 1rem;
@@ -78,20 +80,7 @@ div[role="document"] section a[href*="//"]:not([href*="https://picocss.com"]):no
   content: '';
 }
 
-
-// Form grid
-// ––––––––––––––––––––
-
-form.grid {
-  > input:not([type=checkbox]):not([type=radio]),
-  > button {
-    margin-bottom: 0;
-  }
-}
-
-
 // Embedded SVG
-// ––––––––––––––––––––
 svg {
   height: 1rem;
 }
diff --git a/docs/scss/themes/docs/_dark.scss b/docs/scss/themes/docs/_dark.scss
index cb3e0e3dc..664837371 100644
--- a/docs/scss/themes/docs/_dark.scss
+++ b/docs/scss/themes/docs/_dark.scss
@@ -2,8 +2,11 @@
 // Automatically enabled if user has Dark mode enabled
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --nav-background: #{rgba(darken($grey-900, 6%), .8)};
-    --nav-border:     #{rgba($grey-500, .2)};
+    --invalid-color: #{rgba($red-900, .5)};
+    --valid-color: #{rgba($green-800, .5)};
+    --nav-background-color: #{rgba(darken($grey-900, 6%), .8)};
+    --nav-border-color: #{rgba($grey-500, .2)};
+    --nav-logo-color: #{mix($black, $grey-900)};
   }
 }
 
@@ -12,6 +15,9 @@
 // Dark theme (Forced) [Additions for docs]
 // Enabled if forced with data-theme="dark"
 [data-theme="dark"] {
+  --invalid-color: #{rgba($red-900, .5)};
+  --valid-color: #{rgba($green-800, .5)};
   --nav-background: #{rgba(darken($grey-900, 6%), .8)};
-  --nav-border:     #{rgba($grey-500, .2)};
+  --nav-border-color: #{rgba($grey-500, .2)};
+  --nav-logo-color: #{mix($black, $grey-900)};
 }
diff --git a/docs/scss/themes/docs/_icons.scss b/docs/scss/themes/docs/_icons.scss
index 1e297bb33..1d15441dd 100644
--- a/docs/scss/themes/docs/_icons.scss
+++ b/docs/scss/themes/docs/_icons.scss
@@ -1,6 +1,5 @@
 // Icons
 // Source: https://feathericons.com/
-
 :root {
   --icon-external:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{rgba($grey-500, .999)}' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
   --icon-check:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
diff --git a/docs/scss/themes/docs/_light.scss b/docs/scss/themes/docs/_light.scss
index f331a228f..4c2f7ee53 100644
--- a/docs/scss/themes/docs/_light.scss
+++ b/docs/scss/themes/docs/_light.scss
@@ -2,6 +2,9 @@
 // Can be forced with data-theme="light"
 [data-theme="light"],
 :root:not([data-theme="dark"]) {
-  --nav-background: #{rgba($white, .7)};
-  --nav-border:     #{rgba($grey-500, .2)};
+  --invalid-color: #{$red-800};
+  --valid-color: #{$green-700};
+  --nav-background-color: #{rgba($white, .7)};
+  --nav-border-color: #{rgba($grey-500, .2)};
+  --nav-logo-color: #{$white};
 }
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 779a4396b..98868f544 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -7,7 +7,7 @@ $enable-semantic-container: false !default;
 // Enable .container and .container-fluid
 $enable-class-container: true !default;
 
-// Enable a centered viewport
+// Enable a centered viewport for 
, 
,